nuxt-echarts 0.0.4 → 0.0.5

package/README.md

@@ -1,4 +1,4 @@
-![nuxt-echarts](./.github/assets/social-card.png)
+![nuxt-echarts](./docs/public/social-card.png)
 
 # Nuxt ECharts
 
@@ -13,17 +13,17 @@ 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;Release Notes](/CHANGELOG.md)
-- 🏀 &nbsp;Online playground (WIP)
-- 📖 &nbsp;Documentation (WIP)
-  <!-- - [🏀 Online playground](https://stackblitz.com/github/kingyue737/nuxt-echarts?file=playground%2Fapp.vue) -->
-  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
+- [🎞️ &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;**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

package/dist/module.json

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

package/dist/runtime/components/VChartLight.vue

@@ -26,33 +26,14 @@ function hydrateChart() {
     // Use the lightweight runtime to give the chart interactive capabilities
     hydrate(container, {
       on: {
-        click: attrs.onClick
-          ? (params) => {
-              const svg = attrs.onClick!(params)
-              svg && setInnerHTML(svg)
-            }
-          : undefined,
-        mouseout: attrs.onMouseout
-          ? (params) => {
-              const svg = attrs.onMouseout!(params)
-              svg && setInnerHTML(svg)
-            }
-          : undefined,
-        mouseover: attrs.onMouseover
-          ? (params) => {
-              const svg = attrs.onMouseover!(params)
-              svg && setInnerHTML(svg)
-            }
-          : undefined,
+        click: attrs.onClick,
+        mouseout: attrs.onMouseout,
+        mouseover: attrs.onMouseover,
       },
     })
   }
 }
 
-function setInnerHTML(svgStr?: string) {
-  if (container && svgStr) container.innerHTML = svgStr
-}
-
 let observer: MutationObserver
 onMounted(async () => {
   await nextTick()
@@ -63,7 +44,7 @@ onMounted(async () => {
 
   // call 'observe' on that MutationObserver instance,
   // passing it the element to observe, and the options object
-  observer.observe(root.value!, {
+  observer.observe(root.value!.querySelector('.vue-echarts-server')!, {
     characterData: false,
     childList: true,
     attributes: false,

package/dist/runtime/components/VChartServer.vue

@@ -25,7 +25,7 @@ function onError(e: unknown) {
     e instanceof TypeError &&
     e.message === "Cannot read properties of undefined (reading 'link')"
   ) {
-    // @ts-expect-error NuxtIsland.refresh in not defined
+    // @ts-expect-error https://github.com/nuxt/nuxt/issues/27730
     root.value.refresh()
   }
   emits('error', e)
@@ -34,15 +34,17 @@ const root = ref<InstanceType<typeof VChartIsland> | null>(null)
 </script>
 
 <template>
-  <VChartIsland
-    ref="root"
-    :theme="realTheme"
-    :option="option"
-    :init-options="realInitOptions"
-    @error="onError"
-  >
-    <template #fallback>
-      <slot name="fallback" />
-    </template>
-  </VChartIsland>
+  <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-echarts",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Nuxt Module for Apache ECharts™",
   "keywords": [
     "vue",
@@ -32,11 +32,13 @@
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "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",
     "lint": "eslint . --fix",
     "format": "prettier . --write",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "test:types": "vue-tsc --noEmit && nuxi typecheck docs && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.2",
@@ -70,5 +72,8 @@
         "webpack"
       ]
     }
+  },
+  "stackblitz": {
+    "startCommand": "pnpm run dev:prepare && pnpm run dev"
   }
-}
+}