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

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

@@ -1,9 +1,9 @@
 /**
-* @vue/runtime-vapor v3.6.0-beta.1
+* @vue/runtime-vapor v3.6.0-beta.3
 * (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, 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 { 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';
 
@@ -30,22 +30,22 @@ function resetInsertionState() {
   insertionParent = insertionAnchor = isLastInsertion = void 0;
 }
 
-const isHydratingStack = [];
-let isHydrating = false;
 let currentHydrationNode = null;
-function pushIsHydrating(value) {
-  isHydratingStack.push(isHydrating = value);
-}
-function popIsHydrating() {
-  isHydratingStack.pop();
-  isHydrating = isHydratingStack[isHydratingStack.length - 1] || false;
+let _hydrateDynamicFragment;
+let isHydrating = false;
+function setIsHydrating(value) {
+  try {
+    return isHydrating;
+  } finally {
+    isHydrating = value;
+  }
 }
 function runWithoutHydration(fn) {
+  const prev = setIsHydrating(false);
   try {
-    pushIsHydrating(false);
     return fn();
   } finally {
-    popIsHydrating();
+    setIsHydrating(prev);
   }
 }
 let isOptimized$1 = false;
@@ -53,6 +53,7 @@ function performHydration(fn, setup, cleanup) {
   if (!isOptimized$1) {
     adoptTemplate = adoptTemplateImpl;
     locateHydrationNode = locateHydrationNodeImpl;
+    _hydrateDynamicFragment = hydrateDynamicFragmentImpl;
     Comment.prototype.$fe = void 0;
     Node.prototype.$pns = void 0;
     Node.prototype.$idx = void 0;
@@ -64,12 +65,12 @@ function performHydration(fn, setup, cleanup) {
     isOptimized$1 = true;
   }
   enableHydrationNodeLookup();
-  pushIsHydrating(true);
+  const prev = setIsHydrating(true);
   setup();
   const res = fn();
   cleanup();
   currentHydrationNode = null;
-  popIsHydrating();
+  setIsHydrating(prev);
   if (!isHydrating) disableHydrationNodeLookup();
   return res;
 }
@@ -229,6 +230,50 @@ function removeFragmentNodes(node, endAnchor) {
     }
   }
 }
+function hydrateDynamicFragment(frag, isEmpty) {
+  _hydrateDynamicFragment && _hydrateDynamicFragment(frag, isEmpty);
+}
+function hydrateDynamicFragmentImpl(frag, isEmpty) {
+  if (frag.anchor) return;
+  if (frag.anchorLabel === "if") {
+    if (isEmpty) {
+      frag.anchor = locateFragmentEndAnchor("");
+      if (!!(process.env.NODE_ENV !== "production") && !frag.anchor) {
+        throw new Error(
+          "Failed to locate if anchor. this is likely a Vue internal bug."
+        );
+      } else {
+        if (!!(process.env.NODE_ENV !== "production")) {
+          frag.anchor.data = frag.anchorLabel;
+        }
+        return;
+      }
+    }
+  } else if (frag.anchorLabel === "slot") {
+    if (isEmpty && isComment(currentHydrationNode, "")) {
+      frag.anchor = currentHydrationNode;
+      if (!!(process.env.NODE_ENV !== "production")) {
+        frag.anchor.data = frag.anchorLabel;
+      }
+      return;
+    }
+    frag.anchor = locateFragmentEndAnchor();
+    if (!!(process.env.NODE_ENV !== "production") && !frag.anchor) {
+      throw new Error(
+        "Failed to locate slot anchor. this is likely a Vue internal bug."
+      );
+    } else {
+      return;
+    }
+  }
+  const { parentNode: pn, nextNode } = findBlockNode(frag.nodes);
+  queuePostFlushCb(() => {
+    pn.insertBefore(
+      frag.anchor = !!(process.env.NODE_ENV !== "production") ? createComment(frag.anchorLabel) : createTextNode(),
+      nextNode
+    );
+  });
+}
 
 // @__NO_SIDE_EFFECTS__
 function createElement(tagName) {
@@ -847,7 +892,242 @@ function shouldForceHydrate(el, key) {
   tagName.includes("-");
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
+const displayName = "VaporTransition";
+let registered = false;
+const ensureTransitionHooksRegistered = () => {
+  if (!registered) {
+    registered = true;
+    registerTransitionHooks(
+      applyTransitionHooksImpl,
+      applyTransitionLeaveHooksImpl
+    );
+  }
+};
+const decorate$1 = (t) => {
+  t.displayName = displayName;
+  t.props = TransitionPropsValidators;
+  t.__vapor = true;
+  return t;
+};
+const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots }) => {
+  ensureTransitionHooksRegistered();
+  let resetDisplay;
+  if (isHydrating && currentHydrationNode && isTemplateNode(currentHydrationNode)) {
+    const {
+      content: { firstChild },
+      parentNode
+    } = currentHydrationNode;
+    if (firstChild) {
+      if (firstChild instanceof HTMLElement || firstChild instanceof SVGElement) {
+        const originalDisplay = firstChild.style.display;
+        firstChild.style.display = "none";
+        resetDisplay = () => firstChild.style.display = originalDisplay;
+      }
+      parentNode.replaceChild(firstChild, currentHydrationNode);
+      setCurrentHydrationNode(firstChild);
+    }
+  }
+  const children = slots.default && slots.default();
+  if (!children) return [];
+  const instance = currentInstance;
+  const { mode } = props;
+  checkTransitionMode(mode);
+  let resolvedProps;
+  renderEffect(() => resolvedProps = resolveTransitionProps(props));
+  const hooks = applyTransitionHooksImpl(children, {
+    state: useTransitionState(),
+    // use proxy to keep props reference stable
+    props: new Proxy({}, {
+      get(_, key) {
+        return resolvedProps[key];
+      }
+    }),
+    instance
+  });
+  if (resetDisplay && resolvedProps.appear) {
+    const child = findTransitionBlock(children);
+    hooks.beforeEnter(child);
+    resetDisplay();
+    queuePostFlushCb(() => hooks.enter(child));
+  }
+  return children;
+});
+const getTransitionHooksContext = (key, props, state, instance, postClone) => {
+  const { leavingNodes } = state;
+  const context = {
+    setLeavingNodeCache: (el) => {
+      leavingNodes.set(key, el);
+    },
+    unsetLeavingNodeCache: (el) => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode === el) {
+        leavingNodes.delete(key);
+      }
+    },
+    earlyRemove: () => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode && leavingNode[leaveCbKey]) {
+        leavingNode[leaveCbKey]();
+      }
+    },
+    cloneHooks: (block) => {
+      const hooks = resolveTransitionHooks(
+        block,
+        props,
+        state,
+        instance,
+        postClone
+      );
+      if (postClone) postClone(hooks);
+      return hooks;
+    }
+  };
+  return context;
+};
+function resolveTransitionHooks(block, props, state, instance, postClone) {
+  const context = getTransitionHooksContext(
+    String(block.$key),
+    props,
+    state,
+    instance,
+    postClone
+  );
+  const hooks = baseResolveTransitionHooks(
+    context,
+    props,
+    state,
+    instance
+  );
+  hooks.state = state;
+  hooks.props = props;
+  hooks.instance = instance;
+  return hooks;
+}
+function applyTransitionHooksImpl(block, hooks) {
+  if (isArray(block)) {
+    block = block.filter((b) => !(b instanceof Comment));
+    if (block.length === 1) {
+      block = block[0];
+    } else if (block.length === 0) {
+      return hooks;
+    }
+  }
+  const fragments = [];
+  const child = findTransitionBlock(block, (frag) => fragments.push(frag));
+  if (!child) {
+    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;
+  let resolvedHooks = resolveTransitionHooks(
+    child,
+    props,
+    state,
+    instance,
+    (hooks2) => resolvedHooks = hooks2
+  );
+  resolvedHooks.delayedLeave = delayedLeave;
+  child.$transition = resolvedHooks;
+  fragments.forEach((f) => f.$transition = resolvedHooks);
+  return resolvedHooks;
+}
+function applyTransitionLeaveHooksImpl(block, enterHooks, afterLeaveCb) {
+  const leavingBlock = findTransitionBlock(block);
+  if (!leavingBlock) return void 0;
+  const { props, state, instance } = enterHooks;
+  const leavingHooks = resolveTransitionHooks(
+    leavingBlock,
+    props,
+    state,
+    instance
+  );
+  leavingBlock.$transition = leavingHooks;
+  const { mode } = props;
+  if (mode === "out-in") {
+    state.isLeaving = true;
+    leavingHooks.afterLeave = () => {
+      state.isLeaving = false;
+      afterLeaveCb();
+      leavingBlock.$transition = void 0;
+      delete leavingHooks.afterLeave;
+    };
+  } else if (mode === "in-out") {
+    leavingHooks.delayLeave = (block2, earlyRemove, delayedLeave) => {
+      state.leavingNodes.set(String(leavingBlock.$key), leavingBlock);
+      block2[leaveCbKey] = () => {
+        earlyRemove();
+        block2[leaveCbKey] = void 0;
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+      enterHooks.delayedLeave = () => {
+        delayedLeave();
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+    };
+  }
+}
+function findTransitionBlock(block, onFragment) {
+  let child;
+  if (block instanceof Node) {
+    if (block instanceof Element) child = block;
+  } else if (isVaporComponent(block)) {
+    if (isAsyncWrapper(block) && !block.type.__asyncResolved) {
+      child = block;
+    } else {
+      if (getComponentName(block.type) === displayName) return void 0;
+      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;
+      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."
+        );
+        break;
+      }
+      child = item;
+      hasFound = true;
+      if (!!!(process.env.NODE_ENV !== "production")) break;
+    }
+  } else if (isFragment(block)) {
+    if (block.insert) {
+      child = block;
+    } else {
+      if (onFragment) onFragment(block);
+      child = findTransitionBlock(block.nodes, onFragment);
+    }
+  }
+  return child;
+}
+function setTransitionHooksOnFragment(block, hooks) {
+  if (isFragment(block)) {
+    block.$transition = hooks;
+    if (block.nodes && isFragment(block.nodes)) {
+      setTransitionHooksOnFragment(block.nodes, hooks);
+    }
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      setTransitionHooksOnFragment(block[i], hooks);
+    }
+  }
+}
+function setTransitionHooks(block, hooks) {
+  if (isVaporComponent(block)) {
+    block = findTransitionBlock(block.block);
+    if (!block) return;
+  }
+  block.$transition = hooks;
+}
+
 // @__NO_SIDE_EFFECTS__
 function defineVaporComponent(comp, extraOptions) {
   if (isFunction(comp)) {
@@ -860,7 +1140,7 @@ function defineVaporComponent(comp, extraOptions) {
   return comp;
 }
 
-const VaporKeepAliveImpl = defineVaporComponent({
+const KeepAliveImpl = defineVaporComponent({
   name: "VaporKeepAlive",
   __isKeepAlive: true,
   props: {
@@ -881,18 +1161,27 @@ const VaporKeepAliveImpl = 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);
-    };
-    const innerCacheBlock = (key, instance) => {
-      const { max } = props;
+    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, block) => {
+      const { max } = props;
       if (cache.has(key)) {
         keys.delete(key);
         keys.add(key);
@@ -902,8 +1191,8 @@ const VaporKeepAliveImpl = defineVaporComponent({
           pruneCacheEntry(keys.values().next().value);
         }
       }
-      cache.set(key, instance);
-      current = instance;
+      cache.set(key, block);
+      current = block;
     };
     const cacheBlock = () => {
       const block = keepAliveInstance.block;
@@ -930,19 +1219,6 @@ const VaporKeepAliveImpl = 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);
@@ -1013,7 +1289,7 @@ const VaporKeepAliveImpl = defineVaporComponent({
         }
       );
       (frag.onBeforeMount || (frag.onBeforeMount = [])).push(
-        () => cacheFragment(frag)
+        () => processFragment(frag)
       );
       frag.getScope = (key) => {
         const scope = keptAliveScopes.get(key);
@@ -1040,11 +1316,12 @@ const VaporKeepAliveImpl = defineVaporComponent({
     return children;
   }
 });
+const VaporKeepAliveImpl = KeepAliveImpl;
 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);
@@ -1096,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) {
@@ -1119,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;
@@ -1241,7 +1509,7 @@ const vaporInteropImpl = {
         );
       }
     });
-    return _next(vnode.anchor);
+    return vnode.anchor;
   },
   setTransitionHooks(component, hooks) {
     setTransitionHooks(component, hooks);
@@ -1277,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,
@@ -1313,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
@@ -1323,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;
@@ -1384,6 +1748,9 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       },
       instance
     );
+    if (isMounted && rawRef) {
+      setRef$1(rawRef, null, null, vnode);
+    }
   };
   return frag;
 }
@@ -1490,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) => {
@@ -1498,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,
@@ -1568,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]);
@@ -1923,10 +2288,12 @@ const dynamicSlotsProxyHandlers = {
       for (const source of dynamicSources) {
         if (isFunction(source)) {
           const slot = resolveFunctionSource(source);
-          if (isArray(slot)) {
-            for (const s of slot) keys.push(String(s.name));
-          } else {
-            keys.push(String(slot.name));
+          if (slot) {
+            if (isArray(slot)) {
+              for (const s of slot) keys.push(String(s.name));
+            } else {
+              keys.push(String(slot.name));
+            }
           }
         } else {
           keys.push(...Object.keys(source));
@@ -2030,343 +2397,118 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
         fragment.nodes = el;
         return;
       }
-      const slot = getSlot(rawSlots, slotName);
-      if (slot) {
-        fragment.fallback = fallback;
-        fragment.update(
-          slot._bound || (slot._bound = () => {
-            const prevSlotScopeIds = setCurrentSlotScopeIds(
-              slotScopeIds.length > 0 ? slotScopeIds : null
-            );
-            const prev = inOnceSlot;
-            try {
-              if (once) inOnceSlot = true;
-              return slot(slotProps);
-            } finally {
-              inOnceSlot = prev;
-              setCurrentSlotScopeIds(prevSlotScopeIds);
-            }
-          })
-        );
-      } else {
-        fragment.update(fallback);
-      }
-    };
-    if (!once && (isDynamicName || rawSlots.$)) {
-      renderEffect(renderSlot);
-    } else {
-      renderSlot();
-    }
-  }
-  if (!isHydrating) {
-    if (!noSlotted) {
-      const scopeId = instance.type.__scopeId;
-      if (scopeId) {
-        setScopeId(fragment, [`${scopeId}-s`]);
-      }
-    }
-    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
-  } else {
-    if (fragment.insert) {
-      fragment.hydrate();
-    }
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
-  }
-  return fragment;
-}
-
-class RenderEffect extends ReactiveEffect {
-  constructor(render) {
-    super();
-    this.render = render;
-    const instance = currentInstance;
-    if (!!(process.env.NODE_ENV !== "production") && true && !this.subs && !isVaporComponent(instance)) {
-      warn("renderEffect called without active EffectScope or Vapor instance.");
-    }
-    const job = () => {
-      if (this.dirty) {
-        this.run();
-      }
-    };
-    this.updateJob = () => {
-      instance.isUpdating = false;
-      instance.u && invokeArrayFns(instance.u);
-    };
-    if (instance) {
-      if (!!(process.env.NODE_ENV !== "production")) {
-        this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
-        this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
-      }
-      if (instance.type.ce) {
-        (instance.renderEffects || (instance.renderEffects = [])).push(this);
-      }
-      job.i = instance;
-    }
-    this.job = job;
-    this.i = instance;
-  }
-  fn() {
-    const instance = this.i;
-    const scope = this.subs ? this.subs.sub : void 0;
-    const hasUpdateHooks = instance && (instance.bu || instance.u);
-    if (!!(process.env.NODE_ENV !== "production") && instance) {
-      startMeasure(instance, `renderEffect`);
-    }
-    const prev = setCurrentInstance(instance, scope);
-    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
-      instance.isUpdating = true;
-      instance.bu && invokeArrayFns(instance.bu);
-      this.render();
-      queuePostFlushCb(this.updateJob);
-    } else {
-      this.render();
-    }
-    setCurrentInstance(...prev);
-    if (!!(process.env.NODE_ENV !== "production") && instance) {
-      startMeasure(instance, `renderEffect`);
-    }
-  }
-  notify() {
-    const flags = this.flags;
-    if (!(flags & 256)) {
-      queueJob(this.job, this.i ? this.i.uid : void 0);
-    }
-  }
-}
-function renderEffect(fn, noLifecycle = false) {
-  if (inOnceSlot) return fn();
-  const effect = new RenderEffect(fn);
-  if (noLifecycle) {
-    effect.fn = fn;
-  }
-  effect.run();
-}
-
-const displayName = "VaporTransition";
-const decorate$1 = (t) => {
-  t.displayName = displayName;
-  t.props = TransitionPropsValidators;
-  t.__vapor = true;
-  return t;
-};
-const VaporTransition = /* @__PURE__ */ decorate$1((props, { slots }) => {
-  let resetDisplay;
-  if (isHydrating && currentHydrationNode && isTemplateNode(currentHydrationNode)) {
-    const {
-      content: { firstChild },
-      parentNode
-    } = currentHydrationNode;
-    if (firstChild) {
-      if (firstChild instanceof HTMLElement || firstChild instanceof SVGElement) {
-        const originalDisplay = firstChild.style.display;
-        firstChild.style.display = "none";
-        resetDisplay = () => firstChild.style.display = originalDisplay;
-      }
-      parentNode.replaceChild(firstChild, currentHydrationNode);
-      setCurrentHydrationNode(firstChild);
-    }
-  }
-  const children = slots.default && slots.default();
-  if (!children) return [];
-  const instance = currentInstance;
-  const { mode } = props;
-  checkTransitionMode(mode);
-  let resolvedProps;
-  renderEffect(() => resolvedProps = resolveTransitionProps(props));
-  const hooks = applyTransitionHooks(children, {
-    state: useTransitionState(),
-    // use proxy to keep props reference stable
-    props: new Proxy({}, {
-      get(_, key) {
-        return resolvedProps[key];
-      }
-    }),
-    instance
-  });
-  if (resetDisplay && resolvedProps.appear) {
-    const child = findTransitionBlock(children);
-    hooks.beforeEnter(child);
-    resetDisplay();
-    queuePostFlushCb(() => hooks.enter(child));
-  }
-  return children;
-});
-const getTransitionHooksContext = (key, props, state, instance, postClone) => {
-  const { leavingNodes } = state;
-  const context = {
-    setLeavingNodeCache: (el) => {
-      leavingNodes.set(key, el);
-    },
-    unsetLeavingNodeCache: (el) => {
-      const leavingNode = leavingNodes.get(key);
-      if (leavingNode === el) {
-        leavingNodes.delete(key);
-      }
-    },
-    earlyRemove: () => {
-      const leavingNode = leavingNodes.get(key);
-      if (leavingNode && leavingNode[leaveCbKey]) {
-        leavingNode[leaveCbKey]();
-      }
-    },
-    cloneHooks: (block) => {
-      const hooks = resolveTransitionHooks(
-        block,
-        props,
-        state,
-        instance,
-        postClone
-      );
-      if (postClone) postClone(hooks);
-      return hooks;
-    }
-  };
-  return context;
-};
-function resolveTransitionHooks(block, props, state, instance, postClone) {
-  const context = getTransitionHooksContext(
-    String(block.$key),
-    props,
-    state,
-    instance,
-    postClone
-  );
-  const hooks = baseResolveTransitionHooks(
-    context,
-    props,
-    state,
-    instance
-  );
-  hooks.state = state;
-  hooks.props = props;
-  hooks.instance = instance;
-  return hooks;
-}
-function applyTransitionHooks(block, hooks) {
-  if (isArray(block)) {
-    block = block.filter((b) => !(b instanceof Comment));
-    if (block.length === 1) {
-      block = block[0];
-    } else if (block.length === 0) {
-      return hooks;
+      const slot = getSlot(rawSlots, slotName);
+      if (slot) {
+        fragment.fallback = fallback;
+        fragment.update(
+          slot._bound || (slot._bound = () => {
+            const prevSlotScopeIds = setCurrentSlotScopeIds(
+              slotScopeIds.length > 0 ? slotScopeIds : null
+            );
+            const prev = inOnceSlot;
+            try {
+              if (once) inOnceSlot = true;
+              return slot(slotProps);
+            } finally {
+              inOnceSlot = prev;
+              setCurrentSlotScopeIds(prevSlotScopeIds);
+            }
+          })
+        );
+      } else {
+        fragment.update(fallback);
+      }
+    };
+    if (!once && (isDynamicName || rawSlots.$)) {
+      renderEffect(renderSlot);
+    } else {
+      renderSlot();
     }
   }
-  const fragments = [];
-  const child = findTransitionBlock(block, (frag) => fragments.push(frag));
-  if (!child) {
-    fragments.forEach((f) => f.$transition = hooks);
-    if (!!(process.env.NODE_ENV !== "production") && fragments.length === 0) {
-      warn("Transition component has no valid child element");
+  if (!isHydrating) {
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        setScopeId(fragment, [`${scopeId}-s`]);
+      }
+    }
+    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
+  } else {
+    if (fragment.insert) {
+      fragment.hydrate();
+    }
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
     }
-    return hooks;
   }
-  const { props, instance, state, delayedLeave } = hooks;
-  let resolvedHooks = resolveTransitionHooks(
-    child,
-    props,
-    state,
-    instance,
-    (hooks2) => resolvedHooks = hooks2
-  );
-  resolvedHooks.delayedLeave = delayedLeave;
-  child.$transition = resolvedHooks;
-  fragments.forEach((f) => f.$transition = resolvedHooks);
-  return resolvedHooks;
+  return fragment;
 }
-function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
-  const leavingBlock = findTransitionBlock(block);
-  if (!leavingBlock) return void 0;
-  const { props, state, instance } = enterHooks;
-  const leavingHooks = resolveTransitionHooks(
-    leavingBlock,
-    props,
-    state,
-    instance
-  );
-  leavingBlock.$transition = leavingHooks;
-  const { mode } = props;
-  if (mode === "out-in") {
-    state.isLeaving = true;
-    leavingHooks.afterLeave = () => {
-      state.isLeaving = false;
-      afterLeaveCb();
-      leavingBlock.$transition = void 0;
-      delete leavingHooks.afterLeave;
+
+class RenderEffect extends ReactiveEffect {
+  constructor(render) {
+    super();
+    this.render = render;
+    const instance = currentInstance;
+    if (!!(process.env.NODE_ENV !== "production") && true && !this.subs && !isVaporComponent(instance)) {
+      warn("renderEffect called without active EffectScope or Vapor instance.");
+    }
+    const job = () => {
+      if (this.dirty) {
+        this.run();
+      }
     };
-  } else if (mode === "in-out") {
-    leavingHooks.delayLeave = (block2, earlyRemove, delayedLeave) => {
-      state.leavingNodes.set(String(leavingBlock.$key), leavingBlock);
-      block2[leaveCbKey] = () => {
-        earlyRemove();
-        block2[leaveCbKey] = void 0;
-        leavingBlock.$transition = void 0;
-        delete enterHooks.delayedLeave;
-      };
-      enterHooks.delayedLeave = () => {
-        delayedLeave();
-        leavingBlock.$transition = void 0;
-        delete enterHooks.delayedLeave;
-      };
+    this.updateJob = () => {
+      instance.isUpdating = false;
+      instance.u && invokeArrayFns(instance.u);
     };
-  }
-}
-function findTransitionBlock(block, onFragment) {
-  let child;
-  if (block instanceof Node) {
-    if (block instanceof Element) child = block;
-  } else if (isVaporComponent(block)) {
-    if (isAsyncWrapper(block) && !block.type.__asyncResolved) {
-      child = block;
-    } else {
-      if (getComponentName(block.type) === displayName) return void 0;
-      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;
-      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."
-        );
-        break;
+    if (instance) {
+      if (!!(process.env.NODE_ENV !== "production")) {
+        this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+        this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
       }
-      child = item;
-      hasFound = true;
-      if (!!!(process.env.NODE_ENV !== "production")) break;
+      if (instance.type.ce) {
+        (instance.renderEffects || (instance.renderEffects = [])).push(this);
+      }
+      job.i = instance;
     }
-  } else if (isFragment(block)) {
-    if (block.insert) {
-      child = block;
+    this.job = job;
+    this.i = instance;
+  }
+  fn() {
+    const instance = this.i;
+    const scope = this.subs ? this.subs.sub : void 0;
+    const hasUpdateHooks = instance && (instance.bu || instance.u);
+    if (!!(process.env.NODE_ENV !== "production") && instance) {
+      startMeasure(instance, `renderEffect`);
+    }
+    const prev = setCurrentInstance(instance, scope);
+    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
+      instance.isUpdating = true;
+      instance.bu && invokeArrayFns(instance.bu);
+      this.render();
+      queuePostFlushCb(this.updateJob);
     } else {
-      if (onFragment) onFragment(block);
-      child = findTransitionBlock(block.nodes, onFragment);
+      this.render();
     }
-  }
-  return child;
-}
-function setTransitionHooksOnFragment(block, hooks) {
-  if (isFragment(block)) {
-    block.$transition = hooks;
-    if (block.nodes && isFragment(block.nodes)) {
-      setTransitionHooksOnFragment(block.nodes, hooks);
+    setCurrentInstance(...prev);
+    if (!!(process.env.NODE_ENV !== "production") && instance) {
+      startMeasure(instance, `renderEffect`);
     }
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      setTransitionHooksOnFragment(block[i], hooks);
+  }
+  notify() {
+    const flags = this.flags;
+    if (!(flags & 256)) {
+      queueJob(this.job, this.i ? this.i.uid : void 0);
     }
   }
 }
-function setTransitionHooks(block, hooks) {
-  if (isVaporComponent(block)) {
-    block = findTransitionBlock(block.block);
-    if (!block) return;
+function renderEffect(fn, noLifecycle = false) {
+  if (inOnceSlot) return fn();
+  const effect = new RenderEffect(fn);
+  if (noLifecycle) {
+    effect.fn = fn;
   }
-  block.$transition = hooks;
+  effect.run();
 }
 
 class VaporFragment {
@@ -2381,49 +2523,12 @@ class ForFragment extends VaporFragment {
   }
 }
 class DynamicFragment extends VaporFragment {
-  constructor(anchorLabel) {
+  constructor(anchorLabel, keyed = false) {
     super([]);
     this.hydrate = (isEmpty = false) => {
-      if (this.anchor) return;
-      if (this.anchorLabel === "if") {
-        if (isEmpty) {
-          this.anchor = locateFragmentEndAnchor("");
-          if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
-            throw new Error(
-              "Failed to locate if anchor. this is likely a Vue internal bug."
-            );
-          } else {
-            if (!!(process.env.NODE_ENV !== "production")) {
-              this.anchor.data = this.anchorLabel;
-            }
-            return;
-          }
-        }
-      } else if (this.anchorLabel === "slot") {
-        if (isEmpty && isComment(currentHydrationNode, "")) {
-          this.anchor = currentHydrationNode;
-          if (!!(process.env.NODE_ENV !== "production")) {
-            this.anchor.data = this.anchorLabel;
-          }
-          return;
-        }
-        this.anchor = locateFragmentEndAnchor();
-        if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
-          throw new Error(
-            "Failed to locate slot anchor. this is likely a Vue internal bug."
-          );
-        } else {
-          return;
-        }
-      }
-      const { parentNode, nextNode } = findBlockNode(this.nodes);
-      queuePostFlushCb(() => {
-        parentNode.insertBefore(
-          this.anchor = !!(process.env.NODE_ENV !== "production") ? createComment(this.anchorLabel) : createTextNode(),
-          nextNode
-        );
-      });
+      hydrateDynamicFragment(this, isEmpty);
     };
+    this.keyed = keyed;
     this.slotOwner = currentSlotOwner;
     if (isHydrating) {
       this.anchorLabel = anchorLabel;
@@ -2528,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);
       }
@@ -2592,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",
@@ -2604,6 +2723,11 @@ const VaporTeleportImpl = {
 class TeleportFragment extends VaporFragment {
   constructor(props, slots) {
     super([]);
+    /**
+     * @internal marker for duck typing to avoid direct instanceof check
+     * which prevents tree-shaking of TeleportFragment
+     */
+    this.__isTeleportFragment = true;
     this.insert = (container, anchor) => {
       if (isHydrating) return;
       this.placeholder = !!(process.env.NODE_ENV !== "production") ? createComment("teleport start") : createTextNode();
@@ -2704,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)) {
@@ -2728,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;
@@ -2817,7 +2941,10 @@ Server rendered element contains fewer child nodes than client nodes.`
   }
 }
 function isVaporTeleport(value) {
-  return value === VaporTeleportImpl;
+  return !!(value && value.__isTeleport && value.__vapor);
+}
+function isTeleportFragment(value) {
+  return !!(value && value.__isTeleportFragment);
 }
 function locateTeleportEndAnchor(node = currentHydrationNode) {
   while (node) {
@@ -3019,7 +3146,7 @@ function normalizeBlock(block) {
   } else if (isVaporComponent(block)) {
     nodes.push(...normalizeBlock(block.block));
   } else {
-    if (block instanceof TeleportFragment) {
+    if (isTeleportFragment(block)) {
       nodes.push(block.placeholder, block.anchor);
     } else {
       nodes.push(...normalizeBlock(block.nodes));
@@ -3095,6 +3222,18 @@ function setComponentScopeId(instance) {
     setScopeId(instance.block, scopeIds);
   }
 }
+let _applyTransitionHooks;
+let _applyTransitionLeaveHooks;
+function registerTransitionHooks(applyHooks, applyLeaveHooks) {
+  _applyTransitionHooks = applyHooks;
+  _applyTransitionLeaveHooks = applyLeaveHooks;
+}
+function applyTransitionHooks(block, hooks) {
+  return _applyTransitionHooks ? _applyTransitionHooks(block, hooks) : hooks;
+}
+function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
+  _applyTransitionLeaveHooks && _applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb);
+}
 
 function hmrRerender(instance) {
   const normalized = normalizeBlock(instance.block);
@@ -3187,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) {
@@ -3197,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);
@@ -3444,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,
@@ -3515,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;
@@ -3542,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) {
@@ -3576,7 +3721,7 @@ function getRootElement(block, onDynamicFragment, recurse = true) {
   if (recurse && isVaporComponent(block)) {
     return getRootElement(block.block, onDynamicFragment, recurse);
   }
-  if (isFragment(block) && !(block instanceof TeleportFragment)) {
+  if (isFragment(block) && !isTeleportFragment(block)) {
     if (block instanceof DynamicFragment && onDynamicFragment) {
       onDynamicFragment(block);
     }
@@ -3654,7 +3799,7 @@ function handleSetupResult(setupResult, component, instance) {
       });
     } else if (!!(process.env.NODE_ENV !== "production") && (!instance.accessedAttrs && isArray(instance.block) && instance.block.length || // preventing attrs fallthrough on Teleport
     // consistent with VDOM Teleport behavior
-    instance.block instanceof TeleportFragment)) {
+    isTeleportFragment(instance.block))) {
       warnExtraneousAttributes(instance.attrs);
     }
   }
@@ -3832,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;
@@ -3991,7 +4139,6 @@ class VaporElement extends VueElementBase {
 }
 
 let t;
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function template(html, root, ns) {
   let node;
@@ -4028,7 +4175,7 @@ function createIf(condition, b1, b2, once) {
   if (!isHydrating) resetInsertionState();
   let frag;
   if (once) {
-    frag = condition() ? b1() : b2 ? b2() : [];
+    frag = condition() ? b1() : b2 ? b2() : [!!(process.env.NODE_ENV !== "production") ? createComment("if") : createTextNode()];
   } else {
     frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
     renderEffect(() => frag.update(condition() ? b1 : b2));
@@ -4048,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);
@@ -4541,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;
@@ -4659,11 +4811,11 @@ function resolveParentNode(block) {
   if (block instanceof Node) {
     return block.parentNode;
   } else if (isArray(block)) {
-    return resolveParentNode(block[0]);
+    return resolveParentNode(block[block.length - 1]);
   } else if (isVaporComponent(block)) {
     return resolveParentNode(block.block);
   } else {
-    return resolveParentNode(block.nodes);
+    return resolveParentNode(block.anchor || block.nodes);
   }
 }
 function setVars(instance, vars) {
@@ -4694,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);
@@ -4886,13 +5049,14 @@ const decorate = (t) => {
   t.__vapor = true;
   return t;
 };
-const VaporTransitionGroup = decorate({
+const VaporTransitionGroupImpl = {
   name: "VaporTransitionGroup",
   props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
     tag: String,
     moveClass: String
   }),
   setup(props, { slots }) {
+    ensureTransitionHooksRegistered();
     const instance = currentInstance;
     const state = useTransitionState();
     let cssTransitionProps = resolveTransitionProps(props);
@@ -4984,7 +5148,8 @@ const VaporTransitionGroup = decorate({
       return slottedBlock;
     }
   }
-});
+};
+const VaporTransitionGroup = /* @__PURE__ */ decorate(VaporTransitionGroupImpl);
 function getTransitionBlocks(block) {
   let children = [];
   if (block instanceof Node) {