@vue/runtime-vapor 3.6.0-alpha.4 → 3.6.0-alpha.5

package/dist/runtime-vapor.d.ts

@@ -4,7 +4,7 @@ import { Namespace, NormalizedStyle } from '@vue/shared';
 
 type NodeRef = string | Ref | ((ref: Element | VaporComponentInstance, refs: Record<string, any>) => void);
 type RefEl = Element | VaporComponentInstance;
-type setRefFn = (el: RefEl, ref: NodeRef, oldRef?: NodeRef, refFor?: boolean) => NodeRef | undefined;
+type setRefFn = (el: RefEl, ref: NodeRef, oldRef?: NodeRef, refFor?: boolean, refKey?: string) => NodeRef | undefined;
 export declare function createTemplateRefSetter(): setRefFn;
 
 export declare class VaporFragment<T extends Block = Block> implements TransitionOptions {
@@ -18,6 +18,7 @@ export declare class VaporFragment<T extends Block = Block> implements Transitio
     remove?: (parent?: ParentNode, transitionHooks?: TransitionHooks) => void;
     hydrate?: (...args: any[]) => void;
     setRef?: (instance: VaporComponentInstance, ref: NodeRef, refFor: boolean, refKey: string | undefined) => void;
+    updated?: ((nodes?: Block) => void)[];
     constructor(nodes: T);
 }
 declare class ForFragment extends VaporFragment<Block[]> {
@@ -29,8 +30,9 @@ declare class DynamicFragment extends VaporFragment {
     current?: BlockFn;
     fallback?: BlockFn;
     anchorLabel?: string;
-    inKeepAlive?: boolean;
-    keptAliveScopes?: Map<any, EffectScope>;
+    getScope?: (key: any) => EffectScope | undefined;
+    beforeTeardown?: ((oldKey: any, nodes: Block, scope: EffectScope) => boolean)[];
+    beforeMount?: ((newKey: any, nodes: Block, scope: EffectScope) => void)[];
     constructor(anchorLabel?: string);
     update(render?: BlockFn, key?: any): void;
     private render;
@@ -109,6 +111,7 @@ declare class TeleportFragment extends VaporFragment {
     private rawProps?;
     private resolvedProps?;
     private rawSlots?;
+    isDisabled?: boolean;
     target?: ParentNode | null;
     targetAnchor?: Node | null;
     targetStart?: Node | null;
@@ -348,7 +351,7 @@ export declare function setHtml(el: TargetElement, value: any): void;
 export declare function setBlockHtml(block: Block & {
     $html?: string;
 }, value: any): void;
-export declare function setDynamicProps(el: any, args: any[], root?: boolean, isSVG?: boolean): void;
+export declare function setDynamicProps(el: any, args: any[], isSVG?: boolean): void;
 
 export declare function on(el: Element, event: string, handler: (e: Event) => any, options?: AddEventListenerOptions & {
     effect?: boolean;
@@ -370,6 +373,8 @@ export declare function createForSlots(rawSource: Source, getSlot: (item: any, k
 export declare function getRestElement(val: any, keys: string[]): any;
 export declare function getDefaultValue(val: any, defaultVal: any): any;
 
+export declare function useVaporCssVars(getter: () => Record<string, string>): void;
+
 export declare function createDynamicComponent(getter: () => any, rawProps?: RawProps | null, rawSlots?: RawSlots | null, isSingleRoot?: boolean, once?: boolean): VaporFragment;
 
 export declare function applyVShow(target: Block, source: () => any): void;

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

@@ -1,10 +1,10 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.4
+* @vue/runtime-vapor v3.6.0-alpha.5
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, isKeepAlive, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, onMounted, onUpdated, onBeforeUnmount, resetShapeFlag, watch, matches, devtoolsComponentAdded, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation, createCanSetSetupRefChecker, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
-import { invokeArrayFns, isArray, extend, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, EMPTY_OBJ, isFunction, NO, hasOwn, isReservedProp, EMPTY_ARR, YES, getGlobalThis, isPlainObject, isObject, remove as remove$1, looseEqual } from '@vue/shared';
+import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, 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, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation, createCanSetSetupRefChecker, baseUseCssVars, setVarsOnNode, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
+import { invokeArrayFns, isArray, extend, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, normalizeCssVarValue, getEscapedCssVarName, EMPTY_OBJ, isFunction, NO, hasOwn, isReservedProp, EMPTY_ARR, YES, getGlobalThis, isPlainObject, isObject, remove as remove$1, looseEqual } from '@vue/shared';
 import { ReactiveEffect, setActiveSub, EffectScope, onEffectCleanup, pauseTracking, resetTracking, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
 let insertionParent;
@@ -733,14 +733,14 @@ class DynamicFragment extends VaporFragment {
     const prevSub = setActiveSub();
     const parent = isHydrating ? null : this.anchor.parentNode;
     const transition = this.$transition;
-    const instance = currentInstance;
-    this.inKeepAlive = isKeepAlive(instance);
     if (this.scope) {
-      if (this.inKeepAlive) {
-        instance.processFragment(this);
-        if (!this.keptAliveScopes) this.keptAliveScopes = /* @__PURE__ */ new Map();
-        this.keptAliveScopes.set(this.current, this.scope);
-      } else {
+      let preserveScope = false;
+      if (this.beforeTeardown) {
+        preserveScope = this.beforeTeardown.some(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (!preserveScope) {
         this.scope.stop();
       }
       const mode = transition && transition.mode;
@@ -748,7 +748,7 @@ class DynamicFragment extends VaporFragment {
         applyTransitionLeaveHooks(
           this.nodes,
           transition,
-          () => this.render(render, instance, transition, parent)
+          () => this.render(render, transition, parent)
         );
         parent && remove(this.nodes, parent);
         if (mode === "out-in") {
@@ -759,7 +759,7 @@ class DynamicFragment extends VaporFragment {
         parent && remove(this.nodes, parent);
       }
     }
-    this.render(render, instance, transition, parent);
+    this.render(render, transition, parent);
     if (this.fallback) {
       const hasNestedFragment = isFragment(this.nodes);
       if (hasNestedFragment) {
@@ -782,24 +782,29 @@ class DynamicFragment extends VaporFragment {
     setActiveSub(prevSub);
     if (isHydrating) this.hydrate();
   }
-  render(render, instance, transition, parent) {
+  render(render, transition, parent) {
     if (render) {
-      const scope = this.inKeepAlive && this.keptAliveScopes ? this.keptAliveScopes.get(this.current) : void 0;
+      const scope = this.getScope && this.getScope(this.current);
       if (scope) {
         this.scope = scope;
-        this.keptAliveScopes.delete(this.current);
-        this.scope.resume();
       } else {
         this.scope = new EffectScope();
       }
       this.nodes = this.scope.run(render) || [];
-      if (this.inKeepAlive) {
-        instance.cacheFragment(this);
-      }
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition);
       }
-      if (parent) insert(this.nodes, parent, this.anchor);
+      if (this.beforeMount) {
+        this.beforeMount.forEach(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (parent) {
+        insert(this.nodes, parent, this.anchor);
+        if (this.anchor.isConnected && this.updated) {
+          this.updated.forEach((hook) => hook(this.nodes));
+        }
+      }
     } else {
       this.scope = void 0;
       this.nodes = [];
@@ -837,6 +842,9 @@ function findInvalidFragment(fragment) {
 function isFragment(val) {
   return val instanceof VaporFragment;
 }
+function isDynamicFragment(val) {
+  return val instanceof DynamicFragment;
+}
 
 function addEventListener(el, event, handler, options) {
   el.addEventListener(event, handler, options);
@@ -1031,14 +1039,29 @@ function setClassIncremental(el, value) {
     }
   }
 }
+function shouldDeferCheckStyleMismatch(el) {
+  return !!(process.env.NODE_ENV !== "production") && (!!currentInstance.getCssVars || Object.values(el.style).some((v) => v.startsWith("--")));
+}
 function setStyle(el, value) {
   if (el.$root) {
     setStyleIncremental(el, value);
   } else {
     const normalizedValue = normalizeStyle(value);
-    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, false)) {
-      el.$sty = normalizedValue;
-      return;
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+      if (shouldDeferCheckStyleMismatch(el)) {
+        const instance = currentInstance;
+        queuePostFlushCb(() => {
+          if (!styleHasMismatch(el, value, normalizedValue, false, instance)) {
+            el.$sty = normalizedValue;
+            return;
+          }
+          patchStyle(el, el.$sty, el.$sty = normalizedValue);
+        });
+        return;
+      } else if (!styleHasMismatch(el, value, normalizedValue, false)) {
+        el.$sty = normalizedValue;
+        return;
+      }
     }
     patchStyle(el, el.$sty, el.$sty = normalizedValue);
   }
@@ -1046,9 +1069,21 @@ function setStyle(el, value) {
 function setStyleIncremental(el, value) {
   const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
   const normalizedValue = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, true)) {
-    el[cacheKey] = normalizedValue;
-    return;
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+    if (shouldDeferCheckStyleMismatch(el)) {
+      const instance = currentInstance;
+      queuePostFlushCb(() => {
+        if (!styleHasMismatch(el, value, normalizedValue, true, instance)) {
+          el[cacheKey] = normalizedValue;
+          return;
+        }
+        patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
+      });
+      return;
+    } else if (!styleHasMismatch(el, value, normalizedValue, true)) {
+      el[cacheKey] = normalizedValue;
+      return;
+    }
   }
   patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
 }
@@ -1169,11 +1204,10 @@ function setHtmlToBlock(block, value) {
     setHtmlToBlock(block.nodes, value);
   }
 }
-function setDynamicProps(el, args, root, isSVG) {
+function setDynamicProps(el, args, isSVG) {
   const props = args.length > 1 ? mergeProps(...args) : args[0];
   const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
   const prevKeys = el[cacheKey];
-  if (root) el.$root = root;
   if (prevKeys) {
     for (const key of prevKeys) {
       if (!(key in props)) {
@@ -1249,7 +1283,7 @@ function classHasMismatch(el, expected, isIncremental) {
   }
   return false;
 }
-function styleHasMismatch(el, value, normalizedValue, isIncremental) {
+function styleHasMismatch(el, value, normalizedValue, isIncremental, instance = currentInstance) {
   const actual = el.getAttribute("style");
   const actualStyleMap = toStyleMap(actual || "");
   const expected = isString(value) ? value : stringifyStyle(normalizedValue);
@@ -1257,6 +1291,9 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   if (el[vShowHidden]) {
     expectedStyleMap.set("display", "none");
   }
+  if (instance) {
+    resolveCssVars(instance, el, expectedStyleMap);
+  }
   let hasMismatch = false;
   if (isIncremental) {
     if (expected) {
@@ -1274,6 +1311,24 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   }
   return false;
 }
+function resolveCssVars(instance, block, expectedMap) {
+  if (!instance.isMounted) return;
+  const rootBlocks = normalizeBlock(instance);
+  if (instance.getCssVars && normalizeBlock(block).every((b) => rootBlocks.includes(b))) {
+    const cssVars = instance.getCssVars();
+    for (const key in cssVars) {
+      const value = normalizeCssVarValue(cssVars[key]);
+      expectedMap.set(`--${getEscapedCssVarName(key, false)}`, value);
+    }
+  }
+  if (normalizeBlock(block).every((b) => rootBlocks.includes(b)) && instance.parent) {
+    resolveCssVars(
+      instance.parent,
+      instance.block,
+      expectedMap
+    );
+  }
+}
 function attributeHasMismatch(el, key, value) {
   if (isValidHtmlOrSvgAttribute(el, key)) {
     const { actual, expected } = getAttributeMismatch(el, key, value);
@@ -1508,21 +1563,22 @@ const VaporKeepAliveImpl = defineVaporComponent({
     const cache = /* @__PURE__ */ new Map();
     const keys = /* @__PURE__ */ new Set();
     const storageContainer = createElement("div");
+    const keptAliveScopes = /* @__PURE__ */ new Map();
     let current;
     if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
       keepAliveInstance.__v_cache = cache;
     }
-    function shouldCache(instance) {
-      if (isAsyncWrapper(instance) && !instance.type.__asyncResolved) {
-        return false;
-      }
-      const { include, exclude } = props;
-      const name = getComponentName(
-        isAsyncWrapper(instance) ? instance.type.__asyncResolved : instance.type
-      );
-      return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
-    }
-    function innerCacheBlock(key, instance) {
+    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;
       if (cache.has(key)) {
         keys.delete(key);
@@ -1535,116 +1591,49 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.set(key, instance);
       current = instance;
-    }
-    function cacheBlock() {
-      const block = keepAliveInstance.block;
-      const innerBlock = getInnerBlock(block);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
-      let key;
-      let frag;
-      if (isFragment(block) && (frag = findInteropFragment(block))) {
-        toCache = frag;
-        key = frag.vnode.type;
-      } else {
-        toCache = innerBlock;
-        key = innerBlock.type;
-      }
-      innerCacheBlock(key, toCache);
-    }
-    onMounted(cacheBlock);
-    onUpdated(cacheBlock);
-    onBeforeUnmount(() => {
-      cache.forEach((cached, key) => {
-        const instance = getInstanceFromCache(cached);
-        if (!instance) return;
-        resetCachedShapeFlag(cached);
-        cache.delete(key);
-        if (current) {
-          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
-          if (currentKey === key) {
-            const da = instance.da;
-            da && queuePostFlushCb(da);
-            return;
-          }
-        }
-        remove(cached, storageContainer);
-      });
-    });
-    keepAliveInstance.getStorageContainer = () => storageContainer;
-    keepAliveInstance.getCachedComponent = (comp) => {
-      return cache.get(comp);
     };
-    keepAliveInstance.cacheComponent = (instance) => {
-      if (!shouldCache(instance)) return;
-      instance.shapeFlag |= 256;
-      innerCacheBlock(instance.type, instance);
+    const cacheBlock = () => {
+      const block = keepAliveInstance.block;
+      const [innerBlock, interop] = getInnerBlock(block);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
+      innerCacheBlock(
+        interop ? innerBlock.vnode.type : innerBlock.type,
+        innerBlock
+      );
     };
-    keepAliveInstance.processFragment = (frag) => {
-      const innerBlock = getInnerBlock(frag.nodes);
-      if (!innerBlock) return;
-      const fragment = findInteropFragment(frag.nodes);
-      if (fragment) {
-        if (cache.has(fragment.vnode.type)) {
-          fragment.vnode.shapeFlag |= 512;
+    const processFragment = (frag) => {
+      const [innerBlock, interop] = getInnerBlock(frag.nodes);
+      if (!innerBlock && !shouldCache(innerBlock, props, interop)) return;
+      if (interop) {
+        if (cache.has(innerBlock.vnode.type)) {
+          innerBlock.vnode.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
-          fragment.vnode.shapeFlag |= 256;
+        if (shouldCache(innerBlock, props, true)) {
+          innerBlock.vnode.shapeFlag |= 256;
         }
       } else {
         if (cache.has(innerBlock.type)) {
           innerBlock.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
+        if (shouldCache(innerBlock, props)) {
           innerBlock.shapeFlag |= 256;
         }
       }
     };
-    keepAliveInstance.cacheFragment = (fragment) => {
-      const innerBlock = getInnerBlock(fragment.nodes);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
+    const cacheFragment = (fragment) => {
+      const [innerBlock, interop] = getInnerBlock(fragment.nodes);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
       let key;
-      const frag = findInteropFragment(fragment);
-      if (frag) {
-        frag.vnode.shapeFlag |= 256;
-        toCache = frag;
-        key = frag.vnode.type;
+      if (interop) {
+        innerBlock.vnode.shapeFlag |= 256;
+        key = innerBlock.vnode.type;
       } else {
         innerBlock.shapeFlag |= 256;
-        toCache = innerBlock;
         key = innerBlock.type;
       }
-      innerCacheBlock(key, toCache);
+      innerCacheBlock(key, innerBlock);
     };
-    keepAliveInstance.activate = (instance, parentNode, anchor) => {
-      current = instance;
-      activate(instance, parentNode, anchor);
-    };
-    keepAliveInstance.deactivate = (instance) => {
-      current = void 0;
-      deactivate(instance, storageContainer);
-    };
-    function resetCachedShapeFlag(cached) {
-      if (isVaporComponent(cached)) {
-        resetShapeFlag(cached);
-      } else {
-        resetShapeFlag(cached.vnode);
-      }
-    }
-    let children = slots.default();
-    if (isArray(children) && children.length > 1) {
-      if (!!(process.env.NODE_ENV !== "production")) {
-        warn(`KeepAlive should contain exactly one component child.`);
-      }
-      return children;
-    }
-    if (isVaporComponent(children)) {
-      children.shapeFlag |= 256;
-    } else if (isInteropFragment(children)) {
-      children.vnode.shapeFlag |= 256;
-    }
-    function pruneCache(filter) {
+    const pruneCache = (filter) => {
       cache.forEach((cached, key) => {
         const instance = getInstanceFromCache(cached);
         if (!instance) return;
@@ -1653,8 +1642,8 @@ const VaporKeepAliveImpl = defineVaporComponent({
           pruneCacheEntry(key);
         }
       });
-    }
-    function pruneCacheEntry(key) {
+    };
+    const pruneCacheEntry = (key) => {
       const cached = cache.get(key);
       resetCachedShapeFlag(cached);
       if (cached !== current) {
@@ -1662,7 +1651,7 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.delete(key);
       keys.delete(key);
-    }
+    };
     watch(
       () => [props.include, props.exclude],
       ([include, exclude]) => {
@@ -1672,29 +1661,103 @@ const VaporKeepAliveImpl = defineVaporComponent({
       // prune post-render after `current` has been updated
       { flush: "post", deep: true }
     );
+    onMounted(cacheBlock);
+    onUpdated(cacheBlock);
+    onBeforeUnmount(() => {
+      cache.forEach((cached, key) => {
+        const instance = getInstanceFromCache(cached);
+        if (!instance) return;
+        resetCachedShapeFlag(cached);
+        cache.delete(key);
+        if (current) {
+          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
+          if (currentKey === key) {
+            const da = instance.da;
+            da && queuePostFlushCb(da);
+            return;
+          }
+        }
+        remove(cached, storageContainer);
+      });
+      keptAliveScopes.forEach((scope) => scope.stop());
+      keptAliveScopes.clear();
+    });
+    let children = slots.default();
+    if (isArray(children)) {
+      children = children.filter((child) => !(child instanceof Comment));
+      if (children.length > 1) {
+        if (!!(process.env.NODE_ENV !== "production")) {
+          warn(`KeepAlive should contain exactly one component child.`);
+        }
+        return children;
+      }
+    }
+    const injectKeepAliveHooks = (frag) => {
+      (frag.beforeTeardown || (frag.beforeTeardown = [])).push(
+        (oldKey, nodes, scope) => {
+          processFragment(frag);
+          keptAliveScopes.set(oldKey, scope);
+          return true;
+        }
+      );
+      (frag.beforeMount || (frag.beforeMount = [])).push(
+        () => cacheFragment(frag)
+      );
+      frag.getScope = (key) => {
+        const scope = keptAliveScopes.get(key);
+        if (scope) {
+          keptAliveScopes.delete(key);
+          return scope;
+        }
+      };
+    };
+    if (isVaporComponent(children)) {
+      children.shapeFlag |= 256;
+      if (isAsyncWrapper(children)) {
+        injectKeepAliveHooks(children.block);
+      }
+    } else if (isInteropFragment(children)) {
+      children.vnode.shapeFlag |= 256;
+    } else if (isDynamicFragment(children)) {
+      processFragment(children);
+      injectKeepAliveHooks(children);
+      if (isVaporComponent(children.nodes) && isAsyncWrapper(children.nodes)) {
+        injectKeepAliveHooks(children.nodes.block);
+      }
+    }
     return children;
   }
 });
+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;
+  }
+  const { include, exclude } = props;
+  const name = getComponentName(isAsync ? type.__asyncResolved : type);
+  return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
+};
+const resetCachedShapeFlag = (cached) => {
+  if (isVaporComponent(cached)) {
+    resetShapeFlag(cached);
+  } else {
+    resetShapeFlag(cached.vnode);
+  }
+};
 function getInnerBlock(block) {
   if (isVaporComponent(block)) {
-    return block;
+    return [block, false];
   } else if (isInteropFragment(block)) {
-    return block.vnode;
+    return [block, true];
   } else if (isFragment(block)) {
     return getInnerBlock(block.nodes);
   }
+  return [void 0, false];
 }
 function isInteropFragment(block) {
   return !!(isFragment(block) && block.vnode);
 }
-function findInteropFragment(block) {
-  if (isInteropFragment(block)) {
-    return block;
-  }
-  if (isFragment(block)) {
-    return findInteropFragment(block.nodes);
-  }
-}
 function getInstanceFromCache(cached) {
   if (isVaporComponent(cached)) {
     return cached;
@@ -1976,6 +2039,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       simpleSetCurrentInstance(prev);
     }
     frag.nodes = vnode.el;
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   frag.remove = unmount;
   frag.setRef = (instance, ref, refFor, refKey) => {
@@ -2017,6 +2081,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
         internals.um(oldVNode, parentComponent, null);
       }
     };
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   const render = (parentNode, anchor) => {
     renderEffect(() => {
@@ -2559,6 +2624,7 @@ class TeleportFragment extends VaporFragment {
           rawPropsProxyHandlers
         )
       );
+      this.isDisabled = isTeleportDisabled(this.resolvedProps);
       this.handlePropsUpdate();
     });
     if (!isHydrating) {
@@ -2574,8 +2640,21 @@ class TeleportFragment extends VaporFragment {
         this.rawSlots.default && this.rawSlots.default()
       );
     });
+    const nodes = this.nodes;
+    if (this.parentComponent && this.parentComponent.ut) {
+      if (isFragment(nodes)) {
+        (nodes.updated || (nodes.updated = [])).push(() => updateCssVars(this));
+      } else if (isArray(nodes)) {
+        nodes.forEach((node) => {
+          if (isFragment(node)) {
+            (node.updated || (node.updated = [])).push(
+              () => updateCssVars(this)
+            );
+          }
+        });
+      }
+    }
     if (!!(process.env.NODE_ENV !== "production")) {
-      const nodes = this.nodes;
       if (isVaporComponent(nodes)) {
         nodes.parentTeleport = this;
       } else if (isArray(nodes)) {
@@ -2623,6 +2702,7 @@ class TeleportFragment extends VaporFragment {
           (this.parentComponent.ce._teleportTargets || (this.parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
         }
         mount(target, this.targetAnchor);
+        updateCssVars(this);
       } else if (!!(process.env.NODE_ENV !== "production")) {
         warn(
           `Invalid Teleport target on ${this.targetAnchor ? "update" : "mount"}:`,
@@ -2631,8 +2711,9 @@ class TeleportFragment extends VaporFragment {
         );
       }
     };
-    if (isTeleportDisabled(this.resolvedProps)) {
+    if (this.isDisabled) {
       mount(this.parent, this.anchor);
+      updateCssVars(this);
     } else {
       if (isTeleportDeferred(this.resolvedProps) || // force defer when the parent is not connected to the DOM,
       // typically due to an early insertion caused by setInsertionState.
@@ -2683,6 +2764,25 @@ function locateTeleportEndAnchor(node = currentHydrationNode) {
   }
   return null;
 }
+function updateCssVars(frag) {
+  const ctx = frag.parentComponent;
+  if (ctx && ctx.ut) {
+    let node, anchor;
+    if (frag.isDisabled) {
+      node = frag.placeholder;
+      anchor = frag.anchor;
+    } else {
+      node = frag.targetStart;
+      anchor = frag.targetAnchor;
+    }
+    while (node && node !== anchor) {
+      if (node.nodeType === 1)
+        node.setAttribute("data-v-owner", String(ctx.uid));
+      node = node.nextSibling;
+    }
+    ctx.ut();
+  }
+}
 
 function isBlock(val) {
   return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
@@ -2765,11 +2865,6 @@ function remove(block, parent) {
     if (block.anchor) remove(block.anchor, parent);
     if (block.scope) {
       block.scope.stop();
-      const scopes = block.keptAliveScopes;
-      if (scopes) {
-        scopes.forEach((scope) => scope.stop());
-        scopes.clear();
-      }
     }
   }
 }
@@ -2881,6 +2976,10 @@ function hmrRerender(instance) {
   insert(instance.block, parent, anchor);
 }
 function hmrReload(instance, newComp) {
+  if (instance.parent && isKeepAlive(instance.parent)) {
+    instance.parent.hmrRerender();
+    return;
+  }
   const normalized = normalizeBlock(instance.block);
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
@@ -2995,13 +3094,11 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     parentInstance
   );
   const prevSlotConsumer = setCurrentSlotConsumer(null);
-  if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
+  if (!!(process.env.NODE_ENV !== "production")) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
     instance.hmrRerender = hmrRerender.bind(null, instance);
     instance.hmrReload = hmrReload.bind(null, instance);
-  }
-  if (!!(process.env.NODE_ENV !== "production")) {
     pushWarningContext(instance);
     startMeasure(instance, `init`);
     instance.propsOptions = normalizePropsOptions(component);
@@ -3311,6 +3408,22 @@ function getRootElement(block) {
       return nodes;
     }
   }
+  if (isArray(block)) {
+    let singleRoot;
+    let hasComment = false;
+    for (const b of block) {
+      if (b instanceof Comment) {
+        hasComment = true;
+        continue;
+      }
+      const thisRoot = getRootElement(b);
+      if (!thisRoot || singleRoot) {
+        return;
+      }
+      singleRoot = thisRoot;
+    }
+    return hasComment ? singleRoot : void 0;
+  }
 }
 
 let _createApp;
@@ -3500,19 +3613,17 @@ function defineVaporAsyncComponent(source) {
   });
 }
 function createInnerComp(comp, parent, frag) {
-  const { rawProps, rawSlots, isSingleRoot, appContext, $transition } = parent;
+  const { rawProps, rawSlots, appContext, $transition } = parent;
   const instance = createComponent(
     comp,
     rawProps,
     rawSlots,
-    isSingleRoot,
+    // rawProps is shared and already contains fallthrough attrs.
+    // so isSingleRoot should be undefined
+    void 0,
     void 0,
     appContext
   );
-  if (parent.parent && isKeepAlive(parent.parent)) {
-    parent.parent.cacheComponent(instance);
-    parent.parent.cacheComponent(parent);
-  }
   if ($transition) setTransitionHooks(instance, $transition);
   frag && frag.setRef && frag.setRef(instance);
   return instance;
@@ -3810,9 +3921,7 @@ const VaporTransitionGroup = decorate({
       }
       return container;
     } else {
-      const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("transition-group") : new DynamicFragment();
-      renderEffect(() => frag.update(() => slottedBlock));
-      return frag;
+      return slottedBlock;
     }
   }
 });
@@ -3918,7 +4027,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     newBlocks = new Array(newLength);
     let isFallback = false;
     const transitionHooks = frag.$transition;
-    if (transitionHooks && transitionHooks.group) {
+    if (transitionHooks && transitionHooks.group && isMounted) {
       triggerTransitionGroupUpdate(transitionHooks);
     }
     const prevSub = setActiveSub();
@@ -4136,6 +4245,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     } else {
       oldBlocks = [];
     }
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
     setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
@@ -4454,6 +4564,45 @@ const getRefValue = (el) => {
   return el;
 };
 
+function useVaporCssVars(getter) {
+  const instance = currentInstance;
+  baseUseCssVars(
+    instance,
+    () => resolveParentNode(instance.block),
+    getter,
+    (vars) => setVars(instance, vars)
+  );
+}
+function resolveParentNode(block) {
+  if (block instanceof Node) {
+    return block.parentNode;
+  } else if (isArray(block)) {
+    return resolveParentNode(block[0]);
+  } else if (isVaporComponent(block)) {
+    return resolveParentNode(block.block);
+  } else {
+    return resolveParentNode(block.nodes);
+  }
+}
+function setVars(instance, vars) {
+  if (instance.ce) {
+    setVarsOnNode(instance.ce, vars);
+  } else {
+    setVarsOnBlock(instance.block, vars);
+  }
+}
+function setVarsOnBlock(block, vars) {
+  if (block instanceof Node) {
+    setVarsOnNode(block, vars);
+  } else if (isArray(block)) {
+    block.forEach((child) => setVarsOnBlock(child, vars));
+  } else if (isVaporComponent(block)) {
+    setVarsOnBlock(block.block, vars);
+  } else {
+    setVarsOnBlock(block.nodes, vars);
+  }
+}
+
 function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
@@ -4511,7 +4660,7 @@ function applyVShow(target, source) {
 }
 function setDisplay(target, value) {
   if (isVaporComponent(target)) {
-    return setDisplay(target, value);
+    return setDisplay(target.block, value);
   }
   if (isArray(target)) {
     if (target.length === 0) return;
@@ -4639,4 +4788,4 @@ function withVaporDirectives(node, dirs) {
   }
 }
 
-export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, vaporInteropPlugin, withVaporCtx, withVaporDirectives };
+export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withVaporCtx, withVaporDirectives };

package/package.json

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