nesquick 1.0.0 → 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/State.js

@@ -79,23 +79,27 @@ 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) => {
+    }
+    ;
+    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) {
     const sub = newSubscription(cb, reaction, true);

package/lib/types/State.d.ts

@@ -1,6 +1,7 @@
 export type Getter<T> = () => T;
 export type Setter<T> = (value: T) => void;
-export type State<T> = [get: Getter<T>, set: Setter<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;
     iteration: number;

package/package.json

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