Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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

21
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 type { ComponentInternalInstance, ComponentOptions } from 'vue'
import { getFragmentHTML } from './utils' import { getFragmentHTML } from './utils'
@ -33,11 +33,11 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
if (clone.render) { if (clone.render) {
// override the component render (non script setup component) // 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') 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) : h(res)
} else { } else {
const fragment = getFragmentHTML(ctx._.vnode.el ?? null) ?? ['<div></div>'] 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) || {}) return Promise.resolve(component.setup?.(props, ctx) || {})
.then((setupState) => { .then((setupState) => {
return typeof setupState !== 'function' if (typeof setupState !== 'function') {
? { ...setupState, mounted$ } setupState = setupState || {}
: (...args: any[]) => { setupState.mounted$ = mounted$
return setupState
}
return (...args: any[]) => {
if (mounted$.value) { if (mounted$.value) {
const res = setupState(...args) const res = setupState(...args)
return (res.children === null || typeof res.children === 'string') 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) : h(res)
} else { } else {
const fragment = getFragmentHTML(instance?.vnode.el ?? null) ?? ['<div></div>'] const fragment = getFragmentHTML(instance?.vnode.el ?? null) ?? ['<div></div>']

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

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