nuxt-echarts 0.0.1 → 0.0.3

package/README.md

@@ -1,3 +1,5 @@
+![nuxt-echarts](./.github/assets/social-card.png)
+
 # Nuxt ECharts
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -15,13 +17,13 @@ Nuxt Module for Apache ECharts™
   <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-echarts?file=playground%2Fapp.vue) -->
   <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
-## Features
+## Features (WIP)
 
 <!-- Highlight some of the features your module provide here -->
 
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+- ⛰ **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
 
 ## Quick Setup
 
@@ -40,30 +42,47 @@ That's it! You can now use Nuxt ECharts in your Nuxt app ✨
   
   ```bash
   # Install dependencies
-  npm install
+  pnpm install
   
   # Generate type stubs
-  npm run dev:prepare
+  pnpm run dev:prepare
   
   # Develop with the playground
-  npm run dev
+  pnpm run dev
   
   # Build the playground
-  npm run dev:build
+  pnpm run dev:build
   
   # Run ESLint
-  npm run lint
+  pnpm run lint
+  
+  # Format with Prettier
+  pnpm run format
   
   # Run Vitest
-  npm run test
-  npm run test:watch
+  pnpm run test
+  pnpm run test:watch
   
   # Release new version
-  npm run release
+  pnpm run release
   ```
 
 </details>
 
+## Credits
+
+The Nuxt ECharts module is heavily inspired by [vue-echarts](https://github.com/ecomfe/vue-echarts), created by[@Justineo](https://github.com/Justineo).
+
+## License
+
+This project is licensed under the [MIT License](./LICENSE).
+
+This project also partially contains code derived or copied from [vue-echarts(MIT)](https://github.com/ecomfe/vue-echarts/blob/main/LICENSE).
+
+## Notice
+
+The Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).
+
 <!-- Badges -->
 
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-echarts/latest.svg?style=flat&colorA=020420&colorB=00DC82

package/dist/module.json

@@ -1,7 +1,10 @@
 {
   "name": "nuxt-echarts",
   "configKey": "echarts",
-  "version": "0.0.1",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.0.3",
   "builder": {
     "@nuxt/module-builder": "0.6.0",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,15 +1,31 @@
-import { defineNuxtModule, createResolver, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addComponent, addImports } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-echarts",
-    configKey: "echarts"
+    configKey: "echarts",
+    compatibility: {
+      // Semver version of supported nuxt versions
+      nuxt: "^3.0.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
+    });
+    const injectionKeys = [
+      "THEME_KEY",
+      "INIT_OPTIONS_KEY",
+      "UPDATE_OPTIONS_KEY",
+      "LOADING_OPTIONS_KEY"
+    ];
+    injectionKeys.forEach((name) => addImports({ name, from: entry }));
   }
 });
 

package/dist/runtime/VChart.d.ts

@@ -0,0 +1,314 @@
+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';
+declare const _default: import("vue").DefineComponent<{
+    loading: BooleanConstructor;
+    loadingOptions: PropType<import("./types").LoadingOptions>;
+    autoresize: PropType<boolean | {
+        throttle?: number | undefined;
+        onResize?: (() => void) | undefined;
+    }>;
+    option: PropType<import("echarts/core").EChartsCoreOption>;
+    theme: {
+        type: PropType<Theme>;
+    };
+    initOptions: PropType<import("echarts/core").EChartsInitOpts>;
+    updateOptions: PropType<import("echarts").SetOptionOpts>;
+    group: StringConstructor;
+    manualUpdate: BooleanConstructor;
+}, {
+    getWidth: () => number;
+    getHeight: () => number;
+    getDom: () => HTMLElement;
+    getOption: () => import("echarts/core").EChartsCoreOption;
+    resize: (opts?: import("echarts/core").ResizeOpts | undefined) => void;
+    dispatchAction: (payload: import("echarts/core").Payload, opt?: boolean | {
+        silent?: boolean | undefined;
+        flush?: boolean | undefined;
+    } | undefined) => void;
+    convertToPixel: {
+        (finder: string | {
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesId?: ((string | number) | (string | number)[]) | undefined;
+            seriesName?: ((string | number) | (string | number)[]) | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoId?: ((string | number) | (string | number)[]) | undefined;
+            geoName?: ((string | number) | (string | number)[]) | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapId?: ((string | number) | (string | number)[]) | undefined;
+            bmapName?: ((string | number) | (string | number)[]) | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisId?: ((string | number) | (string | number)[]) | undefined;
+            xAxisName?: ((string | number) | (string | number)[]) | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisId?: ((string | number) | (string | number)[]) | undefined;
+            yAxisName?: ((string | number) | (string | number)[]) | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | 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;
+            seriesId?: ((string | number) | (string | number)[]) | undefined;
+            seriesName?: ((string | number) | (string | number)[]) | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoId?: ((string | number) | (string | number)[]) | undefined;
+            geoName?: ((string | number) | (string | number)[]) | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapId?: ((string | number) | (string | number)[]) | undefined;
+            bmapName?: ((string | number) | (string | number)[]) | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisId?: ((string | number) | (string | number)[]) | undefined;
+            xAxisName?: ((string | number) | (string | number)[]) | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisId?: ((string | number) | (string | number)[]) | undefined;
+            yAxisName?: ((string | number) | (string | number)[]) | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridId?: ((string | number) | (string | number)[]) | undefined;
+            gridName?: ((string | number) | (string | number)[]) | undefined;
+            dataIndex?: number | undefined;
+            dataIndexInside?: number | undefined;
+        }, value: ((string | number) | Date)[]): number[];
+    };
+    convertFromPixel: {
+        (finder: string | {
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+            seriesId?: ((string | number) | (string | number)[]) | undefined;
+            seriesName?: ((string | number) | (string | number)[]) | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoId?: ((string | number) | (string | number)[]) | undefined;
+            geoName?: ((string | number) | (string | number)[]) | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapId?: ((string | number) | (string | number)[]) | undefined;
+            bmapName?: ((string | number) | (string | number)[]) | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisId?: ((string | number) | (string | number)[]) | undefined;
+            xAxisName?: ((string | number) | (string | number)[]) | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisId?: ((string | number) | (string | number)[]) | undefined;
+            yAxisName?: ((string | number) | (string | number)[]) | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | 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;
+            seriesId?: ((string | number) | (string | number)[]) | undefined;
+            seriesName?: ((string | number) | (string | number)[]) | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+            geoId?: ((string | number) | (string | number)[]) | undefined;
+            geoName?: ((string | number) | (string | number)[]) | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+            bmapId?: ((string | number) | (string | number)[]) | undefined;
+            bmapName?: ((string | number) | (string | number)[]) | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            xAxisId?: ((string | number) | (string | number)[]) | undefined;
+            xAxisName?: ((string | number) | (string | number)[]) | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+            yAxisId?: ((string | number) | (string | number)[]) | undefined;
+            yAxisName?: ((string | number) | (string | number)[]) | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+            gridId?: ((string | number) | (string | number)[]) | undefined;
+            gridName?: ((string | number) | (string | number)[]) | undefined;
+            dataIndex?: number | undefined;
+            dataIndexInside?: number | undefined;
+        }, value: number[]): number[];
+    };
+    containPixel: (finder: string | {
+        seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
+        seriesId?: ((string | number) | (string | number)[]) | undefined;
+        seriesName?: ((string | number) | (string | number)[]) | undefined;
+        geoIndex?: (number | false | number[] | "all" | "none") | undefined;
+        geoId?: ((string | number) | (string | number)[]) | undefined;
+        geoName?: ((string | number) | (string | number)[]) | undefined;
+        bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
+        bmapId?: ((string | number) | (string | number)[]) | undefined;
+        bmapName?: ((string | number) | (string | number)[]) | undefined;
+        xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+        xAxisId?: ((string | number) | (string | number)[]) | undefined;
+        xAxisName?: ((string | number) | (string | number)[]) | undefined;
+        yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
+        yAxisId?: ((string | number) | (string | number)[]) | undefined;
+        yAxisName?: ((string | number) | (string | number)[]) | undefined;
+        gridIndex?: (number | false | number[] | "all" | "none") | undefined;
+        gridId?: ((string | number) | (string | number)[]) | undefined;
+        gridName?: ((string | number) | (string | number)[]) | undefined;
+        dataIndex?: number | undefined;
+        dataIndexInside?: number | undefined;
+    }, value: number[]) => boolean;
+    getDataURL: (opts?: {
+        type?: "svg" | "png" | "jpeg" | undefined;
+        pixelRatio?: number | undefined;
+        backgroundColor?: import("echarts/core").Color | undefined;
+        excludeComponents?: string[] | undefined;
+    } | undefined) => string;
+    getConnectedDataURL: (opts?: {
+        type?: "svg" | "png" | "jpeg" | undefined;
+        pixelRatio?: number | undefined;
+        backgroundColor?: import("echarts/core").Color | undefined;
+        connectedBackgroundColor?: import("echarts/core").Color | undefined;
+        excludeComponents?: string[] | undefined;
+    } | undefined) => string;
+    appendData: (params: {
+        seriesIndex: number;
+        data: any;
+    }) => void;
+    clear: () => void;
+    isDisposed: () => boolean;
+    dispose: () => void;
+    chart: import("vue").ShallowRef<import("echarts/core").ECharts | undefined>;
+    root: import("vue").ShallowRef<EChartsElement | undefined>;
+    inner: import("vue").ShallowRef<HTMLElement | undefined>;
+    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;
+} & {
+    highlight: null;
+    downplay: null;
+    selectchanged: null;
+    legendselectchanged: null;
+    legendselected: null;
+    legendunselected: null;
+    legendselectall: null;
+    legendinverseselect: null;
+    legendscroll: null;
+    datazoom: null;
+    datarangeselected: null;
+    graphroam: null;
+    georoam: null;
+    treeroam: null;
+    timelinechanged: null;
+    timelineplaychanged: null;
+    restore: null;
+    dataviewchanged: null;
+    magictypechanged: null;
+    geoselectchanged: null;
+    geoselected: null;
+    geounselected: null;
+    axisareaselected: null;
+    brush: null;
+    brushEnd: null;
+    brushselected: null;
+    globalcursortaken: null;
+} & {
+    rendered: (params: {
+        elapsedTime: number;
+    }) => 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;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    loading: BooleanConstructor;
+    loadingOptions: PropType<import("./types").LoadingOptions>;
+    autoresize: PropType<boolean | {
+        throttle?: number | undefined;
+        onResize?: (() => void) | undefined;
+    }>;
+    option: PropType<import("echarts/core").EChartsCoreOption>;
+    theme: {
+        type: PropType<Theme>;
+    };
+    initOptions: PropType<import("echarts/core").EChartsInitOpts>;
+    updateOptions: PropType<import("echarts").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;
+    onHighlight?: ((...args: any[]) => any) | undefined;
+    onDownplay?: ((...args: any[]) => any) | undefined;
+    onSelectchanged?: ((...args: any[]) => any) | undefined;
+    onLegendselectchanged?: ((...args: any[]) => any) | undefined;
+    onLegendselected?: ((...args: any[]) => any) | undefined;
+    onLegendunselected?: ((...args: any[]) => any) | undefined;
+    onLegendselectall?: ((...args: any[]) => any) | undefined;
+    onLegendinverseselect?: ((...args: any[]) => any) | undefined;
+    onLegendscroll?: ((...args: any[]) => any) | undefined;
+    onDatazoom?: ((...args: any[]) => any) | undefined;
+    onDatarangeselected?: ((...args: any[]) => any) | undefined;
+    onGraphroam?: ((...args: any[]) => any) | undefined;
+    onGeoroam?: ((...args: any[]) => any) | undefined;
+    onTreeroam?: ((...args: any[]) => any) | undefined;
+    onTimelinechanged?: ((...args: any[]) => any) | undefined;
+    onTimelineplaychanged?: ((...args: any[]) => any) | undefined;
+    onRestore?: ((...args: any[]) => any) | undefined;
+    onDataviewchanged?: ((...args: any[]) => any) | undefined;
+    onMagictypechanged?: ((...args: any[]) => any) | undefined;
+    onGeoselectchanged?: ((...args: any[]) => any) | undefined;
+    onGeoselected?: ((...args: any[]) => any) | undefined;
+    onGeounselected?: ((...args: any[]) => any) | undefined;
+    onAxisareaselected?: ((...args: any[]) => any) | undefined;
+    onBrush?: ((...args: any[]) => any) | undefined;
+    onBrushEnd?: ((...args: any[]) => any) | undefined;
+    onBrushselected?: ((...args: any[]) => any) | undefined;
+    onGlobalcursortaken?: ((...args: any[]) => any) | undefined;
+    onRendered?: ((params: {
+        elapsedTime: number;
+    }) => any) | undefined;
+    onFinished?: (() => any) | undefined;
+}, {
+    manualUpdate: boolean;
+    loading: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/VChart.mjs

@@ -0,0 +1,238 @@
+import {
+  defineComponent,
+  shallowRef,
+  toRefs,
+  unref,
+  watch,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  nextTick,
+  watchEffect
+} from "vue";
+import { init as initChart } from "echarts/core";
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables/index.mjs";
+import { isOn, omitOn } from "./utils.mjs";
+import { register, TAG_NAME } from "./wc.mjs";
+import "./style.css";
+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",
+  props: {
+    option: Object,
+    theme: {
+      type: [Object, String]
+    },
+    initOptions: Object,
+    updateOptions: Object,
+    group: String,
+    manualUpdate: Boolean,
+    ...autoresizeProps,
+    ...loadingProps
+  },
+  emits: {},
+  inheritAttrs: false,
+  setup(props, { attrs }) {
+    const root = shallowRef();
+    const inner = shallowRef();
+    const chart = shallowRef();
+    const manualOption = shallowRef();
+    const defaultTheme = inject(THEME_KEY, null);
+    const defaultInitOptions = inject(INIT_OPTIONS_KEY, null);
+    const defaultUpdateOptions = inject(UPDATE_OPTIONS_KEY, null);
+    const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
+    const realOption = computed(
+      () => manualOption.value || props.option || null
+    );
+    const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
+    const realInitOptions = computed(
+      // @ts-expect-error unknown computed type error
+      () => props.initOptions || unref(defaultInitOptions) || {}
+    );
+    const realUpdateOptions = computed(
+      // @ts-expect-error unknown computed type error
+      () => props.updateOptions || unref(defaultUpdateOptions) || {}
+    );
+    const nonEventAttrs = computed(() => omitOn(attrs));
+    const nativeListeners = {};
+    const realListeners = {};
+    Object.keys(attrs).filter((key) => isOn(key)).forEach((key) => {
+      let event = key.charAt(2).toLowerCase() + key.slice(3);
+      if (event.indexOf("native:") === 0) {
+        const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
+          8
+        )}`;
+        nativeListeners[nativeKey] = attrs[key];
+        return;
+      }
+      if (event.substring(event.length - 4) === "Once") {
+        event = `~${event.substring(0, event.length - 4)}`;
+      }
+      realListeners[event] = attrs[key];
+    });
+    function init(option) {
+      if (!inner.value) {
+        return;
+      }
+      const instance = chart.value = initChart(
+        inner.value,
+        realTheme.value,
+        realInitOptions.value
+      );
+      if (props.group) {
+        instance.group = props.group;
+      }
+      Object.keys(realListeners).forEach((key) => {
+        let handler = realListeners[key];
+        if (!handler) {
+          return;
+        }
+        let event = key.toLowerCase();
+        if (event.charAt(0) === "~") {
+          event = event.substring(1);
+          handler.__once__ = true;
+        }
+        let target = instance;
+        if (event.indexOf("zr:") === 0) {
+          target = instance.getZr();
+          event = event.substring(3);
+        }
+        if (handler.__once__) {
+          delete handler.__once__;
+          const raw = handler;
+          handler = (...args) => {
+            raw(...args);
+            target.off(event, handler);
+          };
+        }
+        target.on(event, handler);
+      });
+      function resize() {
+        if (instance && !instance.isDisposed()) {
+          instance.resize();
+        }
+      }
+      function commit() {
+        const opt = option || realOption.value;
+        if (opt) {
+          instance.setOption(opt, realUpdateOptions.value);
+        }
+      }
+      if (autoresize.value) {
+        nextTick(() => {
+          resize();
+          commit();
+        });
+      } else {
+        commit();
+      }
+    }
+    function setOption(option, updateOptions) {
+      if (props.manualUpdate) {
+        manualOption.value = option;
+      }
+      if (!chart.value) {
+        init(option);
+      } else {
+        chart.value.setOption(option, updateOptions || {});
+      }
+    }
+    function cleanup() {
+      if (chart.value) {
+        chart.value.dispose();
+        chart.value = void 0;
+      }
+    }
+    let unwatchOption = null;
+    watch(
+      manualUpdate,
+      (manualUpdate2) => {
+        if (typeof unwatchOption === "function") {
+          unwatchOption();
+          unwatchOption = null;
+        }
+        if (!manualUpdate2) {
+          unwatchOption = watch(
+            () => props.option,
+            (option, oldOption) => {
+              if (!option) {
+                return;
+              }
+              if (!chart.value) {
+                init();
+              } else {
+                chart.value.setOption(option, {
+                  // mutating `option` will lead to `notMerge: false` and
+                  // replacing it with new reference will lead to `notMerge: true`
+                  notMerge: option !== oldOption,
+                  ...realUpdateOptions.value
+                });
+              }
+            },
+            { deep: true }
+          );
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      [realTheme, realInitOptions],
+      () => {
+        cleanup();
+        init();
+      },
+      {
+        deep: true
+      }
+    );
+    watchEffect(() => {
+      if (props.group && chart.value) {
+        chart.value.group = props.group;
+      }
+    });
+    const publicApi = usePublicAPI(chart);
+    useLoading(chart, loading, loadingOptions);
+    useAutoresize(chart, autoresize, inner);
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (wcRegistered && root.value) {
+        root.value.__dispose = cleanup;
+      } else {
+        cleanup();
+      }
+    });
+    return {
+      chart,
+      root,
+      inner,
+      setOption,
+      nonEventAttrs,
+      nativeListeners,
+      ...publicApi
+    };
+  },
+  render() {
+    const attrs = { ...this.nonEventAttrs, ...this.nativeListeners };
+    attrs.ref = "root";
+    attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
+    return h(TAG_NAME, attrs, [
+      h("div", { ref: "inner", class: "vue-echarts-inner" })
+    ]);
+  }
+});

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

@@ -0,0 +1,7 @@
+import type { Ref } from 'vue';
+import type { EChartsType } from '../types';
+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>;
+export declare function usePublicAPI(chart: Ref<EChartsType | undefined>): PublicMethods;
+export {};

package/dist/runtime/composables/api.mjs

@@ -0,0 +1,35 @@
+const METHOD_NAMES = [
+  "getWidth",
+  "getHeight",
+  "getDom",
+  "getOption",
+  "resize",
+  "dispatchAction",
+  "convertToPixel",
+  "convertFromPixel",
+  "containPixel",
+  "getDataURL",
+  "getConnectedDataURL",
+  "appendData",
+  "clear",
+  "isDisposed",
+  "dispose"
+];
+export function usePublicAPI(chart) {
+  function makePublicMethod(name) {
+    return (...args) => {
+      if (!chart.value) {
+        throw new Error("ECharts is not initialized yet.");
+      }
+      return chart.value[name].apply(chart.value, args);
+    };
+  }
+  function makePublicMethods() {
+    const methods = /* @__PURE__ */ Object.create(null);
+    METHOD_NAMES.forEach((name) => {
+      methods[name] = makePublicMethod(name);
+    });
+    return methods;
+  }
+  return makePublicMethods();
+}

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

@@ -0,0 +1,11 @@
+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/autoresize.mjs

@@ -0,0 +1,26 @@
+import { watch } from "vue";
+import { throttle } from "echarts/core";
+export function useAutoresize(chart, autoresize, root) {
+  let observer;
+  watch([root, chart, autoresize], ([root2, chart2, autoresize2], _, cleanup) => {
+    if (root2 && chart2 && autoresize2) {
+      const autoresizeOptions = autoresize2 === true ? {} : autoresize2;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;
+      const callback = () => {
+        chart2.resize();
+        onResize?.();
+      };
+      observer = new ResizeObserver(wait ? throttle(callback, wait) : callback);
+      observer.observe(root2);
+    }
+    cleanup(() => {
+      if (root2 && observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    });
+  });
+}
+export const autoresizeProps = {
+  autoresize: [Boolean, Object]
+};

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

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

package/dist/runtime/composables/index.mjs

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

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

@@ -0,0 +1,8 @@
+import { type Ref, type InjectionKey, type PropType } from 'vue';
+import type { EChartsType, LoadingOptions } from '../types';
+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: {
+    loading: BooleanConstructor;
+    loadingOptions: PropType<LoadingOptions>;
+};

package/dist/runtime/composables/loading.mjs

@@ -0,0 +1,29 @@
+import {
+  unref,
+  inject,
+  computed,
+  watchEffect
+} from "vue";
+export const LOADING_OPTIONS_KEY = "ecLoadingOptions";
+export function useLoading(chart, loading, loadingOptions) {
+  const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
+  const realLoadingOptions = computed(() => ({
+    ...unref(defaultLoadingOptions) || {},
+    ...loadingOptions?.value
+  }));
+  watchEffect(() => {
+    const instance = chart.value;
+    if (!instance) {
+      return;
+    }
+    if (loading.value) {
+      instance.showLoading(realLoadingOptions.value);
+    } else {
+      instance.hideLoading();
+    }
+  });
+}
+export const loadingProps = {
+  loading: Boolean,
+  loadingOptions: Object
+};

package/dist/runtime/index.d.ts

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

package/dist/runtime/index.mjs

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

package/dist/runtime/plugin.mjs

@@ -1,4 +1,3 @@
 import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("Plugin injected by nuxt-echarts!");
 });

package/dist/runtime/style.css

@@ -0,0 +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}

package/dist/runtime/types.d.ts

@@ -0,0 +1,53 @@
+import type { init } from 'echarts/core';
+import type { SetOptionOpts, ECElementEvent, ElementEvent } from 'echarts';
+import type { Ref } from 'vue';
+export type Injection<T> = T | null | Ref<T | null> | {
+    value: T | null;
+};
+type InitType = typeof init;
+export type InitParameters = Parameters<InitType>;
+export type Theme = NonNullable<InitParameters[1]>;
+export type ThemeInjection = Injection<Theme>;
+export type InitOptions = NonNullable<InitParameters[2]>;
+export type InitOptionsInjection = Injection<InitOptions>;
+export type UpdateOptions = SetOptionOpts;
+export type UpdateOptionsInjection = Injection<UpdateOptions>;
+export type EChartsType = ReturnType<InitType>;
+type ZRenderType = ReturnType<EChartsType['getZr']>;
+export type EventTarget = EChartsType | ZRenderType;
+type SetOptionType = EChartsType['setOption'];
+export type Option = Parameters<SetOptionType>[0];
+export type LoadingOptions = {
+    text?: string;
+    textColor?: string;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    fontStyle?: string;
+    fontFamily?: string;
+    maskColor?: string;
+    showSpinner?: boolean;
+    color?: string;
+    spinnerRadius?: number;
+    lineWidth?: number;
+    zlevel?: number;
+};
+type MouseEventName = 'click' | 'dblclick' | 'mouseout' | 'mouseover' | 'mouseup' | 'mousedown' | 'mousemove' | 'contextmenu' | 'globalout';
+type ElementEventName = MouseEventName | 'mousewheel' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop';
+type ZRenderEventName = `zr:${ElementEventName}`;
+type OtherEventName = 'highlight' | 'downplay' | 'selectchanged' | 'legendselectchanged' | 'legendselected' | 'legendunselected' | 'legendselectall' | 'legendinverseselect' | 'legendscroll' | 'datazoom' | 'datarangeselected' | 'graphroam' | 'georoam' | 'treeroam' | 'timelinechanged' | 'timelineplaychanged' | 'restore' | 'dataviewchanged' | 'magictypechanged' | 'geoselectchanged' | 'geoselected' | 'geounselected' | 'axisareaselected' | 'brush' | 'brushEnd' | 'brushselected' | 'globalcursortaken';
+type MouseEmits = {
+    [key in MouseEventName]: (params: ECElementEvent) => boolean;
+};
+type ZRenderEmits = {
+    [key in ZRenderEventName]: (params: ElementEvent) => boolean;
+};
+type OtherEmits = {
+    [key in OtherEventName]: null;
+};
+export type Emits = MouseEmits & OtherEmits & {
+    rendered: (params: {
+        elapsedTime: number;
+    }) => boolean;
+    finished: () => boolean;
+} & ZRenderEmits;
+export {};

package/dist/runtime/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const isOn: (key: string) => boolean;
+type Attrs = Record<string, any>;
+export declare function omitOn(attrs: Attrs): Attrs;
+export {};

package/dist/runtime/utils.mjs

@@ -0,0 +1,11 @@
+const onRE = /^on[^a-z]/;
+export const isOn = (key) => onRE.test(key);
+export function omitOn(attrs) {
+  const result = {};
+  for (const key in attrs) {
+    if (!isOn(key)) {
+      result[key] = attrs[key];
+    }
+  }
+  return result;
+}

package/dist/runtime/wc.d.ts

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

package/dist/runtime/wc.mjs

@@ -0,0 +1,30 @@
+let registered = null;
+export const TAG_NAME = "x-vue-echarts";
+if (import.meta.server) {
+  global.HTMLElement = Object;
+}
+export class EChartsElement extends HTMLElement {
+  __dispose = null;
+  disconnectedCallback() {
+    if (this.__dispose) {
+      this.__dispose();
+      this.__dispose = null;
+    }
+  }
+}
+export function register() {
+  if (registered != null) {
+    return registered;
+  }
+  if (typeof HTMLElement === "undefined" || typeof customElements === "undefined") {
+    return registered = false;
+  }
+  try {
+    if (customElements.get(TAG_NAME) == null) {
+      customElements.define(TAG_NAME, EChartsElement);
+    }
+  } catch (e) {
+    return registered = false;
+  }
+  return registered = true;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Nuxt Module for Apache ECharts™",
   "author": "Yue JIN <yuejin13@fudan.edu.cn>",
   "repository": "kingyue737/nuxt-echarts",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@9.1.3",
+  "packageManager": "pnpm@9.1.4",
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
@@ -32,7 +32,8 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.11.2"
+    "@nuxt/kit": "^3.11.2",
+    "echarts": "^5.5.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.2",