@estjs/template 0.0.14-beta.2 → 0.0.14-beta.21

package/dist/template.d.cts

@@ -4,6 +4,17 @@ import * as csstype from 'csstype';
 type EssorComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
 type Hook = 'mounted' | 'destroy';
 
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+
 type Props = Record<string, any>;
 
 interface EssorNode<T = Record<string, any>> {
@@ -2212,30 +2223,72 @@ declare class LifecycleContext {
     clearHooks(): void;
 }
 
+declare class TemplateNode$1 implements JSX.Element {
+    template: HTMLTemplateElement;
+    props: Props;
+    key?: string | undefined;
+    protected treeMap: Map<number, Node>;
+    protected mounted: boolean;
+    protected nodes: Node[];
+    protected trackMap: Map<string, NodeTrack>;
+    protected bindValueKeys: string[];
+    protected componentIndex: number;
+    protected parent: Node | null;
+    constructor(template: HTMLTemplateElement, props: Props, key?: string | undefined);
+    get firstChild(): Node | null;
+    get isConnected(): boolean;
+    addEventListener(): void;
+    removeEventListener(): void;
+    mount(parent: Node, before?: Node | null): Node[];
+    unmount(): void;
+    inheritNode(node: TemplateNode$1): void;
+    protected mapSSGNodeTree(parent: Node): void;
+    protected mapNodeTree(parent: Node, tree: Node): void;
+    protected walkNodeTree(node: Node, handler: (node: Node) => void): void;
+    protected handleSSGNode(node: Node): void;
+    protected patchProps(props: Record<string, Record<string, unknown>> | undefined): void;
+    protected patchProp(key: string, node: Node, props: Record<string, unknown>, isRoot: boolean): void;
+    protected getBindUpdateValue(props: Record<string, any>, key: string, attr: string): any;
+    protected patchChildren(key: string, node: Node, children: unknown, isRoot: boolean): void;
+    protected patchEventListener(key: string, node: Node, attr: string, listener: EventListener): void;
+    protected patchAttribute(key: string, element: HTMLElement, attr: string, value: unknown, updateFn?: Function): void;
+    protected getNodeTrack(trackKey: string, trackLastNodes?: boolean, isRoot?: boolean): NodeTrack;
+    protected patchChild(track: NodeTrack, parent: Node, child: unknown, before: Node | null): void;
+    protected reconcileChildren(parent: Node, nextNodes: Node[], before: Node | null): Map<string, Node>;
+}
+
 declare class ComponentNode$1 extends LifecycleContext implements JSX.Element {
     template: EssorComponent;
-    props?: Props | undefined;
+    props: Props;
     key?: string | undefined;
-    private proxyProps;
-    private emitter;
-    private rootNode;
-    private trackMap;
-    constructor(template: EssorComponent, props?: Props | undefined, key?: string | undefined);
-    private createProxyProps;
+    protected proxyProps: Record<string, Signal$1<unknown>>;
+    protected emitter: Set<() => void>;
+    protected rootNode: TemplateNode$1 | null;
+    protected trackMap: Map<string, NodeTrack>;
+    protected nodes: Node[];
+    protected parent: Node | null;
+    protected before: Node | null;
+    constructor(template: EssorComponent, props: Props, key?: string | undefined);
+    protected createProxyProps(props?: Props): Record<string, Signal$1<unknown>>;
     get firstChild(): Node | null;
     get isConnected(): boolean;
-    mount(parent: Node, before?: Node | null): Node[];
+    mount(parent: Node, before: Node | null): Node[];
     unmount(): void;
-    private callMountHooks;
-    private callDestroyHooks;
-    private clearEmitter;
+    private resetState;
+    protected callLifecycleHooks(type: 'mounted' | 'destroy'): void;
+    protected callMountHooks(): void;
+    protected callDestroyHooks(): void;
+    protected clearEmitter(): void;
     inheritNode(node: ComponentNode$1): void;
-    private getNodeTrack;
+    protected getNodeTrack(trackKey: string): NodeTrack;
     patchProps(props: Record<string, any> | undefined): void;
-    private patchEventListener;
-    private patchRef;
-    private patchUpdateHandler;
-    private patchNormalProp;
+    protected patchEventListener(key: string, prop: any): void;
+    protected patchRef(prop: {
+        value: Node | null;
+    }): void;
+    protected patchUpdateHandler(key: string, prop: any): void;
+    protected patchNormalProp(key: string, prop: any): void;
+    protected cleanup(): void;
 }
 
 /**
@@ -2270,14 +2323,12 @@ declare function isJsxElement(node: unknown): node is EssorNode;
  * @returns A new HTML template element.
  */
 declare function createTemplate(html: string): HTMLTemplateElement;
-/**
- * @param props - An object containing the `children` prop.
- * @param props.children - The children to be rendered. Can be a single JSX element, string, number, boolean,
- *                         or an array of these. Falsy values in arrays will be filtered out.
- * @returns A JSX element representing the fragment, wrapping the filtered children.
- */
-declare function Fragment<T extends JSX.JSXElement | string | number | boolean | (JSX.JSXElement | string | number | boolean)[]>(props: {
+declare function Fragment<T extends JSX.JSXElement | string | number | boolean | Array<JSX.JSXElement | string | number | boolean>>(template: HTMLTemplateElement | '', props: {
     children: T;
+} | {
+    [key: string]: {
+        children: T;
+    };
 }): JSX.Element;
 
 /**
@@ -2309,7 +2360,7 @@ interface InjectionKey<T> extends Symbol {
  * @param key - The key to store the value in the LifecycleContext with.
  * @param value - The value to store in the LifecycleContext with the given key.
  */
-declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
+declare function provide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
 /**
  * Injects a value from the current component LifecycleContext.
  *
@@ -2322,21 +2373,7 @@ declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, va
  * @returns The value stored in the LifecycleContext with the given key, or the default
  * value if the key is not present in the LifecycleContext.
  */
-declare function useInject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
-/**
- * Creates a reactive ref that can be used to reference a DOM node
- * or a component instance within the component function body.
- *
- * @returns a reactive ref signal
- *
- * @example
- * const inputRef = useRef<HTMLInputElement>()
- *
- * <input ref={inputRef} />
- *
- * inputRef.value // input element
- */
-declare function useRef<T>(): Signal$1<T | null>;
+declare function inject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
 
 declare class SSGNode extends LifecycleContext {
     private template;
@@ -2386,4 +2423,4 @@ declare function hydrate(component: EssorComponent, container: string | Element)
  */
 declare function ssg(component: EssorComponent, props?: Props): SSGNode | JSX.Element;
 
-export { Fragment, type InjectionKey, h, hydrate, isComponent, isJsxElement, onDestroy, onMount, renderToString, ssg, createTemplate as template, useInject, useProvide, useRef };
+export { Fragment, type InjectionKey, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };

package/dist/template.d.ts

@@ -4,6 +4,17 @@ import * as csstype from 'csstype';
 type EssorComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
 type Hook = 'mounted' | 'destroy';
 
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+
 type Props = Record<string, any>;
 
 interface EssorNode<T = Record<string, any>> {
@@ -2212,30 +2223,72 @@ declare class LifecycleContext {
     clearHooks(): void;
 }
 
+declare class TemplateNode$1 implements JSX.Element {
+    template: HTMLTemplateElement;
+    props: Props;
+    key?: string | undefined;
+    protected treeMap: Map<number, Node>;
+    protected mounted: boolean;
+    protected nodes: Node[];
+    protected trackMap: Map<string, NodeTrack>;
+    protected bindValueKeys: string[];
+    protected componentIndex: number;
+    protected parent: Node | null;
+    constructor(template: HTMLTemplateElement, props: Props, key?: string | undefined);
+    get firstChild(): Node | null;
+    get isConnected(): boolean;
+    addEventListener(): void;
+    removeEventListener(): void;
+    mount(parent: Node, before?: Node | null): Node[];
+    unmount(): void;
+    inheritNode(node: TemplateNode$1): void;
+    protected mapSSGNodeTree(parent: Node): void;
+    protected mapNodeTree(parent: Node, tree: Node): void;
+    protected walkNodeTree(node: Node, handler: (node: Node) => void): void;
+    protected handleSSGNode(node: Node): void;
+    protected patchProps(props: Record<string, Record<string, unknown>> | undefined): void;
+    protected patchProp(key: string, node: Node, props: Record<string, unknown>, isRoot: boolean): void;
+    protected getBindUpdateValue(props: Record<string, any>, key: string, attr: string): any;
+    protected patchChildren(key: string, node: Node, children: unknown, isRoot: boolean): void;
+    protected patchEventListener(key: string, node: Node, attr: string, listener: EventListener): void;
+    protected patchAttribute(key: string, element: HTMLElement, attr: string, value: unknown, updateFn?: Function): void;
+    protected getNodeTrack(trackKey: string, trackLastNodes?: boolean, isRoot?: boolean): NodeTrack;
+    protected patchChild(track: NodeTrack, parent: Node, child: unknown, before: Node | null): void;
+    protected reconcileChildren(parent: Node, nextNodes: Node[], before: Node | null): Map<string, Node>;
+}
+
 declare class ComponentNode$1 extends LifecycleContext implements JSX.Element {
     template: EssorComponent;
-    props?: Props | undefined;
+    props: Props;
     key?: string | undefined;
-    private proxyProps;
-    private emitter;
-    private rootNode;
-    private trackMap;
-    constructor(template: EssorComponent, props?: Props | undefined, key?: string | undefined);
-    private createProxyProps;
+    protected proxyProps: Record<string, Signal$1<unknown>>;
+    protected emitter: Set<() => void>;
+    protected rootNode: TemplateNode$1 | null;
+    protected trackMap: Map<string, NodeTrack>;
+    protected nodes: Node[];
+    protected parent: Node | null;
+    protected before: Node | null;
+    constructor(template: EssorComponent, props: Props, key?: string | undefined);
+    protected createProxyProps(props?: Props): Record<string, Signal$1<unknown>>;
     get firstChild(): Node | null;
     get isConnected(): boolean;
-    mount(parent: Node, before?: Node | null): Node[];
+    mount(parent: Node, before: Node | null): Node[];
     unmount(): void;
-    private callMountHooks;
-    private callDestroyHooks;
-    private clearEmitter;
+    private resetState;
+    protected callLifecycleHooks(type: 'mounted' | 'destroy'): void;
+    protected callMountHooks(): void;
+    protected callDestroyHooks(): void;
+    protected clearEmitter(): void;
     inheritNode(node: ComponentNode$1): void;
-    private getNodeTrack;
+    protected getNodeTrack(trackKey: string): NodeTrack;
     patchProps(props: Record<string, any> | undefined): void;
-    private patchEventListener;
-    private patchRef;
-    private patchUpdateHandler;
-    private patchNormalProp;
+    protected patchEventListener(key: string, prop: any): void;
+    protected patchRef(prop: {
+        value: Node | null;
+    }): void;
+    protected patchUpdateHandler(key: string, prop: any): void;
+    protected patchNormalProp(key: string, prop: any): void;
+    protected cleanup(): void;
 }
 
 /**
@@ -2270,14 +2323,12 @@ declare function isJsxElement(node: unknown): node is EssorNode;
  * @returns A new HTML template element.
  */
 declare function createTemplate(html: string): HTMLTemplateElement;
-/**
- * @param props - An object containing the `children` prop.
- * @param props.children - The children to be rendered. Can be a single JSX element, string, number, boolean,
- *                         or an array of these. Falsy values in arrays will be filtered out.
- * @returns A JSX element representing the fragment, wrapping the filtered children.
- */
-declare function Fragment<T extends JSX.JSXElement | string | number | boolean | (JSX.JSXElement | string | number | boolean)[]>(props: {
+declare function Fragment<T extends JSX.JSXElement | string | number | boolean | Array<JSX.JSXElement | string | number | boolean>>(template: HTMLTemplateElement | '', props: {
     children: T;
+} | {
+    [key: string]: {
+        children: T;
+    };
 }): JSX.Element;
 
 /**
@@ -2309,7 +2360,7 @@ interface InjectionKey<T> extends Symbol {
  * @param key - The key to store the value in the LifecycleContext with.
  * @param value - The value to store in the LifecycleContext with the given key.
  */
-declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
+declare function provide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
 /**
  * Injects a value from the current component LifecycleContext.
  *
@@ -2322,21 +2373,7 @@ declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, va
  * @returns The value stored in the LifecycleContext with the given key, or the default
  * value if the key is not present in the LifecycleContext.
  */
-declare function useInject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
-/**
- * Creates a reactive ref that can be used to reference a DOM node
- * or a component instance within the component function body.
- *
- * @returns a reactive ref signal
- *
- * @example
- * const inputRef = useRef<HTMLInputElement>()
- *
- * <input ref={inputRef} />
- *
- * inputRef.value // input element
- */
-declare function useRef<T>(): Signal$1<T | null>;
+declare function inject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
 
 declare class SSGNode extends LifecycleContext {
     private template;
@@ -2386,4 +2423,4 @@ declare function hydrate(component: EssorComponent, container: string | Element)
  */
 declare function ssg(component: EssorComponent, props?: Props): SSGNode | JSX.Element;
 
-export { Fragment, type InjectionKey, h, hydrate, isComponent, isJsxElement, onDestroy, onMount, renderToString, ssg, createTemplate as template, useInject, useProvide, useRef };
+export { Fragment, type InjectionKey, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };