feat: add server component

package.json

@@ -2,6 +2,13 @@
   "name": "nuxt-echarts",
   "version": "0.0.3",
   "description": "Nuxt Module for Apache ECharts™",
+  "keywords": [
+    "vue",
+    "nuxt",
+    "echarts",
+    "data-visualization",
+    "charts"
+  ],
   "author": "Yue JIN <yuejin13@fudan.edu.cn>",
   "repository": "kingyue737/nuxt-echarts",
   "license": "MIT",

playground/app.vue

@@ -10,10 +10,6 @@ function random() {
 
 function getData(): ECOption {
   return {
-    textStyle: {
-      // fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
     dataset: {
       dimensions: ['Product', '2015', '2016', '2017'],
       source: [
@@ -58,6 +54,9 @@ const loadingOptions = {
   maskColor: 'rgba(255, 255, 255, 0.4)',
 }
 const option = shallowRef(getData())
+function refreshData() {
+  option.value = getData()
+}
 </script>
 
 <template>
@@ -70,4 +69,8 @@ const option = shallowRef(getData())
       :loading-options="loadingOptions"
     />
   </div>
+  <div style="width: 800px; height: 400px">
+    <VChartServer :option="option" />
+  </div>
+  <button @click="refreshData">Refresh</button>
 </template>

playground/nuxt.config.ts

@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
   echarts: {
+    ssr: true,
+    renderer: 'svg',
     charts: ['BarChart'],
     components: ['DatasetComponent', 'GridComponent'],
   },

src/module.ts

@@ -23,16 +23,13 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     renderer: 'canvas',
   },
-  setup(options, _nuxt) {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve('./runtime/plugin'))
-    const entry = resolver.resolve('./runtime/VChart')
-    addComponent({
-      name: 'VChart',
-      filePath: entry,
-    })
+    const entry = resolver.resolve('./runtime/components/VChart')
+    addComponent({ name: 'VChart', filePath: entry })
 
     const rendererName =
       options.renderer === 'canvas' ? 'CanvasRenderer' : 'SVGRenderer'
@@ -99,5 +96,18 @@ export default defineNuxtModule<ModuleOptions>({
       'LOADING_OPTIONS_KEY',
     ]
     injectionKeys.forEach((name) => addImports({ name, from: entry }))
+
+    if (options.ssr) {
+      //@ts-expect-error We create the `experimental` object if it doesn't exist yet
+      nuxt.options.experimental ||= {}
+      nuxt.options.experimental.componentIslands = true
+
+      addComponent({
+        name: 'VChartServer',
+        filePath: resolver.resolve(
+          'runtime/components/VChartServer.server.vue',
+        ),
+      })
+    }
   },
 })

src/runtime/components/VChart.ts

@@ -36,7 +36,7 @@ import {
 } from '../composables'
 import { isOn, omitOn } from '../utils/on'
 import { register, TAG_NAME, type EChartsElement } from '../utils/wc'
-import './style.css'
+import '../style.css'
 import '#build/echarts.mjs'
 
 const wcRegistered = register()

src/runtime/components/VChartServer.server.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { ref } from 'vue'
+import { defu } from 'defu'
+import type { Option, InitOptions } from '../types'
+
+const props = defineProps<{ option: Option; initOption?: InitOptions }>()
+
+const svgStr = ref('')
+
+const initOption: InitOptions = defu(
+  { renderer: 'svg', ssr: true },
+  props.initOption,
+  {
+    width: 400,
+    height: 300,
+  },
+)
+let chart = echarts.init(null, null, initOption)
+
+chart.setOption(props.option)
+svgStr.value = chart.renderToSVGString()
+
+chart.dispose()
+
+// @ts-expect-error release memory
+chart = null
+</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>

src/runtime/style.css

@@ -1,4 +1,5 @@
-x-vue-echarts {
+x-vue-echarts,
+.vue-echarts-container {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -11,3 +12,7 @@ x-vue-echarts {
   width: auto !important;
   height: auto !important;
 }
+.vue-echarts-container .vue-echarts-inner > svg {
+  width: 100%;
+  height: 100%;
+}