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

package/dist/runtime-vapor.d.ts

@@ -1,34 +1,83 @@
-import { GenericComponentInstance, GenericAppContext, EffectScope as EffectScope$1, EmitFn, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, ComponentPropsOptions, EmitsOptions, CreateAppFunction, Plugin, DirectiveModifiers } from '@vue/runtime-dom';
-import { EffectScope, ShallowRef, Ref } from '@vue/reactivity';
+import { VNode, TransitionHooks, TransitionState, TransitionProps, Plugin, SchedulerJob, GenericComponentInstance, GenericAppContext, EffectScope as EffectScope$1, EmitFn, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, AsyncComponentInternalOptions, ComponentPropsOptions, EmitsOptions, CreateAppFunction, AsyncComponentLoader, AsyncComponentOptions, DirectiveModifiers } from '@vue/runtime-dom';
+import { Ref, EffectScope, ReactiveEffect, ShallowRef } from '@vue/reactivity';
 import { NormalizedStyle } from '@vue/shared';
 
-type Block = Node | VaporFragment | DynamicFragment | VaporComponentInstance | Block[];
-type BlockFn = (...args: any[]) => Block;
-export declare class VaporFragment {
-    nodes: Block;
+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;
+export declare function createTemplateRefSetter(): setRefFn;
+
+export declare class VaporFragment<T extends Block = Block> implements TransitionOptions {
+    $key?: any;
+    $transition?: VaporTransitionHooks | undefined;
+    nodes: T;
+    vnode?: VNode | null;
     anchor?: Node;
-    insert?: (parent: ParentNode, anchor: Node | null) => void;
-    remove?: (parent?: ParentNode) => void;
-    constructor(nodes: Block);
+    fallback?: BlockFn;
+    insert?: (parent: ParentNode, anchor: Node | null, transitionHooks?: TransitionHooks) => void;
+    remove?: (parent?: ParentNode, transitionHooks?: TransitionHooks) => void;
+    hydrate?: (...args: any[]) => void;
+    setRef?: (instance: VaporComponentInstance, ref: NodeRef, refFor: boolean, refKey: string | undefined) => void;
+    constructor(nodes: T);
+}
+declare class ForFragment extends VaporFragment<Block[]> {
+    constructor(nodes: Block[]);
 }
 declare class DynamicFragment extends VaporFragment {
     anchor: Node;
     scope: EffectScope | undefined;
     current?: BlockFn;
     fallback?: BlockFn;
+    anchorLabel?: string;
+    inKeepAlive?: boolean;
+    keptAliveScopes?: Map<any, EffectScope>;
     constructor(anchorLabel?: string);
     update(render?: BlockFn, key?: any): void;
+    private render;
+    hydrate: (isEmpty?: boolean) => void;
 }
 export declare function isFragment(val: NonNullable<unknown>): val is VaporFragment;
-export declare function insert(block: Block, parent: ParentNode, anchor?: Node | null | 0): void;
+
+interface VaporTransitionHooks extends TransitionHooks {
+    state: TransitionState;
+    props: TransitionProps;
+    instance: VaporComponentInstance;
+    disabled?: boolean;
+}
+interface TransitionOptions {
+    $key?: any;
+    $transition?: VaporTransitionHooks;
+}
+type Block = Node | VaporFragment | DynamicFragment | VaporComponentInstance | Block[];
+type BlockFn = (...args: any[]) => Block;
+export declare function insert(block: Block, parent: ParentNode & {
+    $fc?: Node | null;
+}, anchor?: Node | null | 0, // 0 means prepend
+parentSuspense?: any): void;
 export declare function prepend(parent: ParentNode, ...blocks: Block[]): void;
 export declare function remove(block: Block, parent?: ParentNode): void;
 
+declare const interopKey: unique symbol;
+export declare const vaporInteropPlugin: Plugin;
+
 type RawProps = Record<string, () => unknown> & {
-    $?: DynamicPropsSource[];
+    $?: DynamicPropsSource[] & {
+        [interopKey]?: boolean;
+    };
 };
 type DynamicPropsSource = (() => Record<string, unknown>) | Record<string, () => unknown>;
 
+declare class RenderEffect extends ReactiveEffect {
+    render: () => void;
+    i: VaporComponentInstance | null;
+    job: SchedulerJob;
+    updateJob: SchedulerJob;
+    constructor(render: () => void);
+    fn(): void;
+    notify(): void;
+}
+export declare function renderEffect(fn: () => void, noLifecycle?: boolean): void;
+
 type RawSlots = Record<string, VaporSlot> & {
     $?: DynamicSlotSource[];
 };
@@ -40,14 +89,58 @@ type DynamicSlot = {
 };
 type DynamicSlotFn = () => DynamicSlot | DynamicSlot[];
 type DynamicSlotSource = StaticSlots | DynamicSlotFn;
-export declare function createSlot(name: string | (() => string), rawProps?: LooseRawProps | null, fallback?: VaporSlot): Block;
+/**
+ * Wraps a slot function to execute in the parent component's context.
+ *
+ * This ensures that:
+ * 1. Reactive effects created inside the slot (e.g., `renderEffect`) bind to the
+ *    parent's instance, so the parent's lifecycle hooks fire when the slot's
+ *    reactive dependencies change.
+ * 2. Elements created in the slot inherit the parent's scopeId for proper style
+ *    scoping in scoped CSS.
+ *
+ * **Rationale**: Slots are defined in the parent's template, so the parent should
+ * own the rendering context and be aware of updates.
+ *
+ */
+export declare function withVaporCtx(fn: Function): BlockFn;
+export declare function createSlot(name: string | (() => string), rawProps?: LooseRawProps | null, fallback?: VaporSlot, noSlotted?: boolean): Block;
+
+export declare const VaporTeleportImpl: {
+    name: string;
+    __isTeleport: boolean;
+    __vapor: boolean;
+    process(props: LooseRawProps, slots: LooseRawSlots): TeleportFragment;
+};
+declare class TeleportFragment extends VaporFragment {
+    anchor?: Node;
+    private rawProps?;
+    private resolvedProps?;
+    private rawSlots?;
+    target?: ParentNode | null;
+    targetAnchor?: Node | null;
+    targetStart?: Node | null;
+    placeholder?: Node;
+    mountContainer?: ParentNode | null;
+    mountAnchor?: Node | null;
+    constructor(props: LooseRawProps, slots: LooseRawSlots);
+    get parent(): ParentNode | null;
+    private initChildren;
+    private handleChildrenUpdate;
+    private handlePropsUpdate;
+    insert: (container: ParentNode, anchor: Node | null) => void;
+    remove: (parent?: ParentNode | undefined) => void;
+    private hydrateDisabledTeleport;
+    private mount;
+    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'> & {
     displayName?: string;
 } & SharedInternalOptions;
-interface ObjectVaporComponent extends ComponentInternalOptions, SharedInternalOptions {
+interface ObjectVaporComponent extends ComponentInternalOptions, AsyncComponentInternalOptions<ObjectVaporComponent, VaporComponentInstance>, SharedInternalOptions {
     setup?: VaporSetupFn;
     inheritAttrs?: boolean;
     props?: ComponentPropsOptions;
@@ -78,7 +171,7 @@ type LooseRawProps = Record<string, (() => unknown) | DynamicPropsSource[]> & {
 type LooseRawSlots = Record<string, VaporSlot | DynamicSlotSource[]> & {
     $?: DynamicSlotSource[];
 };
-export declare function createComponent(component: VaporComponent, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, appContext?: GenericAppContext): VaporComponentInstance;
+export declare function createComponent(component: VaporComponent, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean, appContext?: GenericAppContext): VaporComponentInstance;
 declare class VaporComponentInstance implements GenericComponentInstance {
     vapor: true;
     uid: number;
@@ -128,10 +221,13 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     devtoolsRawSetupState?: any;
     hmrRerender?: () => void;
     hmrReload?: (newComp: VaporComponent) => void;
+    renderEffects?: RenderEffect[];
+    parentTeleport?: TeleportFragment | null;
     propsOptions?: NormalizedPropsOptions;
     emitsOptions?: ObjectEmitsOptions | null;
     isSingleRoot?: boolean;
-    constructor(comp: VaporComponent, rawProps?: RawProps | null, rawSlots?: RawSlots | null, appContext?: GenericAppContext);
+    shapeFlag?: number;
+    constructor(comp: VaporComponent, rawProps?: RawProps | null, rawSlots?: RawSlots | null, appContext?: GenericAppContext, once?: boolean);
     /**
      * Expose `getKeysFromRawProps` on the instance so it can be used in code
      * paths where it's needed, e.g. `useModel`
@@ -144,7 +240,7 @@ export declare function isVaporComponent(value: unknown): value is VaporComponen
  * and needs rely on runtime resolution - where it might fallback to a plain
  * element if the resolution fails.
  */
-export declare function createComponentWithFallback(comp: VaporComponent | string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean): HTMLElement | VaporComponentInstance;
+export declare function createComponentWithFallback(comp: VaporComponent | string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean, appContext?: GenericAppContext): HTMLElement | VaporComponentInstance;
 
 export declare const createVaporApp: CreateAppFunction<ParentNode, VaporComponent>;
 export declare const createVaporSSRApp: CreateAppFunction<ParentNode, VaporComponent>;
@@ -152,7 +248,7 @@ export declare const createVaporSSRApp: CreateAppFunction<ParentNode, VaporCompo
 /*! #__NO_SIDE_EFFECTS__ */
 export declare function defineVaporComponent(comp: VaporComponent, extraOptions?: Omit<ObjectVaporComponent, 'setup'>): VaporComponent;
 
-export declare const vaporInteropPlugin: Plugin;
+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;
 type VaporDirectiveArguments = Array<[VaporDirective | undefined] | [VaporDirective | undefined, () => any] | [VaporDirective | undefined, (() => any) | undefined, argument: string] | [
@@ -163,28 +259,41 @@ type VaporDirectiveArguments = Array<[VaporDirective | undefined] | [VaporDirect
 ]>;
 export declare function withVaporDirectives(node: Element | VaporComponentInstance, dirs: VaporDirectiveArguments): void;
 
+export declare const VaporKeepAliveImpl: ObjectVaporComponent;
+
+type InsertionParent = ParentNode & {
+    $fc?: Node | null;
+    $llc?: Node | null;
+    $lpn?: Node | null;
+    $lan?: Node | null;
+    $curIdx?: number;
+};
 /**
  * This function is called before a block type that requires insertion
  * (component, slot outlet, if, for) is created. The state is used for actual
  * insertion on client-side render, and used for node adoption during hydration.
  */
-export declare function setInsertionState(parent: ParentNode, anchor?: Node | 0): void;
-
-export declare function renderEffect(fn: () => void, noLifecycle?: boolean): void;
+export declare function setInsertionState(parent: ParentNode & {
+    $fc?: Node | null;
+}, anchor?: Node | 0 | null | number, last?: boolean): void;
 
 /*! #__NO_SIDE_EFFECTS__ */
 export declare function template(html: string, root?: boolean): () => Node & {
     $root?: true;
 };
 
-/*! #__NO_SIDE_EFFECTS__ */
 export declare function createTextNode(value?: string): Text;
-/*! #__NO_SIDE_EFFECTS__ */
-export declare function child(node: ParentNode): Node;
-/*! #__NO_SIDE_EFFECTS__ */
-export declare function nthChild(node: Node, i: number): Node;
-/*! #__NO_SIDE_EFFECTS__ */
-export declare function next(node: Node): Node;
+declare const _txt: typeof _child;
+declare function _child(node: InsertionParent): Node;
+declare function _nthChild(node: InsertionParent, i: number): Node;
+declare function _next(node: Node): Node;
+type DelegatedFunction<T extends (...args: any[]) => any> = T & {
+    impl: T;
+};
+export declare const txt: DelegatedFunction<typeof _txt>;
+export declare const child: DelegatedFunction<typeof _child>;
+export declare const next: DelegatedFunction<typeof _next>;
+export declare const nthChild: DelegatedFunction<typeof _nthChild>;
 
 type TargetElement = Element & {
     $root?: true;
@@ -196,10 +305,10 @@ type TargetElement = Element & {
 };
 export declare function setProp(el: any, key: string, value: any): void;
 export declare function setAttr(el: any, key: string, value: any): void;
-export declare function setDOMProp(el: any, key: string, value: any): void;
+export declare function setDOMProp(el: any, key: string, value: any, forceHydrate?: boolean): void;
 export declare function setClass(el: TargetElement, value: any): void;
 export declare function setStyle(el: TargetElement, value: any): void;
-export declare function setValue(el: TargetElement, value: any): void;
+export declare function setValue(el: TargetElement, value: any, forceHydrate?: boolean): void;
 /**
  * Only called on text nodes!
  * Compiler should also ensure value passed here is already converted by
@@ -208,7 +317,19 @@ export declare function setValue(el: TargetElement, value: any): void;
 export declare function setText(el: Text & {
     $txt?: string;
 }, value: string): void;
+/**
+ * Used by setDynamicProps only, so need to guard with `toDisplayString`
+ */
+export declare function setElementText(el: Node & {
+    $txt?: string;
+}, value: unknown): void;
+export declare function setBlockText(block: Block & {
+    $txt?: string;
+}, value: unknown): void;
 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[]): void;
 
 export declare function on(el: Element, event: string, handler: (e: Event) => any, options?: AddEventListenerOptions & {
@@ -220,18 +341,17 @@ export declare function setDynamicEvents(el: HTMLElement, events: Record<string,
 
 export declare function createIf(condition: () => any, b1: BlockFn, b2?: BlockFn, once?: boolean): Block;
 
+export declare function createKeyedFragment(key: () => any, render: BlockFn): Block;
+
 type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>;
-export declare const createFor: (src: () => Source, renderItem: (item: ShallowRef<any>, key: ShallowRef<any>, index: ShallowRef<number | undefined>) => Block, getKey?: (item: any, key: any, index?: number) => any, flags?: number) => VaporFragment;
+export declare const createFor: (src: () => Source, renderItem: (item: ShallowRef<any>, key: ShallowRef<any>, index: ShallowRef<number | undefined>) => Block, getKey?: (item: any, key: any, index?: number) => any, flags?: number, setup?: (_: {
+    createSelector: (source: () => any) => (cb: () => void) => void;
+}) => void) => ForFragment;
 export declare function createForSlots(rawSource: Source, getSlot: (item: any, key: any, index?: number) => DynamicSlot): DynamicSlot[];
 export declare function getRestElement(val: any, keys: string[]): any;
 export declare function getDefaultValue(val: any, defaultVal: any): any;
 
-type NodeRef = string | Ref | ((ref: Element) => void);
-type RefEl = Element | VaporComponentInstance;
-type setRefFn = (el: RefEl, ref: NodeRef, oldRef?: NodeRef, refFor?: boolean) => NodeRef | undefined;
-export declare function createTemplateRefSetter(): setRefFn;
-
-export declare function createDynamicComponent(getter: () => any, rawProps?: RawProps | null, rawSlots?: RawSlots | null, isSingleRoot?: boolean): VaporFragment;
+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;
 
@@ -244,4 +364,8 @@ 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 VaporTransitionGroup: ObjectVaporComponent;
 
+export { VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport,  };