rask-ui 0.17.0 → 0.18.1

package/dist/batch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AA8ClE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAiBvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAgBvC"}
+{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AA+BlE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAgBvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QA6CvC"}

package/dist/batch.js

@@ -23,23 +23,9 @@ function flushAsyncQueue() {
     }
     asyncQueue.length = 0;
 }
-function flushSyncQueue(queue) {
-    if (!queue.length)
-        return;
-    // No snapshot, just iterate.
-    // New callbacks queued via nested syncBatch will create
-    // their own queue on the stack and flush independently.
-    for (let i = 0; i < queue.length; i++) {
-        const cb = queue[i];
-        queue[i] = undefined;
-        cb();
-        cb.__queued = false;
-    }
-    queue.length = 0;
-}
 export function queue(cb) {
-    // Optional: uncomment this if you want deduping:
-    // if (cb.__queued) return;
+    if (cb.__queued)
+        return;
     cb.__queued = true;
     // If we're in a sync batch, push to the current sync queue
     if (syncQueueStack.length) {
@@ -64,7 +50,35 @@ export function syncBatch(cb) {
         syncQueueStack.pop();
         throw e;
     }
-    // Pop the queue and flush it
+    // CASCADING SYNCHRONOUS UPDATES
+    // ------------------------------
+    // Keep flushing the queue in a loop while it has work. This is critical for handling
+    // cascading reactive updates where one observer's notification triggers another.
+    //
+    // Example cascade: state → derived → component
+    //   1. User updates state in a syncBatch
+    //   2. Derived observer is notified and queued
+    //   3. Derived observer runs, marks derived as dirty
+    //   4. Derived's signal notifies component observers
+    //   5. Component observers are added to the SAME queue (because it's still on the stack)
+    //   6. Loop continues, flushing component observers
+    //
+    // By keeping the queue on the stack during the flush loop, all synchronous cascades
+    // are captured in the same batch. This ensures:
+    //   - No updates escape to the async queue
+    //   - Components render with fully updated derived values
+    //   - Deduplication works across the entire cascade (same observer can't be queued twice)
+    //
+    // The loop terminates when all cascades have settled (queue is empty).
+    while (queue.length > 0) {
+        for (let i = 0; i < queue.length; i++) {
+            const cb = queue[i];
+            queue[i] = undefined;
+            cb();
+            cb.__queued = false;
+        }
+        queue.length = 0;
+    }
+    // Pop the queue after everything is flushed
     syncQueueStack.pop();
-    flushSyncQueue(queue);
 }

package/dist/component.d.ts

@@ -1,10 +1,15 @@
-import { VNode, Component, Props } from "inferno";
+import { VNode, Component, Props, InfernoNode } from "inferno";
 import { Observer } from "./observation";
 export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode) | ((props: P) => VNode);
 export declare class RaskStatelessComponent extends Component {
     renderFn: RaskStatelessFunctionComponent<any>;
+    private isNotified;
+    private isReconciling;
     observer: Observer;
-    shouldComponentUpdate(nextProps: Props<any>): boolean;
+    private reactiveProps;
+    shouldComponentUpdate(): boolean;
+    componentWillMount(): void;
+    componentWillReceiveProps(nextProps: any): void;
     render(): VNode;
 }
 export declare function getCurrentComponent(): RaskStatefulComponent<any> | undefined;
@@ -15,10 +20,10 @@ export declare class RaskStatefulComponent<P extends Props<any>> extends Compone
     setup: RaskStatefulFunctionComponent<P>;
     private renderFn?;
     private reactiveProps?;
-    private observer;
+    private isNotified;
+    private isReconciling;
+    observer: Observer;
     isRendering: boolean;
-    private willRender;
-    private nextProps;
     effects: Array<{
         isDirty: boolean;
         run: () => void;
@@ -27,14 +32,12 @@ export declare class RaskStatefulComponent<P extends Props<any>> extends Compone
     getChildContext(): any;
     onMounts: Array<() => void>;
     onCleanups: Array<() => void>;
-    private createReactiveProps;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    /**
-     *
-     */
-    componentWillUpdate(nextProps: any): void;
-    shouldComponentUpdate(nextProps: Props<any>): boolean;
+    componentWillReceiveProps(nextProps: Readonly<{
+        children?: InfernoNode;
+    } & P>): void;
+    shouldComponentUpdate(): boolean;
     render(): any;
 }
 export declare function createComponent(props: Props<any>, key?: string): VNode;

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAExE,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAOP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAKb;IAEH,WAAW,UAAS;IAEpB,OAAO,CAAC,UAAU,CAAQ;IAG1B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IAyD3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAkBlC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAWrD,MAAM;CA0CP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,QAAQ,WAML;IACH,OAAO,CAAC,aAAa,CAAc;IAEnC,qBAAqB,IAAI,OAAO;IAMhC,kBAAkB,IAAI,IAAI;IAG1B,yBAAyB,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI;IAe/C,MAAM;CAOP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAE9B,QAAQ,WAOL;IAEH,WAAW,UAAS;IACpB,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IAEnC,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAI5B,yBAAyB,CACvB,SAAS,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,CAAC,CAAC,GAClD,IAAI;IAcP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -1,23 +1,43 @@
-import { createComponentVNode, Component } from "inferno";
+import { createComponentVNode, Component, } from "inferno";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 import { syncBatch } from "./batch";
 import { PROXY_MARKER } from "./useState";
 export class RaskStatelessComponent extends Component {
+    isNotified = false;
+    isReconciling = false;
     observer = new Observer(() => {
+        if (this.isReconciling) {
+            this.isNotified = true;
+            return;
+        }
         this.forceUpdate();
     });
-    shouldComponentUpdate(nextProps) {
-        for (const prop in nextProps) {
-            // @ts-ignore
-            if (this.props[prop] !== nextProps[prop]) {
-                return true;
+    reactiveProps;
+    shouldComponentUpdate() {
+        const shouldRender = this.isNotified;
+        this.isNotified = false;
+        this.isReconciling = false;
+        return shouldRender;
+    }
+    componentWillMount() {
+        this.reactiveProps = createReactiveProps(this);
+    }
+    componentWillReceiveProps(nextProps) {
+        this.isReconciling = true;
+        syncBatch(() => {
+            for (const prop in nextProps) {
+                if (this.props[prop] === nextProps[prop]) {
+                    continue;
+                }
+                // @ts-ignore
+                this.reactiveProps[prop] = nextProps[prop];
             }
-        }
-        return false;
+        });
+        this.props = nextProps;
     }
     render() {
         const stopObserving = this.observer.observe();
-        const result = this.renderFn(this.props);
+        const result = this.renderFn(this.reactiveProps);
         stopObserving();
         return result;
     }
@@ -41,19 +61,39 @@ export function useCleanup(cb) {
 export class RaskStatefulComponent extends Component {
     renderFn;
     reactiveProps;
+    // RECONCILIATION FLAGS
+    // --------------------
+    // These flags coordinate observer notifications with Inferno's reconciliation lifecycle
+    // to prevent double-rendering while ensuring effects can update state synchronously.
+    //
+    // isReconciling: Set to true during componentWillReceiveProps. When true, the observer
+    //   will NOT call forceUpdate() immediately, avoiding a render while Inferno is already
+    //   in the middle of updating this component (which would cause a double-render).
+    //
+    // isNotified: Tracks whether the observer was notified during reconciliation. If true,
+    //   it means reactive prop updates or effects have modified state, and the component
+    //   should render to reflect those changes.
+    //
+    // Flow example (props change triggers effect that updates state):
+    //   1. componentWillReceiveProps → isReconciling = true
+    //   2. Prop updates in syncBatch → reactive prop signals notify
+    //   3. Observer fires → sees isReconciling → sets isNotified = true, skips forceUpdate()
+    //   4. shouldComponentUpdate → checks isNotified → returns true
+    //   5. Component renders once with all updates (props + effect state changes)
+    //
+    // This ensures components render synchronously with fully updated state, without
+    // calling forceUpdate() at the wrong time during Inferno's reconciliation.
+    isNotified = false;
+    isReconciling = false;
     observer = new Observer(() => {
-        if (this.willRender) {
+        if (this.isReconciling) {
+            this.isNotified = true;
             return;
         }
         this.forceUpdate();
     });
     // Flag to prevent props from tracking in render scope (We use props reconciliation)
     isRendering = false;
-    // Flag to prevent observer notifications to cause render during reconciliation
-    willRender = true;
-    // Since reactive props updates before the reconciliation (without causing a new one), we
-    // need to return these from the reactive props
-    nextProps = this.props;
     effects = [];
     contexts = new Map();
     getChildContext() {
@@ -67,90 +107,35 @@ export class RaskStatefulComponent extends Component {
     }
     onMounts = [];
     onCleanups = [];
-    createReactiveProps() {
-        const reactiveProps = {};
-        const self = this;
-        const signals = new Map();
-        for (const prop in this.nextProps) {
-            const value = this.nextProps[prop];
-            // Skip known non-reactive props
-            if (prop === "key" || prop === "ref") {
-                reactiveProps[prop] = value;
-                continue;
-            }
-            // Skip objects/arrays - they're already reactive if they're proxies
-            // No need to wrap them in additional signals
-            if (typeof value === "object" &&
-                value !== null &&
-                PROXY_MARKER in value) {
-                reactiveProps[prop] = value;
-                continue;
-            }
-            // Only create reactive getters for primitives
-            Object.defineProperty(reactiveProps, prop, {
-                enumerable: true,
-                get() {
-                    const observer = getCurrentObserver();
-                    if (observer) {
-                        // Lazy create signal only when accessed in reactive context
-                        let signal = signals.get(prop);
-                        if (!signal) {
-                            signal = new Signal();
-                            signals.set(prop, signal);
-                        }
-                        observer.subscribeSignal(signal);
-                    }
-                    // @ts-ignore
-                    return self.nextProps[prop];
-                },
-                set(value) {
-                    // Only notify if signal was created (i.e., prop was accessed reactively)
-                    const signal = signals.get(prop);
-                    if (signal) {
-                        signal.notify();
-                    }
-                },
-            });
-        }
-        return reactiveProps;
-    }
     componentDidMount() {
         this.onMounts.forEach((cb) => cb());
     }
     componentWillUnmount() {
         this.onCleanups.forEach((cb) => cb());
     }
-    /**
-     *
-     */
-    componentWillUpdate(nextProps) {
-        this.willRender = true;
-        this.nextProps = nextProps;
+    componentWillReceiveProps(nextProps) {
+        this.isReconciling = true;
         syncBatch(() => {
             for (const prop in nextProps) {
-                if (prop === "children" ||
-                    this.props[prop] === nextProps[prop]) {
+                if (this.props[prop] === nextProps[prop]) {
                     continue;
                 }
                 // @ts-ignore
                 this.reactiveProps[prop] = nextProps[prop];
             }
         });
+        this.props = nextProps;
     }
-    shouldComponentUpdate(nextProps) {
-        // Shallow comparison of props, excluding internal props
-        for (const prop in nextProps) {
-            // @ts-ignore
-            if (this.props[prop] !== nextProps[prop]) {
-                return true;
-            }
-        }
-        return false;
+    shouldComponentUpdate() {
+        const shouldRender = this.isNotified;
+        this.isNotified = false;
+        this.isReconciling = false;
+        return shouldRender;
     }
     render() {
         currentComponent = this;
         if (!this.renderFn) {
-            this.reactiveProps = this.createReactiveProps();
+            this.reactiveProps = createReactiveProps(this);
             try {
                 this.renderFn = this.setup(this.reactiveProps);
                 if (typeof this.renderFn !== "function") {
@@ -171,7 +156,6 @@ export class RaskStatefulComponent extends Component {
             this.isRendering = true;
             result = this.renderFn();
             this.isRendering = false;
-            this.willRender = false;
         }
         catch (error) {
             if (typeof this.context.notifyError !== "function") {
@@ -189,3 +173,47 @@ export class RaskStatefulComponent extends Component {
 export function createComponent(props, key) {
     return createComponentVNode(4 /* VNodeFlags.ComponentClass */, RaskStatefulComponent, props, key);
 }
+function createReactiveProps(comp) {
+    const reactiveProps = {};
+    const signals = new Map();
+    for (const prop in comp.props) {
+        const value = comp.props[prop];
+        // Skip known non-reactive props
+        if (prop === "key" || prop === "ref") {
+            reactiveProps[prop] = value;
+            continue;
+        }
+        // Skip objects/arrays - they're already reactive if they're proxies
+        // No need to wrap them in additional signals
+        if (typeof value === "object" && value !== null && PROXY_MARKER in value) {
+            reactiveProps[prop] = value;
+            continue;
+        }
+        // Only create reactive getters for primitives
+        Object.defineProperty(reactiveProps, prop, {
+            enumerable: true,
+            get() {
+                const observer = getCurrentObserver();
+                if (observer) {
+                    // Lazy create signal only when accessed in reactive context
+                    let signal = signals.get(prop);
+                    if (!signal) {
+                        signal = new Signal();
+                        signals.set(prop, signal);
+                    }
+                    observer.subscribeSignal(signal);
+                }
+                return comp.props[prop];
+            },
+            set(value) {
+                comp.props[prop] = value;
+                // Only notify if signal was created (i.e., prop was accessed reactively)
+                const signal = signals.get(prop);
+                if (signal) {
+                    signal.notify();
+                }
+            },
+        });
+    }
+    return reactiveProps;
+}

package/dist/useDerived.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,GACV,OAAO,CAAC,CAAC,CAAC,CAgFZ"}
+{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,GACV,OAAO,CAAC,CAAC,CAAC,CAiFZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",