j-templates 6.1.12 → 7.0.1

package/DOM/createAssignment.js

@@ -3,19 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CreateAssignment = CreateAssignment;
 function CreateAssignment(target, createAssignment) {
     let last;
-    let writeTo;
+    let writeTo = {};
     return function AssignNext(next) {
         if (next === last)
             return;
         last = next;
-        writeTo ??= {};
         const nextKeys = next && Object.keys(next);
         for (let x = 0; nextKeys && x < nextKeys.length; x++) {
             const key = nextKeys[x];
             writeTo[key] ??= createAssignment(target, key);
         }
-        const writeKeys = Object.keys(writeTo);
-        for (let x = 0; x < writeKeys.length; x++)
-            writeTo[writeKeys[x]](next);
+        const writeFunctions = Object.values(writeTo);
+        for (let x = 0; x < writeFunctions.length; x++)
+            writeFunctions[x](next);
     };
 }

package/DOM/createAttributeAssignment.d.ts

@@ -0,0 +1 @@
+export declare function CreateAttributeAssignment(target: HTMLElement, attribute: string): (next: any) => void;

package/DOM/createAttributeAssignment.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateAttributeAssignment = CreateAttributeAssignment;
+function CreateAttributeAssignment(target, attribute) {
+    let lastValue;
+    return function (next) {
+        const nextValue = next && next[attribute];
+        if (nextValue === lastValue)
+            return;
+        if (nextValue === undefined)
+            target.removeAttribute(attribute);
+        else
+            target.setAttribute(attribute, nextValue);
+        lastValue = nextValue;
+    };
+}

package/DOM/createPropertyAssignment.d.ts

@@ -2,3 +2,4 @@ export declare function CreateNodeValueAssignment(target: HTMLElement): (value:
 export declare function CreatePropertyAssignment(target: any): (next: {
     [prop: string]: any;
 }) => void;
+export declare function AssignProperties(target: any, next: any): void;

package/DOM/createPropertyAssignment.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CreateNodeValueAssignment = CreateNodeValueAssignment;
 exports.CreatePropertyAssignment = CreatePropertyAssignment;
+exports.AssignProperties = AssignProperties;
 const json_1 = require("../Utils/json");
 function CreateNodeValueAssignment(target) {
     let lastValue = target.nodeValue;
@@ -77,3 +78,9 @@ function CreatePropertyAssignment(target) {
             last.splice(endIndex);
     };
 }
+function AssignProperties(target, next) {
+    WalkValue(next, function (path, value) {
+        const assignment = GetAssignmentFunction(path);
+        assignment(target, value);
+    });
+}

package/DOM/domNodeConfig.js

@@ -7,6 +7,7 @@ const createPropertyAssignment_1 = require("./createPropertyAssignment");
 const createEventAssignment_1 = require("./createEventAssignment");
 const createAssignment_1 = require("./createAssignment");
 const createPropertyAssignment_2 = require("./createPropertyAssignment");
+const createAttributeAssignment_1 = require("./createAttributeAssignment");
 let pendingUpdates = list_1.List.Create();
 let updateScheduled = false;
 const frameTime = 16;
@@ -50,6 +51,8 @@ function wrapPriorityUpdates(callback) {
 }
 exports.DOMNodeConfig = {
     createNode(type, namespace) {
+        if (type === 'text')
+            return window_1.wndw.document.createTextNode('');
         return namespace ?
             window_1.wndw.document.createElementNS(namespace, type) :
             window_1.wndw.document.createElement(type);
@@ -110,9 +113,15 @@ exports.DOMNodeConfig = {
     createPropertyAssignment(target) {
         return (0, createPropertyAssignment_2.CreatePropertyAssignment)(target);
     },
+    assignProperties(target, next) {
+        (0, createPropertyAssignment_1.AssignProperties)(target, next);
+    },
     createEventAssignment(target) {
         return (0, createAssignment_1.CreateAssignment)(target, createEventAssignment_1.CreateEventAssignment);
     },
+    createAttributeAssignment(target) {
+        return (0, createAssignment_1.CreateAssignment)(target, createAttributeAssignment_1.CreateAttributeAssignment);
+    },
     fireEvent(target, event, data) {
         var cEvent = new CustomEvent(event, data);
         target.dispatchEvent(cEvent);
@@ -129,4 +138,35 @@ exports.DOMNodeConfig = {
     replaceChildren(target, children) {
         target.replaceChildren(...children);
     },
+    reconcileChildren(target, children) {
+        if (children.length === 0 && !target.firstChild)
+            return;
+        if (children.length === 0 || !target.firstChild) {
+            target.replaceChildren(...children);
+            return;
+        }
+        let actualNode = target.firstChild;
+        let x = 0;
+        let removed = false;
+        for (; actualNode && x < children.length; x++) {
+            const expectedNode = children[x];
+            if (!removed && actualNode !== expectedNode) {
+                const remove = actualNode;
+                actualNode = actualNode.nextSibling;
+                target.removeChild(remove);
+                removed = true;
+            }
+            if (actualNode !== expectedNode) {
+                target.insertBefore(expectedNode, actualNode);
+            }
+            else {
+                actualNode = actualNode.nextSibling;
+                removed = false;
+            }
+        }
+        while (target.lastChild !== children[x - 1])
+            target.removeChild(target.lastChild);
+        for (; x < children.length; x++)
+            target.appendChild(children[x]);
+    }
 };

package/DOM/elements.d.ts

@@ -1,26 +1,80 @@
-import { ElementNodeFunctionParam, ElementChildrenFunctionParam } from "../Node/elementNode.types";
-export declare function div<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function a<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function ul<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function li<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function br<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function b<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function span<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function img<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function video<T>(nodeDef: ElementNodeFunctionParam<T, HTMLVideoElement, HTMLVideoElementEventMap>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function source<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function input<T>(nodeDef: ElementNodeFunctionParam<T, HTMLInputElement>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function textarea<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function select<T>(nodeDef: ElementNodeFunctionParam<T, HTMLSelectElement>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function option<T>(nodeDef: ElementNodeFunctionParam<T, HTMLOptionElement>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function h1<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function h2<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function h3<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function p<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function style<T>(nodeDef: ElementNodeFunctionParam<T, HTMLStyleElement>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function button<T>(nodeDef: ElementNodeFunctionParam<T, HTMLButtonElement>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function table<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function tbody<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function th<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function tr<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function td<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
+export declare const div: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const a: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const button: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLButtonElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const h1: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const input: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLInputElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const span: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const table: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const tbody: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const tr: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;
+export declare const td: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | ((data: T) => string | import("../Node/vNode.types").vNode | import("../Node/vNode.types").vNode[])) => import("../Node/vNode.types").vNode;

package/DOM/elements.js

@@ -1,103 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.div = div;
-exports.a = a;
-exports.ul = ul;
-exports.li = li;
-exports.br = br;
-exports.b = b;
-exports.span = span;
-exports.img = img;
-exports.video = video;
-exports.source = source;
-exports.input = input;
-exports.textarea = textarea;
-exports.select = select;
-exports.option = option;
-exports.h1 = h1;
-exports.h2 = h2;
-exports.h3 = h3;
-exports.p = p;
-exports.style = style;
-exports.button = button;
-exports.table = table;
-exports.tbody = tbody;
-exports.th = th;
-exports.tr = tr;
-exports.td = td;
-const elementNode_1 = require("../Node/elementNode");
-function div(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("div", null, nodeDef, children);
-}
-function a(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("a", null, nodeDef, children);
-}
-function ul(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("ul", null, nodeDef, children);
-}
-function li(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("li", null, nodeDef, children);
-}
-function br(nodeDef) {
-    return elementNode_1.ElementNode.Create("br", null, nodeDef, null);
-}
-function b(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("b", null, nodeDef, children);
-}
-function span(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("span", null, nodeDef, children);
-}
-function img(nodeDef) {
-    return elementNode_1.ElementNode.Create("img", null, nodeDef, null);
-}
-function video(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("video", null, nodeDef, children);
-}
-function source(nodeDef) {
-    return elementNode_1.ElementNode.Create("source", null, nodeDef, null);
-}
-function input(nodeDef) {
-    return elementNode_1.ElementNode.Create("input", null, nodeDef, null);
-}
-function textarea(nodeDef) {
-    return elementNode_1.ElementNode.Create("textarea", null, nodeDef, null);
-}
-function select(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("select", null, nodeDef, children);
-}
-function option(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("option", null, nodeDef, children);
-}
-function h1(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("h1", null, nodeDef, children);
-}
-function h2(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("h2", null, nodeDef, children);
-}
-function h3(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("h3", null, nodeDef, children);
-}
-function p(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("p", null, nodeDef, children);
-}
-function style(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("style", null, nodeDef, children);
-}
-function button(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("button", null, nodeDef, children);
-}
-function table(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("table", null, nodeDef, children);
-}
-function tbody(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("tbody", null, nodeDef, children);
-}
-function th(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("th", null, nodeDef, children);
-}
-function tr(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("tr", null, nodeDef, children);
-}
-function td(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("td", null, nodeDef, children);
-}
+exports.td = exports.tr = exports.tbody = exports.table = exports.span = exports.input = exports.h1 = exports.button = exports.a = exports.div = void 0;
+const vNode_1 = require("../Node/vNode");
+exports.div = vNode_1.vNode.ToFunction('div');
+exports.a = vNode_1.vNode.ToFunction('a');
+exports.button = vNode_1.vNode.ToFunction('button');
+exports.h1 = vNode_1.vNode.ToFunction('h1');
+exports.input = vNode_1.vNode.ToFunction('input');
+exports.span = vNode_1.vNode.ToFunction('span');
+exports.table = vNode_1.vNode.ToFunction('table');
+exports.tbody = vNode_1.vNode.ToFunction('tbody');
+exports.tr = vNode_1.vNode.ToFunction('tr');
+exports.td = vNode_1.vNode.ToFunction('td');

package/DOM/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./elements";
-export * from "./svgElements";
 export * from "./createPropertyAssignment";
 export * from "./createEventAssignment";

package/DOM/index.js

@@ -15,6 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./elements"), exports);
-__exportStar(require("./svgElements"), exports);
 __exportStar(require("./createPropertyAssignment"), exports);
 __exportStar(require("./createEventAssignment"), exports);

package/DOM/svgElements.d.ts

@@ -1,4 +0,0 @@
-import { ElementChildrenFunction, ElementNodeFunctionParam } from "../Node/elementNode.types";
-export declare function svg<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function g<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;
-export declare function circle<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;

package/DOM/svgElements.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.svg = svg;
-exports.g = g;
-exports.circle = circle;
-const elementNode_1 = require("../Node/elementNode");
-const svgNs = "http://www.w3.org/2000/svg";
-function svg(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("svg", svgNs, nodeDef, children);
-}
-function g(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("g", svgNs, nodeDef, children);
-}
-function circle(nodeDef, children) {
-    return elementNode_1.ElementNode.Create("circle", svgNs, nodeDef, children);
-}

package/Node/component.d.ts

@@ -1,8 +1,9 @@
-import { ComponentNodeEvents, ComponentNodeFunction } from "./componentNode.types";
+import { ComponentEvents } from "./component.types";
 import { ObservableScope } from "../Store/Tree/observableScope";
-import { INodeRefBase, ElementNodeRefTypes } from "./nodeRef.types";
-export declare class Component<D = void, T = void, E = void> {
-    private nodeRef;
+import { FunctionOr, vNode as vNodeType } from "./vNode.types";
+import { RecursivePartial } from "../Utils/utils.types";
+export declare class Component<D = void, T = void, E = {}> {
+    private vNode;
     private componentEvents;
     private scope;
     private templates;
@@ -10,22 +11,24 @@ export declare class Component<D = void, T = void, E = void> {
     get Destroyed(): boolean;
     protected get Scope(): ObservableScope<D>;
     protected get Data(): D;
-    protected get NodeRef(): INodeRefBase;
+    protected get VNode(): vNodeType;
     protected get Templates(): T;
-    constructor(data: D | (() => (D | Promise<D>)), templates: T, nodeRef: INodeRefBase, componentEvents: ComponentNodeEvents<E>);
-    Template(): ElementNodeRefTypes | ElementNodeRefTypes[];
+    constructor(data: D | (() => (D | Promise<D>)), templates: T, vNode: vNodeType, componentEvents: ComponentEvents<E>);
+    Template(): vNodeType | vNodeType[];
     Bound(): void;
     Fire<P extends keyof E>(event: P, data?: E[P]): void;
     Destroy(): void;
 }
+type vComponentConfig<D, E, P = HTMLElement> = {
+    data?: () => D | undefined;
+    props?: FunctionOr<RecursivePartial<P>> | undefined;
+    on?: ComponentEvents<E> | undefined;
+};
+type ComponentConstructor<D, T, E> = {
+    new (data: D | (() => (D | Promise<D>)), templates: T, vNode: vNodeType, componentEvents: ComponentEvents<E>): Component<D, T, E>;
+};
 export declare namespace Component {
-    function ToFunction<D = void, T = void, E = void>(type: string, constructor: ComponentConstructor<D, T, E>): ComponentNodeFunction<D, T, E>;
-    function ToFunction<D = void, T = void, E = void>(type: string, namespace: string, constructor: ComponentConstructor<D, T, E>): ComponentNodeFunction<D, T, E>;
-    function Register<D = void, T = void, E = void>(name: string, constructor: ComponentConstructor<D, T, E>): void;
-    function Attach(node: Node, nodeRef: ElementNodeRefTypes): void;
+    function ToFunction<D, T, E, P = HTMLElement>(type: string, constructor: ComponentConstructor<D, T, E>, namespace?: string): (config: vComponentConfig<D, E, P>, templates?: T) => vNodeType;
+    function Attach(node: any, vnode: vNodeType): vNodeType;
 }
-export type ComponentConstructor<D, T, E> = {
-    new (data: {
-        (): D | Promise<D>;
-    }, templates: T, nodeRef: INodeRefBase, componentEvents: ComponentNodeEvents<E>): Component<D, T, E>;
-};
+export {};

package/Node/component.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = void 0;
-const nodeRef_1 = require("./nodeRef");
-const componentNode_1 = require("./componentNode");
 const decorators_1 = require("../Utils/decorators");
 const observableScope_1 = require("../Store/Tree/observableScope");
+const vNode_1 = require("./vNode");
 class Component {
     get Injector() {
-        return this.nodeRef.injector;
+        return this.vNode.injector;
     }
     get Destroyed() {
-        return this.nodeRef.destroyed;
+        return this.vNode.destroyed;
     }
     get Scope() {
         return this.scope;
@@ -18,14 +17,14 @@ class Component {
     get Data() {
         return this.scope.Value;
     }
-    get NodeRef() {
-        return this.nodeRef;
+    get VNode() {
+        return this.vNode;
     }
     get Templates() {
         return this.templates;
     }
-    constructor(data, templates, nodeRef, componentEvents) {
-        this.nodeRef = nodeRef;
+    constructor(data, templates, vNode, componentEvents) {
+        this.vNode = vNode;
         this.componentEvents = componentEvents;
         if (typeof data === 'function')
             this.scope = new observableScope_1.ObservableScope(data);
@@ -48,31 +47,26 @@ class Component {
 }
 exports.Component = Component;
 (function (Component) {
-    function ToFunction(type, namespace, constructor) {
-        if (constructor === undefined) {
-            constructor = namespace;
-            namespace = undefined;
-        }
-        return componentNode_1.ComponentNode.ToFunction(type, namespace, constructor);
-    }
-    Component.ToFunction = ToFunction;
-    function Register(name, constructor) {
-        const componentFunction = ToFunction(`${name}-component`, undefined, constructor);
-        class WebComponent extends HTMLElement {
-            constructor() {
-                super();
-                const shadowRoot = this.attachShadow({ mode: "open" });
-                const node = componentFunction({});
-                Attach(shadowRoot, node);
+    function ToFunction(type, constructor, namespace) {
+        return function (config, templates) {
+            const { data, on, props } = config;
+            class ConcreteComponent extends constructor {
+                constructor(vnode) {
+                    super(data, templates, vnode, on);
+                }
             }
-        }
-        customElements.define(name, WebComponent);
+            const definition = {
+                type,
+                namespace: namespace ?? null,
+                props,
+                componentConstructor: ConcreteComponent
+            };
+            return vNode_1.vNode.Create(definition);
+        };
     }
-    Component.Register = Register;
-    function Attach(node, nodeRef) {
-        nodeRef_1.NodeRef.Init(nodeRef);
-        var rootRef = nodeRef_1.NodeRef.Wrap(node);
-        nodeRef_1.NodeRef.AddChild(rootRef, nodeRef);
+    Component.ToFunction = ToFunction;
+    function Attach(node, vnode) {
+        return vNode_1.vNode.Attach(node, vnode);
     }
     Component.Attach = Attach;
 })(Component || (exports.Component = Component = {}));

package/Node/component.types.d.ts

@@ -0,0 +1,5 @@
+export type ComponentEvents<E = void> = E extends void ? void : {
+    [P in keyof E]?: {
+        (data: E[P]): void;
+    };
+};

package/Node/nodeConfig.d.ts

@@ -26,14 +26,21 @@ export interface INodeConfig {
     createPropertyAssignment(target: any): {
         (next: any): void;
     };
+    assignProperties(target: any, next: any): void;
     createEventAssignment(target: any): {
         (next: {
             [event: string]: (event: Event) => void;
         }): void;
     };
+    createAttributeAssignment(target: any): {
+        (next: {
+            [attribute: string]: string;
+        }): void;
+    };
     getFirstChild(target: any): any;
     getLastChild(target: any): any;
     getNextSibling(target: any): any;
     replaceChildren(target: any, children: any[]): void;
+    reconcileChildren(target: any, children: any[]): void;
 }
 export declare const NodeConfig: INodeConfig;

package/Node/vNode.d.ts

@@ -0,0 +1,20 @@
+import { RecursivePartial } from "../Utils/utils.types";
+import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents } from "./vNode.types";
+type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
+    props?: FunctionOr<RecursivePartial<P>>;
+    attrs?: FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: FunctionOr<vNodeEvents<E>>;
+    data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
+};
+export declare namespace vNode {
+    function Create<P = HTMLElement, E = HTMLElementEventMap, T = never>(definition: vNodeDefinition<P, E, T>): vNodeType;
+    function Init(vnode: vNodeType): void;
+    function InitAll(vnodes: vNodeType[]): void;
+    function Destroy(vnode: vNodeType): void;
+    function DestroyAll(vnodes: vNodeType[]): void;
+    function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | ((data: T) => string | vNodeType | vNodeType[])) => vNodeType;
+    function Attach(node: any, vnode: vNodeType): vNodeType;
+}
+export {};