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

package/dist/runtime-vapor.d.ts

@@ -1,26 +1,60 @@
-import { Plugin, GenericComponentInstance, GenericAppContext, EffectScope as EffectScope$1, EmitFn, SuspenseBoundary, LifecycleHook, NormalizedPropsOptions, ObjectEmitsOptions, ComponentInternalOptions, ComponentPropsOptions, EmitsOptions, CreateAppFunction, DirectiveModifiers } from '@vue/runtime-dom';
-import { EffectScope, ShallowRef, Ref } from '@vue/reactivity';
-import { NormalizedStyle } from '@vue/shared';
+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, VueElementBase, CustomElementOptions } from '@vue/runtime-dom';
+import { Ref, EffectScope, ReactiveEffect, ShallowRef } from '@vue/reactivity';
+import { Namespace, 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;
+    group?: 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;
 
@@ -34,6 +68,17 @@ type RawProps = Record<string, () => unknown> & {
 };
 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[];
 };
@@ -45,14 +90,50 @@ type DynamicSlot = {
 };
 type DynamicSlotFn = () => DynamicSlot | DynamicSlot[];
 type DynamicSlotSource = StaticSlots | DynamicSlotFn;
-export declare function createSlot(name: string | (() => string), rawProps?: LooseRawProps | null, fallback?: VaporSlot): Block;
+/**
+ * Wrap a slot function to memoize currentInstance
+ * 1. ensure correct currentInstance in forwarded slots
+ * 2. elements created in the slot inherit the slot owner's scopeId
+ */
+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;
+    parentComponent: GenericComponentInstance;
+    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;
@@ -83,7 +164,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;
@@ -99,6 +180,7 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     attrs: Record<string, any>;
     propsDefaults: Record<string, any> | null;
     slots: StaticSlots;
+    scopeId?: string | null;
     rawPropsRef?: ShallowRef<any>;
     rawSlotsRef?: ShallowRef<any>;
     emit: EmitFn;
@@ -110,7 +192,9 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     provides: Record<string, any>;
     ids: [string, number, number];
     suspense: SuspenseBoundary | null;
+    renderEffects?: RenderEffect[];
     hasFallthrough: boolean;
+    shapeFlag?: number;
     isMounted: boolean;
     isUnmounted: boolean;
     isDeactivated: boolean;
@@ -133,10 +217,11 @@ declare class VaporComponentInstance implements GenericComponentInstance {
     devtoolsRawSetupState?: any;
     hmrRerender?: () => void;
     hmrReload?: (newComp: VaporComponent) => void;
+    parentTeleport?: TeleportFragment | null;
     propsOptions?: NormalizedPropsOptions;
     emitsOptions?: ObjectEmitsOptions | null;
     isSingleRoot?: boolean;
-    constructor(comp: VaporComponent, rawProps?: RawProps | null, rawSlots?: RawSlots | null, appContext?: GenericAppContext);
+    constructor(comp: VaporComponent, rawProps?: RawProps | null, rawSlots?: RawSlots | null, appContext?: GenericAppContext, once?: boolean, parent?: GenericComponentInstance | null);
     /**
      * Expose `getKeysFromRawProps` on the instance so it can be used in code
      * paths where it's needed, e.g. `useModel`
@@ -149,7 +234,8 @@ 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 function createPlainElement(comp: string, rawProps?: LooseRawProps | null, rawSlots?: LooseRawSlots | null, isSingleRoot?: boolean, once?: boolean): HTMLElement;
 
 export declare const createVaporApp: CreateAppFunction<ParentNode, VaporComponent>;
 export declare const createVaporSSRApp: CreateAppFunction<ParentNode, VaporComponent>;
@@ -157,6 +243,8 @@ export declare const createVaporSSRApp: CreateAppFunction<ParentNode, VaporCompo
 /*! #__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;
 type VaporDirectiveArguments = Array<[VaporDirective | undefined] | [VaporDirective | undefined, () => any] | [VaporDirective | undefined, (() => any) | undefined, argument: string] | [
     VaporDirective | undefined,
@@ -166,28 +254,64 @@ type VaporDirectiveArguments = Array<[VaporDirective | undefined] | [VaporDirect
 ]>;
 export declare function withVaporDirectives(node: Element | VaporComponentInstance, dirs: VaporDirectiveArguments): void;
 
+export declare const VaporKeepAliveImpl: ObjectVaporComponent;
+
+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 const defineVaporSSRCustomElement: typeof defineVaporCustomElement;
+type VaporInnerComponentDef = VaporComponent & CustomElementOptions;
+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;
+    protected _update(): void;
+    protected _unmount(): void;
+    /**
+     * Only called when shadowRoot is false
+     */
+    protected _updateSlotNodes(replacements: Map<Node, Node[]>): void;
+    private _createComponent;
+}
+
+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 & {
+export declare function template(html: string, root?: boolean, ns?: Namespace): () => 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;
@@ -198,11 +322,11 @@ type TargetElement = Element & {
     _value?: any;
 };
 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 setClass(el: TargetElement, value: any): void;
+export declare function setAttr(el: any, key: string, value: any, isSVG?: boolean): void;
+export declare function setDOMProp(el: any, key: string, value: any, forceHydrate?: boolean, attrName?: string): void;
+export declare function setClass(el: TargetElement, value: any, isSVG?: boolean): 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
@@ -211,8 +335,20 @@ 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 setDynamicProps(el: any, args: 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 on(el: Element, event: string, handler: (e: Event) => any, options?: AddEventListenerOptions & {
     effect?: boolean;
@@ -220,23 +356,21 @@ export declare function on(el: Element, event: string, handler: (e: Event) => an
 export declare function delegate(el: any, event: string, handler: (e: Event) => any): void;
 export declare const delegateEvents: (...names: string[]) => void;
 export declare function setDynamicEvents(el: HTMLElement, events: Record<string, (...args: any[]) => any>): void;
+export declare function createInvoker(handler: (...args: any[]) => any): (...args: any[]) => any;
 
 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, setup?: (_: {
     createSelector: (source: () => any) => (cb: () => void) => void;
-}) => void) => VaporFragment;
+}) => 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;
 
@@ -249,4 +383,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,  };