nesquick 0.0.27 → 1.1.0

package/README.md

@@ -0,0 +1,19 @@
+### 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`:
+```ts
+import { useState } from "nesquick";
+
+function MyComp() {
+    const [ getNumber, setNumber ] = useState(0);
+    return <div>
+        <button onClick={() => setNumber(Date.now())}>Update number</button>
+        <div>Number: {getNumber()}</div>
+    </div>;
+}
+```
+Pretty straightforward. States have getters and setters, and that's it. With this approach, no more virtual DOM is needed.
+
+### Documentation
+Just `npm install nesquick`.
+
+[WIP]

package/lib/NesquickComponent.js

@@ -161,7 +161,7 @@ class NesquickComponent {
     _renderStyle(element, style) {
         switch (typeof style) {
             case "function": {
-                (0, State_1.useRender)(style, (style, isState) => {
+                (0, State_1.useRender)(style, (style, lastReaction) => {
                     if (this._styleSubscriptions != null) {
                         this._styleSubscriptions.dispose();
                         this._styleSubscriptions = null;
@@ -169,16 +169,16 @@ class NesquickComponent {
                     switch (typeof style) {
                         case "object": {
                             if (style) {
-                                if (isState) {
+                                if (lastReaction) {
+                                    this._renderStyles(element, style);
+                                }
+                                else {
                                     element.removeAttribute("style");
                                     this._styleSubscriptions = new State_1.Subscriptions();
                                     State_1.subscriptions.set(this._styleSubscriptions);
                                     this._renderStyles(element, style);
                                     State_1.subscriptions.reset();
                                 }
-                                else {
-                                    this._renderStyles(element, style);
-                                }
                             }
                             break;
                         }

package/lib/State.js

@@ -4,6 +4,7 @@ exports.subscriptions = exports.Subscriptions = void 0;
 exports.useState = useState;
 exports.useEffect = useEffect;
 exports.useRender = useRender;
+exports.useMemo = useMemo;
 exports.useDispose = useDispose;
 let currentReactor = [];
 var reactor;
@@ -78,27 +79,70 @@ var subscriptions;
 })(subscriptions || (exports.subscriptions = subscriptions = {}));
 function useState(value) {
     const reactors = new Set();
-    const getValue = () => {
+    function getValue() {
         const reactor = currentReactor[currentReactor.length - 1];
         if (reactor) {
             reactors.add(reactor);
             reactor.states.set(reactors, reactor.iteration);
         }
         return value;
-    };
-    const setValue = (newValue) => {
-        value = newValue;
-        for (const reactor of reactors) {
-            renderReactor(reactor, reactor.effect);
+    }
+    ;
+    function setValue(newValue) {
+        if (value !== newValue) {
+            value = newValue;
+            for (const reactor of reactors) {
+                renderReactor(reactor, reactor.effect);
+            }
         }
-    };
-    return [getValue, setValue];
+    }
+    ;
+    return [getValue, setValue, cb => {
+            setValue(cb(value));
+        }];
 }
 function useEffect(cb, reaction = null) {
-    newSubscription(cb, reaction, true);
+    const sub = newSubscription(cb, reaction, true);
+    runSubscription(sub);
 }
 function useRender(cb, reaction = null) {
-    newSubscription(cb, reaction, false);
+    const sub = newSubscription(cb, reaction, false);
+    runSubscription(sub);
+}
+function useMemo(cb) {
+    const reactors = new Set();
+    let state = 0;
+    let value;
+    const sub = newSubscription(() => {
+        if (state === 0) {
+            sub.iteration--;
+        }
+        else if (state === 1) {
+            state = 2;
+            value = cb();
+        }
+        else {
+            sub.iteration--;
+            state = 0;
+            for (const reactor of reactors) {
+                renderReactor(reactor, reactor.effect);
+            }
+        }
+    }, null, true);
+    return () => {
+        if (state === 0) {
+            state = 1;
+            runSubscription(sub);
+        }
+        if (!sub.cancelled) {
+            const reactor = currentReactor[currentReactor.length - 1];
+            if (reactor) {
+                reactors.add(reactor);
+                reactor.states.set(reactors, reactor.iteration);
+            }
+        }
+        return value;
+    };
 }
 function useDispose(cb) {
     const container = currentSubscriptions[currentSubscriptions.length - 1];
@@ -107,8 +151,10 @@ function useDispose(cb) {
     }
 }
 function newSubscription(cb, reaction, effect) {
-    const sub = {
+    return {
         cb: cb,
+        firstRun: true,
+        lastValue: null,
         reaction: reaction,
         iteration: 0,
         states: new Map(),
@@ -117,16 +163,6 @@ function newSubscription(cb, reaction, effect) {
         cancelled: false,
         pending: false
     };
-    renderReactor(sub, true);
-    if (sub.states.size === 0) {
-        cancelSubscription(sub);
-    }
-    else {
-        const container = currentSubscriptions[currentSubscriptions.length - 1];
-        if (container) {
-            container.list.push(sub);
-        }
-    }
 }
 function cancelSubscription(sub) {
     sub.cancelled = true;
@@ -136,6 +172,7 @@ function cancelSubscription(sub) {
 }
 function runSubscription(sub) {
     sub.pending = false;
+    sub.iteration++;
     reactor.set(sub);
     const res = sub.cb();
     reactor.reset();
@@ -144,5 +181,24 @@ function runSubscription(sub) {
             sub.states.delete(state);
         }
     }
-    sub.reaction?.(res, sub.states.size > 0);
+    if (sub.states.size === 0) {
+        cancelSubscription(sub);
+    }
+    if (sub.firstRun) {
+        sub.firstRun = false;
+        if (sub.states.size > 0) {
+            const container = currentSubscriptions[currentSubscriptions.length - 1];
+            if (container) {
+                container.list.push(sub);
+            }
+        }
+        if (sub.reaction) {
+            sub.lastValue = res;
+            sub.reaction(res, sub.cancelled);
+        }
+    }
+    else if (sub.reaction && sub.lastValue !== res) {
+        sub.lastValue = res;
+        sub.reaction(res, sub.cancelled);
+    }
 }

package/lib/types/State.d.ts

@@ -1,10 +1,13 @@
 export type Getter<T> = () => T;
 export type Setter<T> = (value: T) => void;
-export type State<T> = [get: Getter<T>, set: Setter<T>];
-export type Subscription<T> = {
+export type GetterSetter<T> = (cb: (value: T) => T) => void;
+export type State<T> = [get: Getter<T>, set: Setter<T>, getSet: GetterSetter<T>];
+type Subscription<T> = {
     cb: () => T;
-    reaction: ((data: T, isState: boolean) => void) | null;
     iteration: number;
+    lastValue: T | null;
+    firstRun: boolean;
+    reaction: ((data: T, lastReaction: boolean) => void) | null;
     states: Map<Set<Subscription<any>>, number>;
     next: Subscription<T> | null;
     effect: boolean;
@@ -21,6 +24,8 @@ export declare namespace subscriptions {
     function reset(): void;
 }
 export declare function useState<T>(value: T): State<T>;
-export declare function useEffect<T>(cb: () => T, reaction?: ((data: T, isState: boolean) => void) | null): void;
-export declare function useRender<T>(cb: () => T, reaction?: ((data: T, isState: boolean) => void) | null): void;
+export declare function useEffect<T>(cb: () => T, reaction?: ((data: T, lastReaction: boolean) => void) | null): void;
+export declare function useRender<T>(cb: () => T, reaction?: ((data: T, lastReaction: boolean) => void) | null): void;
+export declare function useMemo<T>(cb: () => T): Getter<T>;
 export declare function useDispose(cb: () => void): void;
+export {};

package/package.json

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