nuxt-echarts 0.0.3 → 0.0.4

package/README.md

@@ -9,21 +9,24 @@
 
 Nuxt Module for Apache ECharts™
 
-> 🚧 **Work in Progress**
+> [!IMPORTANT]
 >
-> Nuxt ECharts is currently in active development and not usable for production yet.
+> Nuxt ECharts is currently in active development and based on [experimental `<NuxtIsland>`](https://nuxt.com/docs/api/components/nuxt-island). If you found any issue, design flaw, or have ideas to improve it, please open an [issue](https://github.com/kingyue737/nuxt-echarts/issues) or a [Discussion](https://github.com/kingyue737/nuxt-echarts/discussions).
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
-  <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-echarts?file=playground%2Fapp.vue) -->
+- 🏀 &nbsp;Online playground (WIP)
+- 📖 &nbsp;Documentation (WIP)
+  <!-- - [🏀 Online playground](https://stackblitz.com/github/kingyue737/nuxt-echarts?file=playground%2Fapp.vue) -->
   <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
-## Features (WIP)
+## Features
 
-<!-- Highlight some of the features your module provide here -->
+- ⛰&nbsp;**SSR**: Server-side SVG Rendering with [Nuxt server components](https://nuxt.com/docs/guide/directory-structure/components#server-components)
 
-- ⛰ **SSR**: experimental server-only component, lightweight client runtime
-- 🛠️ **Configurable**: import only necessary components and charts for smaller bundle size
-- 🦾 **Type Strong**: generate ECharts option type based on your config
+- ♾️&nbsp;**Client Hydration**: lazy-loading Full ECharts or [lightweight client runtime](https://echarts.apache.org/handbook/en/how-to/cross-platform/server#using-lightweight-runtime)
+- 🛠️&nbsp;**Configurable**: import only [necessary functionality](https://echarts.apache.org/handbook/en/basics/import#shrinking-bundle-size) for shrinking bundle size
+- 🦾&nbsp;**Type Strong**: auto-import [ECharts option type](https://echarts.apache.org/handbook/en/basics/import#creating-an-option-type-in-typescript) based on your config
+- 🌲&nbsp;**Tree-shaking**: Components and ECharts are only included if you use them
 
 ## Quick Setup
 
@@ -71,7 +74,7 @@ That's it! You can now use Nuxt ECharts in your Nuxt app ✨
 
 ## Credits
 
-The Nuxt ECharts module is heavily inspired by [vue-echarts](https://github.com/ecomfe/vue-echarts), created by[@Justineo](https://github.com/Justineo).
+The Nuxt ECharts module is heavily inspired by [vue-echarts](https://github.com/ecomfe/vue-echarts), created by [@Justineo](https://github.com/Justineo).
 
 ## License
 

package/dist/module.d.mts

@@ -1,7 +1,37 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import * as echartsComponents from 'echarts/components';
+import * as echartsCharts from 'echarts/charts';
+import * as echartsFeatures from 'echarts/features';
 
+type ComponentName = keyof typeof echartsComponents;
+type ChartName = keyof typeof echartsCharts;
+type FeaturesName = keyof typeof echartsFeatures;
+type RendererName = 'canvas' | 'svg';
 interface ModuleOptions {
+    /**
+     * @default 'canvas'
+     */
+    renderer?: RendererName | RendererName[];
+    /**
+     * Register the required charts globally
+     */
+    charts?: ChartName[];
+    /**
+     * Register the required components globally
+     */
+    components?: ComponentName[];
+    /**
+     * Register the required components globally
+     */
+    features?: FeaturesName[];
+    /**
+     * WIP
+     *
+     * @default false
+     */
+    ssr?: boolean;
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.d.ts

@@ -1,7 +1,37 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import * as echartsComponents from 'echarts/components';
+import * as echartsCharts from 'echarts/charts';
+import * as echartsFeatures from 'echarts/features';
 
+type ComponentName = keyof typeof echartsComponents;
+type ChartName = keyof typeof echartsCharts;
+type FeaturesName = keyof typeof echartsFeatures;
+type RendererName = 'canvas' | 'svg';
 interface ModuleOptions {
+    /**
+     * @default 'canvas'
+     */
+    renderer?: RendererName | RendererName[];
+    /**
+     * Register the required charts globally
+     */
+    charts?: ChartName[];
+    /**
+     * Register the required components globally
+     */
+    components?: ComponentName[];
+    /**
+     * Register the required components globally
+     */
+    features?: FeaturesName[];
+    /**
+     * WIP
+     *
+     * @default false
+     */
+    ssr?: boolean;
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.json

@@ -2,11 +2,11 @@
   "name": "nuxt-echarts",
   "configKey": "echarts",
   "compatibility": {
-    "nuxt": "^3.0.0"
+    "nuxt": ">=3.2.0"
   },
-  "version": "0.0.3",
+  "version": "0.0.4",
   "builder": {
-    "@nuxt/module-builder": "0.6.0",
+    "@nuxt/module-builder": "0.8.0",
     "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addComponent, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addTemplate, addTypeTemplate, addImports } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -6,26 +6,109 @@ const module = defineNuxtModule({
     configKey: "echarts",
     compatibility: {
       // Semver version of supported nuxt versions
-      nuxt: "^3.0.0"
+      nuxt: ">=3.2.0"
     }
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
-  setup(_options, _nuxt) {
-    const resolver = createResolver(import.meta.url);
-    addPlugin(resolver.resolve("./runtime/plugin"));
-    const entry = resolver.resolve("./runtime/VChart.ts");
-    addComponent({
-      name: "VChart",
-      filePath: entry
+  defaults: {
+    renderer: "canvas"
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addPlugin(resolve("./runtime/plugin"));
+    addComponentsDir({ path: resolve("runtime/components") });
+    nuxt.options.css.unshift(resolve("./runtime/style.css"));
+    function join(arr) {
+      return arr?.map((name) => `  ${name},`).join("\n") || "";
+    }
+    let renderers = [];
+    if (typeof options.renderer === "string" || options.renderer instanceof String) {
+      renderers.push(options.renderer);
+    } else {
+      renderers = options.renderer;
+    }
+    const rendererNames = [];
+    renderers.forEach((v) => {
+      if (v === "canvas")
+        rendererNames.push("CanvasRenderer");
+      else if (v === "svg")
+        rendererNames.push("SVGRenderer");
     });
-    const injectionKeys = [
+    const joinedRendererNames = join(rendererNames);
+    const joinedChartNames = join(options.charts);
+    const joinedComponentNames = join(options.components);
+    const joinedFeatureNames = join(options.features);
+    addTemplate({
+      filename: "echarts.mjs",
+      write: true,
+      getContents: () => [
+        "// Generated by nuxt-echarts",
+        "",
+        "import { use } from 'echarts/core'",
+        "import {",
+        joinedRendererNames,
+        "} from 'echarts/renderers'",
+        "import {",
+        joinedChartNames,
+        "} from 'echarts/charts'",
+        "import {",
+        joinedComponentNames,
+        "} from 'echarts/components'",
+        "import {",
+        joinedFeatureNames,
+        "} from 'echarts/features'",
+        "",
+        "use([",
+        joinedRendererNames,
+        joinedChartNames,
+        joinedComponentNames,
+        joinedFeatureNames,
+        "])"
+      ].join("\n")
+    });
+    if (options.charts || options.components) {
+      const chartOptionNames = options.charts?.map(
+        (name) => `${name.slice(0, -5)}SeriesOption`
+      );
+      const componentOptionNames = options.components?.map(
+        (name) => `${name}Option`
+      );
+      addTypeTemplate({
+        filename: "types/nuxt-echarts.d.ts",
+        getContents: () => [
+          `// Generated by nuxt-echarts`,
+          "",
+          "import type { ComposeOption } from 'echarts/core'",
+          "import type {",
+          join(chartOptionNames),
+          "} from 'echarts/charts'",
+          "import type {",
+          join(componentOptionNames),
+          "} from 'echarts/components'",
+          "",
+          "declare global {",
+          "  export type ECOption = ComposeOption<",
+          `${chartOptionNames?.map((name) => `    | ${name}`).join("\n")}`,
+          `${componentOptionNames?.map((name) => `    | ${name}`).join("\n")}`,
+          "  >",
+          "}",
+          "",
+          "export {}"
+        ].join("\n")
+      });
+    }
+    [
       "THEME_KEY",
       "INIT_OPTIONS_KEY",
       "UPDATE_OPTIONS_KEY",
       "LOADING_OPTIONS_KEY"
-    ];
-    injectionKeys.forEach((name) => addImports({ name, from: entry }));
+    ].forEach(
+      (name) => addImports({ name, from: resolve("./runtime/utils/injection") })
+    );
+    if (options.ssr) {
+      nuxt.options.experimental ||= {};
+      nuxt.options.experimental.componentIslands = true;
+    }
   }
 });
 

package/dist/runtime/{VChart.d.ts → components/VChart.client.d.ts}

@@ -1,14 +1,10 @@
-import { type PropType, type InjectionKey } from 'vue';
-import type { Option, Theme, ThemeInjection, InitOptionsInjection, UpdateOptions, UpdateOptionsInjection } from './types';
-import { type EChartsElement } from './wc';
-import './style.css';
-export declare const THEME_KEY: InjectionKey<ThemeInjection>;
-export declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
-export declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
-export { LOADING_OPTIONS_KEY } from './composables';
+import { type PropType } from 'vue';
+import type { Option, Theme, UpdateOptions } from '../types.js';
+import { type EChartsElement } from '../utils/wc.js';
+import '#build/echarts.mjs';
 declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
-    loadingOptions: PropType<import("./types").LoadingOptions>;
+    loadingOptions: PropType<import("../types").LoadingOptions>;
     autoresize: PropType<boolean | {
         throttle?: number | undefined;
         onResize?: (() => void) | undefined;
@@ -18,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Theme>;
     };
     initOptions: PropType<import("echarts/core").EChartsInitOpts>;
-    updateOptions: PropType<import("echarts").SetOptionOpts>;
+    updateOptions: PropType<import("echarts/core").SetOptionOpts>;
     group: StringConstructor;
     manualUpdate: BooleanConstructor;
 }, {
@@ -33,44 +29,44 @@ declare const _default: import("vue").DefineComponent<{
     } | undefined) => void;
     convertToPixel: {
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
             dataIndexInside?: number | undefined;
         }, value: (string | number) | Date): number;
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
@@ -79,44 +75,44 @@ declare const _default: import("vue").DefineComponent<{
     };
     convertFromPixel: {
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
             dataIndexInside?: number | undefined;
         }, value: number): number;
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
@@ -124,22 +120,22 @@ declare const _default: import("vue").DefineComponent<{
         }, value: number[]): number[];
     };
     containPixel: (finder: string | {
-        seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+        seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
         seriesId?: ((string | number) | (string | number)[]) | undefined;
         seriesName?: ((string | number) | (string | number)[]) | undefined;
-        geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+        geoIndex?: (number | false | number[] | "none" | "all") | undefined;
         geoId?: ((string | number) | (string | number)[]) | undefined;
         geoName?: ((string | number) | (string | number)[]) | undefined;
-        bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+        bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
         bmapId?: ((string | number) | (string | number)[]) | undefined;
         bmapName?: ((string | number) | (string | number)[]) | undefined;
-        xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+        xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
         xAxisId?: ((string | number) | (string | number)[]) | undefined;
         xAxisName?: ((string | number) | (string | number)[]) | undefined;
-        yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+        yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
         yAxisId?: ((string | number) | (string | number)[]) | undefined;
         yAxisName?: ((string | number) | (string | number)[]) | undefined;
-        gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+        gridIndex?: (number | false | number[] | "none" | "all") | undefined;
         gridId?: ((string | number) | (string | number)[]) | undefined;
         gridName?: ((string | number) | (string | number)[]) | undefined;
         dataIndex?: number | undefined;
@@ -167,22 +163,22 @@ declare const _default: import("vue").DefineComponent<{
     dispose: () => void;
     chart: import("vue").ShallowRef<import("echarts/core").ECharts | undefined>;
     root: import("vue").ShallowRef<EChartsElement | undefined>;
-    inner: import("vue").ShallowRef<HTMLElement | undefined>;
+    inner: import("vue").ShallowRef<any>;
     setOption: (option: Option, updateOptions?: UpdateOptions) => void;
     nonEventAttrs: import("vue").ComputedRef<{
         [x: string]: any;
     }>;
     nativeListeners: Record<string, unknown>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (params: import("echarts").ECElementEvent) => boolean;
-    dblclick: (params: import("echarts").ECElementEvent) => boolean;
-    mouseout: (params: import("echarts").ECElementEvent) => boolean;
-    mouseover: (params: import("echarts").ECElementEvent) => boolean;
-    mouseup: (params: import("echarts").ECElementEvent) => boolean;
-    mousedown: (params: import("echarts").ECElementEvent) => boolean;
-    mousemove: (params: import("echarts").ECElementEvent) => boolean;
-    contextmenu: (params: import("echarts").ECElementEvent) => boolean;
-    globalout: (params: import("echarts").ECElementEvent) => boolean;
+    click: (params: import("echarts/core").ECElementEvent) => boolean;
+    dblclick: (params: import("echarts/core").ECElementEvent) => boolean;
+    mouseout: (params: import("echarts/core").ECElementEvent) => boolean;
+    mouseover: (params: import("echarts/core").ECElementEvent) => boolean;
+    mouseup: (params: import("echarts/core").ECElementEvent) => boolean;
+    mousedown: (params: import("echarts/core").ECElementEvent) => boolean;
+    mousemove: (params: import("echarts/core").ECElementEvent) => boolean;
+    contextmenu: (params: import("echarts/core").ECElementEvent) => boolean;
+    globalout: (params: import("echarts/core").ECElementEvent) => boolean;
 } & {
     highlight: null;
     downplay: null;
@@ -217,26 +213,26 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     finished: () => boolean;
 } & {
-    "zr:mousewheel": (params: import("echarts").ElementEvent) => boolean;
-    "zr:drag": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dragstart": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dragend": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dragenter": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dragleave": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dragover": (params: import("echarts").ElementEvent) => boolean;
-    "zr:drop": (params: import("echarts").ElementEvent) => boolean;
-    "zr:click": (params: import("echarts").ElementEvent) => boolean;
-    "zr:dblclick": (params: import("echarts").ElementEvent) => boolean;
-    "zr:mouseout": (params: import("echarts").ElementEvent) => boolean;
-    "zr:mouseover": (params: import("echarts").ElementEvent) => boolean;
-    "zr:mouseup": (params: import("echarts").ElementEvent) => boolean;
-    "zr:mousedown": (params: import("echarts").ElementEvent) => boolean;
-    "zr:mousemove": (params: import("echarts").ElementEvent) => boolean;
-    "zr:contextmenu": (params: import("echarts").ElementEvent) => boolean;
-    "zr:globalout": (params: import("echarts").ElementEvent) => boolean;
+    "zr:mousewheel": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:drag": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dragstart": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dragend": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dragenter": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dragleave": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dragover": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:drop": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:click": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:dblclick": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:mouseout": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:mouseover": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:mouseup": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:mousedown": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:mousemove": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:contextmenu": (params: import("echarts/core").ElementEvent) => boolean;
+    "zr:globalout": (params: import("echarts/core").ElementEvent) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
-    loadingOptions: PropType<import("./types").LoadingOptions>;
+    loadingOptions: PropType<import("../types").LoadingOptions>;
     autoresize: PropType<boolean | {
         throttle?: number | undefined;
         onResize?: (() => void) | undefined;
@@ -246,36 +242,36 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Theme>;
     };
     initOptions: PropType<import("echarts/core").EChartsInitOpts>;
-    updateOptions: PropType<import("echarts").SetOptionOpts>;
+    updateOptions: PropType<import("echarts/core").SetOptionOpts>;
     group: StringConstructor;
     manualUpdate: BooleanConstructor;
 }>> & {
-    onClick?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onDblclick?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onMouseout?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onMouseover?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onMouseup?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onMousedown?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onMousemove?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onContextmenu?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    onGlobalout?: ((params: import("echarts").ECElementEvent) => any) | undefined;
-    "onZr:mousewheel"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:drag"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dragstart"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dragend"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dragenter"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dragleave"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dragover"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:drop"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:click"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:dblclick"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:mouseout"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:mouseover"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:mouseup"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:mousedown"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:mousemove"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:contextmenu"?: ((params: import("echarts").ElementEvent) => any) | undefined;
-    "onZr:globalout"?: ((params: import("echarts").ElementEvent) => any) | undefined;
+    onClick?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onDblclick?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onMouseout?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onMouseover?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onMouseup?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onMousedown?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onMousemove?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onContextmenu?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    onGlobalout?: ((params: import("echarts/core").ECElementEvent) => any) | undefined;
+    "onZr:mousewheel"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:drag"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dragstart"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dragend"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dragenter"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dragleave"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dragover"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:drop"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:click"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:dblclick"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:mouseout"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:mouseover"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:mouseup"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:mousedown"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:mousemove"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:contextmenu"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
+    "onZr:globalout"?: ((params: import("echarts/core").ElementEvent) => any) | undefined;
     onHighlight?: ((...args: any[]) => any) | undefined;
     onDownplay?: ((...args: any[]) => any) | undefined;
     onSelectchanged?: ((...args: any[]) => any) | undefined;

package/dist/runtime/{VChart.mjs → components/VChart.client.js}

@@ -19,17 +19,18 @@ import {
   autoresizeProps,
   useLoading,
   loadingProps
-} from "./composables/index.mjs";
-import { isOn, omitOn } from "./utils.mjs";
-import { register, TAG_NAME } from "./wc.mjs";
-import "./style.css";
+} from "../composables/index.js";
+import { isOn, omitOn } from "../utils/on.js";
+import { register, TAG_NAME } from "../utils/wc.js";
+import "#build/echarts.mjs";
+import {
+  THEME_KEY,
+  INIT_OPTIONS_KEY,
+  UPDATE_OPTIONS_KEY
+} from "../utils/injection.js";
 const wcRegistered = register();
-export const THEME_KEY = "ecTheme";
-export const INIT_OPTIONS_KEY = "ecInitOptions";
-export const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
-export { LOADING_OPTIONS_KEY } from "./composables/index.mjs";
 export default defineComponent({
-  name: "echarts",
+  name: "VChart",
   props: {
     option: Object,
     theme: {
@@ -207,7 +208,8 @@ export default defineComponent({
     const publicApi = usePublicAPI(chart);
     useLoading(chart, loading, loadingOptions);
     useAutoresize(chart, autoresize, inner);
-    onMounted(() => {
+    onMounted(async () => {
+      await nextTick();
       init();
     });
     onBeforeUnmount(() => {

package/dist/runtime/components/VChart.server.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <VChartServer v-bind="$attrs" />
+</template>

package/dist/runtime/components/VChartIsland.server.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { ref } from 'vue'
+import type { Option, InitOptions, Theme } from '../types'
+
+const props = defineProps<{
+  option?: Option
+  initOptions?: InitOptions
+  theme?: Theme
+}>()
+
+const svgStr = ref('')
+const initOptions: InitOptions = echarts.util.merge(
+  { renderer: 'svg', ssr: true } satisfies InitOptions,
+  props.initOptions || {},
+)
+let chart = echarts.init(null, props.theme, initOptions)
+chart.setOption(props.option || {})
+svgStr.value = chart.renderToSVGString()
+
+chart.dispose()
+
+// @ts-expect-error release memory
+chart = null
+
+defineSlots<{ fallback: any }>()
+</script>
+
+<template>
+  <div class="vue-echarts-container">
+    <!--eslint-disable-next-line vue/no-v-html-->
+    <div class="vue-echarts-inner" v-html="svgStr" />
+  </div>
+</template>

package/dist/runtime/components/VChartLight.vue

@@ -0,0 +1,78 @@
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  inheritAttrs: false,
+  emits: {}
+});
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  option?: Option
+  theme?: Theme
+  initOptions?: InitOptions
+}>()
+defineOptions({ inheritAttrs: false })
+
+type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined
+type ECSSREventOn = `on${Capitalize<ECSSREvent>}`
+
+const root = ref<HTMLElement | null>(null)
+const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>>
+let container: HTMLElement
+function hydrateChart() {
+  container = root.value?.querySelector?.('.vue-echarts-inner') as HTMLElement
+  if (container) {
+    // Use the lightweight runtime to give the chart interactive capabilities
+    hydrate(container, {
+      on: {
+        click: attrs.onClick
+          ? (params) => {
+              const svg = attrs.onClick!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+        mouseout: attrs.onMouseout
+          ? (params) => {
+              const svg = attrs.onMouseout!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+        mouseover: attrs.onMouseover
+          ? (params) => {
+              const svg = attrs.onMouseover!(params)
+              svg && setInnerHTML(svg)
+            }
+          : undefined,
+      },
+    })
+  }
+}
+
+function setInnerHTML(svgStr?: string) {
+  if (container && svgStr) container.innerHTML = svgStr
+}
+
+let observer: MutationObserver
+onMounted(async () => {
+  await nextTick()
+  hydrateChart()
+  observer = new MutationObserver(async () => {
+    hydrateChart()
+  })
+
+  // call 'observe' on that MutationObserver instance,
+  // passing it the element to observe, and the options object
+  observer.observe(root.value!, {
+    characterData: false,
+    childList: true,
+    attributes: false,
+  })
+})
+</script>
+
+<template>
+  <div ref="root">
+    <VChartServer :option="option" :init-options="initOptions" :theme="theme" />
+  </div>
+</template>

package/dist/runtime/components/VChartLight.vue.d.ts

@@ -0,0 +1,26 @@
+import { type ECSSRClientEventParams, type ECSSREvent } from 'echarts/ssr/client/index';
+import type { Theme } from '../types.js';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    option?: import("echarts/core").EChartsCoreOption | undefined;
+    theme?: Theme | undefined;
+    initOptions?: import("echarts/core").EChartsInitOpts | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<ECSSREvent, (params: ECSSRClientEventParams) => string | undefined>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    option?: import("echarts/core").EChartsCoreOption | undefined;
+    theme?: Theme | undefined;
+    initOptions?: import("echarts/core").EChartsInitOpts | undefined;
+}>>> & {
+    onClick?: ((params: ECSSRClientEventParams) => any) | undefined;
+    onMouseout?: ((params: ECSSRClientEventParams) => any) | undefined;
+    onMouseover?: ((params: ECSSRClientEventParams) => any) | undefined;
+}, {}, {}>;
+export default _default;
+
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/components/VChartServer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, unref, inject, ref } from 'vue'
+import type { InitOptions, Option, Theme } from '../types'
+import { THEME_KEY, INIT_OPTIONS_KEY } from '../utils/injection'
+import type { VChartIsland } from '#components'
+
+const defaultTheme = inject(THEME_KEY, null)
+const defaultInitOptions = inject(INIT_OPTIONS_KEY, null)
+
+const props = defineProps<{
+  option?: Option
+  theme?: Theme
+  initOptions?: InitOptions
+}>()
+const emits = defineEmits<{ (event: 'error', error: unknown): void }>()
+
+const realTheme = computed(() => props.theme || unref(defaultTheme) || {})
+const realInitOptions = computed(
+  // @ts-expect-error unknown computed type error
+  () => props.initOptions || unref(defaultInitOptions) || {},
+)
+function onError(e: unknown) {
+  // https://github.com/nuxt/nuxt/issues/27491
+  if (
+    e instanceof TypeError &&
+    e.message === "Cannot read properties of undefined (reading 'link')"
+  ) {
+    // @ts-expect-error NuxtIsland.refresh in not defined
+    root.value.refresh()
+  }
+  emits('error', e)
+}
+const root = ref<InstanceType<typeof VChartIsland> | null>(null)
+</script>
+
+<template>
+  <VChartIsland
+    ref="root"
+    :theme="realTheme"
+    :option="option"
+    :init-options="realInitOptions"
+    @error="onError"
+  >
+    <template #fallback>
+      <slot name="fallback" />
+    </template>
+  </VChartIsland>
+</template>

package/dist/runtime/composables/api.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { EChartsType } from '../types';
+import type { EChartsType } from '../types.js';
 declare const METHOD_NAMES: readonly ["getWidth", "getHeight", "getDom", "getOption", "resize", "dispatchAction", "convertToPixel", "convertFromPixel", "containPixel", "getDataURL", "getConnectedDataURL", "appendData", "clear", "isDisposed", "dispose"];
 type MethodName = (typeof METHOD_NAMES)[number];
 type PublicMethods = Pick<EChartsType, MethodName>;

package/dist/runtime/composables/autoresize.d.ts

@@ -1,11 +0,0 @@
-import { type Ref, type PropType } from 'vue';
-import { type EChartsType } from '../types';
-type AutoresizeProp = boolean | {
-    throttle?: number;
-    onResize?: () => void;
-};
-export declare function useAutoresize(chart: Ref<EChartsType | undefined>, autoresize: Ref<AutoresizeProp | undefined>, root: Ref<HTMLElement | undefined>): void;
-export declare const autoresizeProps: {
-    autoresize: PropType<AutoresizeProp>;
-};
-export {};

package/dist/runtime/composables/index.d.ts

@@ -1,3 +1,3 @@
-export * from './api';
-export * from './autoresize';
-export * from './loading';
+export * from './api.js';
+export * from './autoresize.js';
+export * from './loading.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,3 @@
+export * from "./api.js";
+export * from "./autoresize.js";
+export * from "./loading.js";

package/dist/runtime/composables/loading.d.ts

@@ -1,5 +1,5 @@
 import { type Ref, type InjectionKey, type PropType } from 'vue';
-import type { EChartsType, LoadingOptions } from '../types';
+import type { EChartsType, LoadingOptions } from '../types.js';
 export declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptions | Ref<LoadingOptions>>;
 export declare function useLoading(chart: Ref<EChartsType | undefined>, loading: Ref<boolean>, loadingOptions: Ref<LoadingOptions | undefined>): void;
 export declare const loadingProps: {

package/dist/runtime/style.css

@@ -1 +1 @@
-x-vue-echarts{display:block;height:100%;min-width:0;position:relative;width:100%}.vue-echarts-inner{bottom:0;left:0;position:absolute;right:0;top:0}
+.vue-echarts-container,x-vue-echarts{display:flex;flex-direction:column;height:100%;min-width:0;width:100%}.vue-echarts-inner{flex-grow:1;height:auto!important;min-width:0;width:auto!important}

package/dist/runtime/types.d.ts

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

package/dist/runtime/utils/injection.d.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+import type { ThemeInjection, InitOptionsInjection, UpdateOptionsInjection } from '../types.js';
+export declare const THEME_KEY: InjectionKey<ThemeInjection>;
+export declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
+export declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
+export { LOADING_OPTIONS_KEY } from '../composables.js';

package/dist/runtime/utils/injection.js

@@ -0,0 +1,4 @@
+export const THEME_KEY = "ecTheme";
+export const INIT_OPTIONS_KEY = "ecInitOptions";
+export const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
+export { LOADING_OPTIONS_KEY } from "../composables/index.js";

package/dist/types.d.mts

@@ -1,16 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
 
-import type { ModuleOptions } from './module.js'
+import type { default as Module } from './module.js'
 
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['echarts']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['echarts']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['echarts']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['echarts']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module.js'
+export { default } from './module.js'

package/dist/types.d.ts

@@ -1,16 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
 
-import type { ModuleOptions } from './module'
+import type { default as Module } from './module'
 
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['echarts']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['echarts']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['echarts']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['echarts']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module'
+export { default } from './module'

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Nuxt Module for Apache ECharts™",
+  "keywords": [
+    "vue",
+    "nuxt",
+    "echarts",
+    "data-visualization",
+    "charts"
+  ],
   "author": "Yue JIN <yuejin13@fudan.edu.cn>",
   "repository": "kingyue737/nuxt-echarts",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@9.1.4",
+  "packageManager": "pnpm@9.4.0",
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
@@ -32,23 +39,23 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.11.2",
+    "@nuxt/kit": "^3.12.2",
     "echarts": "^5.5.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.2",
+    "@nuxt/devtools": "^1.3.3",
     "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/module-builder": "^0.6.0",
-    "@nuxt/schema": "^3.11.2",
+    "@nuxt/module-builder": "^0.8.0",
+    "@nuxt/schema": "^3.12.2",
     "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.5",
     "changelogen": "^0.5.5",
-    "eslint": "^9.3.0",
-    "nuxt": "^3.11.2",
-    "prettier": "^3.2.5",
+    "eslint": "^9.5.0",
+    "nuxt": "^3.12.2",
+    "prettier": "^3.3.2",
     "typescript": "latest",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.19"
+    "vue-tsc": "^2.0.21"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -56,8 +63,12 @@
         "@typescript-eslint/eslint-plugin>eslint": "^9.0.0",
         "@typescript-eslint/parser>eslint": "^9.0.0",
         "@typescript-eslint/type-utils>eslint": "^9.0.0",
-        "@typescript-eslint/utils>eslint": "^9.0.0"
-      }
+        "@typescript-eslint/utils>eslint": "^9.0.0",
+        "@opentelemetry/api": "^1.9.0"
+      },
+      "ignoreMissing": [
+        "webpack"
+      ]
     }
   }
 }

package/dist/runtime/composables/index.mjs

@@ -1,3 +0,0 @@
-export * from "./api.mjs";
-export * from "./autoresize.mjs";
-export * from "./loading.mjs";

package/dist/runtime/index.d.ts

@@ -1,3 +0,0 @@
-import VChart from './VChart';
-export default VChart;
-export * from './VChart';

package/dist/runtime/index.mjs

@@ -1,3 +0,0 @@
-import VChart from "./VChart.mjs";
-export default VChart;
-export * from "./VChart.mjs";

package/dist/runtime/wc.d.ts

@@ -1,6 +0,0 @@
-export declare const TAG_NAME = "x-vue-echarts";
-export declare class EChartsElement extends HTMLElement {
-    __dispose: (() => void) | null;
-    disconnectedCallback(): void;
-}
-export declare function register(): boolean;