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

Author: kingyue737

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

@@ -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 }),

rollup.config.js

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

src/ECharts.ts

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