yandel 1.1.0 → 1.1.2

package/README.md

@@ -124,8 +124,8 @@ Allows you to mount elements over a different parent, remaining in the same tree
 import { Portal, div, span, h1 } from "yandel";
 
 
-Portal(document.body, div());
 // Renders a div inside body
+Portal(document.body, div());
 
 Portal(document.querySelector("#someid")!, div(), span(), h1(), ...);
 
@@ -136,7 +136,7 @@ Example:
 ```ts
 import { Portal, div, span, ValidTemplateReturn } from "yandel";
 
-function Notification(): ValidTemplateReturn {
+function Notifications(): ValidTemplateReturn {
   return div(
     Portal(document.body, span("Notification 1"), span("Notification 2")),
     button("Remove notifications")
@@ -149,10 +149,18 @@ function Notification(): ValidTemplateReturn {
 
 ### Templates
 
-Templates are functions that return nodes. They help you customize and modularize:
+Templates are functions that return `ValidNodeChild`. They help you customize and modularize:
 
 ```ts
-import { div, p, strong, span, button, ValidTemplateReturn } from "yandel";
+import {
+  aside,
+  div,
+  p,
+  strong,
+  span,
+  button,
+  ValidTemplateReturn,
+} from "yandel";
 
 function TotalPriceButton(
   qTy: number,
@@ -165,29 +173,89 @@ function TotalPriceButton(
   );
 }
 
-TotalPriceButton(4, 2, () => buy());
+aside(TotalPriceButton(4, 2, () => buy()));
 /**
+ * <aside>
  *  <div>
  *      <p><strong>Total is:</strong>8 $</>
  *      <button>Buy</button>
  *  </div>
+ * </aside>
  */
 ```
 
+Templates can return an array, when no parent is needed:
+
+```ts
+function NotificationList(notifications: string[]): ValidTemplateReturn {
+  return notifications.map((notification) => div(icon(), span(notification)));
+}
+
+function AppNotifications() {
+  const notifications: string[] = [...];
+  return div(...NotificationList(notifications));
+}
+```
+
+#### 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
+
+```ts
+import { div, main, nav } from "yandel"
+
+function MyGridOfPhotos () {
+  return div(...);
+}
+
+function App () {
+  return main(
+    nav(...),
+    MyGridOfPhotos // This function will be executed at render time
+  )
+}
+
+```
+
+This might be necessary in some kind of situations, like explained in the [`Contexts`](#contexts) section.
+
+In this example:
+
+```ts
+import { button, div, p } from "yandel";
+
+function BuyButton(onclick: EventListener) {
+  return button(
+    {
+      onclick,
+      className: "button",
+    },
+    "Buy"
+  );
+}
+
+function TotalPriceButton(price: number) {
+  const handleBuy = () => {
+    ...
+  };
+  return div(p(`Total is: ${price}`), BuyButton(handleBuy));
+}
+```
+
+The tree will be completely generated when you call `TotalPriceButton`.
+
+```ts
+return div(p(`Total is: ${price}`), () => BuyButton(handleBuy));
+```
+
+Now, `BuyButton` will be created at render time.
+
 ### Components
 
-Components add the reactivity to the game. They are defined extending the `Context` class and must provide a `render` method (a template):
+Components add the reactivity to the game. They are defined extending the `Component` class and must provide a `render` method (a template):
 
 ```ts
-import {
-  Component,
-  div,
-  p,
-  strong,
-  span,
-  button,
-  ValidTemplateReturn,
-} from "yandel";
+import { Component, div, p, strong, button, ValidTemplateReturn } from "yandel";
 
 class TotalPriceButton extends Component {
   private readonly total: number;
@@ -199,7 +267,7 @@ class TotalPriceButton extends Component {
   }
   public render(): ValidTemplateReturn {
     return div(
-      p(strong("Total is:"), span(`${this.total} $`)),
+      p(strong("Total is:"), ` ${this.total} $`),
       button({ onclick: this.onClick }, "Buy")
     );
   }
@@ -223,21 +291,13 @@ section(new TotalPriceButton(4, 2, buyFn));
 Components can return an array:
 
 ```ts
-class TotalPriceButton extends Component {
-  private readonly total: number;
-  private readonly onClick: VoidFunction;
-  constructor(qTy: number, uPrice: number, onClick: VoidFunction) {
-    super();
-    this.total = qTy * uPrice;
-    this.onClick = onClick;
-  }
-  public render(): ValidTemplateReturn {
-    return [
-      p(strong("Total is:"), span(`${this.total} $`)),
-      button({ onclick: this.onClick }, "Buy"),
-    ];
-  }
+public render(): ValidTemplateReturn {
+  return [
+    p(strong("Total is:"), span(`${this.total} $`)),
+    button({ onclick: this.onClick }, "Buy"),
+  ];
 }
+
 ```
 
 #### Reactivity
@@ -245,15 +305,7 @@ class TotalPriceButton extends Component {
 `State` object type is defined using the `Component's` generic argument. To set the `initial state`, `defineState` must be called in the constructor.
 
 ```ts
-import {
-  Component,
-  div,
-  p,
-  strong,
-  span,
-  button,
-  ValidTemplateReturn,
-} from "yandel";
+import { Component, div, p, strong, button, ValidTemplateReturn } from "yandel";
 
 class TotalPriceButton extends Component<{
   loading: boolean;
@@ -279,7 +331,7 @@ class TotalPriceButton extends Component<{
   }
   public render(): ValidTemplateReturn {
     return div(
-      p(strong("Total is:"), span(`${this.total} $`)),
+      p(strong("Total is:"), ` ${this.total} $`),
       button(
         {
           onclick: this.handleClick.bind(this), // Don't forget to bind if needed
@@ -323,7 +375,7 @@ this.state = { loading: false }; // state is a read-only property!
 
 ---
 
-`Effects` are callbacks that are executed when the component is mounted or unmounted. They are created with `this.effect` and should be called inside the `render` method. Components can have more than one effect/cleanup and they're executed in the order they are defined (FIFO).
+`Effects` are callbacks that are executed when the component is attached or updated. They are created providing a callback to `this.effect` and should be called inside the `render` method. Components can have more than one effect/cleanup and they're executed in the order they are defined (FIFO).
 
 ```ts
 import { Component, p, ValidTemplateReturn } from "yandel";
@@ -414,8 +466,8 @@ public render(): ValidTemplateReturn {
 
 ```
 
-In this example, if the component is removed, if not handled the timeout will run and an error will be thrown (`Error: Component is deleted`).
-Handle timeouts, deletions and more in the cleanups to prevent weird behavior:
+In this example, if the component is removed or updated by other reasons, the timeout will still run and an error will be thrown (`Error: Component is deleted`).
+Handle timeouts and more in the cleanups to prevent weird behavior:
 
 ```ts
 
@@ -437,7 +489,7 @@ public render(): ValidTemplateReturn {
 
 ### Contexts
 
-Sharing data between components is easier with `contexts`. Define your context using `createContext`:
+Sharing data is easier with `contexts`. Define your context using `createContext`:
 
 ```ts
 import { createContext } from "yandel";
@@ -453,7 +505,7 @@ Then, inside of your `render` function, call `provide` to hydrate your context.
 - The component's instance.
 - The value to store in the context.
 
-Contexts that have not been provided are inaccesible. **A context can't be provided by more than one component**.
+Contexts that have not been provided are inaccesible. **A context can't be provided by more than one component at the same time**.
 
 ```ts
 
@@ -468,22 +520,10 @@ class UserProvider extends Component<{user: User | null}> {
 }
 ```
 
-Once it has been provided, it's accesible everywhere, even for non descendant nodes (if so, you must be responsible of the context life-time, and when/where is or not aviable).
-**Note**: when a component provider changes (for example, a setState update), the context value will be again provided (re-hydrated). Don't forget that nodes that are not a child inside the component's tree won't be updated:
-
-```ts
-public render(): ValidTemplateReturn {
-  return [
-    new UserProvider(),
-    UserConsumer()
-  ];
-}
-// UserProvider provides the context.
-// As it is before the consumer, the consumer will be able to consume it (if the consumer is called before the provider, an error would be thrown)
-// When UserProvider changes (state update) its children will update. Therefore UserConsumer won't be updated.
-```
+Once it has been provided, it's accesible everywhere, even for those that are not children (if so, you must be responsible of the context life-time, and when/where is or not aviable).
+**Note**: when a component provider changes (for example, a setState update), the context value will be again provided (re-hydrated) by the render function. Don't forget that nodes that are not a child of the component's tree won't be updated:
 
-To consume a context, call `consume`. You can call this from a Component, a template, or wherever you want.
+To consume a context, call `consume`;
 
 ```ts
 function UserConsumer() {
@@ -498,7 +538,7 @@ class UserConsumer extends Component {
   }
 }
 
-function notAnUiFunction () {
+function nonUiFunction () {
    const { user } = userContext.consume();
    ...;
 }
@@ -519,7 +559,6 @@ function UserConsumerWithError() {
 
 ```ts
 function UserConsumerWithError() {
-  // Not checking if context is accesible
   const { user } = userContext.consume(); // Error: cannot destructure property as it's undefined!!
   return ...;
 }
@@ -527,19 +566,21 @@ function UserConsumerWithError() {
 
 #### Future nodes
 
-In this previous example:
+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:
 
 ```ts
-public render(): ValidTemplateReturn {
-  return [
-    new UserProvider(),
-    UserConsumer()
-  ];
+function UserConsumer() {
+  const { user } = userContext.consume();
+  return ...;
+}
+class App extends Component {
+  public render(): ValidTemplateReturn {
+    return [new UserProvider(), UserConsumer()];
+  }
 }
 ```
 
-`UserConsumer` won't be able to access the `UserContext`. `UserConsumer` is called before the `UserProvider` `render` method.
-In this situations, you can use `Future Nodes`. They are functions that are valid as child, and will be created at render time.
+`UserConsumer` will be created before the `UserProvider` is rendered and provides, leading to an undefined context.
 
 ```ts
 public render(): ValidTemplateReturn {
@@ -550,7 +591,7 @@ public render(): ValidTemplateReturn {
 }
 ```
 
-Now, `UserConsumer` will be able to consume.
+Now, `UserConsumer` will be able to consume. Don't forget that nodes outside the provider component
 
 ### Ref
 

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Component, createContext, createRoot, EffectHandler, Element, ElementRef, HTMLProps, HTMLTags, Portal, StateHandler, Stores, Styles, ValidNodeChild, ValidTemplateReturn, } from "./node";
+export { Component, createContext, createRoot, EffectHandler, Element, ElementRef, HTMLProps, HTMLTags, Portal, StateHandler, Stores, Styles, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, } from "./node";
 export * from "./tags";

package/dist/node.d.ts

@@ -17,7 +17,8 @@ interface SwitchableNode<T extends Node> {
     switch(t: T): boolean;
 }
 type FutureNode = () => ValidNodeChild;
-type ValidNodeChild = Node | Component | Component<KeyedObject> | FutureNode | null | string;
+type ValidNode = Node | Component | Component<KeyedObject> | FutureNode;
+type ValidNodeChild = ValidNode | null | string;
 type ValidTemplateReturn = ValidNodeChild | ValidNodeChild[];
 type EffectHandler = (() => void) | (() => () => void);
 type ExcludeFunctions<T> = {
@@ -140,4 +141,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, ValidNodeChild, ValidTemplateReturn, };
+export { Component, createContext, createRoot, EffectHandler, Element, ElementRef, HTMLProps, HTMLTags, HTMLSVGTags, SVGProps, Node, Portal, StateHandler, Stores, Styles, TagNode, ValidNode, ValidNodeChild, ValidTemplateReturn, FutureNode, };

package/dist/node.js

@@ -1,4 +1,4 @@
-import { _is_fn, _is_string, asDeletable, DELETE_KEY, DELETED_KEY, InmutBool, setDeletable, } from "./utils";
+import { _is_fn, _is_string, asDeletable, InmutBool, setDeletable, } from "./utils";
 const SVG_TAGS = new Set([
     "a",
     "animate",
@@ -122,8 +122,10 @@ class ComponentUpdateQueue {
 function queueNodesDeletion(ns) {
     queueMicrotask(() => {
         for (const c of ns) {
-            if (c && !_is_string(c) && !_is_fn(c) && !Component.is(c))
+            if (c instanceof Node)
                 c.delete();
+            else
+                console.warn("Unknown child");
         }
     });
 }
@@ -223,14 +225,16 @@ class ContentNode extends Node {
         super.delete();
     }
 }
-function _get_node_from_future(t) {
-    let n;
+function create_template(t) {
     try {
-        n = t();
+        return t();
     }
     catch (error) {
-        throw new Error("Future 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;
@@ -271,7 +275,6 @@ function _apply_dom_prop(dom, props, prop) {
             return;
         }
     }
-    // const pn = prop.toLowerCase();
     if (typeof v === "boolean") {
         if (v)
             dom.setAttribute(prop, "");
@@ -300,7 +303,6 @@ function _remove_dom_prop(dom, props, prop) {
     if (prop === "style" && typeof v === "object") {
         try {
             Object.entries(v).forEach(([cssProp]) => {
-                // Solo aplicar si la propiedad existe en CSSStyleDeclaration
                 if (cssProp in dom.style) {
                     dom.style[cssProp] = "";
                 }
@@ -557,22 +559,19 @@ class ComponentNode extends Node {
     create() {
         if (this._deleted)
             throw new Error("Attempt to create a deleted node");
-        if (this._template._deleted)
+        if (asDeletable(this._template).deleted)
             throw new Error("Template has been deleted");
         nextInternalTick(this._template);
-        let child;
         try {
-            try {
-                child = this._template.render();
-            }
-            catch (error) {
-                console.warn("Template create error:", error);
+            const child = create_template(this._template.render.bind(this._template));
+            if (child == null) {
+                if (this.hasChildren) {
+                    this.clearChildren();
+                }
                 return;
             }
-            if (child == null)
-                return;
             const nc = Array.isArray(child)
-                ? child
+                ? [...child]
                 : typeof child === "string"
                     ? [new ContentNode(child)]
                     : [child];
@@ -612,7 +611,7 @@ class ComponentNode extends Node {
         if (this._deleted)
             return;
         this.clearChildren();
-        this._template._delete();
+        asDeletable(this._template).delete();
         super.delete();
     }
     switch(t) {
@@ -632,7 +631,7 @@ class ComponentNode extends Node {
         return this.needs_update;
     }
     switchTemplate(t) {
-        this._template._delete();
+        asDeletable(this._template).delete();
         this._template = t;
         getInternals(this._template).switch(this);
         this.needs_update = true;
@@ -707,7 +706,7 @@ class ComponentInternals {
         this._state = undefined;
         this._state_defined = false;
         for (const c of this.p) {
-            asDeletable(c)[DELETE_KEY]();
+            asDeletable(c).delete();
         }
     }
     get deleted() {
@@ -752,11 +751,15 @@ function nextInternalTick(target) {
     }
 }
 class Component {
+    // public readonly id = Symbol();
     static is(t) {
         return t instanceof this;
     }
     constructor() {
-        let deleted = false;
+        setDeletable(this, () => {
+            nextInternalTick(this);
+            deleteInternals(this);
+        });
         Object.defineProperties(this, {
             [ComponentInternalKey]: {
                 value: new ComponentInternals(),
@@ -764,24 +767,6 @@ class Component {
                 writable: false,
                 configurable: true,
             },
-            _deleted: {
-                get: () => deleted,
-                set: (d) => {
-                    deleted = d;
-                },
-                configurable: false,
-                enumerable: false,
-            },
-            _delete: {
-                value: () => {
-                    nextInternalTick(this);
-                    deleteInternals(this);
-                    this._deleted = true;
-                },
-                writable: false,
-                configurable: false,
-                enumerable: false,
-            },
         });
     }
     get state() {
@@ -813,17 +798,17 @@ class Context {
         });
     }
     get ok() {
-        return asDeletable(this)[DELETED_KEY] === false && this.#_p !== undefined;
+        return asDeletable(this).deleted === false && this.#_p !== undefined;
     }
     consume() {
-        if (asDeletable(this)[DELETED_KEY] && !this.#_p) {
+        if (asDeletable(this).deleted && !this.#_p) {
             console.warn("You are consuming a deleted context");
             return undefined;
         }
         return this.#_s.stores;
     }
     provide(c, v) {
-        asDeletable(this)[DELETED_KEY] = false;
+        asDeletable(this).deleted = false;
         if (this.#_p) {
             getInternals(this.#_p).p.delete(this);
             this.#_p = undefined;
@@ -891,7 +876,7 @@ function diffChildren(a, b) {
                 continue;
             }
             if (_is_string(ca) || _is_fn(ca)) {
-                console.warn("Diffing a Future node");
+                console.warn("Not a valid node to diff");
                 continue;
             }
             else if (Component.is(ca)) {
@@ -936,26 +921,32 @@ function diffChildren(a, b) {
                     }
                     else if (Component.is(node)) {
                         if (ComponentNode.is(ca)) {
+                            if (node === ca.template) {
+                                ca.needs_update = true;
+                                continue;
+                            }
                             ca.switchTemplate(node);
                         }
                         else {
                             ca.delete();
                             a[i] = new ComponentNode(node).setIndex_of(ri++);
-                            changed.set(true);
                         }
+                        changed.set(true);
                     }
-                    else {
-                        if (ca.$typeof !== node.$typeof) {
-                            ca.delete();
-                            a[i] = node.setIndex_of(ri++);
-                            changed.set(true);
-                        }
-                        else
-                            changed.set(diff(ca, node));
+                    else if (ca.$typeof !== node.$typeof) {
+                        ca.delete();
+                        a[i] = node.setIndex_of(ri++);
+                        changed.set(true);
                     }
+                    else
+                        changed.set(diff(ca, node));
                 }
                 else if (Component.is(cb)) {
                     if (ComponentNode.is(ca)) {
+                        if (cb === ca.template) {
+                            ca.needs_update = true;
+                            continue;
+                        }
                         ca.switchTemplate(cb);
                     }
                     else {
@@ -964,15 +955,13 @@ function diffChildren(a, b) {
                         changed.set(true);
                     }
                 }
-                else {
-                    if (ca.$typeof !== cb.$typeof) {
-                        ca.delete();
-                        a[i] = cb.setIndex_of(ri++);
-                        changed.set(true);
-                    }
-                    else
-                        changed.set(diff(ca, cb));
+                else if (ca.$typeof !== cb.$typeof) {
+                    ca.delete();
+                    a[i] = cb.setIndex_of(ri++);
+                    changed.set(true);
                 }
+                else
+                    changed.set(diff(ca, cb));
             }
         }
     }

package/dist/tags.d.ts

@@ -317,7 +317,7 @@ export declare function hgroup(props: HTMLProps<"hgroup">, ...children: ValidNod
 /**
  * hr - Creates hr Tag node
  */
-export declare function hr(props: HTMLProps<"hr">): TagNode<"hr">;
+export declare function hr(props?: HTMLProps<"hr">): TagNode<"hr">;
 /**
  * html - Creates html Tag node
  */

package/dist/utils.d.ts

@@ -8,11 +8,10 @@ export declare class InmutBool {
 }
 export declare const DELETE_KEY: unique symbol;
 export declare const DELETED_KEY: unique symbol;
-interface Deletable {
-    [DELETE_KEY](): void;
-    get [DELETED_KEY](): boolean;
-    set [DELETED_KEY](v: boolean);
+interface ExposedDeletable {
+    deleted: boolean;
+    delete(): void;
 }
-export declare function asDeletable(t: object): Deletable;
+export declare function asDeletable(t: object): ExposedDeletable;
 export declare function setDeletable(t: object, deleter: VoidFunction): void;
 export {};

package/dist/utils.js

@@ -22,7 +22,28 @@ export class InmutBool {
 export const DELETE_KEY = Symbol("_d");
 export const DELETED_KEY = Symbol("_dd");
 export function asDeletable(t) {
-    return t;
+    return Object.defineProperties({}, {
+        delete: {
+            value: () => {
+                t[DELETE_KEY]();
+            },
+            writable: false,
+            enumerable: false,
+            configurable: false,
+        },
+        deleted: {
+            set: (v) => {
+                if (typeof v !== "boolean")
+                    return;
+                t[DELETED_KEY] = v;
+            },
+            get: () => {
+                return t[DELETED_KEY];
+            },
+            enumerable: false,
+            configurable: false,
+        },
+    });
 }
 export function setDeletable(t, deleter) {
     let _d = false;

package/package.json

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