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

package/dist/runtime-vapor.d.ts

@@ -396,7 +396,6 @@ export declare function setInsertionState(parent: ParentNode & {
     $fc?: Node | null;
 }, anchor?: Node | 0 | null | number, last?: boolean): void;
 
-/*! #__NO_SIDE_EFFECTS__ */
 export declare function template(html: string, root?: boolean, ns?: Namespace): () => Node & {
     $root?: true;
 };

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.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, 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, 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, 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: {
@@ -1040,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;
@@ -1384,6 +1665,9 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       },
       instance
     );
+    if (isMounted && rawRef) {
+      setRef$1(rawRef, null, null, vnode);
+    }
   };
   return frag;
 }
@@ -1923,10 +2207,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));
@@ -2144,231 +2430,6 @@ function renderEffect(fn, noLifecycle = false) {
   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 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 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;
-    };
-  } 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;
-}
-
 class VaporFragment {
   constructor(nodes) {
     this.vnode = null;
@@ -2384,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) {
@@ -2604,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();
@@ -2817,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) {
@@ -3019,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));
@@ -3095,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);
@@ -3576,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);
     }
@@ -3654,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);
     }
   }
@@ -3991,7 +4034,6 @@ class VaporElement extends VueElementBase {
 }
 
 let t;
-/*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function template(html, root, ns) {
   let node;
@@ -4028,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));
@@ -4659,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) {
@@ -4886,13 +4928,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 +5027,8 @@ const VaporTransitionGroup = decorate({
       return slottedBlock;
     }
   }
-});
+};
+const VaporTransitionGroup = /* @__PURE__ */ decorate(VaporTransitionGroupImpl);
 function getTransitionBlocks(block) {
   let children = [];
   if (block instanceof Node) {

package/package.json

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