@vue/runtime-vapor 3.6.0-beta.2 → 3.6.0-beta.3

package/dist/runtime-vapor.d.ts

@@ -1,10 +1,10 @@
-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 { 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, NULL_DYNAMIC_COMPONENT, CreateAppFunction, AsyncComponentLoader, AsyncComponentOptions, DirectiveModifiers, CustomElementOptions, VueElementBase } from '@vue/runtime-dom';
 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);
 type RefEl = Element | VaporComponentInstance;
-type setRefFn = (el: RefEl, ref: NodeRef, oldRef?: NodeRef, refFor?: boolean, refKey?: string) => NodeRef | undefined;
+type setRefFn = (el: RefEl, ref: NodeRef, refFor?: boolean, refKey?: string) => NodeRef | undefined;
 export declare function createTemplateRefSetter(): setRefFn;
 
 export declare class VaporFragment<T extends Block = Block> implements TransitionOptions {
@@ -35,13 +35,14 @@ declare class DynamicFragment extends VaporFragment {
     };
     fallback?: BlockFn;
     anchorLabel?: string;
+    keyed?: boolean;
     attrs?: Record<string, any>;
     setAsyncRef?: (instance: VaporComponentInstance) => void;
     getScope?: (key: any) => EffectScope | undefined;
     onBeforeTeardown?: ((oldKey: any, nodes: Block, scope: EffectScope) => boolean)[];
     onBeforeMount?: ((newKey: any, nodes: Block, scope: EffectScope) => void)[];
     slotOwner: VaporComponentInstance | null;
-    constructor(anchorLabel?: string);
+    constructor(anchorLabel?: string, keyed?: boolean);
     update(render?: BlockFn, key?: any): void;
     renderBranch(render: BlockFn | undefined, transition: VaporTransitionHooks | undefined, parent: ParentNode | null, instance: GenericComponentInstance | null): void;
     hydrate: (isEmpty?: boolean) => void;
@@ -130,6 +131,7 @@ declare class TeleportFragment extends VaporFragment {
     constructor(props: LooseRawProps, slots: LooseRawSlots);
     get parent(): ParentNode | null;
     private initChildren;
+    private registerUpdateCssVars;
     private handleChildrenUpdate;
     private mount;
     private mountToTarget;
@@ -313,7 +315,7 @@ export declare function isVaporComponent(value: unknown): value is VaporComponen
  * and needs rely on runtime resolution - where it might fallback to a plain
  * element if the resolution fails.
  */
-export declare function createComponentWithFallback(comp: VaporComponent | string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean, appContext?: GenericAppContext): HTMLElement | VaporComponentInstance;
+export declare function createComponentWithFallback(comp: VaporComponent | typeof NULL_DYNAMIC_COMPONENT | string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean, appContext?: GenericAppContext): HTMLElement | VaporComponentInstance;
 export declare function createPlainElement(comp: string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean): HTMLElement;
 
 export declare const createVaporApp: CreateAppFunction<ParentNode, VaporComponent>;

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

@@ -1,9 +1,9 @@
 /**
-* @vue/runtime-vapor v3.6.0-beta.2
+* @vue/runtime-vapor v3.6.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { queuePostFlushCb, isMismatchAllowed, warn, callWithAsyncErrorHandling, currentInstance, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, TransitionPropsValidators, isAsyncWrapper, getComponentName, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, baseResolveTransitionHooks, leaveCbKey, watch, onMounted, onUpdated, onBeforeUnmount, matches, devtoolsComponentAdded, resetShapeFlag, isKeepAlive, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, setRef as setRef$1, Fragment, isRef, ensureHydrationRenderer, deactivate as deactivate$1, isVNode, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, setCurrentInstance, resolvePropValue, startMeasure, queueJob, 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 { queuePostFlushCb, isMismatchAllowed, warn, callWithAsyncErrorHandling, currentInstance, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, TransitionPropsValidators, isAsyncWrapper, getComponentName, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, baseResolveTransitionHooks, leaveCbKey, watch, onMounted, onUpdated, onBeforeUnmount, matches, devtoolsComponentAdded, resetShapeFlag, ensureRenderer, shallowRef, simpleSetCurrentInstance, isKeepAlive, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, normalizeRef, setRef as setRef$1, ensureHydrationRenderer, deactivate as deactivate$1, isVNode, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, setCurrentInstance, resolvePropValue, isRef, startMeasure, queueJob, warnExtraneousAttributes, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, NULL_DYNAMIC_COMPONENT, 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, 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';
 
@@ -1161,17 +1161,26 @@ const KeepAliveImpl = defineVaporComponent({
     if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
       keepAliveInstance.__v_cache = cache;
     }
-    keepAliveInstance.getStorageContainer = () => storageContainer;
-    keepAliveInstance.getCachedComponent = (comp) => cache.get(comp);
-    keepAliveInstance.activate = (instance, parentNode, anchor) => {
-      current = instance;
-      activate(instance, parentNode, anchor);
-    };
-    keepAliveInstance.deactivate = (instance) => {
-      current = void 0;
-      deactivate(instance, storageContainer);
+    keepAliveInstance.ctx = {
+      getStorageContainer: () => storageContainer,
+      getCachedComponent: (comp) => cache.get(comp),
+      activate: (instance, parentNode, anchor) => {
+        current = instance;
+        activate(instance, parentNode, anchor);
+      },
+      deactivate: (instance) => {
+        current = void 0;
+        deactivate(instance, storageContainer);
+      },
+      // called when async component resolves to evaluate caching
+      onAsyncResolve: (asyncWrapper) => {
+        if (shouldCache(asyncWrapper, props, false)) {
+          asyncWrapper.shapeFlag |= 256;
+          innerCacheBlock(asyncWrapper.type, asyncWrapper);
+        }
+      }
     };
-    const innerCacheBlock = (key, instance) => {
+    const innerCacheBlock = (key, block) => {
       const { max } = props;
       if (cache.has(key)) {
         keys.delete(key);
@@ -1182,8 +1191,8 @@ const KeepAliveImpl = defineVaporComponent({
           pruneCacheEntry(keys.values().next().value);
         }
       }
-      cache.set(key, instance);
-      current = instance;
+      cache.set(key, block);
+      current = block;
     };
     const cacheBlock = () => {
       const block = keepAliveInstance.block;
@@ -1210,19 +1219,6 @@ const KeepAliveImpl = defineVaporComponent({
       }
       return true;
     };
-    const cacheFragment = (fragment) => {
-      const [innerBlock, interop] = getInnerBlock(fragment.nodes);
-      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
-      let key;
-      if (interop) {
-        innerBlock.vnode.shapeFlag |= 256;
-        key = innerBlock.vnode.type;
-      } else {
-        innerBlock.shapeFlag |= 256;
-        key = innerBlock.type;
-      }
-      innerCacheBlock(key, innerBlock);
-    };
     const pruneCache = (filter) => {
       cache.forEach((cached, key) => {
         const instance = getInstanceFromCache(cached);
@@ -1293,7 +1289,7 @@ const KeepAliveImpl = defineVaporComponent({
         }
       );
       (frag.onBeforeMount || (frag.onBeforeMount = [])).push(
-        () => cacheFragment(frag)
+        () => processFragment(frag)
       );
       frag.getScope = (key) => {
         const scope = keptAliveScopes.get(key);
@@ -1325,7 +1321,7 @@ const shouldCache = (block, props, interop = false) => {
   const isAsync = !interop && isAsyncWrapper(block);
   const type = interop ? block.vnode.type : block.type;
   if (isAsync && !type.__asyncResolved) {
-    return true;
+    return false;
   }
   const { include, exclude } = props;
   const name = getComponentName(isAsync ? type.__asyncResolved : type);
@@ -1377,16 +1373,6 @@ function deactivate(instance, container) {
     devtoolsComponentAdded(instance);
   }
 }
-function findParentKeepAlive(instance) {
-  let parent = instance;
-  while (parent) {
-    if (isKeepAlive(parent)) {
-      return parent;
-    }
-    parent = parent.parent;
-  }
-  return null;
-}
 
 let parentSuspense = null;
 function setParentSuspense(suspense) {
@@ -1400,10 +1386,11 @@ function setParentSuspense(suspense) {
 const interopKey = /* @__PURE__ */ Symbol(`interop`);
 const vaporInteropImpl = {
   mount(vnode, container, anchor, parentComponent, parentSuspense) {
-    let selfAnchor = vnode.el = vnode.anchor = createTextNode();
+    let selfAnchor = vnode.anchor = createTextNode();
     if (isHydrating) {
       queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor));
     } else {
+      vnode.el = selfAnchor;
       container.insertBefore(selfAnchor, anchor);
     }
     const prev = currentInstance;
@@ -1522,7 +1509,7 @@ const vaporInteropImpl = {
         );
       }
     });
-    return _next(vnode.anchor);
+    return vnode.anchor;
   },
   setTransitionHooks(component, hooks) {
     setTransitionHooks(component, hooks);
@@ -1558,12 +1545,102 @@ const vaporSlotsProxyHandler = {
     const slot = target[key];
     if (isFunction(slot)) {
       slot.__vapor = true;
+      const wrapped = (props) => [
+        renderSlot({ [key]: slot }, key, props)
+      ];
+      wrapped.__vs = slot;
+      return wrapped;
     }
     return slot;
   }
 };
 let vdomHydrateNode;
-function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots) {
+function mountVNode(internals, vnode, parentComponent) {
+  const frag = new VaporFragment([]);
+  frag.vnode = vnode;
+  let isMounted = false;
+  const unmount = (parentNode, transition) => {
+    if (transition) setTransitionHooks$1(vnode, transition);
+    if (vnode.shapeFlag & 256) {
+      if (vnode.type.__vapor) {
+        deactivate(
+          vnode.component,
+          parentComponent.ctx.getStorageContainer()
+        );
+      } else {
+        deactivate$1(
+          vnode,
+          parentComponent.ctx.getStorageContainer(),
+          internals,
+          parentComponent,
+          null
+        );
+      }
+    } else {
+      internals.um(vnode, parentComponent, null, !!parentNode);
+    }
+  };
+  frag.hydrate = () => {
+    hydrateVNode(vnode, parentComponent);
+    onScopeDispose(unmount, true);
+    isMounted = true;
+    frag.nodes = vnode.el;
+  };
+  frag.insert = (parentNode, anchor, transition) => {
+    if (isHydrating) return;
+    if (vnode.shapeFlag & 512) {
+      if (vnode.type.__vapor) {
+        activate(vnode.component, parentNode, anchor);
+      } else {
+        activate$1(
+          vnode,
+          parentNode,
+          anchor,
+          internals,
+          parentComponent,
+          null,
+          void 0,
+          false
+        );
+      }
+      return;
+    } else {
+      const prev = currentInstance;
+      simpleSetCurrentInstance(parentComponent);
+      if (!isMounted) {
+        if (transition) setTransitionHooks$1(vnode, transition);
+        internals.p(
+          null,
+          vnode,
+          parentNode,
+          anchor,
+          parentComponent,
+          null,
+          // parentSuspense
+          void 0,
+          // namespace
+          vnode.slotScopeIds
+        );
+        onScopeDispose(unmount, true);
+        isMounted = true;
+      } else {
+        internals.m(
+          vnode,
+          parentNode,
+          anchor,
+          2,
+          parentComponent
+        );
+      }
+      simpleSetCurrentInstance(prev);
+    }
+    frag.nodes = vnode.el;
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
+  };
+  frag.remove = unmount;
+  return frag;
+}
+function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots, isSingleRoot) {
   const frag = new VaporFragment([]);
   const vnode = frag.vnode = createVNode(
     component,
@@ -1594,7 +1671,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
     if (vnode.shapeFlag & 256) {
       deactivate$1(
         vnode,
-        findParentKeepAlive(parentComponent).getStorageContainer(),
+        parentComponent.ctx.getStorageContainer(),
         internals,
         parentComponent,
         null
@@ -1604,7 +1681,13 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
     internals.umt(vnode.component, null, !!parentNode);
   };
   frag.hydrate = () => {
-    hydrateVNode(vnode, parentComponent);
+    hydrateVNode(
+      vnode,
+      parentComponent,
+      // skip fragment start anchor for multi-root component
+      // to avoid mismatch
+      !isSingleRoot
+    );
     onScopeDispose(unmount, true);
     isMounted = true;
     frag.nodes = vnode.el;
@@ -1774,7 +1857,8 @@ const vaporInteropPlugin = (app) => {
   app._context.vapor = extend(vaporInteropImpl, {
     vdomMount: createVDOMComponent.bind(null, internals),
     vdomUnmount: internals.umt,
-    vdomSlot: renderVDOMSlot.bind(null, internals)
+    vdomSlot: renderVDOMSlot.bind(null, internals),
+    vdomMountVNode: mountVNode.bind(null, internals)
   });
   const mount = app.mount;
   app.mount = ((...args) => {
@@ -1782,18 +1866,15 @@ const vaporInteropPlugin = (app) => {
     return mount(...args);
   });
 };
-function hydrateVNode(vnode, parentComponent) {
+function hydrateVNode(vnode, parentComponent, skipFragmentAnchor = false) {
   locateHydrationNode();
   let node = currentHydrationNode;
-  while (isComment(node, "[") && // vnode is not a fragment
-  vnode.type !== Fragment && // not inside vdom slot
-  !(isVaporComponent(parentComponent) && isRef(parentComponent.rawSlots._))) {
-    node = node.nextSibling;
+  if (skipFragmentAnchor && isComment(node, "[")) {
+    setCurrentHydrationNode(node = node.nextSibling);
   }
-  if (currentHydrationNode !== node) setCurrentHydrationNode(node);
   if (!vdomHydrateNode) vdomHydrateNode = ensureHydrationRenderer().hydrateNode;
   const nextNode = vdomHydrateNode(
-    currentHydrationNode,
+    node,
     vnode,
     parentComponent,
     null,
@@ -1852,7 +1933,7 @@ function propGetter(rawProps, key) {
     while (i--) {
       const source = resolveSource(dynamicSources[i]);
       if (hasOwn(source, key))
-        return dynamicSources[interopKey] ? source[key] : resolveSource(source[key]);
+        return dynamicSources[interopKey] || isOn(key) ? source[key] : resolveSource(source[key]);
     }
   }
   return rawProps[key] && resolveSource(rawProps[key]);
@@ -2442,11 +2523,12 @@ class ForFragment extends VaporFragment {
   }
 }
 class DynamicFragment extends VaporFragment {
-  constructor(anchorLabel) {
+  constructor(anchorLabel, keyed = false) {
     super([]);
     this.hydrate = (isEmpty = false) => {
       hydrateDynamicFragment(this, isEmpty);
     };
+    this.keyed = keyed;
     this.slotOwner = currentSlotOwner;
     if (isHydrating) {
       this.anchorLabel = anchorLabel;
@@ -2551,6 +2633,7 @@ class DynamicFragment extends VaporFragment {
       this.nodes = this.scope.run(render) || [];
       if (prev !== void 0) setCurrentInstance(...prev);
       setCurrentSlotOwner(prevOwner);
+      if (this.keyed) setKey(this.nodes, this.current);
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition);
       }
@@ -2615,6 +2698,19 @@ function isFragment(val) {
 function isDynamicFragment(val) {
   return val instanceof DynamicFragment;
 }
+function setKey(block, key) {
+  if (block instanceof Node) {
+    block.$key = key;
+  } else if (isVaporComponent(block)) {
+    setKey(block.block, key);
+  } else if (isArray(block)) {
+    for (const b of block) {
+      setKey(b, key);
+    }
+  } else {
+    setKey(block.nodes, key);
+  }
+}
 
 const VaporTeleportImpl = {
   name: "VaporTeleport",
@@ -2732,19 +2828,7 @@ class TeleportFragment extends VaporFragment {
     });
     const nodes = this.nodes;
     if (this.parentComponent && this.parentComponent.ut) {
-      if (isFragment(nodes)) {
-        (nodes.onUpdated || (nodes.onUpdated = [])).push(
-          () => updateCssVars(this)
-        );
-      } else if (isArray(nodes)) {
-        nodes.forEach((node) => {
-          if (isFragment(node)) {
-            (node.onUpdated || (node.onUpdated = [])).push(
-              () => updateCssVars(this)
-            );
-          }
-        });
-      }
+      this.registerUpdateCssVars(nodes);
     }
     if (!!(process.env.NODE_ENV !== "production")) {
       if (isVaporComponent(nodes)) {
@@ -2756,6 +2840,18 @@ class TeleportFragment extends VaporFragment {
       }
     }
   }
+  registerUpdateCssVars(block) {
+    if (isFragment(block)) {
+      (block.onUpdated || (block.onUpdated = [])).push(
+        () => updateCssVars(this)
+      );
+      this.registerUpdateCssVars(block.nodes);
+    } else if (isVaporComponent(block)) {
+      this.registerUpdateCssVars(block.block);
+    } else if (isArray(block)) {
+      block.forEach((node) => this.registerUpdateCssVars(node));
+    }
+  }
   handleChildrenUpdate(children) {
     if (!this.parent || isHydrating) {
       this.nodes = children;
@@ -3230,9 +3326,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     }
   }
   if (currentInstance && currentInstance.vapor && isKeepAlive(currentInstance)) {
-    const cached = currentInstance.getCachedComponent(
-      component
-    );
+    const cached = currentInstance.ctx.getCachedComponent(component);
     if (cached) return cached;
   }
   if (appContext.vapor && !component.__vapor) {
@@ -3240,7 +3334,8 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
       component,
       currentInstance,
       rawProps,
-      rawSlots
+      rawSlots,
+      isSingleRoot
     );
     if (!isHydrating) {
       if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
@@ -3487,6 +3582,9 @@ function isVaporComponent(value) {
   return value instanceof VaporComponentInstance;
 }
 function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, once, appContext) {
+  if (comp === NULL_DYNAMIC_COMPONENT) {
+    return !!(process.env.NODE_ENV !== "production") ? createComment("ndc") : createTextNode("");
+  }
   if (!isString(comp)) {
     return createComponent(
       comp,
@@ -3558,7 +3656,11 @@ function mountComponent(instance, parent, anchor) {
     return;
   }
   if (instance.shapeFlag & 512) {
-    findParentKeepAlive(instance).activate(instance, parent, anchor);
+    instance.parent.ctx.activate(
+      instance,
+      parent,
+      anchor
+    );
     return;
   }
   const { root, type } = instance;
@@ -3585,7 +3687,7 @@ function mountComponent(instance, parent, anchor) {
 }
 function unmountComponent(instance, parentNode) {
   if (parentNode && instance.parent && instance.parent.vapor && instance.shapeFlag & 256) {
-    findParentKeepAlive(instance).deactivate(instance);
+    instance.parent.ctx.deactivate(instance);
     return;
   }
   if (instance.isMounted && !instance.isUnmounted) {
@@ -3875,6 +3977,9 @@ function defineVaporAsyncComponent(source) {
       );
       load().then(() => {
         loaded.value = true;
+        if (instance.parent && isKeepAlive(instance.parent)) {
+          instance.parent.ctx.onAsyncResolve(instance);
+        }
       }).catch((err) => {
         onError(err);
         error.value = err;
@@ -4090,7 +4195,7 @@ function createKeyedFragment(key, render) {
   const _insertionAnchor = insertionAnchor;
   const _isLastInsertion = isLastInsertion;
   if (!isHydrating) resetInsertionState();
-  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
+  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed", true) : new DynamicFragment(void 0, true);
   renderEffect(() => frag.update(render, key()));
   if (!isHydrating) {
     if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
@@ -4583,7 +4688,12 @@ function ensureCleanup(el) {
 }
 function createTemplateRefSetter() {
   const instance = currentInstance;
-  return (...args) => setRef(instance, ...args);
+  const oldRefMap = /* @__PURE__ */ new WeakMap();
+  return (el, ref, refFor, refKey) => {
+    const oldRef = setRef(instance, el, ref, oldRefMap.get(el), refFor, refKey);
+    oldRefMap.set(el, oldRef);
+    return oldRef;
+  };
 }
 function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
   if (!instance || instance.isUnmounted) return;
@@ -4736,20 +4846,31 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
   const renderFn = () => {
     const value = getter();
     const appContext = currentInstance && currentInstance.appContext || emptyContext;
-    frag.update(
-      () => (
-        // Support integration with VaporRouterView/VaporRouterLink by accepting blocks
-        isBlock(value) ? value : createComponentWithFallback(
-          resolveDynamicComponent(value),
-          rawProps,
-          rawSlots,
-          isSingleRoot,
-          once,
-          appContext
-        )
-      ),
-      value
-    );
+    frag.update(() => {
+      if (isBlock(value)) return value;
+      if (appContext.vapor && isVNode(value)) {
+        if (isKeepAlive(currentInstance)) {
+          const frag3 = currentInstance.ctx.getCachedComponent(value.type);
+          if (frag3) return frag3;
+        }
+        const frag2 = appContext.vapor.vdomMountVNode(value, currentInstance);
+        if (isHydrating) {
+          frag2.hydrate();
+          if (_isLastInsertion) {
+            advanceHydrationNode(_insertionParent);
+          }
+        }
+        return frag2;
+      }
+      return createComponentWithFallback(
+        resolveDynamicComponent(value),
+        rawProps,
+        rawSlots,
+        isSingleRoot,
+        once,
+        appContext
+      );
+    }, value);
   };
   if (once) renderFn();
   else renderEffect(renderFn);

package/package.json

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