refactor: use Web Components without native class support detection (#836)

package.json

@@ -41,7 +41,6 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@rollup/plugin-replace": "^6.0.2",
     "@types/node": "^22.15.21",
     "@typescript-eslint/utils": "^8.32.1",
     "@vercel/analytics": "^1.3.1",

pnpm-lock.yaml

@@ -11,9 +11,6 @@ importers:
       '@highlightjs/vue-plugin':
         specifier: ^2.1.0
         version: 2.1.0(highlight.js@11.10.0)(vue@3.5.13(typescript@5.8.3))
-      '@rollup/plugin-replace':
-        specifier: ^6.0.2
-        version: 6.0.2(rollup@4.41.1)
       '@types/node':
         specifier: ^22.15.21
         version: 22.15.21
@@ -395,15 +392,6 @@ packages:
     resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
     engines: {node: '>=18'}
 
-  '@rollup/plugin-replace@6.0.2':
-    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
@@ -1739,13 +1727,6 @@ snapshots:
 
   '@publint/pack@0.1.2': {}
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.41.1)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.41.1)
-      magic-string: 0.30.17
-    optionalDependencies:
-      rollup: 4.41.1
-
   '@rollup/pluginutils@5.1.4(rollup@4.41.1)':
     dependencies:
       '@types/estree': 1.0.7

rollup.config.js

@@ -1,4 +1,3 @@
-import replace from "@rollup/plugin-replace";
 import esbuild from "rollup-plugin-esbuild";
 import { dts } from "rollup-plugin-dts";
 import css from "rollup-plugin-import-css";
@@ -15,7 +14,6 @@ function configBuild(options, csp) {
   const { plugins, output } = result;
 
   result.plugins = [
-    ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
     ...plugins,
     css({
       ...(csp ? { output: "style.css" } : { inject: true }),

src/ECharts.ts

@@ -41,8 +41,7 @@ import type { EChartsElement } from "./wc";
 
 import "./style.css";
 
-const __CSP__ = false;
+const wcRegistered = register();
-const wcRegistered = __CSP__ ? false : register();
 
 export const THEME_KEY: InjectionKey<ThemeInjection> = Symbol();
 export const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection> = Symbol();

src/wc.ts

@@ -19,18 +19,19 @@ export function register(): boolean {
   }
 
   try {
-    // Class definitions cannot be transpiled to ES5
+    class ECElement extends HTMLElement implements EChartsElement {
-    // so we are doing a little trick here to ensure
+      __dispose: (() => void) | null = null;
-    // we are using native classes. As we use this as
+
-    // a progressive enhancement, it will be fine even
+      disconnectedCallback() {
-    // if the browser doesn't support native classes.
+        if (this.__dispose) {
-    const reg = new Function(
+          this.__dispose();
-      "tag",
+          this.__dispose = null;
-      // 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);",
+    }
-    );
+    if (customElements.get(TAG_NAME) == null) {
-    reg(TAG_NAME);
+      customElements.define(TAG_NAME, ECElement);
+    }
   } catch {
     return (registered = false);
   }