fix(nuxt): reuse intermediate setup state in `<ClientOnly>` (#25009)

Co-authored-by: julien huang <julien.huang@outlook.fr>

packages/nuxt/src/app/components/client-only.ts

@@ -1,4 +1,4 @@
-import { createElementBlock, createElementVNode, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, ref } from 'vue'
+import { cloneVNode, createElementBlock, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, ref } from 'vue'
 import type { ComponentInternalInstance, ComponentOptions } from 'vue'
 import { getFragmentHTML } from './utils'
 
@@ -33,11 +33,11 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
 
   if (clone.render) {
     // override the component render (non script setup component)
-    clone.render = (ctx: any, ...args: any[]) => {
+    clone.render = (ctx: any, cache: any, $props: any, $setup: any, $data: any, $options: any) => {
-      if (ctx.mounted$) {
+      if ($setup.mounted$ ?? ctx.mounted$) {
-        const res = component.render?.bind(ctx)(ctx, ...args)
+        const res = component.render?.bind(ctx)(ctx, cache, $props, $setup, $data, $options)
         return (res.children === null || typeof res.children === 'string')
-          ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+          ? cloneVNode(res)
           : h(res)
       } else {
         const fragment = getFragmentHTML(ctx._.vnode.el ?? null) ?? ['<div></div>']
@@ -70,19 +70,22 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
 
     return Promise.resolve(component.setup?.(props, ctx) || {})
       .then((setupState) => {
-        return typeof setupState !== 'function'
+        if (typeof setupState !== 'function') {
-          ? { ...setupState, mounted$ }
+          setupState = setupState || {}
-          : (...args: any[]) => {
+          setupState.mounted$ = mounted$
-              if (mounted$.value) {
+          return setupState
-                const res = setupState(...args)
+        }
-                return (res.children === null || typeof res.children === 'string')
+        return (...args: any[]) => {
-                  ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
+          if (mounted$.value) {
-                  : h(res)
+            const res = setupState(...args)
-              } else {
+            return (res.children === null || typeof res.children === 'string')
-                const fragment = getFragmentHTML(instance?.vnode.el ?? null) ?? ['<div></div>']
+              ? cloneVNode(res)
-                return import.meta.client ? createStaticVNode(fragment.join(''), fragment.length) : h('div', ctx.attrs)
+              : h(res)
-              }
+          } else {
-            }
+            const fragment = getFragmentHTML(instance?.vnode.el ?? null) ?? ['<div></div>']
+            return import.meta.client ? createStaticVNode(fragment.join(''), fragment.length) : h('div', ctx.attrs)
+          }
+        }
       })
   }
 

test/fixtures/basic/components/ClientWrapped.client.vue

@@ -4,11 +4,11 @@ function exposedFunc () {
 }
 
 defineExpose({ exposedFunc })
-
+const $hello = ref('hello')
 await new Promise(resolve => setTimeout(resolve, 300))
 
 onMounted(() => {
-  console.log('mounted')
+  console.log('mounted', $hello.value)
 })
 </script>