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

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.2
 * (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 { 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 { 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;
@@ -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: {
@@ -916,22 +1196,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 +1285,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(
@@ -1041,6 +1320,7 @@ 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;
@@ -1078,7 +1358,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 +1368,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 +1397,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();
@@ -1385,6 +1665,9 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       },
       instance
     );
+    if (isMounted && rawRef) {
+      setRef$1(rawRef, null, null, vnode);
+    }
   };
   return frag;
 }
@@ -1576,7 +1859,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 +1899,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 +1935,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 +1959,7 @@ function getPropsProxyHandlers(comp, once) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getPropValue(target, key)
+          get: () => (once ? getOnceProp : getProp)(target, key)
         };
       }
     }
@@ -1669,14 +1982,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 +1994,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 +2017,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 +2064,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 +2132,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 +2186,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,11 +2206,13 @@ const dynamicSlotsProxyHandlers = {
       keys = keys.filter((k) => k !== "$");
       for (const source of dynamicSources) {
         if (isFunction(source)) {
-          const slot = resolveDynamicSlot(source);
-          if (isArray(slot)) {
-            for (const s of slot) keys.push(String(s.name));
-          } else {
-            keys.push(String(slot.name));
+          const slot = resolveFunctionSource(source);
+          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));
@@ -1925,7 +2233,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) {
@@ -2028,335 +2336,98 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
         );
       } 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;
-  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;
-    }
-  });
-  const hooks = applyTransitionHooks(children, {
-    state: useTransitionState(),
-    props: resolvedProps,
-    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, isResolved = false) {
-  if (isArray(block)) {
-    block = block.filter((b) => !(b instanceof Comment));
-    if (block.length === 1) {
-      block = block[0];
-    } else if (block.length === 0) {
-      return hooks;
+      }
+    };
+    if (!once && (isDynamicName || rawSlots.$)) {
+      renderEffect(renderSlot);
+    } else {
+      renderSlot();
     }
   }
-  const isFrag = isFragment(block);
-  const child = isResolved ? block : findTransitionBlock(block, isFrag);
-  if (!child) {
-    if (isFrag) setTransitionHooksOnFragment(block, hooks);
-    return hooks;
+  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);
+    }
   }
-  const { props, instance, state, delayedLeave } = hooks;
-  let resolvedHooks = resolveTransitionHooks(
-    child,
-    props,
-    state,
-    instance,
-    (hooks2) => resolvedHooks = hooks2
-  );
-  resolvedHooks.delayedLeave = delayedLeave;
-  child.$transition = resolvedHooks;
-  if (isFrag) setTransitionHooksOnFragment(block, 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, inFragment = false) {
-  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, inFragment);
-      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);
-      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)) {
-    inFragment = true;
-    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 {
-      child = findTransitionBlock(block.nodes, true);
+      this.render();
     }
-  }
-  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
-    warn("Transition component has no valid child element");
-  }
-  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 {
@@ -2374,45 +2445,7 @@ class DynamicFragment extends VaporFragment {
   constructor(anchorLabel) {
     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.slotOwner = currentSlotOwner;
     if (isHydrating) {
@@ -2428,28 +2461,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);
@@ -2581,6 +2627,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();
@@ -2794,7 +2845,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) {
@@ -2876,6 +2930,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);
@@ -2923,7 +3050,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));
@@ -2999,6 +3126,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);
@@ -3450,7 +3589,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) {
@@ -3480,7 +3619,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);
     }
@@ -3558,7 +3697,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);
     }
   }
@@ -3895,7 +4034,6 @@ class VaporElement extends VueElementBase {
 }
 
 let t;
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function template(html, root, ns) {
   let node;
@@ -3932,7 +4070,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));
@@ -3953,9 +4091,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 {
@@ -4565,11 +4701,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) {
@@ -4601,13 +4737,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
     );
@@ -4789,16 +4928,25 @@ 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();
-    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 +4997,7 @@ const VaporTransitionGroup = decorate({
       prevChildren = [];
     });
     setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
+      props: propsProxy,
       state,
       instance
     });
@@ -4860,7 +5008,7 @@ const VaporTransitionGroup = decorate({
         if (child.$key != null) {
           const hooks = resolveTransitionHooks(
             child,
-            cssTransitionProps,
+            propsProxy,
             state,
             instance
           );
@@ -4879,7 +5027,8 @@ const VaporTransitionGroup = decorate({
       return slottedBlock;
     }
   }
-});
+};
+const VaporTransitionGroup = /* @__PURE__ */ decorate(VaporTransitionGroupImpl);
 function getTransitionBlocks(block) {
   let children = [];
   if (block instanceof Node) {