@vue/runtime-vapor 3.6.0-alpha.7 → 3.6.0-beta.1

package/dist/runtime-vapor.d.ts

@@ -1,5 +1,5 @@
 import { VNode, GenericComponentInstance, TransitionHooks, TransitionState, TransitionProps, Plugin, SchedulerJob, EmitsOptions, ComponentObjectPropsOptions, ExtractPropTypes, ReservedProps, AllowedComponentProps, ComponentCustomProps, EmitsToProps, ExtractDefaultPropTypes, EmitFn, ComponentTypeEmits, TypeEmitsToOptions, GenericAppContext, EffectScope as EffectScope$1, ShallowUnwrapRef, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, AsyncComponentInternalOptions, ComponentPropsOptions, CreateAppFunction, AsyncComponentLoader, AsyncComponentOptions, DirectiveModifiers, CustomElementOptions, VueElementBase } from '@vue/runtime-dom';
-import { Ref, EffectScope, ReactiveEffect, ComputedRef, ShallowRef } from '@vue/reactivity';
+import { Ref, EffectScope, ReactiveEffect, ShallowRef } from '@vue/reactivity';
 import { Prettify, IsKeyValues, Namespace, NormalizedStyle } from '@vue/shared';
 
 type NodeRef = string | Ref | ((ref: Element | VaporComponentInstance, refs: Record<string, any>) => void);
@@ -29,6 +29,10 @@ declare class DynamicFragment extends VaporFragment {
     anchor: Node;
     scope: EffectScope | undefined;
     current?: BlockFn;
+    pending?: {
+        render?: BlockFn;
+        key: any;
+    };
     fallback?: BlockFn;
     anchorLabel?: string;
     attrs?: Record<string, any>;
@@ -93,9 +97,7 @@ type DynamicSlot = {
     name: string;
     fn: VaporSlot;
 };
-type DynamicSlotFn = (() => DynamicSlot | DynamicSlot[]) & {
-    _cache?: ComputedRef<DynamicSlot | DynamicSlot[]>;
-};
+type DynamicSlotFn = () => DynamicSlot | DynamicSlot[];
 type DynamicSlotSource = StaticSlots | DynamicSlotFn;
 /**
  * Wrap a slot function to track the slot owner.
@@ -145,7 +147,7 @@ type VaporComponentInstanceConstructor<T extends VaporComponentInstance> = {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-    new (props?: T['props']): T;
+    new (...args: any[]): T;
 };
 export type DefineVaporComponent<RuntimePropsOptions = {}, RuntimePropsKeys extends string = string, Emits extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block, TypeRefs extends Record<string, unknown> = {}, MakeDefaultsOptional extends boolean = true, InferredProps = string extends RuntimePropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
     [key in RuntimePropsKeys]?: any;
@@ -265,6 +267,7 @@ export declare class VaporComponentInstance<Props extends Record<string, any> =
     renderEffects?: RenderEffect[];
     hasFallthrough: boolean;
     shapeFlag?: number;
+    oncePropsCache?: Record<string | symbol, any>;
     isMounted: boolean;
     isUnmounted: boolean;
     isDeactivated: boolean;
@@ -458,6 +461,16 @@ export declare function createInvoker(handler: (...args: any[]) => any): (...arg
 
 export declare function createIf(condition: () => any, b1: BlockFn, b2?: BlockFn, once?: boolean): Block;
 
+/**
+ * Create a dynamic fragment keyed by a reactive value for Vapor transitions.
+ * The fragment is re-rendered when the key changes to trigger enter/leave
+ * animations.
+ *
+ * Example:
+ * <VaporTransition>
+ *   <h1 :key="count">{{ count }}</h1>
+ * </VaporTransition>
+ */
 export declare function createKeyedFragment(key: () => any, render: BlockFn): Block;
 
 type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>;

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

@@ -1,11 +1,11 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.7
+* @vue/runtime-vapor v3.6.0-beta.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { isMismatchAllowed, warn, callWithAsyncErrorHandling, currentInstance, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, queuePostFlushCb, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, watch, onMounted, onUpdated, onBeforeUnmount, isAsyncWrapper, getComponentName, matches, devtoolsComponentAdded, resetShapeFlag, isKeepAlive, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, isRef, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, setCurrentInstance, startMeasure, queueJob, TransitionPropsValidators, leaveCbKey, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, warnExtraneousAttributes, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, markAsyncBoundary, getFunctionalFallthrough, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, createCanSetSetupRefChecker, baseUseCssVars, setVarsOnNode, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation } from '@vue/runtime-dom';
+import { isMismatchAllowed, warn, callWithAsyncErrorHandling, currentInstance, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, queuePostFlushCb, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, watch, onMounted, onUpdated, onBeforeUnmount, isAsyncWrapper, getComponentName, matches, devtoolsComponentAdded, resetShapeFlag, isKeepAlive, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, isRef, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, setCurrentInstance, resolvePropValue, startMeasure, queueJob, TransitionPropsValidators, leaveCbKey, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, warnExtraneousAttributes, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, markAsyncBoundary, getFunctionalFallthrough, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, createCanSetSetupRefChecker, baseUseCssVars, setVarsOnNode, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation } from '@vue/runtime-dom';
 import { isArray, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, normalizeCssVarValue, getEscapedCssVarName, isFunction, extend, invokeArrayFns, isReservedProp, EMPTY_OBJ, hasOwn, EMPTY_ARR, NO, YES, isPromise, getGlobalThis, isPlainObject, isObject, remove as remove$1, NOOP, looseEqual } from '@vue/shared';
-import { onEffectCleanup, pauseTracking, resetTracking, computed, ReactiveEffect, setActiveSub, EffectScope, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, toRaw, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
+import { onEffectCleanup, computed, onScopeDispose as onScopeDispose$1, pauseTracking, resetTracking, ReactiveEffect, setActiveSub, EffectScope, markRaw, unref, proxyRefs, toRaw, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
 let insertionParent;
 let insertionAnchor;
@@ -916,22 +916,19 @@ const VaporKeepAliveImpl = defineVaporComponent({
     };
     const processFragment = (frag) => {
       const [innerBlock, interop] = getInnerBlock(frag.nodes);
-      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return false;
       if (interop) {
         if (cache.has(innerBlock.vnode.type)) {
           innerBlock.vnode.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock, props, true)) {
-          innerBlock.vnode.shapeFlag |= 256;
-        }
+        innerBlock.vnode.shapeFlag |= 256;
       } else {
         if (cache.has(innerBlock.type)) {
           innerBlock.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock, props)) {
-          innerBlock.shapeFlag |= 256;
-        }
+        innerBlock.shapeFlag |= 256;
       }
+      return true;
     };
     const cacheFragment = (fragment) => {
       const [innerBlock, interop] = getInnerBlock(fragment.nodes);
@@ -1008,9 +1005,11 @@ const VaporKeepAliveImpl = defineVaporComponent({
     const injectKeepAliveHooks = (frag) => {
       (frag.onBeforeTeardown || (frag.onBeforeTeardown = [])).push(
         (oldKey, nodes, scope) => {
-          processFragment(frag);
-          keptAliveScopes.set(oldKey, scope);
-          return true;
+          if (processFragment(frag)) {
+            keptAliveScopes.set(oldKey, scope);
+            return true;
+          }
+          return false;
         }
       );
       (frag.onBeforeMount || (frag.onBeforeMount = [])).push(
@@ -1078,7 +1077,7 @@ function getInstanceFromCache(cached) {
   return cached.vnode.component;
 }
 function activate(instance, parentNode, anchor) {
-  insert(instance.block, parentNode, anchor);
+  move(instance.block, parentNode, anchor, 0, instance);
   queuePostFlushCb(() => {
     instance.isDeactivated = false;
     if (instance.a) invokeArrayFns(instance.a);
@@ -1088,7 +1087,7 @@ function activate(instance, parentNode, anchor) {
   }
 }
 function deactivate(instance, container) {
-  insert(instance.block, container);
+  move(instance.block, container, null, 1, instance);
   queuePostFlushCb(() => {
     if (instance.da) invokeArrayFns(instance.da);
     instance.isDeactivated = true;
@@ -1117,7 +1116,7 @@ function setParentSuspense(suspense) {
   }
 }
 
-const interopKey = Symbol(`interop`);
+const interopKey = /* @__PURE__ */ Symbol(`interop`);
 const vaporInteropImpl = {
   mount(vnode, container, anchor, parentComponent, parentSuspense) {
     let selfAnchor = vnode.el = vnode.anchor = createTextNode();
@@ -1576,7 +1575,26 @@ function propGetter(rawProps, key) {
 }
 
 function resolveSource(source) {
-  return isFunction(source) ? source() : source;
+  return isFunction(source) ? resolveFunctionSource(source) : source;
+}
+function resolveFunctionSource(source) {
+  if (source._cache) {
+    return source._cache.value;
+  }
+  const parent = currentInstance && currentInstance.parent;
+  if (parent) {
+    source._cache = computed(() => {
+      const prev = setCurrentInstance(parent);
+      try {
+        return source();
+      } finally {
+        setCurrentInstance(...prev);
+      }
+    });
+    onScopeDispose$1(() => source._cache = void 0);
+    return source._cache.value;
+  }
+  return source();
 }
 function getPropsProxyHandlers(comp, once) {
   if (comp.__propsHandlers) {
@@ -1597,13 +1615,15 @@ function getPropsProxyHandlers(comp, once) {
       while (i--) {
         source = dynamicSources[i];
         isDynamic = isFunction(source);
-        source = isDynamic ? source() : source;
+        source = isDynamic ? resolveFunctionSource(
+          source
+        ) : source;
         for (rawKey in source) {
           if (camelize(rawKey) === key) {
             return resolvePropValue(
               propsOptions,
               key,
-              isDynamic ? source[rawKey] : source[rawKey](),
+              isDynamic ? source[rawKey] : resolveFunctionSource(source[rawKey]),
               instance,
               resolveDefault
             );
@@ -1631,14 +1651,23 @@ function getPropsProxyHandlers(comp, once) {
       true
     );
   };
-  const getPropValue = once ? (...args) => {
-    pauseTracking();
-    const value = getProp(...args);
-    resetTracking();
-    return value;
-  } : getProp;
+  const withOnceCache = (getter) => {
+    return ((instance, key) => {
+      const cache = instance.oncePropsCache || (instance.oncePropsCache = {});
+      if (!(key in cache)) {
+        pauseTracking();
+        try {
+          cache[key] = getter(instance, key);
+        } finally {
+          resetTracking();
+        }
+      }
+      return cache[key];
+    });
+  };
+  const getOnceProp = withOnceCache(getProp);
   const propsHandlers = propsOptions ? {
-    get: (target, key) => getPropValue(target, key),
+    get: (target, key) => (once ? getOnceProp : getProp)(target, key),
     has: (_, key) => isProp(key),
     ownKeys: () => Object.keys(propsOptions),
     getOwnPropertyDescriptor(target, key) {
@@ -1646,7 +1675,7 @@ function getPropsProxyHandlers(comp, once) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getPropValue(target, key)
+          get: () => (once ? getOnceProp : getProp)(target, key)
         };
       }
     }
@@ -1669,14 +1698,11 @@ function getPropsProxyHandlers(comp, once) {
       return false;
     }
   };
-  const getAttrValue = once ? (...args) => {
-    pauseTracking();
-    const value = getAttr(...args);
-    resetTracking();
-    return value;
-  } : getAttr;
+  const getOnceAttr = withOnceCache(
+    (instance, key) => getAttr(instance.rawProps, key)
+  );
   const attrsHandlers = {
-    get: (target, key) => getAttrValue(target.rawProps, key),
+    get: (target, key) => once ? getOnceAttr(target, key) : getAttr(target.rawProps, key),
     has: (target, key) => hasAttr(target.rawProps, key),
     ownKeys: (target) => getKeysFromRawProps(target.rawProps).filter(isAttr),
     getOwnPropertyDescriptor(target, key) {
@@ -1684,7 +1710,7 @@ function getPropsProxyHandlers(comp, once) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getAttrValue(target.rawProps, key)
+          get: () => once ? getOnceAttr(target, key) : getAttr(target.rawProps, key)
         };
       }
     }
@@ -1707,9 +1733,9 @@ function getAttrFromRawProps(rawProps, key) {
     while (i--) {
       source = dynamicSources[i];
       isDynamic = isFunction(source);
-      source = isDynamic ? source() : source;
+      source = isDynamic ? resolveFunctionSource(source) : source;
       if (source && hasOwn(source, key)) {
-        const value = isDynamic ? source[key] : source[key]();
+        const value = isDynamic ? source[key] : resolveFunctionSource(source[key]);
         if (merged) {
           merged.push(value);
         } else {
@@ -1754,7 +1780,9 @@ function getKeysFromRawProps(rawProps) {
     let i = dynamicSources.length;
     let source;
     while (i--) {
-      source = resolveSource(dynamicSources[i]);
+      source = isFunction(dynamicSources[i]) ? resolveFunctionSource(
+        dynamicSources[i]
+      ) : dynamicSources[i];
       for (const key in source) {
         keys.push(key);
       }
@@ -1820,9 +1848,9 @@ function resolveDynamicProps(props) {
   if (props.$) {
     for (const source of props.$) {
       const isDynamic = isFunction(source);
-      const resolved = isDynamic ? source() : source;
+      const resolved = isDynamic ? resolveFunctionSource(source) : source;
       for (const key in resolved) {
-        const value = isDynamic ? resolved[key] : resolved[key]();
+        const value = isDynamic ? resolved[key] : resolveFunctionSource(source[key]);
         if (key === "class" || key === "style") {
           const existing = mergedRawProps[key];
           if (isArray(existing)) {
@@ -1874,12 +1902,6 @@ function setCurrentSlotScopeIds(scopeIds) {
     currentSlotScopeIds = scopeIds;
   }
 }
-function resolveDynamicSlot(source) {
-  if (!source._cache) {
-    source._cache = computed(source);
-  }
-  return source._cache.value;
-}
 const dynamicSlotsProxyHandlers = {
   get: getSlot,
   has: (target, key) => !!getSlot(target, key),
@@ -1900,7 +1922,7 @@ const dynamicSlotsProxyHandlers = {
       keys = keys.filter((k) => k !== "$");
       for (const source of dynamicSources) {
         if (isFunction(source)) {
-          const slot = resolveDynamicSlot(source);
+          const slot = resolveFunctionSource(source);
           if (isArray(slot)) {
             for (const s of slot) keys.push(String(s.name));
           } else {
@@ -1925,7 +1947,7 @@ function getSlot(target, key) {
     while (i--) {
       source = dynamicSources[i];
       if (isFunction(source)) {
-        const slot = resolveDynamicSlot(source);
+        const slot = resolveFunctionSource(source);
         if (slot) {
           if (isArray(slot)) {
             for (const s of slot) {
@@ -2152,26 +2174,15 @@ const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots }) => {
   const { mode } = props;
   checkTransitionMode(mode);
   let resolvedProps;
-  let isMounted = false;
-  renderEffect(() => {
-    resolvedProps = resolveTransitionProps(props);
-    if (isMounted) {
-      if (isFragment(children)) {
-        children.$transition.props = resolvedProps;
-      } else {
-        const child = findTransitionBlock(children);
-        if (child) {
-          child.$transition.props = resolvedProps;
-          applyTransitionHooks(child, child.$transition, true);
-        }
-      }
-    } else {
-      isMounted = true;
-    }
-  });
+  renderEffect(() => resolvedProps = resolveTransitionProps(props));
   const hooks = applyTransitionHooks(children, {
     state: useTransitionState(),
-    props: resolvedProps,
+    // use proxy to keep props reference stable
+    props: new Proxy({}, {
+      get(_, key) {
+        return resolvedProps[key];
+      }
+    }),
     instance
   });
   if (resetDisplay && resolvedProps.appear) {
@@ -2233,7 +2244,7 @@ function resolveTransitionHooks(block, props, state, instance, postClone) {
   hooks.instance = instance;
   return hooks;
 }
-function applyTransitionHooks(block, hooks, isResolved = false) {
+function applyTransitionHooks(block, hooks) {
   if (isArray(block)) {
     block = block.filter((b) => !(b instanceof Comment));
     if (block.length === 1) {
@@ -2242,10 +2253,13 @@ function applyTransitionHooks(block, hooks, isResolved = false) {
       return hooks;
     }
   }
-  const isFrag = isFragment(block);
-  const child = isResolved ? block : findTransitionBlock(block, isFrag);
+  const fragments = [];
+  const child = findTransitionBlock(block, (frag) => fragments.push(frag));
   if (!child) {
-    if (isFrag) setTransitionHooksOnFragment(block, hooks);
+    fragments.forEach((f) => f.$transition = hooks);
+    if (!!(process.env.NODE_ENV !== "production") && fragments.length === 0) {
+      warn("Transition component has no valid child element");
+    }
     return hooks;
   }
   const { props, instance, state, delayedLeave } = hooks;
@@ -2258,7 +2272,7 @@ function applyTransitionHooks(block, hooks, isResolved = false) {
   );
   resolvedHooks.delayedLeave = delayedLeave;
   child.$transition = resolvedHooks;
-  if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
+  fragments.forEach((f) => f.$transition = resolvedHooks);
   return resolvedHooks;
 }
 function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
@@ -2298,7 +2312,7 @@ function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
     };
   }
 }
-function findTransitionBlock(block, inFragment = false) {
+function findTransitionBlock(block, onFragment) {
   let child;
   if (block instanceof Node) {
     if (block instanceof Element) child = block;
@@ -2307,15 +2321,14 @@ function findTransitionBlock(block, inFragment = false) {
       child = block;
     } else {
       if (getComponentName(block.type) === displayName) return void 0;
-      child = findTransitionBlock(block.block, inFragment);
+      child = findTransitionBlock(block.block, onFragment);
       if (child && child.$key === void 0) child.$key = block.uid;
     }
   } else if (isArray(block)) {
     let hasFound = false;
     for (const c of block) {
       if (c instanceof Comment) continue;
-      if (isFragment(c)) inFragment = true;
-      const item = findTransitionBlock(c, inFragment);
+      const item = findTransitionBlock(c, onFragment);
       if (!!(process.env.NODE_ENV !== "production") && hasFound) {
         warn(
           "<transition> can only be used on a single element or component. Use <transition-group> for lists."
@@ -2327,16 +2340,13 @@ function findTransitionBlock(block, inFragment = false) {
       if (!!!(process.env.NODE_ENV !== "production")) break;
     }
   } else if (isFragment(block)) {
-    inFragment = true;
     if (block.insert) {
       child = block;
     } else {
-      child = findTransitionBlock(block.nodes, true);
+      if (onFragment) onFragment(block);
+      child = findTransitionBlock(block.nodes, onFragment);
     }
   }
-  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
-    warn("Transition component has no valid child element");
-  }
   return child;
 }
 function setTransitionHooksOnFragment(block, hooks) {
@@ -2428,28 +2438,41 @@ class DynamicFragment extends VaporFragment {
       if (isHydrating) this.hydrate(true);
       return;
     }
+    const transition = this.$transition;
+    if (transition && transition.state.isLeaving) {
+      this.current = key;
+      this.pending = { render, key };
+      return;
+    }
+    const prevKey = this.current;
     this.current = key;
     const instance = currentInstance;
     const prevSub = setActiveSub();
     const parent = isHydrating ? null : this.anchor.parentNode;
-    const transition = this.$transition;
     if (this.scope) {
       let preserveScope = false;
       if (this.onBeforeTeardown) {
-        preserveScope = this.onBeforeTeardown.some(
-          (hook) => hook(this.current, this.nodes, this.scope)
-        );
+        for (const teardown of this.onBeforeTeardown) {
+          if (teardown(prevKey, this.nodes, this.scope)) {
+            preserveScope = true;
+          }
+        }
       }
       if (!preserveScope) {
         this.scope.stop();
       }
       const mode = transition && transition.mode;
       if (mode) {
-        applyTransitionLeaveHooks(
-          this.nodes,
-          transition,
-          () => this.renderBranch(render, transition, parent, instance)
-        );
+        applyTransitionLeaveHooks(this.nodes, transition, () => {
+          const pending = this.pending;
+          if (pending) {
+            this.pending = void 0;
+            this.current = pending.key;
+            this.renderBranch(pending.render, transition, parent, instance);
+          } else {
+            this.renderBranch(render, transition, parent, instance);
+          }
+        });
         parent && remove(this.nodes, parent);
         if (mode === "out-in") {
           setActiveSub(prevSub);
@@ -2876,6 +2899,79 @@ function insert(block, parent, anchor = null, parentSuspense) {
     }
   }
 }
+function move(block, parent, anchor = null, moveType = 1, parentComponent, parentSuspense) {
+  anchor = anchor === 0 ? parent.$fc || _child(parent) : anchor;
+  if (block instanceof Node) {
+    if (block instanceof Element && block.$transition && !block.$transition.disabled && moveType !== 2) {
+      if (moveType === 0) {
+        performTransitionEnter(
+          block,
+          block.$transition,
+          () => parent.insertBefore(block, anchor),
+          parentSuspense,
+          true
+        );
+      } else {
+        performTransitionLeave(
+          block,
+          block.$transition,
+          () => {
+            if (moveType === 1 && parentComponent && parentComponent.isUnmounted) {
+              block.remove();
+            } else {
+              parent.insertBefore(block, anchor);
+            }
+          },
+          parentSuspense,
+          true
+        );
+      }
+    } else {
+      parent.insertBefore(block, anchor);
+    }
+  } else if (isVaporComponent(block)) {
+    if (block.isMounted) {
+      move(
+        block.block,
+        parent,
+        anchor,
+        moveType,
+        parentComponent,
+        parentSuspense
+      );
+    } else {
+      mountComponent(block, parent, anchor);
+    }
+  } else if (isArray(block)) {
+    for (const b of block) {
+      move(b, parent, anchor, moveType, parentComponent, parentSuspense);
+    }
+  } else {
+    if (block.anchor) {
+      move(
+        block.anchor,
+        parent,
+        anchor,
+        moveType,
+        parentComponent,
+        parentSuspense
+      );
+      anchor = block.anchor;
+    }
+    if (block.insert) {
+      block.insert(parent, anchor, block.$transition);
+    } else {
+      move(
+        block.nodes,
+        parent,
+        anchor,
+        moveType,
+        parentComponent,
+        parentSuspense
+      );
+    }
+  }
+}
 function prepend(parent, ...blocks) {
   let i = blocks.length;
   while (i--) insert(blocks[i], parent, 0);
@@ -3450,7 +3546,7 @@ function unmountComponent(instance, parentNode) {
     return;
   }
   if (instance.isMounted && !instance.isUnmounted) {
-    if (!!(process.env.NODE_ENV !== "production") && instance.type.__hmrId) {
+    if (!!(process.env.NODE_ENV !== "production")) {
       unregisterHMR(instance);
     }
     if (instance.bum) {
@@ -3953,9 +4049,7 @@ function createKeyedFragment(key, render) {
   const _isLastInsertion = isLastInsertion;
   if (!isHydrating) resetInsertionState();
   const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
-  renderEffect(() => {
-    frag.update(render, key());
-  });
+  renderEffect(() => frag.update(render, key()));
   if (!isHydrating) {
     if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
   } else {
@@ -4601,13 +4695,16 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
     const value = getter();
     const appContext = currentInstance && currentInstance.appContext || emptyContext;
     frag.update(
-      () => createComponentWithFallback(
-        resolveDynamicComponent(value),
-        rawProps,
-        rawSlots,
-        isSingleRoot,
-        once,
-        appContext
+      () => (
+        // Support integration with VaporRouterView/VaporRouterLink by accepting blocks
+        isBlock(value) ? value : createComponentWithFallback(
+          resolveDynamicComponent(value),
+          rawProps,
+          rawSlots,
+          isSingleRoot,
+          once,
+          appContext
+        )
       ),
       value
     );
@@ -4798,7 +4895,15 @@ const VaporTransitionGroup = decorate({
   setup(props, { slots }) {
     const instance = currentInstance;
     const state = useTransitionState();
-    const cssTransitionProps = resolveTransitionProps(props);
+    let cssTransitionProps = resolveTransitionProps(props);
+    const propsProxy = new Proxy({}, {
+      get(_, key) {
+        return cssTransitionProps[key];
+      }
+    });
+    renderEffect(() => {
+      cssTransitionProps = resolveTransitionProps(props);
+    });
     let prevChildren;
     let children;
     const slottedBlock = slots.default && slots.default();
@@ -4849,7 +4954,7 @@ const VaporTransitionGroup = decorate({
       prevChildren = [];
     });
     setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
+      props: propsProxy,
       state,
       instance
     });
@@ -4860,7 +4965,7 @@ const VaporTransitionGroup = decorate({
         if (child.$key != null) {
           const hooks = resolveTransitionHooks(
             child,
-            cssTransitionProps,
+            propsProxy,
             state,
             instance
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-vapor",
-  "version": "3.6.0-alpha.7",
+  "version": "3.6.0-beta.1",
   "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-alpha.7",
-    "@vue/reactivity": "3.6.0-alpha.7"
+    "@vue/shared": "3.6.0-beta.1",
+    "@vue/reactivity": "3.6.0-beta.1"
   },
   "peerDependencies": {
-    "@vue/runtime-dom": "3.6.0-alpha.7"
+    "@vue/runtime-dom": "3.6.0-beta.1"
   }
 }