nesquick 2.0.0 → 2.1.0

package/lib/NesquickComponent.js

@@ -39,6 +39,7 @@ class NesquickComponent {
         this._subscriptions = new State_1.Subscriptions();
         this._styleSubscriptions = null;
         this._xmlns = null;
+        this._onUpdate = null;
         this._children = [];
     }
     render(document) {
@@ -88,8 +89,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 +106,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 +130,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 +156,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 +167,7 @@ class NesquickComponent {
                     else {
                         (0, State_1.useRender)(props[k], v => {
                             element.setAttribute(k, String(v));
+                            this._onUpdated();
                         });
                     }
                 }
@@ -162,6 +182,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 +219,7 @@ class NesquickComponent {
                             break;
                         }
                     }
+                    this._onUpdated();
                 });
                 break;
             }
@@ -237,6 +259,7 @@ class NesquickComponent {
                             }
                             this._renderChild(document, parent, ch, children);
                         }
+                        this._onUpdated();
                     });
                 }
                 else {

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

@@ -34,6 +34,9 @@ function createSpreadCheckFunction(fName) {
         TS.factory.createParameterDeclaration(void 0, void 0, obj),
         TS.factory.createParameterDeclaration(void 0, void 0, check)
     ], void 0, TS.factory.createBlock([
+        TS.factory.createIfStatement(TS.factory.createPrefixUnaryExpression(TS.SyntaxKind.ExclamationToken, obj), TS.factory.createBlock([
+            TS.factory.createReturnStatement(obj)
+        ], true), void 0),
         TS.factory.createVariableStatement(void 0, TS.factory.createVariableDeclarationList([
             TS.factory.createVariableDeclaration(res, void 0, void 0, TS.factory.createCallExpression(TS.factory.createPropertyAccessExpression(TS.factory.createIdentifier("Object"), "create"), void 0, [TS.factory.createNull()]))
         ], TS.NodeFlags.Const)),
@@ -73,6 +76,12 @@ const transformer = context => {
                     node = TS.factory.updateJsxSpreadAttribute(node, callExpression);
                 }
             }
+            else if (TS.isJsxElement(node)) {
+                const firstLetter = 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();

package/lib/types/NesquickComponent.d.ts

@@ -28,10 +28,12 @@ export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _subscriptions;
     private _styleSubscriptions;
     private _xmlns;
+    private _onUpdate;
     protected _children: NesquickChild[];
     constructor(_render: string | FunctionComponent<P>, props: P);
     render(document: VeactDocument): Node;
     setXmlns(xmlns: XmlNs | null): void;
+    private _onUpdated;
     private _renderPropsNs;
     private _renderProps;
     private _renderStyles;

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

@@ -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.0",
+  "version": "2.1.0",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types/index.d.ts",
   "main": "./lib/index.js",