yandel 1.1.2 → 1.2.1

package/README.md

@@ -199,10 +199,10 @@ function AppNotifications() {
 
 #### Future node
 
-Future nodes are `templates` (functions) and will be created at render time (as `components` and `text`). This applies for all type of functions that return a `ValidTemplateReturn`; also the generic tags like `div`, `span`, etc. are allowed
+Future nodes are `templates` (functions) used as a child and will be created at render time (as `components` and `text`). This applies for all type of functions that return a `ValidTemplateReturn`; also the generic tags like `div`, `span`, etc. are allowed
 
 ```ts
-import { div, main, nav } from "yandel"
+import { div, main, nav } from "yandel";
 
 function MyGridOfPhotos () {
   return div(...);
@@ -566,7 +566,7 @@ function UserConsumerWithError() {
 
 #### Future nodes
 
-As explained in the section of [future nodes](#future-node), `components`, `text` and `future nodes` are created at render time, and if your consumer is a function, like in the next example:
+As explained in the section of [future nodes](#future-node), `components`, `text` and `future nodes` are created at render time. You have to understand how they are being created:
 
 ```ts
 function UserConsumer() {
@@ -580,7 +580,8 @@ class App extends Component {
 }
 ```
 
-`UserConsumer` will be created before the `UserProvider` is rendered and provides, leading to an undefined context.
+When a component is created, its `render` method will be called at render time. In this example, `UserConsumer` will be called before the `UserProvider` `render`
+method at render time, so the context will be undefined.
 
 ```ts
 public render(): ValidTemplateReturn {
@@ -591,11 +592,11 @@ public render(): ValidTemplateReturn {
 }
 ```
 
-Now, `UserConsumer` will be able to consume. Don't forget that nodes outside the provider component
+Now, `UserConsumer` will be able to consume, because It will be created at render time right after the `UserProvider` `render` method, so it will be accesible.
 
 ### Ref
 
-The `ref` prop allows you to have access to the element's reference:
+The `ref` prop allows you to have access to the tag's reference:
 
 ```ts
 import { Component, ElementRef, Stores, input } from "yandel";
@@ -635,7 +636,7 @@ class WithKey extends Component {
 
 ## Usage
 
-Define your own templates and components. Then, use `createRoot.render` to render your UI.
+Define your UI: components, templates, nodes... then, use `createRoot.render` to start rendering and done!
 
 ```ts
 import {

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export { Component, createContext, createRoot, EffectHandler, Element, ElementRef, HTMLProps, HTMLTags, Portal, StateHandler, Stores, Styles, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, } from "./node";
+/// <reference path="../types/index.d.ts" preserve="true" />
+export { Component, createContext, createRoot, EffectHandler, Portal, Stores, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, } from "./node";
 export * from "./tags";

package/dist/index.js

@@ -1,2 +1,10 @@
-export { Component, createContext, createRoot, Portal, Stores, } from "./node";
+/// <reference path="../types/index.d.ts" preserve="true"/>
+export { Component, createContext, createRoot, 
+// Element,
+// ElementRef,
+// HTMLProps,
+// HTMLTags,
+Portal, 
+// StateHandler,
+Stores, } from "./node";
 export * from "./tags";

package/dist/node.d.ts

@@ -1,62 +1,12 @@
-type HTMLExcludedProperties = `aria${string}` | "tagName" | "shadowRoot" | "slot" | "classList" | "style" | "attributes" | "attributeStyleMap" | "ATTRIBUTE_NODE" | "CDATA_SECTION_NODE" | "COMMENT_NODE" | "childElementCount" | "childNodes" | "children" | "isConnected" | "ownerDocument" | "lastChild" | "lastElement" | "nextElementSibling" | "nextSibling" | "previousElementSibling" | "previousSibling" | "parentElement" | "parent" | "outerContent" | "firstChild" | "firstElementChild" | "lastChild" | "lastElementChild" | "innerHTML" | "outerHTML" | "innerContent" | "textContent" | `DOCUMENT_${string}` | "NOTATION_NODE" | "PROCESSING_INSTRUCTION_NODE" | "CONTENT_NODE" | "ELEMENT_NODE" | "TEXT_NODE" | `ENTITY_${string}`;
-type AriaWidgetProperties = "aria-autocomplete" | "aria-checked" | "aria-disabled" | "aria-errormessage" | "aria-expanded" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-label" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-placeholder" | "aria-pressed" | "aria-readonly" | "aria-required" | "aria-selected" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext";
-type AriaLiveRegionProperties = "aria-busy" | "aria-live" | "aria-relevant" | "aria-atomic";
-type AriaDragAndDropProperties = "aria-dropeffect" | "aria-grabbed";
-type AriaRelatonshipProperties = "aria-activedescendant" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-describedby" | "aria-description" | "aria-details" | "aria-errormessage" | "aria-flowto" | "aria-labelledby" | "aria-owns" | "aria-posinset" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-setsize";
-type AriaGlobalProperties = "aria-atomic" | "aria-busy" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-live" | "aria-owns" | "aria-relevant" | "aria-roledescription";
-type AriaProps = AriaWidgetProperties | AriaDragAndDropProperties | AriaLiveRegionProperties | AriaRelatonshipProperties | AriaGlobalProperties;
-type AriaBoolean = "true" | "false";
-type AriaValue = Exclude<string, AriaBoolean>;
-type AriaValueMap = Partial<Record<AriaProps, AriaBoolean | AriaValue>>;
-type KeyedObject = Record<string | symbol | number, any>;
-type HTMLTags = keyof HTMLElementTagNameMap;
-type HTMLSVGTags = keyof SVGElementTagNameMap;
-type Element<K extends HTMLTags = HTMLTags> = HTMLElementTagNameMap[K];
-type SVGElement<K extends HTMLSVGTags = HTMLSVGTags> = SVGElementTagNameMap[K];
-interface SwitchableNode<T extends Node> {
-    switch(t: T): boolean;
-}
-type FutureNode = () => ValidNodeChild;
 type ValidNode = Node | Component | Component<KeyedObject> | FutureNode;
 type ValidNodeChild = ValidNode | null | string;
 type ValidTemplateReturn = ValidNodeChild | ValidNodeChild[];
+type FutureNode = () => ValidNodeChild;
 type EffectHandler = (() => void) | (() => () => void);
-type ExcludeFunctions<T> = {
-    [K in keyof T as T[K] extends Function ? never : K]: T[K];
-};
-type Styles = Partial<CSSStyleDeclaration>;
-interface ElementOverridedProperties extends AriaValueMap {
-    style?: Styles;
-}
-type AnyElement<T extends HTMLTags | HTMLSVGTags = HTMLTags> = T extends HTMLTags ? Element<T> : T extends HTMLSVGTags ? SVGElement<T> : never;
-type AnyProps<T extends HTMLTags | HTMLSVGTags = HTMLTags> = T extends HTMLTags ? HTMLProps<T> : T extends HTMLSVGTags ? SVGProps<T> : never;
-type ElementRef<T extends HTMLTags | HTMLSVGTags = HTMLTags> = Stores<(T extends HTMLTags ? HTMLElementTagNameMap[T] : T extends HTMLSVGTags ? SVGElementTagNameMap[T] : never) | undefined>;
-interface ElementProps<T extends HTMLTags | HTMLSVGTags = HTMLTags> {
-    ref?: ElementRef<T>;
-    key?: string | number | symbol;
-}
-type ExcludeProperties<T> = {
-    [K in keyof T as K extends HTMLExcludedProperties ? never : K]: T[K];
-};
-type HTMLProps<T extends HTMLTags> = Partial<ExcludeProperties<ExcludeFunctions<Element<T>>>> & ElementProps<T> & ElementOverridedProperties;
-type SVGAttributeValue = string | number;
-type NormalizeSVGProp<T> = T extends SVGAnimatedLength ? SVGAttributeValue : T extends SVGAnimatedAngle ? SVGAttributeValue : T extends SVGAnimatedBoolean ? SVGAttributeValue : T extends SVGAnimatedEnumeration ? SVGAttributeValue : T extends SVGAnimatedInteger ? SVGAttributeValue : T extends SVGAnimatedNumber ? SVGAttributeValue : T extends SVGAnimatedPreserveAspectRatio ? SVGAttributeValue : T extends SVGAnimatedRect ? SVGAttributeValue : T extends SVGAnimatedString ? SVGAttributeValue : T extends SVGAnimatedTransformList ? SVGAttributeValue : T extends SVGPointList ? SVGAttributeValue : T;
-type SVGRawProps<T extends HTMLSVGTags> = ExcludeProperties<ExcludeFunctions<SVGElementTagNameMap[T]>>;
-interface SVGOverridedProperties {
-    fill?: string;
-    "fill-opacity"?: string;
-    stroke?: string;
-    "stroke-width"?: SVGAttributeValue;
-    "stroke-linecap"?: "butt" | "round" | "square";
-    "stroke-linejoin"?: "miter" | "round" | "bevel";
-    d?: string;
-    "stroke-dasharray"?: SVGAttributeValue;
+interface SwitchableNode<T extends Node> {
+    switch(t: T): boolean;
 }
-type SVGProps<T extends HTMLSVGTags> = Partial<{
-    [K in keyof SVGRawProps<T>]: NormalizeSVGProp<SVGRawProps<T>[K]>;
-}> & ElementProps<T> & ElementOverridedProperties & SVGOverridedProperties;
-type StateHandler<S extends KeyedObject | undefined = undefined> = S | ((l: S) => S);
-declare const enum NodeType {
+declare enum NodeType {
     Tag = 0,
     Content = 1,
     Parent = 2,
@@ -93,10 +43,7 @@ declare class TagNode<T extends HTMLTags | HTMLSVGTags = HTMLTags> extends Node
     key: symbol | string | number | undefined;
     index_length: number;
     constructor(tag: T, props?: AnyProps<T>, children?: ValidNodeChild[]);
-    private _apply_dom_props;
     private _diff_dom_props;
-    private _clear_dom_props;
-    private _clear_dom_events;
     get dom(): AnyElement<T> | undefined;
     get props(): AnyProps<T> | undefined;
     get children(): ValidNodeChild[] | undefined;
@@ -105,7 +52,7 @@ declare class TagNode<T extends HTMLTags | HTMLSVGTags = HTMLTags> extends Node
     clearChildren(): void;
     clearDom(): void;
     delete(): void;
-    switch(t: TagNode<HTMLTags>): boolean;
+    switch(t: TagNode): boolean;
 }
 declare class ParentNode<T extends HTMLElement = HTMLElement> extends Node implements SwitchableNode<ParentNode> {
     static is(t: any): t is ParentNode;
@@ -141,4 +88,4 @@ declare function createRoot<T extends HTMLElement>(root: T): {
     render: (...children: ValidNodeChild[]) => void;
 };
 declare function createContext<T extends KeyedObject>(): Context<T>;
-export { Component, createContext, createRoot, EffectHandler, Element, ElementRef, HTMLProps, HTMLTags, HTMLSVGTags, SVGProps, Node, Portal, StateHandler, Stores, Styles, TagNode, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, };
+export { Component, createContext, createRoot, EffectHandler, Node, Portal, Stores, TagNode, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, };

package/dist/node.js

@@ -64,6 +64,13 @@ const SVG_TAGS = new Set([
     "use",
     "view",
 ]);
+var NodeType;
+(function (NodeType) {
+    NodeType[NodeType["Tag"] = 0] = "Tag";
+    NodeType[NodeType["Content"] = 1] = "Content";
+    NodeType[NodeType["Parent"] = 2] = "Parent";
+    NodeType[NodeType["Component"] = 3] = "Component";
+})(NodeType || (NodeType = {}));
 class Stores {
     #_stores;
     constructor(s) {
@@ -76,7 +83,7 @@ class Stores {
         this.#_stores = s;
     }
 }
-class ComponentUpdateQueue {
+class UpdateQueue {
     static _update_scheduled = false;
     static _queue = new Set();
     static processNodeQueue() {
@@ -118,16 +125,14 @@ class ComponentUpdateQueue {
         if (!this._update_scheduled)
             this.notifyQueue();
     }
-}
-function queueNodesDeletion(ns) {
-    queueMicrotask(() => {
-        for (const c of ns) {
-            if (c instanceof Node)
-                c.delete();
-            else
-                console.warn("Unknown child");
-        }
-    });
+    static queueNodesDeletion(ns) {
+        queueMicrotask(() => {
+            for (const c of ns) {
+                if (c && c instanceof Node)
+                    c.delete();
+            }
+        });
+    }
 }
 const ComponentInternalKey = Symbol("_$ci$_");
 function _c_el(t) {
@@ -149,16 +154,16 @@ class Node {
         this.$typeof = t;
     }
     get isTag() {
-        return this.$typeof === 0 /* NodeType.Tag */;
+        return this.$typeof === NodeType.Tag;
     }
     get isContent() {
-        return this.$typeof === 1 /* NodeType.Content */;
+        return this.$typeof === NodeType.Content;
     }
     get isParent() {
-        return this.$typeof === 2 /* NodeType.Parent */;
+        return this.$typeof === NodeType.Parent;
     }
     get isComponent() {
-        return this.$typeof === 3 /* NodeType.Component */;
+        return this.$typeof === NodeType.Component;
     }
     get deleted() {
         return this._deleted;
@@ -183,7 +188,7 @@ class ContentNode extends Node {
     _content;
     _dom = undefined;
     constructor(content) {
-        super(1 /* NodeType.Content */);
+        super(NodeType.Content);
         this._content = content;
         this.needs_update = true;
     }
@@ -225,21 +230,10 @@ class ContentNode extends Node {
         super.delete();
     }
 }
-function create_template(t) {
-    try {
-        return t();
-    }
-    catch (error) {
-        throw new Error(`Template create error: ${error}`);
-    }
-}
-function _get_node_from_future(t) {
-    const n = create_template(t);
-    if (_is_fn(n))
-        return _get_node_from_future(n);
-    return n;
+function _create_html_tag(tag) {
+    return SVG_TAGS.has(tag) ? _c_s(tag) : _c_el(tag);
 }
-function _apply_dom_prop(dom, props, prop) {
+function _apply_html_prop(dom, props, prop) {
     const v = props[prop];
     if (v == null)
         return;
@@ -287,7 +281,7 @@ function _apply_dom_prop(dom, props, prop) {
     else
         dom.setAttribute(prop, v);
 }
-function _remove_dom_prop(dom, props, prop) {
+function _remove_html_prop(dom, props, prop) {
     if (/^on[a-z]/.test(prop)) {
         const ev_name = prop.slice(2);
         dom.removeEventListener(ev_name, props[prop]);
@@ -295,11 +289,21 @@ function _remove_dom_prop(dom, props, prop) {
     }
     if (prop === "ref" && props.ref instanceof Stores) {
         props.ref.stores = undefined;
-        return;
     }
     const v = props[prop];
-    if (v == null)
+    if (v == null) {
+        if (prop === "style")
+            return;
+        if (prop in dom) {
+            try {
+                dom[prop] = undefined;
+            }
+            catch (error) {
+                console.error("Remove prop error:", error);
+            }
+        }
         return;
+    }
     if (prop === "style" && typeof v === "object") {
         try {
             Object.entries(v).forEach(([cssProp]) => {
@@ -323,15 +327,15 @@ function _remove_dom_prop(dom, props, prop) {
                 switch (t) {
                     case "boolean": {
                         dom[prop] = false;
-                        return;
+                        break;
                     }
                     case "string": {
                         dom[prop] = "";
-                        return;
+                        break;
                     }
                     case "object": {
-                        dom[prop] = null;
-                        return;
+                        dom[prop] = undefined;
+                        break;
                     }
                 }
             }
@@ -339,6 +343,69 @@ function _remove_dom_prop(dom, props, prop) {
     }
     dom.removeAttribute(prop);
 }
+function _get_props_diff(a, b) {
+    const _to_remove = {};
+    const _to_apply = {};
+    for (const key in a) {
+        if (!b.hasOwnProperty(key)) {
+            _to_remove[key] = a[key];
+        }
+    }
+    for (const key in b) {
+        if (b[key] == null) {
+            _to_remove[key] = b[key];
+        }
+        else {
+            if (b[key] === a[key])
+                continue;
+            _to_apply[key] = b[key];
+        }
+    }
+    return {
+        apply: _to_apply,
+        remove: _to_remove,
+    };
+}
+// function _diff_html_props<T extends HTMLTags | HTMLSVGTags>(
+//   dom: AnyElement<T>,
+//   a: AnyProps<T>,
+//   b: AnyProps<T>
+// ) {
+//   for (const prop of Object.keys(a)) {
+//     if (prop.startsWith("on")) {
+//       _remove_html_prop(dom, a, prop);
+//       if (prop in b) _apply_html_prop(dom, b, prop);
+//     } else if (!(prop in b)) {
+//       _remove_html_prop(dom, a, prop);
+//     } else _apply_html_prop(dom, b, prop);
+//   }
+// }
+function _clear_events(dom, props) {
+    for (const prop of Object.keys(props)) {
+        if (prop.startsWith("on")) {
+            if (typeof props[prop] !== "function")
+                continue;
+            const ev_name = prop.slice(2);
+            dom.removeEventListener(ev_name, props[prop]);
+            delete props[prop];
+        }
+    }
+}
+function _apply_props(dom, props) {
+    for (const prop of Object.keys(props)) {
+        _apply_html_prop(dom, props, prop);
+    }
+}
+function _clear_props(dom, props) {
+    for (const prop of Object.keys(props)) {
+        _remove_html_prop(dom, props, prop);
+    }
+}
+function _remove_style(dom, styles) {
+    for (const style of Object.keys(styles)) {
+        dom.style[style] = "";
+    }
+}
 class TagNode extends Node {
     static is(t) {
         return t instanceof TagNode;
@@ -350,7 +417,7 @@ class TagNode extends Node {
     key = undefined;
     index_length = 0;
     constructor(tag, props, children) {
-        super(0 /* NodeType.Tag */);
+        super(NodeType.Tag);
         this.tag = tag;
         this._props = props;
         if (this._props && "key" in this._props) {
@@ -359,51 +426,26 @@ class TagNode extends Node {
         this._children = children;
         this.needs_update = true;
     }
-    _apply_dom_props() {
-        if (!this._props || !this._dom)
-            return;
-        for (const prop in this._props) {
-            _apply_dom_prop(this._dom, this._props, prop);
-        }
-    }
     _diff_dom_props(nprops) {
-        if (!this._props) {
-            this._props = nprops;
-            this._apply_dom_props();
-            return;
-        }
-        if (this._dom)
-            for (const prop in this._props) {
-                if (prop.startsWith("on")) {
-                    _remove_dom_prop(this._dom, this._props, prop);
-                    if (prop in nprops)
-                        _apply_dom_prop(this._dom, nprops, prop);
-                }
-                else if (!(prop in nprops)) {
-                    _remove_dom_prop(this._dom, this._props, prop);
+        if (this._dom) {
+            if (this._props) {
+                if (this._props.style) {
+                    _remove_style(this._dom, this._props.style);
+                    delete this._props.style;
                 }
-                else
-                    _apply_dom_prop(this._dom, nprops, prop);
-            }
-        this._props = nprops;
-    }
-    _clear_dom_props() {
-        if (this._props && this._dom)
-            for (const prop in this._props) {
-                _remove_dom_prop(this._dom, this._props, prop);
+                _clear_events(this._dom, this._props);
+                const diff = _get_props_diff(this._props, nprops);
+                _clear_props(this._dom, diff.remove);
+                _apply_props(this._dom, diff.apply);
+                this._props = nprops;
             }
-    }
-    _clear_dom_events() {
-        if (this._props && this._dom)
-            for (const prop in this._props) {
-                const v = Reflect.get(this._props, prop);
-                if (!v)
-                    continue;
-                if (prop.startsWith("on") && typeof v === "function") {
-                    const ev_name = prop.slice(2);
-                    this._dom.removeEventListener(ev_name, Reflect.get(this._props, prop));
-                }
+            else {
+                this._props = nprops;
+                _apply_props(this._dom, this._props);
+                return;
             }
+        }
+        this._props = nprops;
     }
     get dom() {
         return this._dom;
@@ -423,12 +465,16 @@ class TagNode extends Node {
         if (this._deleted)
             throw new Error("Attempt to create a deleted node");
         if (this._dom) {
-            this._apply_dom_props();
-            this.needs_update = true;
-            return true;
+            if (this._props) {
+                _apply_props(this._dom, this._props);
+                this.needs_update = true;
+                return true;
+            }
+            return false;
         }
-        this._dom = (SVG_TAGS.has(this.tag) ? _c_s(this.tag) : _c_el(this.tag));
-        this._apply_dom_props();
+        this._dom = _create_html_tag(this.tag);
+        if (this._props)
+            _apply_props(this._dom, this._props);
         this.needs_update = false;
         return true;
     }
@@ -436,7 +482,7 @@ class TagNode extends Node {
         if (this._deleted)
             return;
         if (this._children?.length) {
-            queueNodesDeletion(this._children);
+            UpdateQueue.queueNodesDeletion(this._children);
             delete this._children;
         }
     }
@@ -446,7 +492,8 @@ class TagNode extends Node {
             return;
         }
         this.needs_update = true;
-        this._clear_dom_events();
+        if (this._props)
+            _clear_events(this._dom, this._props);
         this._dom.remove();
         delete this._dom;
     }
@@ -464,10 +511,20 @@ class TagNode extends Node {
         this.key = t.props?.key ?? t.key;
         if (this.tag === t.tag) {
             // Tag is the same
-            if (t.props)
-                this._diff_dom_props(t.props);
-            else if (this._props)
-                this._clear_dom_props();
+            if (this._dom) {
+                if (this._props) {
+                    if (t.props)
+                        this._diff_dom_props(t.props);
+                    else
+                        _clear_props(this._dom, this._props);
+                }
+                else if (t.props) {
+                    this._props = t.props;
+                    _apply_props(this._dom, this._props);
+                }
+            }
+            else if (t.props)
+                this._props = t.props;
         }
         else {
             // Tag has changed
@@ -500,7 +557,7 @@ class ParentNode extends Node {
     _children = undefined;
     child_length = 0;
     constructor(root, children) {
-        super(2 /* NodeType.Parent */);
+        super(NodeType.Parent);
         this.dom = root;
         this._children = children;
     }
@@ -515,7 +572,7 @@ class ParentNode extends Node {
     clearChildren() {
         this.child_length = 0;
         if (this._children?.length) {
-            queueNodesDeletion(this._children);
+            UpdateQueue.queueNodesDeletion(this._children);
             delete this._children;
         }
     }
@@ -542,6 +599,20 @@ class ParentNode extends Node {
         return this.needs_update;
     }
 }
+function _create_template(t) {
+    try {
+        return t();
+    }
+    catch (error) {
+        throw new Error(`Template create error: ${error}`);
+    }
+}
+function _get_node_from_future(t) {
+    const n = _create_template(t);
+    if (_is_fn(n))
+        return _get_node_from_future(n);
+    return n;
+}
 class ComponentNode extends Node {
     static is(t) {
         return t instanceof ComponentNode;
@@ -551,7 +622,7 @@ class ComponentNode extends Node {
     _children = undefined;
     child_length = 0;
     constructor(template) {
-        super(3 /* NodeType.Component */);
+        super(NodeType.Component);
         this._template = template;
         getInternals(this._template).switch(this);
         this.needs_update = true;
@@ -563,7 +634,7 @@ class ComponentNode extends Node {
             throw new Error("Template has been deleted");
         nextInternalTick(this._template);
         try {
-            const child = create_template(this._template.render.bind(this._template));
+            const child = _create_template(this._template.render.bind(this._template));
             if (child == null) {
                 if (this.hasChildren) {
                     this.clearChildren();
@@ -603,7 +674,7 @@ class ComponentNode extends Node {
             return;
         this.child_length = 0;
         if (this._children?.length) {
-            queueNodesDeletion(this._children);
+            UpdateQueue.queueNodesDeletion(this._children);
             delete this._children;
         }
     }
@@ -619,10 +690,8 @@ class ComponentNode extends Node {
             if (t.hasChildren) {
                 this.needs_update = diffChildren(this._children, t.children);
             }
-            else {
-                this.needs_update = true;
-                this.clearChildren();
-            }
+            this.needs_update = true;
+            this.clearChildren();
         }
         else if (t.hasChildren)
             this._children = t.children;
@@ -686,7 +755,7 @@ class ComponentInternals {
                 : s;
         Promise.resolve().then(() => {
             if (this.#_n)
-                ComponentUpdateQueue.queueNodeUpdate(this.#_n);
+                UpdateQueue.queueNodeUpdate(this.#_n);
         });
     }
     addEffect(e) {
@@ -1202,4 +1271,15 @@ function createRoot(root) {
 function createContext() {
     return new Context();
 }
-export { Component, createContext, createRoot, Node, Portal, Stores, TagNode, };
+export { Component, createContext, createRoot, 
+// Element,
+// ElementRef,
+// HTMLProps,
+// HTMLTags,
+// HTMLSVGTags,
+// SVGProps,
+Node, Portal, 
+// StateHandler,
+Stores, 
+// Styles,
+TagNode, };

package/dist/tags.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, SVGProps, TagNode, ValidNodeChild } from "./node";
+import { TagNode, ValidNodeChild } from "./node";
 export declare function _is_valid_node(n: any): n is ValidNodeChild;
 /**
  * h1 - Creates h1 Tag node

package/dist/tags.js

@@ -1,4 +1,4 @@
-import { Component, Node, TagNode, } from "./node";
+import { Component, Node, TagNode } from "./node";
 import { _is_string } from "./utils";
 export function _is_valid_node(n) {
     return (n == null || _is_string(n) || n instanceof Node || n instanceof Component);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "yandel",
   "description": "A reactive lightweight TS frontend framework",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "scripts": {
     "build": "tsc",

package/types/index.d.ts

@@ -0,0 +1,225 @@
+type HTMLExcludedProperties =
+  | `aria${string}`
+  | "tagName"
+  | "shadowRoot"
+  | "slot"
+  | "classList"
+  | "style"
+  | "attributes"
+  | "attributeStyleMap"
+  | "ATTRIBUTE_NODE"
+  | "CDATA_SECTION_NODE"
+  | "COMMENT_NODE"
+  | "childElementCount"
+  | "childNodes"
+  | "children"
+  | "isConnected"
+  | "ownerDocument"
+  | "lastChild"
+  | "lastElement"
+  | "nextElementSibling"
+  | "nextSibling"
+  | "previousElementSibling"
+  | "previousSibling"
+  | "parentElement"
+  | "parent"
+  | "outerContent"
+  | "firstChild"
+  | "firstElementChild"
+  | "lastChild"
+  | "lastElementChild"
+  | "innerHTML"
+  | "outerHTML"
+  | "innerContent"
+  | "textContent"
+  | `DOCUMENT_${string}`
+  | "NOTATION_NODE"
+  | "PROCESSING_INSTRUCTION_NODE"
+  | "CONTENT_NODE"
+  | "ELEMENT_NODE"
+  | "TEXT_NODE"
+  | `ENTITY_${string}`;
+type AriaWidgetProperties =
+  | "aria-autocomplete"
+  | "aria-checked"
+  | "aria-disabled"
+  | "aria-errormessage"
+  | "aria-expanded"
+  | "aria-haspopup"
+  | "aria-hidden"
+  | "aria-invalid"
+  | "aria-label"
+  | "aria-level"
+  | "aria-modal"
+  | "aria-multiline"
+  | "aria-multiselectable"
+  | "aria-orientation"
+  | "aria-placeholder"
+  | "aria-pressed"
+  | "aria-readonly"
+  | "aria-required"
+  | "aria-selected"
+  | "aria-sort"
+  | "aria-valuemax"
+  | "aria-valuemin"
+  | "aria-valuenow"
+  | "aria-valuetext";
+type AriaLiveRegionProperties =
+  | "aria-busy"
+  | "aria-live"
+  | "aria-relevant"
+  | "aria-atomic";
+type AriaDragAndDropProperties = "aria-dropeffect" | "aria-grabbed";
+type AriaRelatonshipProperties =
+  | "aria-activedescendant"
+  | "aria-colcount"
+  | "aria-colindex"
+  | "aria-colspan"
+  | "aria-controls"
+  | "aria-describedby"
+  | "aria-description"
+  | "aria-details"
+  | "aria-errormessage"
+  | "aria-flowto"
+  | "aria-labelledby"
+  | "aria-owns"
+  | "aria-posinset"
+  | "aria-rowcount"
+  | "aria-rowindex"
+  | "aria-rowspan"
+  | "aria-setsize";
+type AriaGlobalProperties =
+  | "aria-atomic"
+  | "aria-busy"
+  | "aria-controls"
+  | "aria-current"
+  | "aria-describedby"
+  | "aria-description"
+  | "aria-details"
+  | "aria-disabled"
+  | "aria-dropeffect"
+  | "aria-errormessage"
+  | "aria-flowto"
+  | "aria-grabbed"
+  | "aria-haspopup"
+  | "aria-hidden"
+  | "aria-invalid"
+  | "aria-keyshortcuts"
+  | "aria-label"
+  | "aria-labelledby"
+  | "aria-live"
+  | "aria-owns"
+  | "aria-relevant"
+  | "aria-roledescription";
+type AriaProps =
+  | AriaWidgetProperties
+  | AriaDragAndDropProperties
+  | AriaLiveRegionProperties
+  | AriaRelatonshipProperties
+  | AriaGlobalProperties;
+type AriaBoolean = "true" | "false";
+type AriaValue = Exclude<string, AriaBoolean>;
+type AriaValueMap = Partial<Record<AriaProps, AriaBoolean | AriaValue>>;
+type KeyedObject = Record<string | symbol | number, any>;
+type HTMLTags = keyof HTMLElementTagNameMap;
+type HTMLSVGTags = keyof SVGElementTagNameMap;
+type YElement<K extends HTMLTags = HTMLTags> = HTMLElementTagNameMap[K];
+type YSVGElement<K extends HTMLSVGTags = HTMLSVGTags> = SVGElementTagNameMap[K];
+
+type ExcludeFunctions<T> = {
+  [K in keyof T as T[K] extends Function ? never : K]: T[K];
+};
+type Styles = Partial<CSSStyleDeclaration>;
+interface ElementOverridedProperties extends AriaValueMap {
+  style?: Styles;
+}
+type AnyElement<T extends HTMLTags | HTMLSVGTags = HTMLTags> =
+  T extends HTMLTags
+    ? YElement<T>
+    : T extends HTMLSVGTags
+    ? YSVGElement<T>
+    : never;
+type AnyProps<T extends HTMLTags | HTMLSVGTags = HTMLTags> = T extends HTMLTags
+  ? HTMLProps<T>
+  : T extends HTMLSVGTags
+  ? SVGProps<T>
+  : never;
+interface Stores<T> {
+  get stores(): T;
+}
+type ElementRef<T extends HTMLTags | HTMLSVGTags = HTMLTags> = Stores<
+  | (T extends HTMLTags
+      ? HTMLElementTagNameMap[T]
+      : T extends HTMLSVGTags
+      ? SVGElementTagNameMap[T]
+      : never)
+  | undefined
+>;
+interface ElementProps<T extends HTMLTags | HTMLSVGTags = HTMLTags> {
+  ref?: ElementRef<T>;
+  key?: string | number | symbol;
+}
+type ExcludeProperties<T> = {
+  [K in keyof T as K extends HTMLExcludedProperties ? never : K]: T[K];
+};
+type HTMLProps<T extends HTMLTags> = Partial<
+  ExcludeProperties<ExcludeFunctions<YElement<T>>>
+> &
+  ElementProps<T> &
+  ElementOverridedProperties;
+
+type SVGAttributeValue = string | number;
+
+type NormalizeSVGProp<T> = T extends SVGAnimatedLength
+  ? SVGAttributeValue
+  : T extends SVGAnimatedAngle
+  ? SVGAttributeValue
+  : T extends SVGAnimatedBoolean
+  ? SVGAttributeValue
+  : T extends SVGAnimatedEnumeration
+  ? SVGAttributeValue
+  : T extends SVGAnimatedInteger
+  ? SVGAttributeValue
+  : T extends SVGAnimatedNumber
+  ? SVGAttributeValue
+  : T extends SVGAnimatedPreserveAspectRatio
+  ? SVGAttributeValue
+  : T extends SVGAnimatedRect
+  ? SVGAttributeValue
+  : T extends SVGAnimatedString
+  ? SVGAttributeValue
+  : T extends SVGAnimatedTransformList
+  ? SVGAttributeValue
+  : T extends SVGPointList
+  ? SVGAttributeValue
+  : T;
+
+type SVGRawProps<T extends HTMLSVGTags> = ExcludeProperties<
+  ExcludeFunctions<SVGElementTagNameMap[T]>
+>;
+interface SVGOverridedProperties {
+  fill?: string;
+  "fill-opacity"?: string;
+  stroke?: string;
+  "stroke-width"?: SVGAttributeValue;
+  "stroke-linecap"?: "butt" | "round" | "square";
+  "stroke-linejoin"?: "miter" | "round" | "bevel";
+  d?: string;
+  "stroke-dasharray"?: SVGAttributeValue;
+}
+type SVGProps<T extends HTMLSVGTags> = Partial<{
+  [K in keyof SVGRawProps<T>]: NormalizeSVGProp<SVGRawProps<T>[K]>;
+}> &
+  ElementProps<T> &
+  ElementOverridedProperties &
+  SVGOverridedProperties;
+type StateHandler<S extends KeyedObject | undefined = undefined> =
+  | S
+  | ((l: S) => S);
+
+// declare abstract class Component<S extends KeyedObject | void = void> {
+//   protected get state(): S;
+//   protected setState(h: StateHandler<S extends void ? undefined : S>): void;
+//   public render(): ValidTemplateReturn;
+//   public delete(): void;
+// }