feat: vue-echarts-next first version

Author: Justineo

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1 @@
+dist

package-lock.json

@@ -1,30 +1,47 @@
 {
   "name": "vue-echarts-next",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build:demo": "vue-cli-service build",
+    "build": "rollup -c rollup.config.js",
     "lint": "vue-cli-service lint"
   },
+  "main": "dist/index.cjs.min.js",
+  "module": "dist/index.esm.min.js",
+  "unpkg": "dist/index.umd.min.js",
+  "jsdelivr": "dist/index.umd.min.js",
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "resize-detector": "^0.2.2"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^11.1.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "@vue/composition-api": "^1.0.0-rc.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "echarts": "^5.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
+    "postcss": "^8.2.5",
     "prettier": "^1.19.1",
-    "typescript": "~3.9.3"
+    "rollup": "^2.38.5",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.1.3",
+    "vue": "npm:vue@^3.0.5"
+  },
+  "peerDependencies": {
+    "echarts": "^5.0.2",
+    "vue": "^2.6.11 || ^3.0.0"
   }
 }

package.json

@@ -0,0 +1,98 @@
+import typescript from "rollup-plugin-typescript2";
+import { terser } from "rollup-plugin-terser";
+import postcss from "rollup-plugin-postcss";
+import resolve from "@rollup/plugin-node-resolve";
+
+/** @type {import('rollup').RollupOptions} */
+const options = [
+  {
+    plugins: [
+      typescript({
+        useTsconfigDeclarationDir: true
+      }),
+      postcss()
+    ],
+    external: ["vue", "echarts/core", "resize-detector"],
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.esm.js",
+        format: "es",
+        sourcemap: true
+      },
+      {
+        file: "dist/index.esm.min.js",
+        format: "es",
+        sourcemap: true,
+        plugins: [
+          terser({
+            format: {
+              comments: false
+            }
+          })
+        ]
+      },
+      {
+        file: "dist/index.cjs.js",
+        format: "cjs",
+        exports: "default",
+        sourcemap: true
+      },
+      {
+        file: "dist/index.cjs.min.js",
+        format: "cjs",
+        exports: "default",
+        sourcemap: true,
+        plugins: [
+          terser({
+            format: {
+              comments: false
+            }
+          })
+        ]
+      }
+    ]
+  },
+  {
+    plugins: [
+      resolve(),
+      typescript({
+        useTsconfigDeclarationDir: true
+      }),
+      postcss()
+    ],
+    external: ["vue", "echarts/core"],
+    input: "src/all.ts",
+    output: [
+      {
+        file: "dist/index.umd.js",
+        format: "umd",
+        name: "VueECharts",
+        sourcemap: true,
+        globals: {
+          vue: "Vue",
+          "echarts/core": "echarts"
+        }
+      },
+      {
+        file: "dist/index.umd.min.js",
+        format: "umd",
+        name: "VueECharts",
+        sourcemap: true,
+        globals: {
+          vue: "Vue",
+          "echarts/core": "echarts"
+        },
+        plugins: [
+          terser({
+            format: {
+              comments: false
+            }
+          })
+        ]
+      }
+    ]
+  }
+];
+
+export default options;

rollup.config.js

@@ -0,0 +1,195 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  defineComponent,
+  ref,
+  shallowRef,
+  toRefs,
+  watch,
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  h,
+  PropType
+} from "vue";
+import { init as initChart } from "echarts/core";
+import { EChartsType, OptionType } from "@/types";
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables";
+import "./style.css";
+
+type InitParameters = Parameters<typeof initChart>;
+type ThemeParameter = InitParameters[1];
+type InitOptsParameter = InitParameters[2];
+
+export default defineComponent({
+  name: "echarts",
+  props: {
+    options: Object as PropType<OptionType>,
+    theme: {
+      type: [Object, String] as PropType<ThemeParameter>
+    },
+    initOptions: Object as PropType<InitOptsParameter>,
+    group: String,
+    manualUpdate: Boolean,
+    ...autoresizeProps,
+    ...loadingProps
+  },
+  setup(props, { attrs }) {
+    const defaultInitOptions = inject(
+      "echartsInitOptions",
+      {}
+    ) as InitOptsParameter;
+    const root = ref<HTMLElement>();
+    const chart = shallowRef<EChartsType>();
+    const manualOptions = shallowRef<OptionType>();
+    const realOptions = computed(
+      () => manualOptions.value || props.options || Object.create(null)
+    );
+
+    function init(options?: OptionType) {
+      if (chart.value || !root.value) {
+        return;
+      }
+
+      const instance = (chart.value = initChart(
+        root.value,
+        props.theme,
+        props.initOptions || defaultInitOptions
+      ));
+
+      if (props.group) {
+        instance.group = props.group;
+      }
+
+      Object.keys(attrs)
+        .filter(key => key.indexOf(`on`) === 0)
+        .forEach(key => {
+          const handler = attrs[key] as any;
+
+          if (!handler) {
+            return;
+          }
+
+          if (key.indexOf("onZr:") === 0) {
+            instance.getZr().on(key.slice(5).toLowerCase(), handler);
+          } else {
+            instance.on(key.slice(2).toLowerCase(), handler);
+          }
+        });
+
+      instance.setOption(options || realOptions.value, true);
+    }
+
+    function mergeOptions(options: OptionType, ...rest: any[]) {
+      if (props.manualUpdate) {
+        manualOptions.value = options;
+      }
+
+      if (!chart.value) {
+        init(options);
+      } else {
+        chart.value.setOption(options, ...rest);
+      }
+    }
+
+    function cleanup() {
+      if (chart.value) {
+        chart.value.dispose();
+        chart.value = undefined;
+      }
+    }
+
+    const {
+      theme,
+      initOptions,
+      group,
+      autoresize,
+      manualUpdate,
+      loading,
+      loadingOptions
+    } = toRefs(props);
+    let unwatchOptions: (() => void) | null = null;
+    watch(
+      manualUpdate,
+      manualUpdate => {
+        if (typeof unwatchOptions === "function") {
+          unwatchOptions();
+          unwatchOptions = null;
+        }
+
+        if (!manualUpdate) {
+          unwatchOptions = watch(
+            () => props.options,
+            (val, oldVal) => {
+              if (!val) {
+                return;
+              }
+              if (!chart.value) {
+                init();
+              } else {
+                // mutating `options` will lead to merging
+                // replacing it with new reference will lead to not merging
+                // eg.
+                // `this.options = Object.assign({}, this.options, { ... })`
+                // will trigger `this.chart.setOption(val, true)
+                // `this.options.title.text = 'Trends'`
+                // will trigger `this.chart.setOption(val, false)`
+                chart.value.setOption(val, val !== oldVal);
+              }
+            },
+            { deep: true }
+          );
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+
+    watch([theme, initOptions], () => {
+      cleanup();
+      init();
+    });
+
+    watch(
+      () => group,
+      group => {
+        if (group && group.value && chart.value) {
+          chart.value.group = group.value;
+        }
+      }
+    );
+
+    const publicApi = usePublicAPI(chart, init);
+
+    useLoading(chart, loading, loadingOptions);
+
+    useAutoresize(chart, autoresize, root, realOptions);
+
+    onMounted(() => {
+      if (props.options) {
+        init();
+      }
+    });
+
+    onUnmounted(cleanup);
+
+    return {
+      root,
+      mergeOptions,
+      ...publicApi
+    };
+  },
+  render() {
+    return h("div", {
+      ref: "root",
+      class: "echarts"
+    });
+  }
+});

src/shims-vue.d.ts renamed to shims-vue.d.ts

@@ -0,0 +1,3 @@
+import "echarts";
+
+export { default } from "./ECharts";