yandel 1.1.2 → 1.2.0

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/node.d.ts

@@ -93,10 +93,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 +102,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;

package/dist/node.js

@@ -76,7 +76,7 @@ class Stores {
         this.#_stores = s;
     }
 }
-class ComponentUpdateQueue {
+class UpdateQueue {
     static _update_scheduled = false;
     static _queue = new Set();
     static processNodeQueue() {
@@ -118,16 +118,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) {
@@ -225,21 +223,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 +274,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 +282,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 +320,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 +336,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;
@@ -359,51 +419,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 +458,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 +475,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 +485,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 +504,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
@@ -515,7 +565,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 +592,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;
@@ -563,7 +627,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 +667,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 +683,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 +748,7 @@ class ComponentInternals {
                 : s;
         Promise.resolve().then(() => {
             if (this.#_n)
-                ComponentUpdateQueue.queueNodeUpdate(this.#_n);
+                UpdateQueue.queueNodeUpdate(this.#_n);
         });
     }
     addEffect(e) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yandel",
   "description": "A reactive lightweight TS frontend framework",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [