chore: ESLint Flat Config (#834)

* chore: eslint flat config

* chore: format

* update according to review

* chore: remove prettier config and format

* fix: move handler to script to bypass eslint

* chore: config eslint for lang=js block

* docs: add surrounding empty lines for code block

* chore: also minify css in csp build

* chore: publint

src/ECharts.ts

@@ -1,5 +1,3 @@
-/* eslint-disable vue/multi-word-component-names */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   defineComponent,
   shallowRef,
@@ -11,7 +9,7 @@ import {
   onBeforeUnmount,
   h,
   nextTick,
-  watchEffect
+  watchEffect,
 } from "vue";
 import { init as initChart } from "echarts/core";
 
@@ -20,7 +18,7 @@ import {
   useAutoresize,
   autoresizeProps,
   useLoading,
-  loadingProps
+  loadingProps,
 } from "./composables";
 import { isOn, omitOn, toValue } from "./utils";
 import { register, TAG_NAME } from "./wc";
@@ -35,7 +33,7 @@ import type {
   InitOptionsInjection,
   UpdateOptions,
   UpdateOptionsInjection,
-  Emits
+  Emits,
 } from "./types";
 import type { EChartsElement } from "./wc";
 
@@ -56,14 +54,14 @@ export default defineComponent({
   props: {
     option: Object as PropType<Option>,
     theme: {
-      type: [Object, String] as PropType<Theme>
+      type: [Object, String] as PropType<Theme>,
     },
     initOptions: Object as PropType<InitOptions>,
     updateOptions: Object as PropType<UpdateOptions>,
     group: String,
     manualUpdate: Boolean,
     ...autoresizeProps,
-    ...loadingProps
+    ...loadingProps,
   },
   emits: {} as unknown as Emits,
   inheritAttrs: false,
@@ -78,16 +76,16 @@ export default defineComponent({
     const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
 
     const realOption = computed(
-      () => manualOption.value || props.option || null
+      () => manualOption.value || props.option || null,
     );
     const realTheme = computed(
-      () => props.theme || toValue(defaultTheme) || {}
+      () => props.theme || toValue(defaultTheme) || {},
     );
     const realInitOptions = computed(
-      () => props.initOptions || toValue(defaultInitOptions) || {}
+      () => props.initOptions || toValue(defaultInitOptions) || {},
     );
     const realUpdateOptions = computed(
-      () => props.updateOptions || toValue(defaultUpdateOptions) || {}
+      () => props.updateOptions || toValue(defaultUpdateOptions) || {},
     );
     const nonEventAttrs = computed(() => omitOn(attrs));
     const nativeListeners: Record<string, unknown> = {};
@@ -100,8 +98,8 @@ export default defineComponent({
     // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
     // `nativeListeners` so that we can bind them to the root element directly.
     Object.keys(attrs)
-      .filter(key => isOn(key))
-      .forEach(key => {
+      .filter((key) => isOn(key))
+      .forEach((key) => {
         // Collect native DOM events
         if (key.indexOf("Native:") === 2) {
           // onNative:click -> onClick
@@ -138,7 +136,7 @@ export default defineComponent({
       const instance = (chart.value = initChart(
         root.value,
         realTheme.value,
-        realInitOptions.value
+        realInitOptions.value,
       ));
 
       if (props.group) {
@@ -214,7 +212,7 @@ export default defineComponent({
     let unwatchOption: (() => void) | null = null;
     watch(
       manualUpdate,
-      manualUpdate => {
+      (manualUpdate) => {
         if (typeof unwatchOption === "function") {
           unwatchOption();
           unwatchOption = null;
@@ -234,17 +232,17 @@ export default defineComponent({
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`
                   notMerge: option !== oldOption,
-                  ...realUpdateOptions.value
+                  ...realUpdateOptions.value,
                 });
               }
             },
-            { deep: true }
+            { deep: true },
           );
         }
       },
       {
-        immediate: true
-      }
+        immediate: true,
+      },
     );
 
     watch(
@@ -254,8 +252,8 @@ export default defineComponent({
         init();
       },
       {
-        deep: true
-      }
+        deep: true,
+      },
     );
 
     watchEffect(() => {
@@ -292,7 +290,7 @@ export default defineComponent({
       setOption,
       nonEventAttrs,
       nativeListeners,
-      ...publicApi
+      ...publicApi,
     };
   },
   render() {
@@ -300,7 +298,7 @@ export default defineComponent({
       ...this.nonEventAttrs,
       ...this.nativeListeners,
       ref: "root",
-      class: ["echarts", ...(this.nonEventAttrs.class || [])]
+      class: ["echarts", ...(this.nonEventAttrs.class || [])],
     });
-  }
+  },
 });

src/composables/api.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Ref } from "vue";
 import type { EChartsType } from "../types";
 
@@ -17,7 +16,7 @@ const METHOD_NAMES = [
   "appendData",
   "clear",
   "isDisposed",
-  "dispose"
+  "dispose",
 ] as const;
 
 type MethodName = (typeof METHOD_NAMES)[number];
@@ -25,10 +24,10 @@ type MethodName = (typeof METHOD_NAMES)[number];
 type PublicMethods = Pick<EChartsType, MethodName>;
 
 export function usePublicAPI(
-  chart: Ref<EChartsType | undefined>
+  chart: Ref<EChartsType | undefined>,
 ): PublicMethods {
   function makePublicMethod<T extends MethodName>(
-    name: T
+    name: T,
   ): (...args: Parameters<EChartsType[T]>) => ReturnType<EChartsType[T]> {
     return (...args) => {
       if (!chart.value) {
@@ -40,7 +39,7 @@ export function usePublicAPI(
 
   function makePublicMethods(): PublicMethods {
     const methods = Object.create(null);
-    METHOD_NAMES.forEach(name => {
+    METHOD_NAMES.forEach((name) => {
       methods[name] = makePublicMethod(name);
     });
 

src/composables/autoresize.ts

@@ -7,7 +7,7 @@ import type { EChartsType, AutoResize } from "../types";
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
   autoresize: Ref<AutoResize | undefined>,
-  root: Ref<HTMLElement | undefined>
+  root: Ref<HTMLElement | undefined>,
 ): void {
   watch(
     [root, chart, autoresize],
@@ -57,10 +57,10 @@ export function useAutoresize(
           ro = null;
         }
       });
-    }
+    },
   );
 }
 
 export const autoresizeProps = {
-  autoresize: [Boolean, Object] as PropType<AutoResize>
+  autoresize: [Boolean, Object] as PropType<AutoResize>,
 };

src/composables/loading.ts

@@ -12,12 +12,12 @@ export const LOADING_OPTIONS_KEY =
 export function useLoading(
   chart: Ref<EChartsType | undefined>,
   loading: Ref<boolean>,
-  loadingOptions: Ref<LoadingOptions | undefined>
+  loadingOptions: Ref<LoadingOptions | undefined>,
 ): void {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
     ...(toValue(defaultLoadingOptions) || {}),
-    ...loadingOptions?.value
+    ...loadingOptions?.value,
   }));
 
   watchEffect(() => {
@@ -36,5 +36,5 @@ export function useLoading(
 
 export const loadingProps = {
   loading: Boolean,
-  loadingOptions: Object as PropType<LoadingOptions>
+  loadingOptions: Object as PropType<LoadingOptions>,
 };

src/global.ts

@@ -3,5 +3,5 @@ import ECharts, * as exported from "./index";
 
 export default {
   ...ECharts,
-  ...exported
+  ...exported,
 };

src/index.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 import type { Ref, DefineComponent, InjectionKey } from "vue";
 import type {
   Option,
@@ -12,7 +12,7 @@ import type {
   ThemeInjection,
   InitOptionsInjection,
   UpdateOptionsInjection,
-  LoadingOptionsInjection
+  LoadingOptionsInjection,
 } from "./types";
 
 declare const THEME_KEY: InjectionKey<ThemeInjection>;

src/style.css

@@ -1 +1,6 @@
-x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
+x-vue-echarts {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}

src/utils.ts

@@ -1,10 +1,7 @@
 import type { MaybeRefOrGetter } from "./types";
 import { unref } from "vue";
 
-type Attrs = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-};
+type Attrs = Record<string, any>;
 
 // Copied from
 // https://github.com/vuejs/vue-next/blob/5a7a1b8293822219283d6e267496bec02234b0bc/packages/shared/src/index.ts#L40-L41
@@ -24,6 +21,7 @@ export function omitOn(attrs: Attrs): Attrs {
 
 // Copied from
 // https://github.com/vuejs/core/blob/3cb4db21efa61852b0541475b4ddf57fdec4c479/packages/shared/src/general.ts#L49-L50
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const isFunction = (val: unknown): val is Function => typeof val === "function";
 
 // Copied from

src/wc.ts

@@ -28,10 +28,10 @@ export function register(): boolean {
       "tag",
       // Use esbuild repl to keep build process simple
       // https://esbuild.github.io/try/#dAAwLjIzLjAALS1taW5pZnkAY2xhc3MgRUNoYXJ0c0VsZW1lbnQgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgX19kaXNwb3NlID0gbnVsbDsKCiAgZGlzY29ubmVjdGVkQ2FsbGJhY2soKSB7CiAgICBpZiAodGhpcy5fX2Rpc3Bvc2UpIHsKICAgICAgdGhpcy5fX2Rpc3Bvc2UoKTsKICAgICAgdGhpcy5fX2Rpc3Bvc2UgPSBudWxsOwogICAgfQogIH0KfQoKaWYgKGN1c3RvbUVsZW1lbnRzLmdldCh0YWcpID09IG51bGwpIHsKICBjdXN0b21FbGVtZW50cy5kZWZpbmUodGFnLCBFQ2hhcnRzRWxlbWVudCk7Cn0K
-      "class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);"
+      "class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);",
     );
     reg(TAG_NAME);
-  } catch (e) {
+  } catch {
     return (registered = false);
   }