nesquick 2.0.2 → 2.2.0

package/lib/NesquickComponent.js

@@ -21,30 +21,75 @@ function getAttributeNs(attributes, k) {
     }
     return null;
 }
-function getterFromFunctions(props) {
-    const res = Object.create(null);
+function getterFromFunctionsSingleChildren(props) {
+    const res = {};
     for (const k in props) {
-        Object.defineProperty(res, k, {
-            get() {
-                return props[k]();
+        if (k === "children") {
+            const v = props.children;
+            if (typeof v === "function" && !(v instanceof NesquickComponent)) {
+                Object.defineProperty(res, "children", {
+                    get() {
+                        return v();
+                    }
+                });
+            }
+            else {
+                res.children = v;
+            }
+        }
+        else {
+            const v = props[k];
+            Object.defineProperty(res, k, {
+                get() {
+                    return v();
+                }
+            });
+        }
+    }
+    return res;
+}
+function getterFromFunctionsArrayChildren(props) {
+    const res = {};
+    for (const k in props) {
+        if (k === "children") {
+            res.children = props.children;
+            for (let i = 0; i < props.children.length; i++) {
+                const v = props.children[i];
+                if (typeof v === "function" && !(v instanceof NesquickComponent)) {
+                    Object.defineProperty(res.children, i, {
+                        get() {
+                            return v();
+                        }
+                    });
+                }
             }
-        });
+        }
+        else {
+            const v = props[k];
+            Object.defineProperty(res, k, {
+                get() {
+                    return v();
+                }
+            });
+        }
     }
     return res;
 }
 class NesquickComponent {
-    constructor(_render, props) {
+    constructor(_render, props, jsxs = false) {
         this._render = _render;
         this.props = props;
+        this.jsxs = jsxs;
         this._subscriptions = new State_1.Subscriptions();
         this._styleSubscriptions = null;
         this._xmlns = null;
+        this._onUpdate = null;
         this._children = [];
     }
     render(document) {
         State_1.subscriptions.set(this._subscriptions);
         if (typeof this._render === "function") {
-            this.props = getterFromFunctions(this.props);
+            this.props = this.jsxs ? getterFromFunctionsArrayChildren(this.props) : getterFromFunctionsSingleChildren(this.props);
             const element = this._render(this.props);
             if (this._xmlns) {
                 element.setXmlns(this._xmlns);
@@ -88,8 +133,15 @@ class NesquickComponent {
             }
         }
         this._renderChildren(document, element, this.props.children);
-        if (this.props.ref != null) {
-            this.props.ref(element);
+        if (typeof this.props["nq:ref"] === "function") {
+            this.props["nq:ref"](element);
+        }
+        if (typeof this.props["nq:update"] === "function") {
+            this._onUpdate = {
+                waiting: true,
+                element: element,
+                cb: this.props["nq:update"]
+            };
         }
         this.props = {};
         State_1.subscriptions.reset();
@@ -98,9 +150,18 @@ class NesquickComponent {
     setXmlns(xmlns) {
         this._xmlns = xmlns;
     }
+    _onUpdated() {
+        if (this._onUpdate?.waiting) {
+            this._onUpdate.waiting = false;
+            (0, State_1.afterRender)(() => {
+                this._onUpdate.waiting = true;
+                this._onUpdate.cb(this._onUpdate.element);
+            });
+        }
+    }
     _renderPropsNs(attributes, element, props) {
         for (const k in props) {
-            if (k !== "children" && k !== "xmlns" && k !== "ref") {
+            if (k !== "children" && k !== "xmlns" && k !== "nq:ref" && k !== "nq:update") {
                 if (k === "style") {
                     this._renderStyle(element, props[k]);
                 }
@@ -113,11 +174,13 @@ class NesquickComponent {
                         if (attribute) {
                             (0, State_1.useRender)(props[k], v => {
                                 element.setAttributeNS(attribute.namespace, attribute.name, String(v));
+                                this._onUpdated();
                             });
                         }
                         else {
                             (0, State_1.useRender)(props[k], v => {
                                 element.setAttribute(k, String(v));
+                                this._onUpdated();
                             });
                         }
                     }
@@ -137,7 +200,7 @@ class NesquickComponent {
     ;
     _renderProps(element, props) {
         for (const k in props) {
-            if (k !== "children" && k !== "xmlns" && k !== "ref") {
+            if (k !== "children" && k !== "xmlns" && k !== "nq:ref" && k !== "nq:update") {
                 if (k === "style") {
                     this._renderStyle(element, props[k]);
                 }
@@ -148,6 +211,7 @@ class NesquickComponent {
                     else {
                         (0, State_1.useRender)(props[k], v => {
                             element.setAttribute(k, String(v));
+                            this._onUpdated();
                         });
                     }
                 }
@@ -162,6 +226,7 @@ class NesquickComponent {
             if (typeof styles[k] === "function") {
                 (0, State_1.useRender)(styles[k], v => {
                     element.style[k] = String(v);
+                    this._onUpdated();
                 });
             }
             else {
@@ -198,6 +263,7 @@ class NesquickComponent {
                             break;
                         }
                     }
+                    this._onUpdated();
                 });
                 break;
             }
@@ -237,6 +303,7 @@ class NesquickComponent {
                             }
                             this._renderChild(document, parent, ch, children);
                         }
+                        this._onUpdated();
                     });
                 }
                 else {

package/lib/NesquickFragment.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NesquickFragment = void 0;
 const NesquickComponent_1 = require("./NesquickComponent");
 class NesquickFragment extends NesquickComponent_1.NesquickComponent {
-    constructor(children) {
-        super("", { children });
+    constructor(children, jsxs = false) {
+        super("", { children }, jsxs);
         this._lastNode = null;
         this._fragment = null;
     }

package/lib/State.js

@@ -4,6 +4,7 @@ exports.subscriptions = exports.Subscriptions = void 0;
 exports.useState = useState;
 exports.useEffect = useEffect;
 exports.useRender = useRender;
+exports.afterRender = afterRender;
 exports.useMemo = useMemo;
 exports.useDispose = useDispose;
 let currentReactor = [];
@@ -19,6 +20,7 @@ var reactor;
     reactor_1.reset = reset;
 })(reactor || (reactor = {}));
 let pendingReactor = null;
+const onRenders = [];
 function renderReactor(reactor, instant) {
     if (instant) {
         runSubscription(reactor);
@@ -49,6 +51,9 @@ function renderReactors() {
         next = n;
     } while (next);
     pendingReactor = null;
+    for (const cb of onRenders.splice(0)) {
+        cb();
+    }
 }
 class Subscriptions {
     constructor() {
@@ -109,6 +114,15 @@ function useRender(cb, reaction = null) {
     const sub = newSubscription(cb, reaction, false);
     runSubscription(sub);
 }
+const NopSubscription = newSubscription(() => { }, null, false);
+cancelSubscription(NopSubscription);
+function afterRender(cb) {
+    onRenders.push(cb);
+    if (pendingReactor == null) {
+        NopSubscription.pending = false;
+        renderReactor(NopSubscription, false);
+    }
+}
 function useMemo(cb) {
     const reactors = new Set();
     let state = 0;

package/lib/cli/transformer.js

@@ -7,6 +7,7 @@ function getSingleIdentifier(node) {
     node.forEachChild(node => {
         if (TS.isIdentifier(node)) {
             if (identifier != null) {
+                identifier = null;
                 return node;
             }
             identifier = node;
@@ -53,6 +54,9 @@ function createSpreadCheckFunction(fName) {
         TS.factory.createReturnStatement(res)
     ], true));
 }
+function arrowify(node) {
+    return TS.factory.createArrowFunction(void 0, void 0, [], void 0, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), node);
+}
 const transformer = context => {
     return sourceFile => {
         let hasSpreadChecker = false;
@@ -67,7 +71,7 @@ const transformer = context => {
             return { node, hasCallExpression };
         };
         const visitGeneric = (node, options) => {
-            let hasCallExpression = TS.isCallExpression(node);
+            let hasCallExpression = TS.isCallExpression(node) || TS.isElementAccessExpression(node) || TS.isPropertyAccessExpression(node);
             if (TS.isJsxSpreadAttribute(node)) {
                 hasSpreadChecker = true;
                 const expression = visitGeneric(node.expression, {}).node;
@@ -76,19 +80,12 @@ const transformer = context => {
                     node = TS.factory.updateJsxSpreadAttribute(node, callExpression);
                 }
             }
-            else if (TS.isJsxElement(node)) {
-                const firstLetter = node.openingElement.tagName.getText()[0];
+            else if (TS.isJsxElement(node) || TS.isJsxSelfClosingElement(node)) {
+                const firstLetter = TS.isJsxSelfClosingElement(node) ? node.tagName.getText()[0] : node.openingElement.tagName.getText()[0];
                 const userComponent = firstLetter !== firstLetter.toLowerCase();
                 const res = processNode(node, { userComponent });
                 node = res.node;
             }
-            else if (TS.isJsxOpeningLikeElement(node)) {
-                const firstLetter = node.tagName.getText()[0];
-                const userComponent = firstLetter !== firstLetter.toLowerCase();
-                const res = processNode(node, { userComponent });
-                node = res.node;
-                hasCallExpression = hasCallExpression || res.hasCallExpression;
-            }
             else if (TS.isJsxAttribute(node)) {
                 node = TS.visitEachChild(node, node => {
                     const res = visitGeneric(node, { ...options, isJsxAttribute: true });
@@ -108,6 +105,12 @@ const transformer = context => {
                     node = TS.factory.createJsxExpression(void 0, returnNode);
                 }
             }
+            else if (TS.isFunctionLike(node)) {
+                node = TS.visitEachChild(node, node => {
+                    const res = visitGeneric(node, { ...options, isJsxAttribute: false });
+                    return res.node;
+                }, context);
+            }
             else {
                 node = TS.visitEachChild(node, node => {
                     const res = visitGeneric(node, { ...options, isJsxAttribute: false });
@@ -115,6 +118,9 @@ const transformer = context => {
                     return res.node;
                 }, context);
             }
+            if (TS.isJsxChild(node) && !TS.isJsxText(node) && !TS.isJsxExpression(node) && options.userComponent) {
+                node = TS.factory.createJsxExpression(void 0, arrowify(node));
+            }
             return { node, hasCallExpression };
         };
         const visitorExpression = (node, options) => {
@@ -132,10 +138,8 @@ const transformer = context => {
             }
             const res = visitGeneric(node, {});
             node = res.node;
-            if (TS.isExpression(node)) {
-                if (options.userComponent || (res.hasCallExpression && !TS.isFunctionLike(node) && !TS.isJsxElement(node) && !TS.isJsxOpeningLikeElement(node))) {
-                    node = TS.factory.createArrowFunction(void 0, void 0, [], void 0, TS.factory.createToken(TS.SyntaxKind.EqualsGreaterThanToken), node);
-                }
+            if (TS.isConciseBody(node) && (options.userComponent || res.hasCallExpression)) {
+                node = arrowify(node);
             }
             return node;
         };

package/lib/jsx-runtime.js

@@ -7,22 +7,16 @@ const NesquickComponent_1 = require("./NesquickComponent");
 const NesquickFragment_1 = require("./NesquickFragment");
 exports.Fragment = Symbol();
 function jsxs(type, props, key) {
-    if (type === exports.Fragment) {
-        return new NesquickFragment_1.NesquickFragment(props.children);
-    }
-    if (key !== undefined) {
-        props.key = key;
-    }
-    return new NesquickComponent_1.NesquickComponent(type, props);
+    return jsx(type, props, key, true);
 }
-function jsx(type, props, key) {
+function jsx(type, props, key, jsxs = false) {
     if (type === exports.Fragment) {
-        return new NesquickFragment_1.NesquickFragment([props.children]);
+        return new NesquickFragment_1.NesquickFragment([props.children], jsxs);
     }
     if (key !== undefined) {
         props.key = key;
     }
-    return new NesquickComponent_1.NesquickComponent(type, props);
+    return new NesquickComponent_1.NesquickComponent(type, props, jsxs);
 }
 var JSX;
 (function (JSX) {

package/lib/types/NesquickComponent.d.ts

@@ -2,8 +2,8 @@ export type Child = NesquickComponent<any> | NesquickFragment | string | boolean
 export type Children = Child | Child[];
 export type ChildFunc = () => Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[];
 export type ComponentProps = Record<string, any>;
-export type FunctionComponent<P extends ComponentProps = {}> = (props: P) => NesquickComponent<P>;
-export type VeactDocument = Pick<Document, "createElement" | "createElementNS" | "createTextNode" | "createDocumentFragment" | "createComment">;
+export type FunctionComponent<P extends ComponentProps = {}> = (props: P) => NesquickComponent<any>;
+export type NesquickDocument = Pick<Document, "createElement" | "createElementNS" | "createTextNode" | "createDocumentFragment" | "createComment">;
 type NesquickChild = {
     node: Node | null;
 } & ({
@@ -25,23 +25,26 @@ type XmlNs = {
 export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _render;
     protected props: P;
+    protected jsxs: boolean;
     private _subscriptions;
     private _styleSubscriptions;
     private _xmlns;
+    private _onUpdate;
     protected _children: NesquickChild[];
-    constructor(_render: string | FunctionComponent<P>, props: P);
-    render(document: VeactDocument): Node;
+    constructor(_render: string | FunctionComponent<P>, props: P, jsxs?: boolean);
+    render(document: NesquickDocument): Node;
     setXmlns(xmlns: XmlNs | null): void;
+    private _onUpdated;
     private _renderPropsNs;
     private _renderProps;
     private _renderStyles;
     private _renderStyle;
-    protected _renderChildren(document: VeactDocument, parent: NesquickParent, children?: Children): void;
+    protected _renderChildren(document: NesquickDocument, parent: NesquickParent, children?: Children): void;
     protected _pushChild(): NesquickChild;
     protected _spliceChild(i: number): NesquickChild;
     protected _swapChilds(parent: NesquickParent, i1: number, i2: number): void;
     protected _removeChild(i: number): void;
-    protected _renderChild(document: VeactDocument, parent: NesquickParent, nesquickChild: NesquickChild, child: Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[]): void;
+    protected _renderChild(document: NesquickDocument, parent: NesquickParent, nesquickChild: NesquickChild, child: Exclude<Child, ChildFunc> | Exclude<Child, ChildFunc>[]): void;
     dispose(): void;
 }
 import { NesquickFragment } from "./NesquickFragment";

package/lib/types/NesquickFragment.d.ts

@@ -1,12 +1,12 @@
 import { JSX } from "./Nesquick";
-import { Child, NesquickComponent, NesquickParent, VeactDocument } from "./NesquickComponent";
+import { Child, NesquickComponent, NesquickParent, NesquickDocument } from "./NesquickComponent";
 export declare class NesquickFragment extends NesquickComponent<{
     children: Child[];
 }> implements NesquickParent {
     private _lastNode;
     private _fragment;
-    constructor(children: Child[]);
-    render(document: VeactDocument): Node;
+    constructor(children: Child[], jsxs?: boolean);
+    render(document: NesquickDocument): Node;
     getDocument(): Document | null;
     getParent(): Node | null;
     appendChild(child: Node): void;

package/lib/types/State.d.ts

@@ -26,6 +26,7 @@ export declare namespace subscriptions {
 export declare function useState<T>(value: T): State<T>;
 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 afterRender(cb: () => void): 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

@@ -2,7 +2,7 @@ import { FunctionComponent, ComponentProps, NesquickComponent } from "./Nesquick
 import { NesquickFragment } from "./NesquickFragment";
 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 jsx<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
+export declare function jsx<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null, jsxs?: boolean): NesquickFragment | NesquickComponent<P>;
 export type Component<P extends Record<any, any> = {}> = (props: P) => JSX.Element;
 export declare namespace JSX {
     export type JSXEvent<T extends Event, T2 extends EventTarget> = T & {
@@ -18,7 +18,8 @@ export declare namespace JSX {
         [k: string]: any;
         style?: Style;
         xmlns?: string | null;
-        ref?: ((el: T) => void) | null;
+        "nq:ref"?: ((el: T) => void) | null;
+        "nq:update"?: ((el: T) => void) | null;
     }
     export type Style = StyleProps | string;
     export type StyleProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nesquick",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types/index.d.ts",
   "main": "./lib/index.js",