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