mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
fix(nuxt): reuse intermediate setup state in <ClientOnly>
(#25009)
Co-authored-by: julien huang <julien.huang@outlook.fr>
This commit is contained in:
parent
46148ffce7
commit
653856627c
@ -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[]) => {
|
||||
if (ctx.mounted$) {
|
||||
const res = component.render?.bind(ctx)(ctx, ...args)
|
||||
clone.render = (ctx: any, cache: any, $props: any, $setup: any, $data: any, $options: any) => {
|
||||
if ($setup.mounted$ ?? ctx.mounted$) {
|
||||
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,13 +70,16 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
|
||||
|
||||
return Promise.resolve(component.setup?.(props, ctx) || {})
|
||||
.then((setupState) => {
|
||||
return typeof setupState !== 'function'
|
||||
? { ...setupState, mounted$ }
|
||||
: (...args: any[]) => {
|
||||
if (typeof setupState !== 'function') {
|
||||
setupState = setupState || {}
|
||||
setupState.mounted$ = mounted$
|
||||
return setupState
|
||||
}
|
||||
return (...args: any[]) => {
|
||||
if (mounted$.value) {
|
||||
const res = setupState(...args)
|
||||
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(instance?.vnode.el ?? null) ?? ['<div></div>']
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user