nesquick 1.1.0 → 1.2.0

package/README.md

@@ -1,12 +1,12 @@
 ### Motivation
-I like react, but it always bugged me how you need to create a full fake DOM that is going to be compared to a virtual DOM to finally render the updates in the browser. Yes, it will only update the real DOM with the new changes, but the process of creating a full fake DOM and comparing it each time something is updated is incredibly resource wasting. I always thought in a way to link states to HTML elementos directly, so no more virtual DOM is needed, and like so, **N**imble **E**element **S**uper **Quick** (`nesquick`) was born. At first it required for you to define the *subscribers*, so if you forgot to create a subscriber, no state will be linked to an HTML property. Now, with the magic of Typescript, you can link states to HTML elements without taking care of the subscribers, which makes it easier. For example, this is `nesquick`:
+I like react, but it always bugged me how you need to create a full fake DOM that is going to be compared to a virtual DOM to finally render the updates in the browser. Yes, it will only update the real DOM with the new changes, but the process of creating a full fake DOM and comparing it each time something is updated is incredibly resource wasting. I always thought in a way to link states to HTML elementos directly, so no more virtual DOM is needed, and like so, **N**imble **E**elements **S**uper **Quick** (`nesquick`) was born. At first it required for you to define the *subscribers*, so if you forgot to create a subscriber, no state will be linked to an HTML property. Now, with the magic of Typescript, you can link states to HTML elements without taking care of the subscribers, which makes it easier. For example, this is `nesquick`:
 ```ts
 import { useState } from "nesquick";
 
 function MyComp() {
     const [ getNumber, setNumber ] = useState(0);
     return <div>
-        <button onClick={() => setNumber(Date.now())}>Update number</button>
+        <button onClick={() => setNumber(Math.random())}>Update number</button>
         <div>Number: {getNumber()}</div>
     </div>;
 }

package/lib/NesquickComponent.js

@@ -215,9 +215,17 @@ class NesquickComponent {
                     this._renderChild(document, parent, this._pushChild(), child);
                 }
                 else if (typeof child === "function") {
-                    const ch = this._pushChild();
-                    (0, State_1.useRender)(child, children => {
-                        this._renderChild(document, parent, ch, children);
+                    let ch = null;
+                    (0, State_1.useRender)(child, (children, lastReaction) => {
+                        if (lastReaction && ch == null && Array.isArray(children)) {
+                            this._renderChildren(document, parent, children);
+                        }
+                        else {
+                            if (ch == null) {
+                                ch = this._pushChild();
+                            }
+                            this._renderChild(document, parent, ch, children);
+                        }
                     });
                 }
                 else {

package/lib/types/State.d.ts

@@ -1,7 +1,7 @@
 export type Getter<T> = () => T;
 export type Setter<T> = (value: T) => void;
-export type GetterSetter<T> = (cb: (value: T) => T) => void;
-export type State<T> = [get: Getter<T>, set: Setter<T>, getSet: GetterSetter<T>];
+export type Updater<T> = (cb: (value: T) => T) => void;
+export type State<T> = [get: Getter<T>, set: Setter<T>, update: Updater<T>];
 type Subscription<T> = {
     cb: () => T;
     iteration: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nesquick",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types",
   "main": "./lib",