Merge Vue-ECharts and Nuxt ECharts

[kingyue737]

@Justineo Firstly thank you very much for creating this awesome Vue component, nearly all of my projects depend on Vue-ECharts. When I initiated Nuxt ECharts, I copied code from Vue-ECharts instead of importing it because Vue-ECharts did not have an ESM entry recognized by Node at that time and I also wanted to drop resize-detector and vue-demi since Nuxt 2 does not have Server Component and has already reached EOL.

With the release of v7, I think it may be possible to import Vue-ECharts as a dependency of Nuxt ECharts. I took a try in kingyue737/nuxt-echarts#4. Here are some patches to make Nuxt ECharts work properly:

1. When Nuxt ECharts SSR is enabled, <VChart> will be added as a Client-only component (then it can be paired with a Server-only component). The problem is that Client-only components are rendered only after being mounted. To access the rendered template, we must add await nextTick() in the callback of the onMounted() hook.

@@ -317,7 +317,9 @@ var ECharts = defineComponent({
     const publicApi = usePublicAPI(chart);
     useLoading(chart, loading, loadingOptions);
     useAutoresize(chart, autoresize, root);
-    onMounted(() => {
+    onMounted(async () => {
+      // `.client` components are rendered only after being mounted
+      if (!root.value) await nextTick()
       init$1();
     });
     onBeforeUnmount(() => {

2. Listeners should also be collected in the function init since we can't access the root in setup, which means revert fix: move events collecting from init to setup #779. We can still make native: events work by turning nativeListeners to a ref:

@@ -165,34 +165,34 @@ var ECharts = defineComponent({
       () => props.updateOptions || unwrapInjected(defaultUpdateOptions, {})
     );
     const nonEventAttrs = computed(() => omitOn(attrs));
-    const nativeListeners = {};
+    const nativeListeners = ref({});
     const listeners = getCurrentInstance().proxy.$listeners;
     const realListeners = {};
-    if (!listeners) {
-      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];
-      });
-    } else {
-      Object.keys(listeners).forEach((key) => {
-        if (NATIVE_EVENT_RE.test(key)) {
-          nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] = listeners[key];
-        } else {
-          realListeners[key] = listeners[key];
-        }
-      });
-    }
     function init$1(option) {
+      if (!listeners) {
+        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];
+        });
+      } else {
+        Object.keys(listeners).forEach((key) => {
+          if (NATIVE_EVENT_RE.test(key)) {
+            nativeListeners.value[key.replace(NATIVE_EVENT_RE, "$1")] = listeners[key];
+          } else {
+            realListeners[key] = listeners[key];
+          }
+        });
+      }
       if (!root.value) {
         return;
       }

3. I added an optional module config in Nuxt ECharts which generates a virtual module #build/echarts.mjs imported by <VChart>. Thus, this virtual module will only be imported if VChart is imported. Now if we switch to VChart from vue-echarts, how to achieve a similar effect? Inject import '#build/echarts.mjs' to VChart via a rollup/webpack plugin?

For further merging, do you mean we could move nuxt-echarts to the monorepo of vue-echarts?

[Justineo]

1. To access the rendered template, we must add await nextTick() in the callback of the onMounted() hook.

Can you elaborate on this further? Is it because of Nuxt itself?

3. Now if we switch to VChart from vue-echarts, how to achieve a similar effect?

Is it possible to create a <VChart> component for Nuxt and re-export the same component from vue-echarts while you can keep the import '#build/echarts.mjs' part here?

For further merging, do you mean we could move nuxt-echarts to the monorepo of vue-echarts?

Initially I even think people can just do import VChart from 'vue-echarts/nuxt' but there seems to have quite a lot work to do (updating the build scripts, merging README, docs and demos) so I think it's okay to let them live in separate packages/repos for now.

[kingyue737]

Can you elaborate on this further? Is it because of Nuxt itself?

Yes. See https://nuxt.com/docs/guide/directory-structure/components#client-components

However, the patch I mentioned above does not seem to introduce side effects (maybe better to replace ref with shallowRef).

re-export the same component from vue-echarts

Yes, it works! I'm dumb 🤡

I even think people can just do import VChart from 'vue-echarts/nuxt'

I had the same idea. Maybe we can just add a very simple nuxt module that only adds <VChart> and its style in Nuxt project, and supports both Nuxt 2/3 until Vue-ECharts drops support for Vue 2. I can take a try.

Then users can use Vue-ECharts in nuxt with a simple config:

// nuxt.config.js
{
  modules: [
    'vue-echarts/nuxt'
  ],

If users need advanced features like ECharts SSR, they can switch to Nuxt ECharts. To be honest, even myself do not use ECharts SSR in production because Server component is experimental and Client-only component has several unresolved issues nuxt/nuxt#28070 nuxt/nuxt#27999 and the limitation mentioned above. Most users may not know that ECharts already has server-side rendering capabilities since v5.3.

There is only one concern. Since currently nuxt users may need to use the VChart from vue-echarts/csp because of the way vue-echarts injects style, if they still import injection keys from vue-echarts, there will be two vue-echarts included in the bundle. Is it possible to add a check before style injection and warn if not injected correctly?

if (document)
    document.head.appendChild(document.createElement('style')).textContent="x-vue-echarts{display:block;width:100%;height:100%;min-width:0}\n";
else
    console.warn()

[Justineo]

Yes. See https://nuxt.com/docs/guide/directory-structure/components#client-components

This seems to be a weird limitation though...

maybe better to replace ref with shallowRef

Yes

If users need advanced features like ECharts SSR, they can switch to Nuxt ECharts.

Sounds like we can test out the SSR features in Nuxt ECharts and once we think they are stable enough we can merge those back into Vue-ECharts.

There is only one concern.

Ideally I think Nuxt users should import everything from vue-echarts/nuxt (which should already has CSS extracted out) instead of vue-echarts or vue-echarts/csp so that shouldn't be a problem (I assume?).