From: Evan You Date: Wed, 12 Mar 2025 01:27:37 +0000 (+0800) Subject: wip(vapor): fix insertion for vdom interop X-Git-Tag: v3.6.0-alpha.1~16^2~36 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2696f14e1c4f5eda50f07243d5a2930f4bec9c0d;p=thirdparty%2Fvuejs%2Fcore.git wip(vapor): fix insertion for vdom interop --- diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index 4056caebd9..548babebf8 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/packages/runtime-vapor/src/component.ts @@ -146,7 +146,15 @@ export function createComponent( // vdom interop enabled and component is not an explicit vapor component if (appContext.vapor && !component.__vapor) { - return appContext.vapor.vdomMount(component as any, rawProps, rawSlots) + const frag = appContext.vapor.vdomMount( + component as any, + rawProps, + rawSlots, + ) + if (!isHydrating && _insertionParent) { + insert(frag, _insertionParent, _insertionAnchor) + } + return frag } if ( diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts index 0d3dcb9e28..74296e0946 100644 --- a/packages/runtime-vapor/src/componentSlots.ts +++ b/packages/runtime-vapor/src/componentSlots.ts @@ -104,45 +104,47 @@ export function createSlot( ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ + let fragment: DynamicFragment + if (isRef(rawSlots._)) { - return instance.appContext.vapor!.vdomSlot( + fragment = instance.appContext.vapor!.vdomSlot( rawSlots._, name, slotProps, instance, fallback, ) - } + } else { + fragment = __DEV__ ? new DynamicFragment('slot') : new DynamicFragment() + const isDynamicName = isFunction(name) + const renderSlot = () => { + const slot = getSlot(rawSlots, isFunction(name) ? name() : name) + if (slot) { + // create and cache bound version of the slot to make it stable + // so that we avoid unnecessary updates if it resolves to the same slot + fragment.update( + slot._bound || + (slot._bound = () => { + const slotContent = slot(slotProps) + if (slotContent instanceof DynamicFragment) { + slotContent.fallback = fallback + } + return slotContent + }), + ) + } else { + fragment.update(fallback) + } + } - const isDynamicName = isFunction(name) - const fragment = __DEV__ ? new DynamicFragment('slot') : new DynamicFragment() - const renderSlot = () => { - const slot = getSlot(rawSlots, isFunction(name) ? name() : name) - if (slot) { - // create and cache bound version of the slot to make it stable - // so that we avoid unnecessary updates if it resolves to the same slot - fragment.update( - slot._bound || - (slot._bound = () => { - const slotContent = slot(slotProps) - if (slotContent instanceof DynamicFragment) { - slotContent.fallback = fallback - } - return slotContent - }), - ) + // dynamic slot name or has dynamicSlots + if (isDynamicName || rawSlots.$) { + renderEffect(renderSlot) } else { - fragment.update(fallback) + renderSlot() } } - // dynamic slot name or has dynamicSlots - if (isDynamicName || rawSlots.$) { - renderEffect(renderSlot) - } else { - renderSlot() - } - if (!isHydrating && _insertionParent) { insert(fragment, _insertionParent, _insertionAnchor) }