@vue/runtime-vapor 3.6.0-alpha.6 → 3.6.0-beta.1

package/dist/runtime-vapor.d.ts

@@ -1,6 +1,6 @@
-import { VNode, GenericComponentInstance, TransitionHooks, TransitionState, TransitionProps, Plugin, SchedulerJob, GenericAppContext, EffectScope as EffectScope$1, EmitFn, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, AsyncComponentInternalOptions, ComponentPropsOptions, EmitsOptions, CreateAppFunction, AsyncComponentLoader, AsyncComponentOptions, DirectiveModifiers, VueElementBase, CustomElementOptions } from '@vue/runtime-dom';
+import { VNode, GenericComponentInstance, TransitionHooks, TransitionState, TransitionProps, Plugin, SchedulerJob, EmitsOptions, ComponentObjectPropsOptions, ExtractPropTypes, ReservedProps, AllowedComponentProps, ComponentCustomProps, EmitsToProps, ExtractDefaultPropTypes, EmitFn, ComponentTypeEmits, TypeEmitsToOptions, GenericAppContext, EffectScope as EffectScope$1, ShallowUnwrapRef, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, AsyncComponentInternalOptions, ComponentPropsOptions, CreateAppFunction, AsyncComponentLoader, AsyncComponentOptions, DirectiveModifiers, CustomElementOptions, VueElementBase } from '@vue/runtime-dom';
 import { Ref, EffectScope, ReactiveEffect, ShallowRef } from '@vue/reactivity';
-import { Namespace, NormalizedStyle } from '@vue/shared';
+import { Prettify, IsKeyValues, Namespace, NormalizedStyle } from '@vue/shared';
 
 type NodeRef = string | Ref | ((ref: Element | VaporComponentInstance, refs: Record<string, any>) => void);
 type RefEl = Element | VaporComponentInstance;
@@ -19,7 +19,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)[];
+    onUpdated?: ((nodes?: Block) => void)[];
     constructor(nodes: T);
 }
 declare class ForFragment extends VaporFragment<Block[]> {
@@ -29,21 +29,26 @@ declare class DynamicFragment extends VaporFragment {
     anchor: Node;
     scope: EffectScope | undefined;
     current?: BlockFn;
+    pending?: {
+        render?: BlockFn;
+        key: any;
+    };
     fallback?: BlockFn;
     anchorLabel?: string;
     attrs?: Record<string, any>;
     setAsyncRef?: (instance: VaporComponentInstance) => void;
     getScope?: (key: any) => EffectScope | undefined;
-    beforeTeardown?: ((oldKey: any, nodes: Block, scope: EffectScope) => boolean)[];
-    beforeMount?: ((newKey: any, nodes: Block, scope: EffectScope) => void)[];
+    onBeforeTeardown?: ((oldKey: any, nodes: Block, scope: EffectScope) => boolean)[];
+    onBeforeMount?: ((newKey: any, nodes: Block, scope: EffectScope) => void)[];
+    slotOwner: VaporComponentInstance | null;
     constructor(anchorLabel?: string);
     update(render?: BlockFn, key?: any): void;
-    private render;
+    renderBranch(render: BlockFn | undefined, transition: VaporTransitionHooks | undefined, parent: ParentNode | null, instance: GenericComponentInstance | null): void;
     hydrate: (isEmpty?: boolean) => void;
 }
 export declare function isFragment(val: NonNullable<unknown>): val is VaporFragment;
 
-interface VaporTransitionHooks extends TransitionHooks {
+export interface VaporTransitionHooks extends TransitionHooks {
     state: TransitionState;
     props: TransitionProps;
     instance: VaporComponentInstance;
@@ -53,7 +58,7 @@ interface TransitionOptions {
     $key?: any;
     $transition?: VaporTransitionHooks;
 }
-type Block = Node | VaporFragment | DynamicFragment | VaporComponentInstance | Block[];
+export type Block = Node | VaporFragment | DynamicFragment | VaporComponentInstance | Block[];
 type BlockFn = (...args: any[]) => Block;
 export declare function insert(block: Block, parent: ParentNode & {
     $fc?: Node | null;
@@ -87,7 +92,7 @@ type RawSlots = Record<string, VaporSlot> & {
     $?: DynamicSlotSource[];
 };
 type StaticSlots = Record<string, VaporSlot>;
-type VaporSlot = BlockFn;
+export type VaporSlot = BlockFn;
 type DynamicSlot = {
     name: string;
     fn: VaporSlot;
@@ -136,19 +141,75 @@ declare class TeleportFragment extends VaporFragment {
     hydrate: () => void;
 }
 
-type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent;
-type VaporSetupFn = (props: any, ctx: Pick<VaporComponentInstance, 'slots' | 'attrs' | 'emit' | 'expose'>) => Block | Record<string, any> | undefined;
-type FunctionalVaporComponent = VaporSetupFn & Omit<ObjectVaporComponent, 'setup'> & {
+export type VaporPublicProps = ReservedProps & AllowedComponentProps & ComponentCustomProps;
+export type VaporRenderResult<T = Block> = VNode | T | VaporRenderResult<T>[];
+type VaporComponentInstanceConstructor<T extends VaporComponentInstance> = {
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+    new (...args: any[]): T;
+};
+export type DefineVaporComponent<RuntimePropsOptions = {}, RuntimePropsKeys extends string = string, Emits extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block, TypeRefs extends Record<string, unknown> = {}, MakeDefaultsOptional extends boolean = true, InferredProps = string extends RuntimePropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
+    [key in RuntimePropsKeys]?: any;
+}, PublicProps = VaporPublicProps, ResolvedProps = InferredProps & EmitsToProps<Emits>, Defaults = ExtractDefaultPropTypes<RuntimePropsOptions>> = VaporComponentInstanceConstructor<VaporComponentInstance<MakeDefaultsOptional extends true ? keyof Defaults extends never ? Prettify<ResolvedProps> & PublicProps : Partial<Defaults> & Omit<Prettify<ResolvedProps> & PublicProps, keyof Defaults> : Prettify<ResolvedProps> & PublicProps, Emits, Slots, Exposed, TypeBlock, TypeRefs>> & ObjectVaporComponent<RuntimePropsOptions | RuntimePropsKeys[], Emits, RuntimeEmitsKeys, Slots, Exposed>;
+type DefineVaporSetupFnComponent<Props extends Record<string, any> = {}, Emits extends EmitsOptions = {}, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block, ResolvedProps extends Record<string, any> = Props & EmitsToProps<Emits> & VaporPublicProps> = new (props?: ResolvedProps) => VaporComponentInstance<ResolvedProps, Emits, Slots, Exposed, TypeBlock>;
+export declare function defineVaporComponent<Props extends Record<string, any>, Emits extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block>(setup: (props: Props, ctx: {
+    emit: EmitFn<Emits>;
+    slots: Slots;
+    attrs: Record<string, any>;
+    expose: (exposed: Exposed) => void;
+}) => VaporRenderResult<TypeBlock> | void, extraOptions?: ObjectVaporComponent<(keyof Props)[], Emits, RuntimeEmitsKeys, Slots, Exposed> & ThisType<void>): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeBlock>;
+export declare function defineVaporComponent<Props extends Record<string, any>, Emits extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block>(setup: (props: Props, ctx: {
+    emit: EmitFn<Emits>;
+    slots: Slots;
+    attrs: Record<string, any>;
+    expose: (exposed: Exposed) => void;
+}) => VaporRenderResult<TypeBlock> | void, extraOptions?: ObjectVaporComponent<ComponentObjectPropsOptions<Props>, Emits, RuntimeEmitsKeys, Slots, Exposed> & ThisType<void>): DefineVaporSetupFnComponent<Props, Emits, Slots, Exposed, TypeBlock>;
+export declare function defineVaporComponent<TypeProps, RuntimePropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions, RuntimePropsKeys extends string = string, TypeEmits extends ComponentTypeEmits = {}, RuntimeEmitsOptions extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, ResolvedEmits extends EmitsOptions = {} extends RuntimeEmitsOptions ? TypeEmitsToOptions<TypeEmits> : RuntimeEmitsOptions, InferredProps = IsKeyValues<TypeProps> extends true ? TypeProps : string extends RuntimePropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
+    [key in RuntimePropsKeys]?: any;
+}, TypeRefs extends Record<string, unknown> = {}, TypeBlock extends Block = Block>(options: ObjectVaporComponent<RuntimePropsOptions | RuntimePropsKeys[], ResolvedEmits, RuntimeEmitsKeys, Slots, Exposed, TypeBlock, InferredProps> & {
+    /**
+     * @private for language-tools use only
+     */
+    __typeProps?: TypeProps;
+    /**
+     * @private for language-tools use only
+     */
+    __typeEmits?: TypeEmits;
+    /**
+     * @private for language-tools use only
+     */
+    __typeRefs?: TypeRefs;
+    /**
+     * @private for language-tools use only
+     */
+    __typeEl?: TypeBlock;
+} & ThisType<void>): DefineVaporComponent<RuntimePropsOptions, RuntimePropsKeys, ResolvedEmits, RuntimeEmitsKeys, Slots, Exposed extends Block ? Record<string, any> : Exposed, TypeBlock, TypeRefs, unknown extends TypeProps ? true : false, InferredProps>;
+
+export type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent | DefineVaporComponent;
+export type FunctionalVaporComponent<Props = {}, Emits extends EmitsOptions = {}, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>> = ((props: Readonly<Props & EmitsToProps<Emits>>, ctx: {
+    emit: EmitFn<Emits>;
+    slots: Slots;
+    attrs: Record<string, any>;
+    expose: <T extends Record<string, any> = Exposed>(exposed: T) => void;
+}) => VaporRenderResult) & Omit<ObjectVaporComponent<ComponentPropsOptions<Props>, Emits, string, Slots>, 'setup'> & {
     displayName?: string;
 } & SharedInternalOptions;
-interface ObjectVaporComponent extends ComponentInternalOptions, AsyncComponentInternalOptions<ObjectVaporComponent, VaporComponentInstance>, SharedInternalOptions {
-    setup?: VaporSetupFn;
+interface ObjectVaporComponent<Props = {}, Emits extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block, InferredProps = ComponentObjectPropsOptions extends Props ? {} : ExtractPropTypes<Props>> extends ComponentInternalOptions, AsyncComponentInternalOptions<ObjectVaporComponent, VaporComponentInstance>, SharedInternalOptions {
     inheritAttrs?: boolean;
-    props?: ComponentPropsOptions;
-    emits?: EmitsOptions;
-    render?(ctx: any, props?: any, emit?: EmitFn, attrs?: any, slots?: Record<string, VaporSlot>): Block;
+    props?: Props;
+    emits?: Emits | RuntimeEmitsKeys[];
+    slots?: Slots;
+    setup?: (props: Readonly<InferredProps>, ctx: {
+        emit: EmitFn<Emits>;
+        slots: Slots;
+        attrs: Record<string, any>;
+        expose: <T extends Record<string, any> = Exposed>(exposed: T) => void;
+    }) => TypeBlock | Exposed | Promise<Exposed> | void;
+    render?(ctx: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>, props: Readonly<InferredProps>, emit: EmitFn<Emits>, attrs: any, slots: Slots): VaporRenderResult<TypeBlock> | void;
     name?: string;
     vapor?: boolean;
+    components?: Record<string, VaporComponent>;
 }
 interface SharedInternalOptions {
     /**
@@ -173,30 +234,30 @@ type LooseRawSlots = Record<string, VaporSlot | DynamicSlotSource[]> & {
     $?: DynamicSlotSource[];
 };
 export declare function createComponent(component: VaporComponent, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean, appContext?: GenericAppContext): VaporComponentInstance;
-declare class VaporComponentInstance implements GenericComponentInstance {
+export declare class VaporComponentInstance<Props extends Record<string, any> = {}, Emits extends EmitsOptions = {}, Slots extends StaticSlots = StaticSlots, Exposed extends Record<string, any> = Record<string, any>, TypeBlock extends Block = Block, TypeRefs extends Record<string, any> = Record<string, any>> implements GenericComponentInstance {
     vapor: true;
     uid: number;
     type: VaporComponent;
     root: GenericComponentInstance | null;
     parent: GenericComponentInstance | null;
     appContext: GenericAppContext;
-    block: Block;
+    block: TypeBlock;
     scope: EffectScope$1;
     rawProps: RawProps;
     rawSlots: RawSlots;
-    props: Record<string, any>;
+    props: Readonly<Props>;
     attrs: Record<string, any>;
     propsDefaults: Record<string, any> | null;
-    slots: StaticSlots;
+    slots: Slots;
     scopeId?: string | null;
     rawPropsRef?: ShallowRef<any>;
     rawSlotsRef?: ShallowRef<any>;
-    emit: EmitFn;
+    emit: EmitFn<Emits>;
     emitted: Record<string, boolean> | null;
-    expose: (exposed: Record<string, any>) => void;
-    exposed: Record<string, any> | null;
-    exposeProxy: Record<string, any> | null;
-    refs: Record<string, any>;
+    expose: (<T extends Record<string, any> = Exposed>(exposed: T) => void) & string[];
+    exposed: Exposed | null;
+    exposeProxy: Prettify<ShallowUnwrapRef<Exposed>> | null;
+    refs: TypeRefs;
     provides: Record<string, any>;
     ids: [string, number, number];
     suspense: SuspenseBoundary | null;
@@ -206,6 +267,7 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     renderEffects?: RenderEffect[];
     hasFallthrough: boolean;
     shapeFlag?: number;
+    oncePropsCache?: Record<string | symbol, any>;
     isMounted: boolean;
     isUnmounted: boolean;
     isDeactivated: boolean;
@@ -224,7 +286,7 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     rtc?: LifecycleHook;
     ec?: LifecycleHook;
     sp?: LifecycleHook<() => Promise<unknown>>;
-    setupState?: Record<string, any>;
+    setupState?: Exposed extends Block ? undefined : ShallowUnwrapRef<Exposed>;
     devtoolsRawSetupState?: any;
     hmrRerender?: () => void;
     hmrReload?: (newComp: VaporComponent) => void;
@@ -257,9 +319,6 @@ export declare function createPlainElement(comp: string, rawProps?: LooseRawProp
 export declare const createVaporApp: CreateAppFunction<ParentNode, VaporComponent>;
 export declare const createVaporSSRApp: CreateAppFunction<ParentNode, VaporComponent>;
 
-/*! #__NO_SIDE_EFFECTS__ */
-export declare function defineVaporComponent(comp: VaporComponent, extraOptions?: Omit<ObjectVaporComponent, 'setup'>): VaporComponent;
-
 export declare function defineVaporAsyncComponent<T extends VaporComponent>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T;
 
 export type VaporDirective = (node: Element | VaporComponentInstance, value?: () => any, argument?: string, modifiers?: DirectiveModifiers) => (() => void) | void;
@@ -273,17 +332,42 @@ export declare function withVaporDirectives(node: Element | VaporComponentInstan
 
 export declare const VaporKeepAliveImpl: ObjectVaporComponent;
 
-type VaporElementConstructor<P = {}> = {
+export type VaporElementConstructor<P = {}> = {
     new (initialProps?: Record<string, any>): VaporElement & P;
 };
-export declare function defineVaporCustomElement(options: any, extraOptions?: Omit<ObjectVaporComponent, 'setup'>, 
-/**
- * @internal
- */
-_createApp?: CreateAppFunction<ParentNode, VaporComponent>): VaporElementConstructor;
+export declare function defineVaporCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: {
+    attrs: Record<string, any>;
+    slots: StaticSlots;
+    emit: EmitFn;
+    expose: (exposed: Record<string, any>) => void;
+}) => RawBindings | VaporRenderResult, options?: Pick<ObjectVaporComponent, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
+    props?: (keyof Props)[];
+}): VaporElementConstructor<Props>;
+export declare function defineVaporCustomElement<Props, RawBindings = object>(setup: (props: Props, ctx: {
+    attrs: Record<string, any>;
+    slots: StaticSlots;
+    emit: EmitFn;
+    expose: (exposed: Record<string, any>) => void;
+}) => RawBindings | VaporRenderResult, options?: Pick<ObjectVaporComponent, 'name' | 'inheritAttrs' | 'emits'> & CustomElementOptions & {
+    props?: ComponentObjectPropsOptions<Props>;
+}): VaporElementConstructor<Props>;
+export declare function defineVaporCustomElement<RuntimePropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions, RuntimePropsKeys extends string = string, RuntimeEmitsOptions extends EmitsOptions = {}, RuntimeEmitsKeys extends string = string, Slots extends StaticSlots = StaticSlots, InferredProps = string extends RuntimePropsKeys ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : {
+    [key in RuntimePropsKeys]?: any;
+}, ResolvedProps = InferredProps & EmitsToProps<RuntimeEmitsOptions>>(options: CustomElementOptions & {
+    props?: (RuntimePropsOptions & ThisType<void>) | RuntimePropsKeys[];
+    emits?: RuntimeEmitsOptions | RuntimeEmitsKeys[];
+    slots?: Slots;
+    setup?: (props: Readonly<InferredProps>, ctx: {
+        attrs: Record<string, any>;
+        slots: Slots;
+        emit: EmitFn<RuntimeEmitsOptions>;
+        expose: (exposed: Record<string, any>) => void;
+    }) => any;
+} & ThisType<void>, extraOptions?: CustomElementOptions): VaporElementConstructor<ResolvedProps>;
+export declare function defineVaporCustomElement<T extends DefineVaporComponent<any, any, any, any, any, any, any, any, any, any> | DefineVaporSetupFnComponent<any, any, any, any, any>>(options: T, extraOptions?: CustomElementOptions): VaporElementConstructor<T extends DefineVaporComponent<infer RuntimePropsOptions, any, any, any, any, any, any, any, any, any> ? ComponentObjectPropsOptions extends RuntimePropsOptions ? {} : ExtractPropTypes<RuntimePropsOptions> : T extends DefineVaporSetupFnComponent<infer P extends Record<string, any>, any, any, any, any> ? P : unknown>;
 export declare const defineVaporSSRCustomElement: typeof defineVaporCustomElement;
 type VaporInnerComponentDef = VaporComponent & CustomElementOptions;
-declare class VaporElement extends VueElementBase<ParentNode, VaporComponent, VaporInnerComponentDef> {
+export declare class VaporElement extends VueElementBase<ParentNode, VaporComponent, VaporInnerComponentDef> {
     constructor(def: VaporInnerComponentDef, props?: Record<string, any> | undefined, createAppFn?: CreateAppFunction<ParentNode, VaporComponent>);
     protected _needsHydration(): boolean;
     protected _mount(def: VaporInnerComponentDef): void;
@@ -377,6 +461,16 @@ export declare function createInvoker(handler: (...args: any[]) => any): (...arg
 
 export declare function createIf(condition: () => any, b1: BlockFn, b2?: BlockFn, once?: boolean): Block;
 
+/**
+ * Create a dynamic fragment keyed by a reactive value for Vapor transitions.
+ * The fragment is re-rendered when the key changes to trigger enter/leave
+ * animations.
+ *
+ * Example:
+ * <VaporTransition>
+ *   <h1 :key="count">{{ count }}</h1>
+ * </VaporTransition>
+ */
 export declare function createKeyedFragment(key: () => any, render: BlockFn): Block;
 
 type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>;
@@ -402,7 +496,7 @@ export declare const applyRadioModel: VaporModelDirective<HTMLInputElement>;
 export declare const applySelectModel: VaporModelDirective<HTMLSelectElement, 'number'>;
 export declare const applyDynamicModel: VaporModelDirective;
 
-export declare const VaporTransition: FunctionalVaporComponent;
+export declare const VaporTransition: FunctionalVaporComponent<TransitionProps>;
 
 export declare const VaporTransitionGroup: ObjectVaporComponent;
 

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

@@ -1,11 +1,11 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.6
+* @vue/runtime-vapor v3.6.0-beta.1
 * (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 { 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 { 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, 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;
@@ -916,22 +916,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);
@@ -1006,14 +1003,16 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
     }
     const injectKeepAliveHooks = (frag) => {
-      (frag.beforeTeardown || (frag.beforeTeardown = [])).push(
+      (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.beforeMount || (frag.beforeMount = [])).push(
+      (frag.onBeforeMount || (frag.onBeforeMount = [])).push(
         () => cacheFragment(frag)
       );
       frag.getScope = (key) => {
@@ -1078,7 +1077,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 +1087,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 +1116,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();
@@ -1197,8 +1196,10 @@ const vaporInteropImpl = {
   /**
    * vapor slot in vdom
    */
-  slot(n1, n2, container, anchor) {
+  slot(n1, n2, container, anchor, parentComponent) {
     if (!n1) {
+      const prev = currentInstance;
+      simpleSetCurrentInstance(parentComponent);
       let selfAnchor;
       const { slot, fallback } = n2.vs;
       const propsRef = n2.vs.ref = shallowRef(n2.props);
@@ -1207,6 +1208,7 @@ const vaporInteropImpl = {
         setFragmentFallback(slotBlock, createFallback(fallback));
         selfAnchor = slotBlock.anchor;
       }
+      simpleSetCurrentInstance(prev);
       if (!selfAnchor) selfAnchor = createTextNode();
       insert(n2.el = n2.anchor = selfAnchor, container, anchor);
       insert(n2.vb = slotBlock, container, selfAnchor);
@@ -1370,7 +1372,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       simpleSetCurrentInstance(prev);
     }
     frag.nodes = vnode.el;
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
   };
   frag.remove = unmount;
   frag.setRef = (instance, ref, refFor, refKey) => {
@@ -1412,7 +1414,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
         internals.um(oldVNode, parentComponent, null);
       }
     };
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
   };
   const render = (parentNode, anchor) => {
     renderEffect(() => {
@@ -1573,7 +1575,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) {
@@ -1594,13 +1615,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
             );
@@ -1628,14 +1651,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) {
@@ -1643,7 +1675,7 @@ function getPropsProxyHandlers(comp, once) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getPropValue(target, key)
+          get: () => (once ? getOnceProp : getProp)(target, key)
         };
       }
     }
@@ -1666,14 +1698,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) {
@@ -1681,7 +1710,7 @@ function getPropsProxyHandlers(comp, once) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getAttrValue(target.rawProps, key)
+          get: () => once ? getOnceAttr(target, key) : getAttr(target.rawProps, key)
         };
       }
     }
@@ -1704,9 +1733,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 {
@@ -1751,7 +1780,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);
       }
@@ -1817,9 +1848,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)) {
@@ -1891,7 +1922,7 @@ const dynamicSlotsProxyHandlers = {
       keys = keys.filter((k) => k !== "$");
       for (const source of dynamicSources) {
         if (isFunction(source)) {
-          const slot = source();
+          const slot = resolveFunctionSource(source);
           if (isArray(slot)) {
             for (const s of slot) keys.push(String(s.name));
           } else {
@@ -1916,7 +1947,7 @@ function getSlot(target, key) {
     while (i--) {
       source = dynamicSources[i];
       if (isFunction(source)) {
-        const slot = source();
+        const slot = resolveFunctionSource(source);
         if (slot) {
           if (isArray(slot)) {
             for (const s of slot) {
@@ -2068,7 +2099,7 @@ class RenderEffect extends ReactiveEffect {
         this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
         this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
       }
-      if (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
+      if (instance.type.ce) {
         (instance.renderEffects || (instance.renderEffects = [])).push(this);
       }
       job.i = instance;
@@ -2120,61 +2151,48 @@ const decorate$1 = (t) => {
   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 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 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];
       }
-    });
-    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;
+    }),
+    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 = {
@@ -2226,7 +2244,7 @@ function resolveTransitionHooks(block, props, state, instance, postClone) {
   hooks.instance = instance;
   return hooks;
 }
-function applyTransitionHooks(block, hooks, isResolved = false) {
+function applyTransitionHooks(block, hooks) {
   if (isArray(block)) {
     block = block.filter((b) => !(b instanceof Comment));
     if (block.length === 1) {
@@ -2235,10 +2253,13 @@ function applyTransitionHooks(block, hooks, isResolved = false) {
       return hooks;
     }
   }
-  const isFrag = isFragment(block);
-  const child = isResolved ? block : findTransitionBlock(block, isFrag);
+  const fragments = [];
+  const child = findTransitionBlock(block, (frag) => fragments.push(frag));
   if (!child) {
-    if (isFrag) setTransitionHooksOnFragment(block, hooks);
+    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;
@@ -2251,7 +2272,7 @@ function applyTransitionHooks(block, hooks, isResolved = false) {
   );
   resolvedHooks.delayedLeave = delayedLeave;
   child.$transition = resolvedHooks;
-  if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
+  fragments.forEach((f) => f.$transition = resolvedHooks);
   return resolvedHooks;
 }
 function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
@@ -2291,7 +2312,7 @@ function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
     };
   }
 }
-function findTransitionBlock(block, inFragment = false) {
+function findTransitionBlock(block, onFragment) {
   let child;
   if (block instanceof Node) {
     if (block instanceof Element) child = block;
@@ -2300,15 +2321,14 @@ function findTransitionBlock(block, inFragment = false) {
       child = block;
     } else {
       if (getComponentName(block.type) === displayName) return void 0;
-      child = findTransitionBlock(block.block, inFragment);
+      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;
-      if (isFragment(c)) inFragment = true;
-      const item = findTransitionBlock(c, inFragment);
+      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."
@@ -2320,16 +2340,13 @@ function findTransitionBlock(block, inFragment = false) {
       if (!!!(process.env.NODE_ENV !== "production")) break;
     }
   } else if (isFragment(block)) {
-    inFragment = true;
     if (block.insert) {
       child = block;
     } else {
-      child = findTransitionBlock(block.nodes, true);
+      if (onFragment) onFragment(block);
+      child = findTransitionBlock(block.nodes, onFragment);
     }
   }
-  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
-    warn("Transition component has no valid child element");
-  }
   return child;
 }
 function setTransitionHooksOnFragment(block, hooks) {
@@ -2407,6 +2424,7 @@ class DynamicFragment extends VaporFragment {
         );
       });
     };
+    this.slotOwner = currentSlotOwner;
     if (isHydrating) {
       this.anchorLabel = anchorLabel;
       locateHydrationNode();
@@ -2420,28 +2438,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.beforeTeardown) {
-        preserveScope = this.beforeTeardown.some(
-          (hook) => hook(this.current, this.nodes, this.scope)
-        );
+      if (this.onBeforeTeardown) {
+        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.render(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);
@@ -2451,18 +2482,28 @@ class DynamicFragment extends VaporFragment {
         parent && remove(this.nodes, parent);
       }
     }
-    this.render(render, transition, parent, instance);
+    this.renderBranch(render, transition, parent, instance);
     if (this.fallback) {
-      const hasNestedFragment = isFragment(this.nodes);
-      if (hasNestedFragment) {
-        setFragmentFallback(this.nodes, this.fallback);
+      let invalidFragment = null;
+      if (isFragment(this.nodes)) {
+        setFragmentFallback(
+          this.nodes,
+          this.fallback,
+          (frag) => {
+            if (!isValidBlock(frag.nodes)) {
+              invalidFragment = frag;
+            }
+          }
+        );
+      }
+      if (!invalidFragment && !isValidBlock(this.nodes)) {
+        invalidFragment = this;
       }
-      const invalidFragment = findInvalidFragment(this);
       if (invalidFragment) {
         parent && remove(this.nodes, parent);
         const scope = this.scope || (this.scope = new EffectScope());
         scope.run(() => {
-          if (hasNestedFragment) {
+          if (invalidFragment !== this) {
             renderFragmentFallback(invalidFragment);
           } else {
             this.nodes = this.fallback() || [];
@@ -2474,7 +2515,7 @@ class DynamicFragment extends VaporFragment {
     setActiveSub(prevSub);
     if (isHydrating) this.hydrate();
   }
-  render(render, transition, parent, instance) {
+  renderBranch(render, transition, parent, instance) {
     if (render) {
       const scope = this.getScope && this.getScope(this.current);
       if (scope) {
@@ -2482,24 +2523,27 @@ class DynamicFragment extends VaporFragment {
       } else {
         this.scope = new EffectScope();
       }
-      let prev;
-      if (parent && instance) prev = setCurrentInstance(instance);
+      const prevOwner = setCurrentSlotOwner(this.slotOwner);
+      const prev = parent && instance ? setCurrentInstance(instance) : void 0;
       this.nodes = this.scope.run(render) || [];
-      if (parent && instance) setCurrentInstance(...prev);
+      if (prev !== void 0) setCurrentInstance(...prev);
+      setCurrentSlotOwner(prevOwner);
       if (transition) {
         this.$transition = applyTransitionHooks(this.nodes, transition);
       }
-      if (this.beforeMount) {
-        this.beforeMount.forEach(
+      if (this.onBeforeMount) {
+        this.onBeforeMount.forEach(
           (hook) => hook(this.current, this.nodes, this.scope)
         );
       }
       if (parent) {
         if (this.attrs) {
           if (this.nodes instanceof Element) {
-            renderEffect(
-              () => applyFallthroughProps(this.nodes, this.attrs)
-            );
+            this.scope.run(() => {
+              renderEffect(
+                () => applyFallthroughProps(this.nodes, this.attrs)
+              );
+            });
           } else if (!!(process.env.NODE_ENV !== "production") && // preventing attrs fallthrough on slots
           // consistent with VDOM slots behavior
           (this.anchorLabel === "slot" || isArray(this.nodes) && this.nodes.length)) {
@@ -2507,8 +2551,8 @@ class DynamicFragment extends VaporFragment {
           }
         }
         insert(this.nodes, parent, this.anchor);
-        if (this.updated) {
-          this.updated.forEach((hook) => hook(this.nodes));
+        if (this.onUpdated) {
+          this.onUpdated.forEach((hook) => hook(this.nodes));
         }
       }
     } else {
@@ -2517,7 +2561,7 @@ class DynamicFragment extends VaporFragment {
     }
   }
 }
-function setFragmentFallback(fragment, fallback) {
+function setFragmentFallback(fragment, fallback, onFragment) {
   if (fragment.fallback) {
     const originalFallback = fragment.fallback;
     fragment.fallback = () => {
@@ -2530,8 +2574,9 @@ function setFragmentFallback(fragment, fallback) {
   } else {
     fragment.fallback = fallback;
   }
+  if (onFragment) onFragment(fragment);
   if (isFragment(fragment.nodes)) {
-    setFragmentFallback(fragment.nodes, fragment.fallback);
+    setFragmentFallback(fragment.nodes, fragment.fallback, onFragment);
   }
 }
 function renderFragmentFallback(fragment) {
@@ -2541,10 +2586,6 @@ function renderFragmentFallback(fragment) {
     fragment.update(fragment.fallback);
   } else ;
 }
-function findInvalidFragment(fragment) {
-  if (isValidBlock(fragment.nodes)) return null;
-  return isFragment(fragment.nodes) ? findInvalidFragment(fragment.nodes) || fragment : fragment;
-}
 function isFragment(val) {
   return val instanceof VaporFragment;
 }
@@ -2664,11 +2705,13 @@ class TeleportFragment extends VaporFragment {
     const nodes = this.nodes;
     if (this.parentComponent && this.parentComponent.ut) {
       if (isFragment(nodes)) {
-        (nodes.updated || (nodes.updated = [])).push(() => updateCssVars(this));
+        (nodes.onUpdated || (nodes.onUpdated = [])).push(
+          () => updateCssVars(this)
+        );
       } else if (isArray(nodes)) {
         nodes.forEach((node) => {
           if (isFragment(node)) {
-            (node.updated || (node.updated = [])).push(
+            (node.onUpdated || (node.onUpdated = [])).push(
               () => updateCssVars(this)
             );
           }
@@ -2856,6 +2899,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);
@@ -2984,12 +3100,9 @@ function hmrRerender(instance) {
   const normalized = normalizeBlock(instance.block);
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
+  instance.scope.reset();
   remove(instance.block, parent);
   const prev = setCurrentInstance(instance);
-  if (instance.renderEffects) {
-    instance.renderEffects.forEach((e) => e.stop());
-    instance.renderEffects = [];
-  }
   pushWarningContext(instance);
   devRender(instance);
   popWarningContext();
@@ -3199,7 +3312,7 @@ function setupComponent(instance, component) {
       }
     }
   } else {
-    handleSetupResult(setupResult, component, instance, setupFn);
+    handleSetupResult(setupResult, component, instance);
   }
   setActiveSub(prevSub);
   setCurrentInstance(...prevInstance);
@@ -3396,12 +3509,7 @@ function mountComponent(instance, parent, anchor) {
   if (instance.suspense && instance.asyncDep && !instance.asyncResolved) {
     const component = instance.type;
     instance.suspense.registerDep(instance, (setupResult) => {
-      handleSetupResult(
-        setupResult,
-        component,
-        instance,
-        isFunction(component) ? component : component.setup
-      );
+      handleSetupResult(setupResult, component, instance);
       mountComponent(instance, parent, anchor);
     });
     return;
@@ -3438,7 +3546,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) {
@@ -3498,7 +3606,7 @@ function getRootElement(block, onDynamicFragment, recurse = true) {
 function isVaporTransition(component) {
   return getComponentName(component) === "VaporTransition";
 }
-function handleSetupResult(setupResult, component, instance, setupFn) {
+function handleSetupResult(setupResult, component, instance) {
   if (!!(process.env.NODE_ENV !== "production")) {
     pushWarningContext(instance);
   }
@@ -3522,7 +3630,7 @@ function handleSetupResult(setupResult, component, instance, setupFn) {
       devRender(instance);
     }
   } else {
-    if (!setupFn && component.render) {
+    if (setupResult === EMPTY_OBJ && component.render) {
       instance.block = callWithErrorHandling(
         component.render,
         instance,
@@ -3941,9 +4049,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 {
@@ -4211,7 +4317,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     } else {
       oldBlocks = [];
     }
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
     setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
@@ -4589,13 +4695,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
     );
@@ -4786,7 +4895,15 @@ const VaporTransitionGroup = decorate({
   setup(props, { slots }) {
     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();
@@ -4837,7 +4954,7 @@ const VaporTransitionGroup = decorate({
       prevChildren = [];
     });
     setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
+      props: propsProxy,
       state,
       instance
     });
@@ -4848,7 +4965,7 @@ const VaporTransitionGroup = decorate({
         if (child.$key != null) {
           const hooks = resolveTransitionHooks(
             child,
-            cssTransitionProps,
+            propsProxy,
             state,
             instance
           );
@@ -4916,4 +5033,4 @@ function getFirstConnectedChild(children) {
   }
 }
 
-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 };
+export { VaporElement, 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.6",
+  "version": "3.6.0-beta.1",
   "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-alpha.6",
-    "@vue/reactivity": "3.6.0-alpha.6"
+    "@vue/shared": "3.6.0-beta.1",
+    "@vue/reactivity": "3.6.0-beta.1"
   },
   "peerDependencies": {
-    "@vue/runtime-dom": "3.6.0-alpha.6"
+    "@vue/runtime-dom": "3.6.0-beta.1"
   }
 }