Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Co-authored-by: julien huang <julien.huang@outlook.fr>
This commit is contained in:
Daniel Roe 2024-01-02 21:04:58 +00:00 committed by GitHub
parent 46148ffce7
commit 653856627c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/nuxt/src/app/components/client-only.ts
View File

@ -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,19 +70,22 @@ 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 (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)
: 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)
}
}
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')
? cloneVNode(res)
: 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)
}
}
})
}

4
test/fixtures/basic/components/ClientWrapped.client.vue vendored
View File

@ -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>