build: move to esm (wip)

.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: "@typescript-eslint/parser"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "vue/multi-word-component-names": "off"
-  },
-  overrides: [
-    {
-      files: ["*.ts"],
-      extends: [
-        "@vue/typescript/recommended",
-        "@vue/prettier/@typescript-eslint"
-      ]
-    }
-  ]
-};

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "parser": "@typescript-eslint/parser"
+  },
+  "rules": {
+    "no-console": "off",
+    "vue/multi-word-component-names": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "@vue/typescript/recommended",
+        "@vue/prettier/@typescript-eslint"
+      ]
+    }
+  ]
+}

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@vue/cli-plugin-babel/preset"]
+}

package.json

@@ -44,7 +44,7 @@
     "@vueuse/core": "^10.5.0",
     "comment-mark": "^1.1.1",
     "core-js": "^3.33.2",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "esbuild-wasm": "^0.19.2",

pnpm-lock.yaml

@@ -68,14 +68,14 @@ devDependencies:
     specifier: ^3.33.2
     version: 3.33.2
   echarts:
-    specifier: ^5.4.3
-    version: 5.4.3
+    specifier: ^5.5.0
+    version: 5.5.0
   echarts-gl:
     specifier: ^2.0.9
-    version: 2.0.9(echarts@5.4.3)
+    version: 2.0.9(echarts@5.5.0)
   echarts-liquidfill:
     specifier: ^3.1.0
-    version: 3.1.0(echarts@5.4.3)
+    version: 3.1.0(echarts@5.5.0)
   esbuild-wasm:
     specifier: ^0.19.2
     version: 0.19.2
@@ -178,6 +178,16 @@ packages:
       chalk: 2.4.2
     dev: true
 
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
+    engines: {node: '>=6.9.0'}
+    requiresBuild: true
+    dependencies:
+      '@babel/highlight': 7.23.4
+      chalk: 2.4.2
+    dev: true
+    optional: true
+
   /@babel/compat-data@7.23.2:
     resolution: {integrity: sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==}
     engines: {node: '>=6.9.0'}
@@ -433,6 +443,17 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
+    engines: {node: '>=6.9.0'}
+    requiresBuild: true
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+    optional: true
+
   /@babel/parser@7.23.0:
     resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
     engines: {node: '>=6.0.0'}
@@ -4333,29 +4354,29 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: true
 
-  /echarts-gl@2.0.9(echarts@5.4.3):
+  /echarts-gl@2.0.9(echarts@5.5.0):
     resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
     peerDependencies:
       echarts: ^5.1.2
     dependencies:
       claygl: 1.3.0
-      echarts: 5.4.3
+      echarts: 5.5.0
       zrender: 5.4.4
     dev: true
 
-  /echarts-liquidfill@3.1.0(echarts@5.4.3):
+  /echarts-liquidfill@3.1.0(echarts@5.5.0):
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
     peerDependencies:
       echarts: ^5.0.1
     dependencies:
-      echarts: 5.4.3
+      echarts: 5.5.0
     dev: true
 
-  /echarts@5.4.3:
-    resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==}
+  /echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
     dependencies:
       tslib: 2.3.0
-      zrender: 5.4.4
+      zrender: 5.5.0
     dev: true
 
   /ee-first@1.1.1:
@@ -6989,7 +7010,7 @@ packages:
       rollup: 4.12.0
       typescript: 4.6.4
     optionalDependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
     dev: true
 
   /rollup-plugin-esbuild@6.1.1(esbuild@0.20.1)(rollup@4.12.0):
@@ -8296,3 +8317,9 @@ packages:
     dependencies:
       tslib: 2.3.0
     dev: true
+
+  /zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+    dependencies:
+      tslib: 2.3.0
+    dev: true

rollup.config.js

@@ -2,6 +2,7 @@ import esbuild from "rollup-plugin-esbuild";
 import { dts } from "rollup-plugin-dts";
 import replace from "@rollup/plugin-replace";
 import css from "rollup-plugin-import-css";
+import { ignoreCss } from "./scripts/rollup.js";
 
 /**
  * Modifies the Rollup options for a build to support strict CSP
@@ -38,7 +39,7 @@ const builds = [
   {
     input: "src/index.ts",
     plugins: [esbuild()],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
     output: [
       {
         file: "dist/index.esm.js",
@@ -56,7 +57,7 @@ const builds = [
   {
     input: "src/index.ts",
     plugins: [esbuild({ minify: true })],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
     output: [
       {
         file: "dist/index.esm.min.js",
@@ -74,10 +75,15 @@ const builds = [
   {
     input: "src/index.ts",
     plugins: [
+      ignoreCss,
       dts({
-        respectExternal: true
+        compilerOptions: {
+          // see https://github.com/unjs/unbuild/pull/57/files
+          preserveSymlinks: false
+        }
       })
     ],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
     output: {
       file: "dist/index.d.ts",
       format: "esm"

scripts/postinstall.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
-const fs = require("fs");
+import path from "node:path";
+import fs from "node:fs";
 
 const packageFile = path.resolve(__dirname, "../package.json");
 
@@ -12,35 +12,40 @@ const typesPaths = {
 
 function switchVersion(version) {
   const typesPath = typesPaths[version];
-  const package = JSON.parse(fs.readFileSync(packageFile, "utf8"));
-  if (typesPath !== package.types) {
-    package.types = typesPath;
-    fs.writeFileSync(packageFile, JSON.stringify(package, null, "  "), "utf8");
+  const pkg = JSON.parse(fs.readFileSync(packageFile, "utf8"));
+  if (typesPath !== pkg.types) {
+    pkg.types = typesPath;
+    fs.writeFileSync(packageFile, JSON.stringify(pkg, null, "  "), "utf8");
   }
   console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
 }
 
-function loadVue() {
+async function loadVue() {
   try {
-    return require("vue");
+    const Vue = await import("vue");
+    return Vue;
   } catch (e) {
     return null;
   }
 }
 
-const Vue = loadVue();
+async function main() {
+  const Vue = await loadVue();
 
-// Align the process with vue-demi
-if (!Vue || typeof Vue.version !== "string") {
-  console.warn(
-    '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
-  );
-} else if (Vue.version.startsWith("3.")) {
-  switchVersion(3);
-} else if (Vue.version.startsWith("2.7.")) {
-  switchVersion(2.7);
-} else if (Vue.version.startsWith("2.")) {
-  switchVersion(2);
-} else {
-  console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+  // Align the process with vue-demi
+  if (!Vue || typeof Vue.version !== "string") {
+    console.warn(
+      '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
+    );
+  } else if (Vue.version.startsWith("3.")) {
+    switchVersion(3);
+  } else if (Vue.version.startsWith("2.7.")) {
+    switchVersion(2.7);
+  } else if (Vue.version.startsWith("2.")) {
+    switchVersion(2);
+  } else {
+    console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+  }
 }
+
+main();

scripts/rollup.js

@@ -1,7 +1,7 @@
 const EMPTY_FILE_ID = "__rollup_empty__";
 
 /** @type {import('rollup').Plugin} */
-export const ingoreCss = {
+export const ignoreCss = {
   name: "ignore-css",
   resolveId(source) {
     if (source.endsWith(".css")) {

src/ECharts.ts

@@ -13,11 +13,20 @@ import {
   nextTick,
   watchEffect,
   getCurrentInstance,
-  Vue2,
-  type PropType,
-  type InjectionKey
+  Vue2
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables";
+import { omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME } from "./wc";
+
+import type { PropType, InjectionKey } from "vue-demi";
 import type {
   EChartsType,
   EventTarget,
@@ -30,15 +39,8 @@ import type {
   UpdateOptionsInjection,
   Emits
 } from "./types";
-import {
-  usePublicAPI,
-  useAutoresize,
-  autoresizeProps,
-  useLoading,
-  loadingProps
-} from "./composables";
-import { omitOn, unwrapInjected } from "./utils";
-import { register, TAG_NAME, type EChartsElement } from "./wc";
+import type { EChartsElement } from "./wc";
+
 import "./style.css";
 
 const __CSP__ = false;

src/composables/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref } from "vue-demi";
-import { EChartsType } from "../types";
+import type { Ref } from "vue-demi";
+import type { EChartsType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",

src/composables/autoresize.ts

@@ -1,11 +1,10 @@
-import { watch, type Ref, type PropType } from "vue-demi";
+import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
-import {
-  addListener,
-  removeListener,
-  type ResizeCallback
-} from "resize-detector";
-import { type EChartsType } from "../types";
+import { addListener, removeListener } from "resize-detector";
+
+import type { Ref, PropType } from "vue-demi";
+import type { ResizeCallback } from "resize-detector";
+import type { EChartsType } from "../types";
 
 type AutoresizeProp =
   | boolean

src/composables/loading.ts

@@ -1,12 +1,7 @@
+import { inject, computed, watchEffect } from "vue-demi";
 import { unwrapInjected } from "../utils";
-import {
-  inject,
-  computed,
-  watchEffect,
-  type Ref,
-  type InjectionKey,
-  type PropType
-} from "vue-demi";
+
+import type { Ref, InjectionKey, PropType } from "vue-demi";
 import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =

src/types.ts

@@ -1,6 +1,6 @@
 import { init } from "echarts/core";
-import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
 import type { Ref } from "vue";
+import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
 

src/utils.ts

@@ -1,4 +1,5 @@
 import { unref } from "vue-demi";
+
 import type { Injection } from "./types";
 
 type Attrs = {

vue.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const nested = require("postcss-nested");
+import nested from "postcss-nested";
 
-module.exports = {
+export default {
   outputDir: "demo",
   css: {
     loaderOptions: {