nuxt-echarts 0.0.9 → 0.0.11

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

@@ -33,7 +33,7 @@ Nuxt Module for Apache ECharts™
 Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxi module add nuxt-echarts
+npx nuxi module add echarts
 ```
 
 That's it! You can now use Nuxt ECharts in your Nuxt app ✨

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.2.0"
   },
-  "version": "0.0.9",
+  "version": "0.0.11",
   "builder": {
-    "@nuxt/module-builder": "0.8.0",
+    "@nuxt/module-builder": "0.8.1",
     "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -14,6 +14,9 @@ const module = defineNuxtModule({
     renderer: "canvas"
   },
   setup(options, nuxt) {
+    if (nuxt.options.ssr === false) {
+      nuxt.options.experimental.componentIslands = true;
+    }
     const { resolve } = createResolver(import.meta.url);
     addPlugin(resolve("./runtime/plugin"));
     addComponentsDir({

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     loadingOptions: PropType<import("../types").LoadingOptions>;
     autoresize: PropType<boolean | {
         throttle?: number;
-        onResize?: () => void;
+        onResize?: ResizeObserverCallback;
     }>;
     option: PropType<Option>;
     theme: {
@@ -165,10 +165,10 @@ declare const _default: import("vue").DefineComponent<{
     root: import("vue").ShallowRef<EChartsElement | undefined>;
     inner: import("vue").ShallowRef<HTMLElement | undefined>;
     setOption: (option: Option, updateOptions?: UpdateOptions) => void;
-    nonEventAttrs: import("vue").ComputedRef<{
+    realAttrs: import("vue").ComputedRef<{
         [x: string]: any;
     }>;
-    nativeListeners: Record<string, unknown>;
+    nativeListeners: import("vue").Ref<Record<string, unknown>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (params: import("echarts/core").ECElementEvent) => boolean;
     dblclick: (params: import("echarts/core").ECElementEvent) => boolean;
@@ -235,7 +235,7 @@ declare const _default: import("vue").DefineComponent<{
     loadingOptions: PropType<import("../types").LoadingOptions>;
     autoresize: PropType<boolean | {
         throttle?: number;
-        onResize?: () => void;
+        onResize?: ResizeObserverCallback;
     }>;
     option: PropType<Option>;
     theme: {

package/dist/runtime/components/VChart.client.js

@@ -2,6 +2,7 @@ import {
   defineComponent,
   shallowRef,
   toRefs,
+  ref,
   unref,
   watch,
   computed,
@@ -66,24 +67,27 @@ export default defineComponent({
       // @ts-expect-error unknown computed type error
       () => props.updateOptions || unref(defaultUpdateOptions) || {}
     );
-    const nonEventAttrs = computed(() => omitOn(attrs));
-    const nativeListeners = {};
+    const nativeListeners = ref({});
+    const realAttrs = computed(() => ({
+      ...omitOn(attrs),
+      ...nativeListeners.value
+    }));
     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) {
+      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.value[nativeKey] = attrs[key];
+          return;
+        }
+        if (event.substring(event.length - 4) === "Once") {
+          event = `~${event.substring(0, event.length - 4)}`;
+        }
+        realListeners[event] = attrs[key];
+      });
       if (!inner.value) {
         return;
       }
@@ -224,13 +228,13 @@ export default defineComponent({
       root,
       inner,
       setOption,
-      nonEventAttrs,
+      realAttrs,
       nativeListeners,
       ...publicApi
     };
   },
   render() {
-    const attrs = { ...this.nonEventAttrs, ...this.nativeListeners };
+    const attrs = this.realAttrs;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
     return h(TAG_NAME, attrs, [

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/composables/autoresize.d.ts

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

package/dist/runtime/composables/autoresize.js

@@ -1,25 +1,42 @@
 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({ width: "auto", height: "auto" });
-        onResize?.();
-      };
-      observer = new ResizeObserver(wait ? throttle(callback, wait) : callback);
-      observer.observe(root2);
-    }
-    cleanup(() => {
-      if (root2 && observer) {
-        observer.disconnect();
-        observer = void 0;
+  watch(
+    [root, chart, autoresize],
+    ([root2, chart2, autoresize2], _, onCleanup) => {
+      let ro = null;
+      if (root2 && chart2 && autoresize2) {
+        const { offsetWidth, offsetHeight } = root2;
+        const autoresizeOptions = autoresize2 === true ? {} : autoresize2;
+        const { throttle: wait = 100, onResize } = autoresizeOptions;
+        let initialResizeTriggered = false;
+        const callback = (entry, ob) => {
+          chart2.resize({ height: "auto", width: "auto" });
+          onResize?.(entry, ob);
+        };
+        const resizeCallback = wait ? (
+          // @ts-expect-error callback can accept params
+          throttle(callback, wait)
+        ) : callback;
+        ro = new ResizeObserver((entry, observer) => {
+          if (!initialResizeTriggered) {
+            initialResizeTriggered = true;
+            if (root2.offsetWidth === offsetWidth && root2.offsetHeight === offsetHeight) {
+              return;
+            }
+          }
+          resizeCallback(entry, observer);
+        });
+        ro.observe(root2);
       }
-    });
-  });
+      onCleanup(() => {
+        if (ro) {
+          ro.disconnect();
+          ro = null;
+        }
+      });
+    }
+  );
 }
 export const autoresizeProps = {
   autoresize: [Boolean, Object]

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Nuxt Module for Apache ECharts™",
   "keywords": [
     "vue",
@@ -44,23 +44,27 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.2",
-    "echarts": "^5.5.0"
+    "echarts": "^5.5.1"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.6",
+    "@nuxt/devtools": "^1.3.7",
     "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/module-builder": "^0.8.0",
+    "@nuxt/module-builder": "^0.8.1",
     "@nuxt/schema": "^3.12.2",
     "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.8",
+    "@types/node": "^20.14.9",
     "changelogen": "^0.5.5",
-    "eslint": "^9.5.0",
+    "eslint": "^9.6.0",
     "nuxt": "^3.12.2",
     "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1",
+    "vite": "^5.3.2",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.22"
+    "vue-tsc": "^2.0.24"
+  },
+  "peerDependencies": {
+    "echarts": "^5.5.0"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -68,8 +72,7 @@
         "@typescript-eslint/eslint-plugin>eslint": "^9.0.0",
         "@typescript-eslint/parser>eslint": "^9.0.0",
         "@typescript-eslint/type-utils>eslint": "^9.0.0",
-        "@typescript-eslint/utils>eslint": "^9.0.0",
-        "@opentelemetry/api": "^1.9.0"
+        "@typescript-eslint/utils>eslint": "^9.0.0"
       },
       "ignoreMissing": [
         "webpack"