@vue/runtime-vapor 3.6.0-beta.6 → 3.6.0-beta.7

package/dist/runtime-vapor.d.ts

@@ -4,7 +4,7 @@ import { IsKeyValues, Namespace, NormalizedStyle, Prettify } from "@vue/shared";
 
 //#region temp/packages/runtime-vapor/src/apiTemplateRef.d.ts
 type NodeRef = string | Ref | ((ref: Element | VaporComponentInstance, refs: Record<string, any>) => void);
-type RefEl = Element | VaporComponentInstance;
+type RefEl = Element | VaporComponentInstance | DynamicFragment | VaporFragment;
 type setRefFn = (el: RefEl, ref: NodeRef, refFor?: boolean, refKey?: string) => NodeRef | undefined;
 export declare function createTemplateRefSetter(): setRefFn;
 //#endregion
@@ -24,8 +24,8 @@ type DynamicSlotSource = StaticSlots | DynamicSlotFn;
 * Wrap a slot function to track the slot owner.
 *
 * This ensures:
-* 1. createSlot gets rawSlots from the correct component (slot owner)
-* 2. Elements inherit the slot owner's scopeId
+* 1. createSlot gets rawSlots from the correct instance (slot owner)
+* 2. elements inherit the slot owner's scopeId
 */
 export declare function withVaporCtx(fn: Function): BlockFn;
 export declare function createSlot(name: string | (() => string), rawProps?: LooseRawProps | null, fallback?: VaporSlot, noSlotted?: boolean, once?: boolean): Block;
@@ -113,7 +113,6 @@ export declare class DynamicFragment extends VaporFragment {
   anchorLabel?: string;
   keyed?: boolean;
   attrs?: Record<string, any>;
-  setAsyncRef?: (instance: VaporComponentInstance) => void;
   keepAliveCtx: VaporKeepAliveContext | null;
   slotOwner: VaporComponentInstance | null;
   constructor(anchorLabel?: string, keyed?: boolean);
@@ -197,8 +196,8 @@ declare class TeleportFragment extends VaporFragment {
 export declare const VaporTeleport: DefineVaporSetupFnComponent<TeleportProps>;
 //#endregion
 //#region temp/packages/runtime-vapor/src/component.d.ts
-export type VaporComponent = FunctionalVaporComponent | VaporComponentOptions | DefineVaporComponent;
-export type FunctionalVaporComponent<Props = {}, Emits extends EmitsOptions = {}, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>> = ((props: Readonly<Props & EmitsToProps<Emits>>, ctx: {
+export type VaporComponent = FunctionalVaporComponent<any> | VaporComponentOptions | DefineVaporComponent;
+export type FunctionalVaporComponent<Props = {}, Emits extends EmitsOptions = {}, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>> = ((props: Props & EmitsToProps<Emits>, ctx: {
   emit: EmitFn<Emits>;
   slots: Slots;
   attrs: Record<string, any>;

package/dist/runtime-vapor.esm-bundler.js

@@ -1,9 +1,9 @@
 /**
-  * @vue/runtime-vapor v3.6.0-beta.6
+  * @vue/runtime-vapor v3.6.0-beta.7
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
-import { EffectScope, NULL_DYNAMIC_COMPONENT, TransitionPropsValidators, VueElementBase, activate, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, checkTransitionMode, createAppAPI, createAsyncComponentContext, createCanSetSetupRefChecker, createInternalObject, createVNode, currentInstance, currentInstance as currentInstance$1, deactivate, devtoolsComponentAdded, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getFunctionalFallthrough, getInheritedScopeIds, handleError, handleMovedChildren, hasCSSTransform, initFeatureFlags, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMismatchAllowed, isRef, isSetEqual, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, markAsyncBoundary, matches, mergeProps, nextUid, normalizeContainer, normalizeRef, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popWarningContext, pushWarningContext, queueJob, queuePostFlushCb, registerHMR, renderSlot, resetShapeFlag, resolveDynamicComponent, resolvePropValue, resolveTeleportTarget, resolveTransitionProps, setCurrentInstance, setDevtoolsHook, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowRef, shouldSetAsProp, simpleSetCurrentInstance, startMeasure, toClassSet, toStyleMap, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useTransitionState, vModelCheckboxInit, vModelCheckboxUpdate, vModelGetValue, vModelSelectInit, vModelSetSelected, vModelTextInit, vModelTextUpdate, vShowHidden, vShowOriginalDisplay, validateProps, warn, warnExtraneousAttributes, warnPropMismatch, watch, xlinkNS } from "@vue/runtime-dom";
+import { EffectScope, NULL_DYNAMIC_COMPONENT, TransitionPropsValidators, VueElementBase, activate, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, checkTransitionMode, createAppAPI, createAsyncComponentContext, createCanSetSetupRefChecker, createInternalObject, createVNode, currentInstance, currentInstance as currentInstance$1, deactivate, devtoolsComponentAdded, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getFunctionalFallthrough, getInheritedScopeIds, handleError, handleMovedChildren, hasCSSTransform, initFeatureFlags, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMismatchAllowed, isRef, isSetEqual, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, markAsyncBoundary, matches, mergeProps, nextUid, normalizeContainer, normalizeRef, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popWarningContext, pushWarningContext, queueJob, queuePostFlushCb, registerHMR, renderSlot, resetShapeFlag, resolveDynamicComponent, resolvePropValue, resolveTeleportTarget, resolveTransitionProps, setCurrentInstance, setCurrentRenderingInstance, setDevtoolsHook, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowRef, shouldSetAsProp, simpleSetCurrentInstance, startMeasure, toClassSet, toStyleMap, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useTransitionState, vModelCheckboxInit, vModelCheckboxUpdate, vModelGetValue, vModelSelectInit, vModelSetSelected, vModelTextInit, vModelTextUpdate, vShowHidden, vShowOriginalDisplay, validateProps, warn, warnExtraneousAttributes, warnPropMismatch, watch, xlinkNS } from "@vue/runtime-dom";
 import { EMPTY_ARR, EMPTY_OBJ, NO, NOOP, camelize, canSetValueDirectly, extend, getEscapedCssVarName, getGlobalThis, hasOwn, includeBooleanAttr, invokeArrayFns, isArray, isFunction, isObject, isOn, isPlainObject, isPromise, isReservedProp, isString, looseEqual, normalizeClass, normalizeCssVarValue, normalizeStyle, parseStringStyle, remove as remove$1, stringifyStyle, toDisplayString } from "@vue/shared";
 import { EffectScope as EffectScope$1, ReactiveEffect, computed, isReactive, isReadonly, isRef as isRef$1, isShallow, markRaw, onEffectCleanup, onScopeDispose as onScopeDispose$1, pauseTracking, proxyRefs, resetTracking, setActiveSub, shallowReadArray, shallowRef as shallowRef$1, toRaw, toReactive, toReadonly, traverse, unref, watch as watch$1 } from "@vue/reactivity";
 
@@ -720,7 +720,8 @@ const decorate$1 = (t) => {
 	t.__vapor = true;
 	return t;
 };
-const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots }) => {
+const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots, expose }) => {
+	expose();
 	ensureTransitionHooksRegistered();
 	const performAppear = isHydrating$1 ? hydrateTransitionImpl() : void 0;
 	const children = slots.default && slots.default();
@@ -743,6 +744,7 @@ const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots }) => {
 const getTransitionHooksContext = (key, props, state, instance, postClone) => {
 	const { leavingNodes } = state;
 	return {
+		isLeaving: () => leavingNodes.has(key),
 		setLeavingNodeCache: (el) => {
 			leavingNodes.set(key, el);
 		},
@@ -863,7 +865,7 @@ function setTransitionHooks$1(block, hooks) {
 }
 
 //#endregion
-//#region packages/runtime-vapor/src/vdominteropState.ts
+//#region packages/runtime-vapor/src/vdomInteropState.ts
 let isInteropEnabled = false;
 function setInteropEnabled() {
 	isInteropEnabled = true;
@@ -925,7 +927,9 @@ const VaporKeepAliveImpl = /* @__PURE__ */ defineVaporComponent({
 		],
 		max: [String, Number]
 	},
-	setup(props, { slots }) {
+	setup(props, { slots, expose }) {
+		let exposed;
+		expose(exposed);
 		if (!slots.default) return;
 		const keepAliveInstance = currentInstance;
 		const cache = /* @__PURE__ */ new Map();
@@ -938,6 +942,7 @@ const VaporKeepAliveImpl = /* @__PURE__ */ defineVaporComponent({
 		if (!!(process.env.NODE_ENV !== "production")) {
 			const rerender = keepAliveInstance.hmrRerender;
 			keepAliveInstance.hmrRerender = () => {
+				keepAliveInstance.exposed = null;
 				cache.forEach((cached) => resetCachedShapeFlag(cached));
 				cache.clear();
 				keys.clear();
@@ -1202,10 +1207,12 @@ const vaporInteropImpl = {
 		} else if (vnode.vb) remove(vnode.vb, container);
 		remove(vnode.anchor, container);
 	},
-	slot(n1, n2, container, anchor, parentComponent) {
+	slot(n1, n2, container, anchor, parentComponent, parentSuspense) {
 		if (!n1) {
 			const prev = currentInstance;
+			let prevSuspense = null;
 			simpleSetCurrentInstance(parentComponent);
+			if (parentSuspense) prevSuspense = setParentSuspense(parentSuspense);
 			let selfAnchor;
 			const { slot, fallback } = n2.vs;
 			const propsRef = n2.vs.ref = shallowRef(n2.props);
@@ -1216,6 +1223,7 @@ const vaporInteropImpl = {
 				if (!isValidBlock(slotBlock)) slotBlock = renderSlotFallback(slotBlock, vaporFallback, emptyFrag);
 			}
 			if (isFragment(slotBlock)) selfAnchor = slotBlock.anchor;
+			if (parentSuspense) setParentSuspense(prevSuspense);
 			simpleSetCurrentInstance(prev);
 			if (!selfAnchor) selfAnchor = /* @__PURE__ */ createTextNode();
 			insert(n2.el = n2.anchor = selfAnchor, container, anchor);
@@ -1288,6 +1296,7 @@ let vdomHydrateNode;
 * Mount VNode in vapor
 */
 function mountVNode(internals, vnode, parentComponent) {
+	const suspense = parentSuspense || parentComponent && parentComponent.suspense;
 	const frag = new VaporFragment([]);
 	frag.vnode = vnode;
 	let isMounted = false;
@@ -1315,7 +1324,7 @@ function mountVNode(internals, vnode, parentComponent) {
 			simpleSetCurrentInstance(parentComponent);
 			if (!isMounted) {
 				if (transition) setTransitionHooks(vnode, transition);
-				internals.p(null, vnode, parentNode, anchor, parentComponent, null, void 0, vnode.slotScopeIds);
+				internals.p(null, vnode, parentNode, anchor, parentComponent, suspense, void 0, vnode.slotScopeIds);
 				onScopeDispose(unmount, true);
 				isMounted = true;
 			} else internals.m(vnode, parentNode, anchor, 2, parentComponent);
@@ -1331,13 +1340,16 @@ function mountVNode(internals, vnode, parentComponent) {
 * Mount vdom component in vapor
 */
 function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots, isSingleRoot) {
+	const suspense = parentSuspense || parentComponent && parentComponent.suspense;
+	const useBridge = shouldUseRendererBridge(component);
+	const comp = useBridge ? ensureRendererBridge(component) : component;
 	const frag = new VaporFragment([]);
-	const vnode = frag.vnode = createVNode(component, rawProps && extend({}, new Proxy(rawProps, rawPropsProxyHandlers)));
+	const vnode = frag.vnode = createVNode(comp, rawProps && extend({}, new Proxy(rawProps, rawPropsProxyHandlers)));
 	if (currentKeepAliveCtx) {
 		currentKeepAliveCtx.processShapeFlag(frag);
 		setCurrentKeepAliveCtx(null);
 	}
-	const wrapper = new VaporComponentInstance({ props: component.props }, rawProps, rawSlots, parentComponent ? parentComponent.appContext : void 0, void 0);
+	const wrapper = new VaporComponentInstance(useBridge ? comp : { props: component.props }, rawProps, rawSlots, parentComponent ? parentComponent.appContext : void 0, void 0);
 	vnode.vi = (instance) => {
 		instance.props = shallowReactive(wrapper.props);
 		const attrs = instance.attrs = createInternalObject();
@@ -1372,7 +1384,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 			simpleSetCurrentInstance(parentComponent);
 			if (!isMounted) {
 				if (transition) setTransitionHooks(vnode, transition);
-				internals.mt(vnode, parentNode, anchor, parentComponent, null, void 0, false);
+				internals.mt(vnode, parentNode, anchor, parentComponent, suspense, void 0, false);
 				if (rawRef) setRef(rawRef, null, null, vnode);
 				onScopeDispose(unmount, true);
 				isMounted = true;
@@ -1393,10 +1405,27 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 	};
 	return frag;
 }
+const rendererBridgeCache = /* @__PURE__ */ new WeakMap();
+/**
+* Teleport/Suspense are renderer primitives (`__isTeleport` / `__isSuspense`),
+* not regular components with their own render pipeline.
+*
+* We wrap them with a tiny functional bridge so they can pass through the
+* interop component mount path while preserving built-in vnode semantics.
+*/
+function shouldUseRendererBridge(component) {
+	return !!(component.__isTeleport || component.__isSuspense);
+}
+function ensureRendererBridge(component) {
+	let bridge = rendererBridgeCache.get(component);
+	if (!bridge) rendererBridgeCache.set(component, bridge = (props, { slots }) => createVNode(component, props, slots));
+	return bridge;
+}
 /**
 * Mount vdom slot in vapor
 */
 function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallback) {
+	const suspense = parentSuspense || parentComponent.suspense;
 	const frag = new VaporFragment([]);
 	if (fallback && !frag.fallback) frag.fallback = fallback;
 	let isMounted = false;
@@ -1458,7 +1487,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 					remove(currentBlock, parentNode);
 					currentBlock = null;
 				}
-				internals.p(currentVNode, resolved, parentNode, anchor, parentComponent, null, void 0, resolved.slotScopeIds);
+				internals.p(currentVNode, resolved, parentNode, anchor, parentComponent, suspense, void 0, resolved.slotScopeIds);
 				currentVNode = resolved;
 				frag.nodes = resolved.el;
 				return;
@@ -1889,8 +1918,8 @@ function getScopeOwner() {
 * Wrap a slot function to track the slot owner.
 *
 * This ensures:
-* 1. createSlot gets rawSlots from the correct component (slot owner)
-* 2. Elements inherit the slot owner's scopeId
+* 1. createSlot gets rawSlots from the correct instance (slot owner)
+* 2. elements inherit the slot owner's scopeId
 */
 function withVaporCtx(fn) {
 	const owner = getScopeOwner();
@@ -1996,6 +2025,8 @@ var RenderEffect = class extends ReactiveEffect {
 		}
 		this.job = job;
 		this.i = instance;
+		this.flags |= 128;
+		this.job.flags |= 2;
 	}
 	fn() {
 		const instance = this.i;
@@ -2131,16 +2162,19 @@ var DynamicFragment = class extends VaporFragment {
 			const scope = keepAliveCtx && keepAliveCtx.getScope(this.current);
 			if (scope) this.scope = scope;
 			else this.scope = new EffectScope$1();
-			const prevOwner = setCurrentSlotOwner(this.slotOwner);
-			const prevCtx = setCurrentKeepAliveCtx(keepAliveCtx);
-			let prevBranchKey;
-			if (keepAliveCtx && this.keyed) prevBranchKey = keepAliveCtx.setCurrentBranchKey(this.current);
-			const prev = parent && instance ? setCurrentInstance(instance) : void 0;
-			this.nodes = this.scope.run(render) || [];
-			if (prev !== void 0) setCurrentInstance(...prev);
-			if (keepAliveCtx && this.keyed) keepAliveCtx.setCurrentBranchKey(prevBranchKey);
-			setCurrentKeepAliveCtx(prevCtx);
-			setCurrentSlotOwner(prevOwner);
+			const prevSlotOwner = setCurrentSlotOwner(this.slotOwner);
+			const prevKeepAliveCtx = setCurrentKeepAliveCtx(keepAliveCtx);
+			const needBranchKey = keepAliveCtx && this.keyed;
+			const prevBranchKey = needBranchKey ? keepAliveCtx.setCurrentBranchKey(this.current) : void 0;
+			const prevInstance = setCurrentInstance(instance);
+			try {
+				this.nodes = this.scope.run(render) || [];
+			} finally {
+				setCurrentInstance(...prevInstance);
+				if (needBranchKey) keepAliveCtx.setCurrentBranchKey(prevBranchKey);
+				setCurrentKeepAliveCtx(prevKeepAliveCtx);
+				setCurrentSlotOwner(prevSlotOwner);
+			}
 			if (this.keyed) setKey(this.nodes, this.current);
 			if (transition) this.$transition = applyTransitionHooks(this.nodes, transition);
 			if (keepAliveCtx) keepAliveCtx.processShapeFlag(this.nodes);
@@ -2357,7 +2391,7 @@ var TeleportFragment = class extends VaporFragment {
 		};
 		this.rawProps = props;
 		this.rawSlots = slots;
-		this.parentComponent = currentInstance;
+		this.parentComponent = getScopeOwner();
 		this.anchor = isHydrating$1 ? void 0 : !!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment("teleport end") : /* @__PURE__ */ createTextNode();
 		renderEffect(() => {
 			const prevTo = this.resolvedProps && this.resolvedProps.to;
@@ -3187,9 +3221,7 @@ function defineVaporAsyncComponent(source) {
 }
 function createInnerComp(comp, parent, frag) {
 	const { rawProps, rawSlots, appContext } = parent;
-	const instance = createComponent(comp, rawProps, rawSlots, void 0, void 0, appContext);
-	frag && frag.setAsyncRef && frag.setAsyncRef(instance);
-	return instance;
+	return createComponent(comp, rawProps, rawSlots, void 0, void 0, appContext);
 }
 
 //#endregion
@@ -3385,7 +3417,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
 	const canUseFastRemove = !!(flags & 1);
 	const isComponent = !!(flags & 2);
 	const selectors = [];
-	const scopeOwner = currentSlotOwner;
+	const slotOwner = currentSlotOwner;
 	if (!!(process.env.NODE_ENV !== "production") && !instance) warn("createFor() can only be used inside setup()");
 	const renderList = () => {
 		const source = normalizeSource(src());
@@ -3409,7 +3441,6 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
 				}
 			}
 		} else {
-			const prevOwner = setCurrentSlotOwner(scopeOwner);
 			parent = parent || parentAnchor.parentNode;
 			if (!oldLength) {
 				if (frag.fallback && frag.nodes[0].length > 0) remove(frag.nodes[0], parent);
@@ -3566,7 +3597,6 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
 					for (const block of newBlocks) block.prevAnchor = block.next = block.prev = void 0;
 				}
 			}
-			setCurrentSlotOwner(prevOwner);
 		}
 		if (!isFallback) {
 			frag.nodes = [oldBlocks = newBlocks];
@@ -3606,7 +3636,15 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
 	};
 	if (setup) setup({ createSelector });
 	if (flags & 4) renderList();
-	else renderEffect(renderList);
+	else renderEffect(() => {
+		if (!isMounted) return renderList();
+		const prevOwner = setCurrentSlotOwner(slotOwner);
+		try {
+			renderList();
+		} finally {
+			setCurrentSlotOwner(prevOwner);
+		}
+	});
 	if (!isHydrating$1) {
 		if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
 	} else advanceHydrationNode(_isLastInsertion ? _insertionParent : parentAnchor);
@@ -3746,7 +3784,16 @@ function ensureCleanup(el) {
 function createTemplateRefSetter() {
 	const instance = currentInstance$1;
 	const oldRefMap = /* @__PURE__ */ new WeakMap();
+	const setRefMap = /* @__PURE__ */ new WeakMap();
 	return (el, ref, refFor, refKey) => {
+		if (isDynamicFragment(el) || isVaporComponent(el) && isAsyncWrapper(el)) {
+			const frag = isDynamicFragment(el) ? el : el.block;
+			const doSet = () => oldRefMap.set(el, setRef$1(instance, el, ref, oldRefMap.get(el), refFor, refKey));
+			const prevSet = setRefMap.get(frag);
+			if (prevSet && frag.onUpdated) remove$1(frag.onUpdated, prevSet);
+			(frag.onUpdated || (frag.onUpdated = [])).push(doSet);
+			setRefMap.set(frag, doSet);
+		}
 		const oldRef = setRef$1(instance, el, ref, oldRefMap.get(el), refFor, refKey);
 		oldRefMap.set(el, oldRef);
 		return oldRef;
@@ -3757,17 +3804,13 @@ function createTemplateRefSetter() {
 */
 function setRef$1(instance, el, ref, oldRef, refFor = false, refKey) {
 	if (!instance || instance.isUnmounted) return;
-	if (isFragment(el) && el.setRef) {
+	if (isInteropEnabled && isFragment(el) && el.setRef) {
 		el.setRef(instance, ref, refFor, refKey);
 		return;
 	}
 	if (isVaporComponent(el) && isAsyncWrapper(el)) {
-		const frag = el.block;
-		if (!el.type.__asyncResolved) {
-			frag.setAsyncRef = (i) => setRef$1(instance, i, ref, oldRef, refFor);
-			return;
-		}
-		el = frag.nodes;
+		if (!el.type.__asyncResolved) return;
+		el = el.block.nodes;
 	}
 	const setupState = !!(process.env.NODE_ENV !== "production") ? instance.setupState || {} : null;
 	const refValue = getRefValue(el);
@@ -3784,11 +3827,17 @@ function setRef$1(instance, el, ref, oldRef, refFor = false, refKey) {
 			if (!!(process.env.NODE_ENV !== "production") && canSetSetupRef(oldRef)) setupState[oldRef] = null;
 		} else if (isRef$1(oldRef)) {
 			if (canSetRef(oldRef)) oldRef.value = null;
+		} else if (isFunction(oldRef) && isDynamicFragment(el)) callWithErrorHandling(oldRef, instance, 12, [null, refs]);
+	} else if (oldRef != null && isDynamicFragment(el)) {
+		if (isFunction(oldRef)) callWithErrorHandling(oldRef, instance, 12, [null, refs]);
+		else if (refFor) {
+			const cleanup = refCleanups.get(el);
+			if (cleanup) cleanup.fn();
 		}
 	}
 	if (isFunction(ref)) {
 		const invokeRefSetter = (value) => {
-			callWithErrorHandling(ref, currentInstance$1, 12, [value, refs]);
+			callWithErrorHandling(ref, instance, 12, [value, refs]);
 		};
 		invokeRefSetter(refValue);
 		ensureCleanup(el).fn = () => invokeRefSetter(null);
@@ -3840,7 +3889,11 @@ function setRef$1(instance, el, ref, oldRef, refFor = false, refKey) {
 }
 const getRefValue = (el) => {
 	if (isVaporComponent(el)) return getExposed(el) || el;
-	else if (el instanceof DynamicFragment) return getRefValue(el.nodes);
+	else if (isTeleportFragment(el)) return null;
+	else if (isDynamicFragment(el)) {
+		if (isArray(el.nodes)) return null;
+		return getRefValue(el.nodes);
+	}
 	return el;
 };
 
@@ -3864,6 +3917,7 @@ function setVarsOnBlock(block, vars) {
 	if (block instanceof Node) setVarsOnNode(block, vars);
 	else if (isArray(block)) block.forEach((child) => setVarsOnBlock(child, vars));
 	else if (isVaporComponent(block)) setVarsOnBlock(block.block, vars);
+	else if (isTeleportFragment(block)) return;
 	else setVarsOnBlock(block.nodes, vars);
 }
 
@@ -3875,6 +3929,7 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
 	const _isLastInsertion = isLastInsertion;
 	if (!isHydrating$1) resetInsertionState();
 	const frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component") : new DynamicFragment();
+	const scopeOwner = getScopeOwner();
 	const renderFn = () => {
 		const value = getter();
 		const appContext = currentInstance && currentInstance.appContext || emptyContext;
@@ -3892,7 +3947,7 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
 				}
 				return frag;
 			}
-			return createComponentWithFallback(resolveDynamicComponent(value), rawProps, rawSlots, isSingleRoot, once, appContext);
+			return createComponentWithFallback(withScopeOwner(scopeOwner, () => resolveDynamicComponent(value)), rawProps, rawSlots, isSingleRoot, once, appContext);
 		}, value);
 	};
 	if (once) renderFn();
@@ -3902,6 +3957,14 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
 	} else if (_isLastInsertion) advanceHydrationNode(_insertionParent);
 	return frag;
 }
+function withScopeOwner(owner, fn) {
+	const prev = setCurrentRenderingInstance(owner);
+	try {
+		return fn();
+	} finally {
+		setCurrentRenderingInstance(prev);
+	}
+}
 
 //#endregion
 //#region packages/runtime-vapor/src/directives/vShow.ts
@@ -4030,7 +4093,8 @@ const VaporTransitionGroupImpl = /* @__PURE__ */ defineVaporComponent({
 		tag: String,
 		moveClass: String
 	}),
-	setup(props, { slots }) {
+	setup(props, { slots, expose }) {
+		expose();
 		ensureTransitionHooksRegistered();
 		const instance = currentInstance;
 		const state = useTransitionState();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-vapor",
-  "version": "3.6.0-beta.6",
+  "version": "3.6.0-beta.7",
   "description": "@vue/runtime-vapor",
   "main": "index.js",
   "module": "dist/runtime-vapor.esm-bundler.js",
@@ -38,10 +38,10 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/dev/packages/runtime-vapor#readme",
   "dependencies": {
-    "@vue/shared": "3.6.0-beta.6",
-    "@vue/reactivity": "3.6.0-beta.6"
+    "@vue/shared": "3.6.0-beta.7",
+    "@vue/reactivity": "3.6.0-beta.7"
   },
   "peerDependencies": {
-    "@vue/runtime-dom": "3.6.0-beta.6"
+    "@vue/runtime-dom": "3.6.0-beta.7"
   }
 }