nesquick 0.0.26 → 1.0.0

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;
@@ -87,18 +88,57 @@ function useState(value) {
         return value;
     };
     const setValue = (newValue) => {
-        value = newValue;
-        for (const reactor of reactors) {
-            renderReactor(reactor, reactor.effect);
+        if (value !== newValue) {
+            value = newValue;
+            for (const reactor of reactors) {
+                renderReactor(reactor, reactor.effect);
+            }
         }
     };
     return [getValue, setValue];
 }
 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 +147,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 +159,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 +168,7 @@ function cancelSubscription(sub) {
 }
 function runSubscription(sub) {
     sub.pending = false;
+    sub.iteration++;
     reactor.set(sub);
     const res = sub.cb();
     reactor.reset();
@@ -144,5 +177,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/cli/transformer.js

@@ -24,60 +24,121 @@ function getSingleBody(node) {
     }
     return null;
 }
-function hasIdentifier(node) {
-    let found = false;
-    node.forEachChild(node => {
-        if (!found && (TS.isIdentifier(node) || hasIdentifier(node))) {
-            found = true;
-        }
-    });
-    return found;
-}
 const transformer = context => {
     return sourceFile => {
         const visitGeneric = (node, options) => {
+            let hasSpread = options.userComponent && TS.isJsxSpreadAttribute(node);
+            let hasChildIdentifier = false;
             if (TS.isJsxOpeningLikeElement(node)) {
                 const firstLetter = node.tagName.getText()[0];
                 const userComponent = firstLetter !== firstLetter.toLowerCase();
-                return TS.visitEachChild(node, node => visitGeneric(node, { userComponent }), context);
+                node = TS.visitEachChild(node, node => {
+                    const res = visitGeneric(node, { userComponent });
+                    hasSpread = hasSpread || res.hasSpread;
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                }, context);
+                if (userComponent && hasSpread) {
+                    const symbol = TS.factory.createCallExpression(TS.factory.createPropertyAccessExpression(TS.factory.createIdentifier("Symbol"), "for"), void 0, [TS.factory.createStringLiteral("$nesquickSpreadProps")]);
+                    if (TS.isJsxOpeningLikeElement(node)) {
+                        const attributes = TS.factory.updateJsxAttributes(node.attributes, [
+                            ...node.attributes.properties,
+                            TS.factory.createJsxSpreadAttribute(TS.factory.createObjectLiteralExpression([
+                                TS.factory.createPropertyAssignment(TS.factory.createComputedPropertyName(symbol), TS.factory.createTrue())
+                            ]))
+                        ]);
+                        if (TS.isJsxOpeningElement(node)) {
+                            node = TS.factory.updateJsxOpeningElement(node, node.tagName, node.typeArguments, attributes);
+                        }
+                        else if (TS.isJsxSelfClosingElement(node)) {
+                            node = TS.factory.updateJsxSelfClosingElement(node, node.tagName, node.typeArguments, attributes);
+                        }
+                    }
+                }
             }
-            if (TS.isJsxAttribute(node)) {
-                return TS.visitEachChild(node, node => visitGeneric(node, { ...options, isJsxAttribute: true }), context);
+            else if (TS.isJsxAttribute(node)) {
+                node = TS.visitEachChild(node, node => {
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: true });
+                    hasSpread = hasSpread || res.hasSpread;
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                }, context);
             }
             else if (TS.isJsxExpression(node)) {
-                return TS.visitEachChild(node, node => visitorExpression(node, { ...options, isJsxAttribute: false }), context);
+                node = TS.visitEachChild(node, node => {
+                    const res = visitorExpression(node, { ...options, isJsxAttribute: false });
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                }, context);
             }
             else if (options.isJsxAttribute && TS.isStringLiteral(node)) {
-                const returnNode = TS.visitNode(node, node => visitorExpression(node, { ...options, isJsxAttribute: false }), TS.isExpression);
-                if (!TS.isStringLiteral(returnNode)) {
-                    return TS.factory.createJsxExpression(undefined, returnNode);
+                const returnNode = TS.visitNode(node, node => {
+                    const res = visitorExpression(node, { ...options, isJsxAttribute: false });
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                }, TS.isExpression);
+                if (TS.isStringLiteral(returnNode)) {
+                    node = returnNode;
                 }
-                return returnNode;
+                else {
+                    node = TS.factory.createJsxExpression(undefined, returnNode);
+                }
+            }
+            else {
+                node = TS.visitEachChild(node, node => {
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: false });
+                    hasSpread = hasSpread || res.hasSpread;
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                }, context);
             }
-            return TS.visitEachChild(node, node => visitGeneric(node, { ...options, isJsxAttribute: false }), context);
+            return { hasSpread, hasChildIdentifier, node };
         };
         const visitorExpression = (node, options) => {
+            let hasChildIdentifier = false;
             if (TS.isParenthesizedExpression(node)) {
                 const body = getSingleBody(node);
                 if (body) {
-                    return TS.visitNode(body, node => visitorExpression(node, options));
+                    node = TS.visitNode(body, node => {
+                        const res = visitorExpression(node, options);
+                        hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                        return res.node;
+                    });
                 }
             }
             else if (TS.isCallExpression(node)) {
                 const identifier = getSingleIdentifier(node);
                 if (identifier) {
-                    return identifier;
+                    node = identifier;
                 }
                 else {
-                    return TS.factory.createArrowFunction(undefined, undefined, [], undefined, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), TS.visitNode(node, node => visitGeneric(node, {}), TS.isConciseBody));
+                    node = TS.factory.createArrowFunction(undefined, undefined, [], undefined, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), TS.visitNode(node, node => {
+                        const res = visitGeneric(node, {});
+                        hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                        return res.node;
+                    }, TS.isConciseBody));
+                }
+            }
+            else if (!TS.isFunctionLike(node) && TS.isExpression(node)) {
+                node = TS.visitNode(node, node => {
+                    const res = visitGeneric(node, {});
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier;
+                    return res.node;
+                });
+                if ((options.userComponent || hasChildIdentifier) && TS.isConciseBody(node)) {
+                    node = TS.factory.createArrowFunction(undefined, undefined, [], undefined, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), node);
                 }
             }
-            else if (!TS.isFunctionLike(node) && TS.isExpression(node) && (options.userComponent || hasIdentifier(node))) {
-                return TS.factory.createArrowFunction(undefined, undefined, [], undefined, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), TS.visitNode(node, node => visitGeneric(node, {}), TS.isConciseBody));
+            else {
+                node = TS.visitNode(node, node => {
+                    const res = visitGeneric(node, {});
+                    hasChildIdentifier = hasChildIdentifier || res.hasChildIdentifier || TS.isIdentifier(node);
+                    return res.node;
+                });
             }
-            return TS.visitNode(node, node => visitGeneric(node, {}));
+            return { hasChildIdentifier, node };
         };
-        return TS.visitNode(sourceFile, node => visitGeneric(node, {}), TS.isSourceFile);
+        return TS.visitNode(sourceFile, node => visitGeneric(node, {}).node, TS.isSourceFile);
     };
 };
 exports.transformer = transformer;

package/lib/jsx-runtime.js

@@ -4,11 +4,16 @@ exports.JSX = exports.jsx = exports.Fragment = void 0;
 exports.jsxs = jsxs;
 const NesquickComponent_1 = require("./NesquickComponent");
 const NesquickFragment_1 = require("./NesquickFragment");
+const jsx_runtime_1 = require("./no-transformer/jsx-runtime");
+const propsSpreadSymbol = Symbol.for("$nesquickSpreadProps");
 exports.Fragment = Symbol();
 function jsxs(type, props, key) {
     if (type === exports.Fragment) {
         return new NesquickFragment_1.NesquickFragment(props.children);
     }
+    if (props[propsSpreadSymbol]) {
+        (0, jsx_runtime_1.functionizeProps)(props);
+    }
     if (key !== undefined) {
         props.key = key;
     }

package/lib/no-transformer/jsx-runtime.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JSX = exports.jsx = exports.Fragment = void 0;
+exports.functionizeProps = functionizeProps;
 exports.jsxs = jsxs;
 const NesquickComponent_1 = require("../NesquickComponent");
 const NesquickFragment_1 = require("../NesquickFragment");

package/lib/types/State.d.ts

@@ -1,8 +1,12 @@
-export type State<T> = [get: () => T, set: (value: T) => void];
-export type Subscription<T> = {
+export type Getter<T> = () => T;
+export type Setter<T> = (value: T) => void;
+export type State<T> = [get: Getter<T>, set: Setter<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;
@@ -19,6 +23,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/lib/types/jsx-runtime.d.ts

@@ -1,7 +1,10 @@
 import { FunctionComponent, ComponentProps, NesquickComponent } from "./NesquickComponent";
 import { NesquickFragment } from "./NesquickFragment";
+declare const propsSpreadSymbol: unique symbol;
 export declare const Fragment: unique symbol;
-export declare function jsxs<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
+export declare function jsxs<P extends ComponentProps & {
+    [propsSpreadSymbol]?: true;
+}>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
 export declare const jsx: typeof jsxs;
 type HasUndefined<T, K extends keyof T> = {
     [L in K]-?: T[K] | undefined;

package/lib/types/no-transformer/jsx-runtime.d.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, ComponentProps, NesquickComponent } from "../NesquickComponent";
 import { NesquickFragment } from "../NesquickFragment";
 export declare const Fragment: unique symbol;
+export declare function functionizeProps(props: ComponentProps): void;
 export declare function jsxs<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
 export declare const jsx: typeof jsxs;
 type HasUndefined<T, K extends keyof T> = {

package/package.json

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