nuxt-echarts 0.0.5 → 0.0.6

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

@@ -1,98 +1,98 @@
-![nuxt-echarts](./docs/public/social-card.png)
-
-# Nuxt ECharts
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-Nuxt Module for Apache ECharts™
-
-> [!IMPORTANT]
->
-> 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;Release Notes](/CHANGELOG.md)
-- [🎞️ &nbsp;Online Demo](https://nuxt-echarts.nuxt.dev/)
-- [🏀 &nbsp;Online Playground](https://stackblitz.com/github/kingyue737/nuxt-echarts?file=playground%2Fapp.vue)
-
-## Features
-
-- ⛰&nbsp;**SSR**: Server-side SVG Rendering with [Nuxt server components](https://nuxt.com/docs/guide/directory-structure/components#server-components)
-
-- ♾️&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
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add nuxt-echarts
-```
-
-That's it! You can now use Nuxt ECharts in your Nuxt app ✨
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  pnpm install
-  
-  # Generate type stubs
-  pnpm run dev:prepare
-  
-  # Develop with the playground
-  pnpm run dev
-  
-  # Build the playground
-  pnpm run dev:build
-  
-  # Run ESLint
-  pnpm run lint
-  
-  # Format with Prettier
-  pnpm run format
-  
-  # Run Vitest
-  pnpm run test
-  pnpm run test:watch
-  
-  # Release new version
-  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
-[npm-version-href]: https://npmjs.com/package/nuxt-echarts
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-echarts.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/nuxt-echarts
-[license-src]: https://img.shields.io/npm/l/nuxt-echarts.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/nuxt-echarts
-[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+![nuxt-echarts](./docs/public/social-card.png)
+
+# Nuxt ECharts
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Nuxt Module for Apache ECharts™
+
+> [!IMPORTANT]
+>
+> 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;Release Notes](/CHANGELOG.md)
+- [🎞️ &nbsp;Online Demo](https://nuxt-echarts.nuxt.dev/)
+- [🏀 &nbsp;Online Playground](https://stackblitz.com/github/kingyue737/nuxt-echarts?file=playground%2Fapp.vue)
+
+## Features
+
+- ⛰&nbsp;**SSR**: Server-side SVG Rendering with [Nuxt server components](https://nuxt.com/docs/guide/directory-structure/components#server-components)
+
+- ♾️&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
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add nuxt-echarts
+```
+
+That's it! You can now use Nuxt ECharts in your Nuxt app ✨
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  pnpm install
+  
+  # Generate type stubs
+  pnpm run dev:prepare
+  
+  # Develop with the playground
+  pnpm run dev
+  
+  # Build the playground
+  pnpm run dev:build
+  
+  # Run ESLint
+  pnpm run lint
+  
+  # Format with Prettier
+  pnpm run format
+  
+  # Run Vitest
+  pnpm run test
+  pnpm run test:watch
+  
+  # Release new version
+  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
+[npm-version-href]: https://npmjs.com/package/nuxt-echarts
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-echarts.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/nuxt-echarts
+[license-src]: https://img.shields.io/npm/l/nuxt-echarts.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-echarts
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -13,19 +13,23 @@ interface ModuleOptions {
      */
     renderer?: RendererName | RendererName[];
     /**
-     * Register the required charts globally
+     * Register the required charts on client side
+     * (imported only if `VChart` is used)
      */
     charts?: ChartName[];
     /**
-     * Register the required components globally
+     * Register the required components on client side
+     * (imported only if `VChart` is used)
      */
     components?: ComponentName[];
     /**
-     * Register the required components globally
+     * Register the required components on client side
+     * (imported only if `VChart` is used)
      */
     features?: FeaturesName[];
     /**
-     * WIP
+     * This options indicates if `VChart` should also render on server.
+     * By default, it only render on client.
      *
      * @default false
      */

package/dist/module.d.ts

@@ -13,19 +13,23 @@ interface ModuleOptions {
      */
     renderer?: RendererName | RendererName[];
     /**
-     * Register the required charts globally
+     * Register the required charts on client side
+     * (imported only if `VChart` is used)
      */
     charts?: ChartName[];
     /**
-     * Register the required components globally
+     * Register the required components on client side
+     * (imported only if `VChart` is used)
      */
     components?: ComponentName[];
     /**
-     * Register the required components globally
+     * Register the required components on client side
+     * (imported only if `VChart` is used)
      */
     features?: FeaturesName[];
     /**
-     * WIP
+     * This options 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.5",
+  "version": "0.0.6",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addTemplate, addTypeTemplate, addImports } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addComponent, addTemplate, addTypeTemplate, addImports } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -16,7 +16,15 @@ const module = defineNuxtModule({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     addPlugin(resolve("./runtime/plugin"));
-    addComponentsDir({ path: resolve("runtime/components") });
+    addComponentsDir({
+      path: resolve("runtime/components"),
+      ignore: ["VChart.server.vue", "VChart.client.ts"]
+    });
+    addComponent({
+      filePath: resolve("./runtime/components/VChart.client.ts"),
+      name: "VChart",
+      mode: options.ssr ? "all" : "client"
+    });
     nuxt.options.css.unshift(resolve("./runtime/style.css"));
     function join(arr) {
       return arr?.map((name) => `  ${name},`).join("\n") || "";
@@ -105,10 +113,6 @@ const module = defineNuxtModule({
     ].forEach(
       (name) => addImports({ name, from: resolve("./runtime/utils/injection") })
     );
-    if (options.ssr) {
-      nuxt.options.experimental ||= {};
-      nuxt.options.experimental.componentIslands = true;
-    }
   }
 });
 

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

@@ -29,44 +29,44 @@ declare const _default: import("vue").DefineComponent<{
     } | undefined) => void;
     convertToPixel: {
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "none" | "all") | 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[] | "none" | "all") | undefined;
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
@@ -75,44 +75,44 @@ declare const _default: import("vue").DefineComponent<{
     };
     convertFromPixel: {
         (finder: string | {
-            seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "none" | "all") | 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[] | "none" | "all") | undefined;
+            seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
             seriesId?: ((string | number) | (string | number)[]) | undefined;
             seriesName?: ((string | number) | (string | number)[]) | undefined;
-            geoIndex?: (number | false | number[] | "none" | "all") | undefined;
+            geoIndex?: (number | false | number[] | "all" | "none") | undefined;
             geoId?: ((string | number) | (string | number)[]) | undefined;
             geoName?: ((string | number) | (string | number)[]) | undefined;
-            bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
+            bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
             bmapId?: ((string | number) | (string | number)[]) | undefined;
             bmapName?: ((string | number) | (string | number)[]) | undefined;
-            xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             xAxisId?: ((string | number) | (string | number)[]) | undefined;
             xAxisName?: ((string | number) | (string | number)[]) | undefined;
-            yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+            yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
             yAxisId?: ((string | number) | (string | number)[]) | undefined;
             yAxisName?: ((string | number) | (string | number)[]) | undefined;
-            gridIndex?: (number | false | number[] | "none" | "all") | undefined;
+            gridIndex?: (number | false | number[] | "all" | "none") | undefined;
             gridId?: ((string | number) | (string | number)[]) | undefined;
             gridName?: ((string | number) | (string | number)[]) | undefined;
             dataIndex?: number | undefined;
@@ -120,22 +120,22 @@ declare const _default: import("vue").DefineComponent<{
         }, value: number[]): number[];
     };
     containPixel: (finder: string | {
-        seriesIndex?: (number | false | number[] | "none" | "all") | undefined;
+        seriesIndex?: (number | false | number[] | "all" | "none") | undefined;
         seriesId?: ((string | number) | (string | number)[]) | undefined;
         seriesName?: ((string | number) | (string | number)[]) | undefined;
-        geoIndex?: (number | false | number[] | "none" | "all") | undefined;
+        geoIndex?: (number | false | number[] | "all" | "none") | undefined;
         geoId?: ((string | number) | (string | number)[]) | undefined;
         geoName?: ((string | number) | (string | number)[]) | undefined;
-        bmapIndex?: (number | false | number[] | "none" | "all") | undefined;
+        bmapIndex?: (number | false | number[] | "all" | "none") | undefined;
         bmapId?: ((string | number) | (string | number)[]) | undefined;
         bmapName?: ((string | number) | (string | number)[]) | undefined;
-        xAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+        xAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
         xAxisId?: ((string | number) | (string | number)[]) | undefined;
         xAxisName?: ((string | number) | (string | number)[]) | undefined;
-        yAxisIndex?: (number | false | number[] | "none" | "all") | undefined;
+        yAxisIndex?: (number | false | number[] | "all" | "none") | undefined;
         yAxisId?: ((string | number) | (string | number)[]) | undefined;
         yAxisName?: ((string | number) | (string | number)[]) | undefined;
-        gridIndex?: (number | false | number[] | "none" | "all") | undefined;
+        gridIndex?: (number | false | number[] | "all" | "none") | undefined;
         gridId?: ((string | number) | (string | number)[]) | undefined;
         gridName?: ((string | number) | (string | number)[]) | undefined;
         dataIndex?: number | undefined;

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

@@ -12,16 +12,15 @@ defineProps<{
   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 root = ref<InstanceType<typeof VChartServer> | null>(null)
 const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>>
 let container: HTMLElement
 function hydrateChart() {
-  container = root.value?.querySelector?.('.vue-echarts-inner') as HTMLElement
+  container = root.value?.$el
   if (container) {
     // Use the lightweight runtime to give the chart interactive capabilities
     hydrate(container, {
@@ -44,7 +43,7 @@ onMounted(async () => {
 
   // call 'observe' on that MutationObserver instance,
   // passing it the element to observe, and the options object
-  observer.observe(root.value!.querySelector('.vue-echarts-server')!, {
+  observer.observe(root.value!.$el, {
     characterData: false,
     childList: true,
     attributes: false,
@@ -53,7 +52,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div ref="root">
-    <VChartServer :option="option" :init-options="initOptions" :theme="theme" />
-  </div>
+  <VChartServer
+    ref="root"
+    :option="option"
+    :init-options="initOptions"
+    :theme="theme"
+  />
 </template>

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

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

@@ -2,7 +2,7 @@
 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'
+import type VChartIsland from './VChartLight.vue'
 
 const defaultTheme = inject(THEME_KEY, null)
 const defaultInitOptions = inject(INIT_OPTIONS_KEY, null)

package/dist/runtime/composables/autoresize.js

@@ -7,7 +7,7 @@ export function useAutoresize(chart, autoresize, root) {
       const autoresizeOptions = autoresize2 === true ? {} : autoresize2;
       const { throttle: wait = 100, onResize } = autoresizeOptions;
       const callback = () => {
-        chart2.resize();
+        chart2.resize({ width: "auto", height: "auto" });
         onResize?.();
       };
       observer = new ResizeObserver(wait ? throttle(callback, wait) : callback);

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: BooleanConstructor;
+    loading: any;
     loadingOptions: PropType<LoadingOptions>;
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Nuxt Module for Apache ECharts™",
   "keywords": [
     "vue",
@@ -34,30 +34,32 @@
     "release": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release && npm publish --registry=\"https://registry.npmjs.org/\" && git push --follow-tags",
     "docs:dev": "nuxi dev docs",
     "docs:build": "nuxi generate docs",
+    "docs:types": "nuxi typecheck docs",
     "lint": "eslint . --fix",
     "format": "prettier . --write",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && nuxi typecheck docs && cd playground && vue-tsc --noEmit"
+    "test:types": "nuxi typecheck && nuxi typecheck playground"
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.2",
     "echarts": "^5.5.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.3",
+    "@nuxt/devtools": "^1.3.6",
     "@nuxt/eslint-config": "^0.3.13",
     "@nuxt/module-builder": "^0.8.0",
     "@nuxt/schema": "^3.12.2",
     "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.5",
+    "@types/node": "^20.14.8",
     "changelogen": "^0.5.5",
     "eslint": "^9.5.0",
     "nuxt": "^3.12.2",
     "prettier": "^3.3.2",
-    "typescript": "latest",
+    "typescript": "~5.4.5",
+    "vite": "^5.3.1",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.21"
+    "vue-tsc": "^2.0.22"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -76,4 +78,4 @@
   "stackblitz": {
     "startCommand": "pnpm run dev:prepare && pnpm run dev"
   }
-}
+}