nuxt-echarts 0.0.8 → 0.0.10

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.8",
+  "version": "0.0.10",
   "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/VChartLight.vue

@@ -1,61 +1,63 @@
 <script>
-import { defineComponent } from "vue";
+import {
+  hydrate
+} from "echarts/ssr/client/index";
+import {
+  useAttrs,
+  nextTick,
+  ref,
+  onMounted,
+  defineComponent
+} from "vue";
 export default defineComponent({
   inheritAttrs: false,
-  emits: {}
+  props: {
+    option: Object,
+    theme: {
+      type: [Object, String]
+    },
+    initOptions: Object
+  },
+  emits: {},
+  setup() {
+    const root = ref(null);
+    const attrs = useAttrs();
+    let container;
+    function hydrateChart() {
+      container = root.value?.$el;
+      if (container) {
+        hydrate(container, {
+          on: {
+            click: attrs.onClick,
+            mouseout: attrs.onMouseout,
+            mouseover: attrs.onMouseover
+          }
+        });
+      }
+    }
+    let observer;
+    onMounted(async () => {
+      await nextTick();
+      hydrateChart();
+      observer = new MutationObserver(async () => {
+        hydrateChart();
+      });
+      observer.observe(root.value.$el, {
+        characterData: false,
+        childList: true,
+        attributes: false
+      });
+    });
+    return { root };
+  }
 });
-</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>
+
+<template>
+  <VChartServer
+    ref="root"
+    :option="option"
+    :init-options="initOptions"
+    :theme="theme"
+  />
+</template>

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

@@ -1,26 +1,108 @@
 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;
-}>>> & {
+import { nextTick, type PropType } from 'vue';
+type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined;
+declare const _default: import("vue").DefineComponent<{
+    option: PropType<Option>;
+    theme: {
+        type: PropType<Theme>;
+    };
+    initOptions: PropType<InitOptions>;
+}, {
+    root: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{
+            readonly option?: Option;
+            readonly theme?: Theme;
+            readonly initOptions?: InitOptions;
+            onError?: ((error: unknown) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            option: {
+                type: PropType<import("echarts/core").EChartsCoreOption>;
+            };
+            theme: {
+                type: PropType<Theme>;
+            };
+            initOptions: {
+                type: PropType<import("echarts/core").EChartsInitOpts>;
+            };
+        }>> & {
+            onError?: ((error: unknown) => any) | undefined;
+        }, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $emit: (event: "error", error: unknown) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            option: {
+                type: PropType<import("echarts/core").EChartsCoreOption>;
+            };
+            theme: {
+                type: PropType<Theme>;
+            };
+            initOptions: {
+                type: PropType<import("echarts/core").EChartsInitOpts>;
+            };
+        }>> & {
+            onError?: ((error: unknown) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            error: (error: unknown) => void;
+        }, string, {}, {}, string, {}> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, (cleanupFn: () => void) => void]) => any : (...args: [any, any, (cleanupFn: () => void) => void]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Omit<Readonly<import("vue").ExtractPropTypes<{
+        option: {
+            type: PropType<import("echarts/core").EChartsCoreOption>;
+        };
+        theme: {
+            type: PropType<Theme>;
+        };
+        initOptions: {
+            type: PropType<import("echarts/core").EChartsInitOpts>;
+        };
+    }>> & {
+        onError?: ((error: unknown) => any) | undefined;
+    }, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            fallback?(_: {}): any;
+        };
+    }) | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<ECSSREvent, ECSSRHandler>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    option: PropType<Option>;
+    theme: {
+        type: PropType<Theme>;
+    };
+    initOptions: PropType<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.js

@@ -1,25 +1,39 @@
 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 = () => {
+          chart2.resize({ height: "auto", width: "auto" });
+          onResize?.();
+        };
+        const resizeCallback = wait ? throttle(callback, wait) : callback;
+        ro = new ResizeObserver(() => {
+          if (!initialResizeTriggered) {
+            initialResizeTriggered = true;
+            if (root2.offsetWidth === offsetWidth && root2.offsetHeight === offsetHeight) {
+              return;
+            }
+          }
+          resizeCallback();
+        });
+        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.8",
+  "version": "0.0.10",
   "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"