nuxt-echarts 0.0.7 → 0.0.8

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2024 - present, Yue JIN
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2024 - present, Yue JIN
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -13,7 +13,7 @@ Nuxt Module for Apache ECharts™
 >
 > 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;Documentation (WIP)](https://echarts.nuxt.dev)
+- [📖 &nbsp;Documentation](https://echarts.nuxt.dev)
 
 - [✨ &nbsp;Release Notes](/CHANGELOG.md)
 - [🎞️ &nbsp;Online Demo](https://nuxt-echarts.nuxt.dev/)

package/dist/module.d.mts

@@ -9,26 +9,27 @@ type FeaturesName = keyof typeof echartsFeatures;
 type RendererName = 'canvas' | 'svg';
 interface ModuleOptions {
     /**
+     * Register the renderer used by `<VChart>`
      * @default 'canvas'
      */
     renderer?: RendererName | RendererName[];
     /**
-     * Register the required charts on client side
-     * (imported only if `VChart` is used)
+     * Register the charts used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     charts?: ChartName[];
     /**
-     * Register the required components on client side
-     * (imported only if `VChart` is used)
+     * Register the components used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     components?: ComponentName[];
     /**
-     * Register the required components on client side
-     * (imported only if `VChart` is used)
+     * Register the features used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     features?: FeaturesName[];
     /**
-     * This options indicates if `VChart` should also render on server.
+     * This option indicates if `<VChart>` should also render on server.
      * By default, it only render on client.
      *
      * @default false

package/dist/module.d.ts

@@ -9,26 +9,27 @@ type FeaturesName = keyof typeof echartsFeatures;
 type RendererName = 'canvas' | 'svg';
 interface ModuleOptions {
     /**
+     * Register the renderer used by `<VChart>`
      * @default 'canvas'
      */
     renderer?: RendererName | RendererName[];
     /**
-     * Register the required charts on client side
-     * (imported only if `VChart` is used)
+     * Register the charts used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     charts?: ChartName[];
     /**
-     * Register the required components on client side
-     * (imported only if `VChart` is used)
+     * Register the components used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     components?: ComponentName[];
     /**
-     * Register the required components on client side
-     * (imported only if `VChart` is used)
+     * Register the features used by `<VChart>`
+     * (imported only if `<VChart>` is used)
      */
     features?: FeaturesName[];
     /**
-     * This options indicates if `VChart` should also render on server.
+     * This option indicates if `<VChart>` should also render on server.
      * By default, it only render on client.
      *
      * @default false

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.2.0"
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "2.0.0"

package/dist/runtime/components/VChart.client.d.ts

@@ -1,20 +1,20 @@
 import { type PropType } from 'vue';
-import type { Option, Theme, UpdateOptions } from '../types.js';
+import type { Option, Theme, InitOptions, 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>;
     autoresize: PropType<boolean | {
-        throttle?: number | undefined;
-        onResize?: (() => void) | undefined;
+        throttle?: number;
+        onResize?: () => void;
     }>;
-    option: PropType<import("echarts/core").EChartsCoreOption>;
+    option: PropType<Option>;
     theme: {
         type: PropType<Theme>;
     };
-    initOptions: PropType<import("echarts/core").EChartsInitOpts>;
-    updateOptions: PropType<import("echarts/core").SetOptionOpts>;
+    initOptions: PropType<InitOptions>;
+    updateOptions: PropType<UpdateOptions>;
     group: StringConstructor;
     manualUpdate: BooleanConstructor;
 }, {
@@ -22,138 +22,138 @@ declare const _default: import("vue").DefineComponent<{
     getHeight: () => number;
     getDom: () => HTMLElement;
     getOption: () => import("echarts/core").EChartsCoreOption;
-    resize: (opts?: import("echarts/core").ResizeOpts | undefined) => void;
+    resize: (opts?: import("echarts/core").ResizeOpts) => void;
     dispatchAction: (payload: import("echarts/core").Payload, opt?: boolean | {
-        silent?: boolean | undefined;
+        silent?: boolean;
         flush?: boolean | undefined;
-    } | undefined) => void;
+    }) => 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;
+            seriesIndex?: number | false | number[] | "all" | "none";
+            seriesId?: (string | number) | (string | number)[];
+            seriesName?: (string | number) | (string | number)[];
+            geoIndex?: number | false | number[] | "all" | "none";
+            geoId?: (string | number) | (string | number)[];
+            geoName?: (string | number) | (string | number)[];
+            bmapIndex?: number | false | number[] | "all" | "none";
+            bmapId?: (string | number) | (string | number)[];
+            bmapName?: (string | number) | (string | number)[];
+            xAxisIndex?: number | false | number[] | "all" | "none";
+            xAxisId?: (string | number) | (string | number)[];
+            xAxisName?: (string | number) | (string | number)[];
+            yAxisIndex?: number | false | number[] | "all" | "none";
+            yAxisId?: (string | number) | (string | number)[];
+            yAxisName?: (string | number) | (string | number)[];
+            gridIndex?: number | false | number[] | "all" | "none";
+            gridId?: (string | number) | (string | number)[];
+            gridName?: (string | number) | (string | number)[];
+            dataIndex?: number;
+            dataIndexInside?: number;
         }, 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;
+            seriesIndex?: number | false | number[] | "all" | "none";
+            seriesId?: (string | number) | (string | number)[];
+            seriesName?: (string | number) | (string | number)[];
+            geoIndex?: number | false | number[] | "all" | "none";
+            geoId?: (string | number) | (string | number)[];
+            geoName?: (string | number) | (string | number)[];
+            bmapIndex?: number | false | number[] | "all" | "none";
+            bmapId?: (string | number) | (string | number)[];
+            bmapName?: (string | number) | (string | number)[];
+            xAxisIndex?: number | false | number[] | "all" | "none";
+            xAxisId?: (string | number) | (string | number)[];
+            xAxisName?: (string | number) | (string | number)[];
+            yAxisIndex?: number | false | number[] | "all" | "none";
+            yAxisId?: (string | number) | (string | number)[];
+            yAxisName?: (string | number) | (string | number)[];
+            gridIndex?: number | false | number[] | "all" | "none";
+            gridId?: (string | number) | (string | number)[];
+            gridName?: (string | number) | (string | number)[];
+            dataIndex?: number;
+            dataIndexInside?: number;
         }, 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;
+            seriesIndex?: number | false | number[] | "all" | "none";
+            seriesId?: (string | number) | (string | number)[];
+            seriesName?: (string | number) | (string | number)[];
+            geoIndex?: number | false | number[] | "all" | "none";
+            geoId?: (string | number) | (string | number)[];
+            geoName?: (string | number) | (string | number)[];
+            bmapIndex?: number | false | number[] | "all" | "none";
+            bmapId?: (string | number) | (string | number)[];
+            bmapName?: (string | number) | (string | number)[];
+            xAxisIndex?: number | false | number[] | "all" | "none";
+            xAxisId?: (string | number) | (string | number)[];
+            xAxisName?: (string | number) | (string | number)[];
+            yAxisIndex?: number | false | number[] | "all" | "none";
+            yAxisId?: (string | number) | (string | number)[];
+            yAxisName?: (string | number) | (string | number)[];
+            gridIndex?: number | false | number[] | "all" | "none";
+            gridId?: (string | number) | (string | number)[];
+            gridName?: (string | number) | (string | number)[];
+            dataIndex?: number;
+            dataIndexInside?: number;
         }, 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;
+            seriesIndex?: number | false | number[] | "all" | "none";
+            seriesId?: (string | number) | (string | number)[];
+            seriesName?: (string | number) | (string | number)[];
+            geoIndex?: number | false | number[] | "all" | "none";
+            geoId?: (string | number) | (string | number)[];
+            geoName?: (string | number) | (string | number)[];
+            bmapIndex?: number | false | number[] | "all" | "none";
+            bmapId?: (string | number) | (string | number)[];
+            bmapName?: (string | number) | (string | number)[];
+            xAxisIndex?: number | false | number[] | "all" | "none";
+            xAxisId?: (string | number) | (string | number)[];
+            xAxisName?: (string | number) | (string | number)[];
+            yAxisIndex?: number | false | number[] | "all" | "none";
+            yAxisId?: (string | number) | (string | number)[];
+            yAxisName?: (string | number) | (string | number)[];
+            gridIndex?: number | false | number[] | "all" | "none";
+            gridId?: (string | number) | (string | number)[];
+            gridName?: (string | number) | (string | number)[];
+            dataIndex?: number;
+            dataIndexInside?: number;
         }, 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;
+        seriesIndex?: number | false | number[] | "all" | "none";
+        seriesId?: (string | number) | (string | number)[];
+        seriesName?: (string | number) | (string | number)[];
+        geoIndex?: number | false | number[] | "all" | "none";
+        geoId?: (string | number) | (string | number)[];
+        geoName?: (string | number) | (string | number)[];
+        bmapIndex?: number | false | number[] | "all" | "none";
+        bmapId?: (string | number) | (string | number)[];
+        bmapName?: (string | number) | (string | number)[];
+        xAxisIndex?: number | false | number[] | "all" | "none";
+        xAxisId?: (string | number) | (string | number)[];
+        xAxisName?: (string | number) | (string | number)[];
+        yAxisIndex?: number | false | number[] | "all" | "none";
+        yAxisId?: (string | number) | (string | number)[];
+        yAxisName?: (string | number) | (string | number)[];
+        gridIndex?: number | false | number[] | "all" | "none";
+        gridId?: (string | number) | (string | number)[];
+        gridName?: (string | number) | (string | number)[];
+        dataIndex?: number;
+        dataIndexInside?: number;
     }, value: number[]) => boolean;
     getDataURL: (opts?: {
-        type?: "svg" | "png" | "jpeg" | undefined;
-        pixelRatio?: number | undefined;
-        backgroundColor?: import("echarts/core").Color | undefined;
-        excludeComponents?: string[] | undefined;
-    } | undefined) => string;
+        type?: "png" | "jpeg" | "svg";
+        pixelRatio?: number;
+        backgroundColor?: import("echarts/core").Color;
+        excludeComponents?: string[];
+    }) => 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;
+        type?: "png" | "jpeg" | "svg";
+        pixelRatio?: number;
+        backgroundColor?: import("echarts/core").Color;
+        connectedBackgroundColor?: import("echarts/core").Color;
+        excludeComponents?: string[];
+    }) => string;
     appendData: (params: {
         seriesIndex: number;
         data: any;
@@ -163,7 +163,7 @@ 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<any>;
+    inner: import("vue").ShallowRef<HTMLElement | undefined>;
     setOption: (option: Option, updateOptions?: UpdateOptions) => void;
     nonEventAttrs: import("vue").ComputedRef<{
         [x: string]: any;
@@ -234,15 +234,15 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     loadingOptions: PropType<import("../types").LoadingOptions>;
     autoresize: PropType<boolean | {
-        throttle?: number | undefined;
-        onResize?: (() => void) | undefined;
+        throttle?: number;
+        onResize?: () => void;
     }>;
-    option: PropType<import("echarts/core").EChartsCoreOption>;
+    option: PropType<Option>;
     theme: {
         type: PropType<Theme>;
     };
-    initOptions: PropType<import("echarts/core").EChartsInitOpts>;
-    updateOptions: PropType<import("echarts/core").SetOptionOpts>;
+    initOptions: PropType<InitOptions>;
+    updateOptions: PropType<UpdateOptions>;
     group: StringConstructor;
     manualUpdate: BooleanConstructor;
 }>> & {

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

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

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

@@ -1,34 +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>
+<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

@@ -4,58 +4,58 @@ export default defineComponent({
   inheritAttrs: false,
   emits: {}
 });
-</script>
-
-<script setup lang="ts">
-defineProps<{
-  option?: Option
-  theme?: Theme
-  initOptions?: InitOptions
-}>()
-
-type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined
-type ECSSREventOn = `on${Capitalize<ECSSREvent>}`
-
-const root = ref<InstanceType<typeof VChartServer> | null>(null)
-const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>>
-let container: HTMLElement
-function hydrateChart() {
-  container = root.value?.$el
-  if (container) {
-    // Use the lightweight runtime to give the chart interactive capabilities
-    hydrate(container, {
-      on: {
-        click: attrs.onClick,
-        mouseout: attrs.onMouseout,
-        mouseover: attrs.onMouseover,
-      },
-    })
-  }
-}
-
-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!.$el, {
-    characterData: false,
-    childList: true,
-    attributes: false,
-  })
-})
-</script>
-
-<template>
-  <VChartServer
-    ref="root"
-    :option="option"
-    :init-options="initOptions"
-    :theme="theme"
-  />
-</template>
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  option?: Option
+  theme?: Theme
+  initOptions?: InitOptions
+}>()
+
+type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined
+type ECSSREventOn = `on${Capitalize<ECSSREvent>}`
+
+const root = ref<InstanceType<typeof VChartServer> | null>(null)
+const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>>
+let container: HTMLElement
+function hydrateChart() {
+  container = root.value?.$el
+  if (container) {
+    // Use the lightweight runtime to give the chart interactive capabilities
+    hydrate(container, {
+      on: {
+        click: attrs.onClick,
+        mouseout: attrs.onMouseout,
+        mouseover: attrs.onMouseover,
+      },
+    })
+  }
+}
+
+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!.$el, {
+    characterData: false,
+    childList: true,
+    attributes: false,
+  })
+})
+</script>
+
+<template>
+  <VChartServer
+    ref="root"
+    :option="option"
+    :init-options="initOptions"
+    :theme="theme"
+  />
+</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 { InitOptions, Option, Theme } from '../types.js';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    option?: Option;
+    theme?: Theme;
+    initOptions?: InitOptions;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<ECSSREvent, (params: ECSSRClientEventParams) => string | undefined>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    option?: Option;
+    theme?: Theme;
+    initOptions?: InitOptions;
+}>>> & {
+    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

@@ -1,50 +1,50 @@
-<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 './VChartLight.vue'
-
-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 https://github.com/nuxt/nuxt/issues/27730
-    root.value.refresh()
-  }
-  emits('error', e)
-}
-const root = ref<InstanceType<typeof VChartIsland> | null>(null)
-</script>
-
-<template>
-  <div class="vue-echarts-server">
-    <VChartIsland
-      ref="root"
-      :theme="realTheme"
-      :option="option"
-      :init-options="realInitOptions"
-      @error="onError"
-    >
-      <template #fallback>
-        <slot name="fallback" />
-      </template>
-    </VChartIsland>
-  </div>
-</template>
+<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 './VChartLight.vue'
+
+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 https://github.com/nuxt/nuxt/issues/27730
+    root.value.refresh()
+  }
+  emits('error', e)
+}
+const root = ref<InstanceType<typeof VChartIsland> | null>(null)
+</script>
+
+<template>
+  <div class="vue-echarts-server">
+    <VChartIsland
+      ref="root"
+      :theme="realTheme"
+      :option="option"
+      :init-options="realInitOptions"
+      @error="onError"
+    >
+      <template #fallback>
+        <slot name="fallback" />
+      </template>
+    </VChartIsland>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import { type Ref, type PropType } from 'vue';
+import { type EChartsType } from '../types.js';
+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/loading.d.ts

@@ -3,6 +3,6 @@ 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: {
-    loading: any;
+    loading: BooleanConstructor;
     loadingOptions: PropType<LoadingOptions>;
 };

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

@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue';
-import type { UpdateOptionsInjection } from '../types.js';
-export declare const THEME_KEY: InjectionKey<any>;
-export declare const INIT_OPTIONS_KEY: InjectionKey<any>;
+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/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/package.json

@@ -1,13 +1,14 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Nuxt Module for Apache ECharts™",
   "keywords": [
     "vue",
     "nuxt",
     "echarts",
     "data-visualization",
-    "charts"
+    "charts",
+    "ssr"
   ],
   "author": "Yue JIN <yuejin13@fudan.edu.cn>",
   "repository": "kingyue737/nuxt-echarts",
@@ -56,7 +57,7 @@
     "eslint": "^9.5.0",
     "nuxt": "^3.12.2",
     "prettier": "^3.3.2",
-    "typescript": "~5.4.5",
+    "typescript": "^5.5.2",
     "vite": "^5.3.1",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.22"
@@ -78,4 +79,4 @@
   "stackblitz": {
     "startCommand": "pnpm run dev:prepare && pnpm run dev"
   }
-}
+}