rask-ui 0.28.3 → 0.29.0

package/README.md

@@ -4,7 +4,7 @@
   <img src="https://raw.githubusercontent.com/christianalfoni/rask-ui/main/logo.png" alt="Logo" width="200">
 </p>
 
-A lightweight reactive component library that combines the simplicity of observable state management with the full power of a virtual DOM reconciler.
+A lightweight reactive component library built on battle-tested technologies: **Inferno's** highly optimized reconciler and **MobX's** proven reactive state management.
 
 **[Visit rask-ui.io for full documentation](https://rask-ui.io)**
 

package/dist/component.d.ts

@@ -1,5 +1,5 @@
 import { VNode, Component, Props, InfernoNode } from "inferno";
-import { Observer, Signal } from "./observation";
+import { IObservableValue } from "mobx";
 export declare function getCurrentComponent(): RaskComponent<any> | undefined;
 export declare function useMountEffect(cb: () => void): void;
 export declare function useCleanup(cb: () => void): void;
@@ -7,12 +7,13 @@ export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode)
 export type RaskStatefulFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
 export declare class RaskComponent<P extends Props<any>> extends Component<P> {
     renderFn: RaskStatelessFunctionComponent<P>;
-    propsSignals: Record<string, Signal>;
+    propsSignals: Record<string, IObservableValue<any>>;
     private reactiveProps;
     private isNotified;
     private isReconciling;
     private hasChangedComponent;
-    observer: Observer;
+    private createReaction;
+    private reaction;
     isRendering: boolean;
     effects: Array<{
         isDirty: boolean;

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAsB,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAMrE,wBAAgB,mBAAmB,mCAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,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,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,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAC1C,OAAO,CAAC,aAAa,CAAc;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,mBAAmB,CAAQ;IAEnC,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,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,eAAe;IAMf,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;IAgBP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAkDP"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE/D,OAAO,EAAE,gBAAgB,EAAwB,MAAM,MAAM,CAAC;AAM9D,wBAAgB,mBAAmB,mCAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,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,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,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAM;IACzD,OAAO,CAAC,aAAa,CAAc;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,QAAQ,CAAmC;IAEnD,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,UAAU,CAAC,OAAO,EAAE,OAAO;IAS3B,eAAe;IAMf,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;IAQP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAoEP"}

package/dist/component.js

@@ -1,7 +1,8 @@
 import { Component } from "inferno";
-import { getCurrentObserver, Observer, Signal } from "./observation";
-import { syncBatch } from "./batch";
 import { CatchErrorContext } from "./useCatchError";
+import { Reaction, observable } from "mobx";
+import { transaction } from "./scheduler";
+import { assignState } from "./useState";
 let currentComponent;
 export function getCurrentComponent() {
     return currentComponent;
@@ -46,13 +47,16 @@ export class RaskComponent extends Component {
     isNotified = false;
     isReconciling = false;
     hasChangedComponent = true;
-    observer = new Observer(() => {
-        if (this.isReconciling) {
-            this.isNotified = true;
-            return;
-        }
-        this.forceUpdate();
-    });
+    createReaction() {
+        return new Reaction("ComponentRender", () => {
+            if (this.isReconciling) {
+                this.isNotified = true;
+                return;
+            }
+            this.forceUpdate();
+        });
+    }
+    reaction = this.createReaction();
     // Flag to prevent props from tracking in render scope (We use props reconciliation)
     isRendering = false;
     effects = [];
@@ -80,17 +84,10 @@ export class RaskComponent extends Component {
     }
     componentWillReceiveProps(nextProps) {
         this.isReconciling = true;
-        const prevProps = this.props;
-        this.props = nextProps;
         this.hasChangedComponent =
-            prevProps.__component !== this.props.__component;
-        syncBatch(() => {
-            for (const prop in this.propsSignals) {
-                if (prevProps[prop] === nextProps[prop]) {
-                    continue;
-                }
-                this.propsSignals[prop].notify();
-            }
+            nextProps.__component !== this.props.__component;
+        transaction(() => {
+            assignState(this.reactiveProps, nextProps);
         });
     }
     shouldComponentUpdate() {
@@ -101,17 +98,17 @@ export class RaskComponent extends Component {
     }
     render() {
         currentComponent = this;
-        const stopObserving = this.observer.observe();
         try {
             if (this.hasChangedComponent) {
                 this.hasChangedComponent = false;
                 this.componentWillUnmount();
-                this.reactiveProps = createReactiveProps(this);
+                this.reactiveProps = observable(this.props);
                 const component = this.props.__component;
                 const renderFn = component(this.reactiveProps);
                 if (typeof renderFn === "function") {
                     // Since we ran a setup function we need to clear any signals accessed
-                    this.observer.clearSignals();
+                    this.reaction.dispose();
+                    this.reaction = this.createReaction();
                     this.renderFn = renderFn;
                 }
                 else {
@@ -121,7 +118,24 @@ export class RaskComponent extends Component {
             }
             let result = null;
             this.isRendering = true;
-            result = this.renderFn(this.reactiveProps);
+            this.reaction.track(() => {
+                try {
+                    result = this.renderFn(this.reactiveProps);
+                }
+                catch (error) {
+                    try {
+                        const notifyError = CatchErrorContext.use();
+                        if (typeof notifyError !== "function") {
+                            throw error;
+                        }
+                        notifyError(error);
+                        return null;
+                    }
+                    catch {
+                        throw error;
+                    }
+                }
+            });
             this.isRendering = false;
             return result;
         }
@@ -139,41 +153,7 @@ export class RaskComponent extends Component {
             }
         }
         finally {
-            stopObserving();
             currentComponent = undefined;
         }
     }
 }
-function createReactiveProps(comp) {
-    const props = new Proxy({}, {
-        ownKeys() {
-            return Object.getOwnPropertyNames(comp.props);
-        },
-        getOwnPropertyDescriptor(_, prop) {
-            return {
-                configurable: true,
-                enumerable: true,
-                value: comp.props[prop],
-                writable: false,
-            };
-        },
-        get(_, prop) {
-            // Skip known non-reactive props
-            if (prop === "key" || prop === "ref") {
-                return;
-            }
-            const observer = getCurrentObserver();
-            if (observer) {
-                // Lazy create signal only when accessed in reactive context
-                let signal = comp.propsSignals[prop];
-                if (!signal) {
-                    signal = new Signal();
-                    comp.propsSignals[prop] = signal;
-                }
-                observer.subscribeSignal(signal);
-            }
-            return comp.props[prop];
-        },
-    });
-    return props;
-}

package/dist/index.d.ts

@@ -11,7 +11,6 @@ export { useRef, assignRef, Ref } from "./useRef";
 export { useView } from "./useView";
 export { useEffect } from "./useEffect";
 export { useDerived, Derived } from "./useDerived";
-export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
 export { Router, useRouter } from "./useRouter";
 export { useLookup } from "./useLookup";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -12,7 +12,6 @@ export { useRef, assignRef } from "./useRef";
 export { useView } from "./useView";
 export { useEffect } from "./useEffect";
 export { useDerived } from "./useDerived";
-export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
 export { useRouter } from "./useRouter";
 export { useLookup } from "./useLookup";

package/dist/render.js

@@ -1,5 +1,5 @@
 import { render as infernoRender } from "inferno";
-import { syncBatch } from "./batch";
+import { transaction } from "./scheduler";
 /**
  * Renders a component with automatic event batching.
  * Temporarily patches document.addEventListener to wrap
@@ -42,7 +42,7 @@ export function render(...params) {
             !patchedEvents.has(type)) {
             patchedEvents.add(type);
             const wrappedListener = function (event) {
-                syncBatch(() => {
+                transaction(() => {
                     listener.call(this, event);
                 });
             };

package/dist/scheduler.d.ts

@@ -1,4 +1,3 @@
-export declare function markDirty(): void;
-export declare function enqueueUpdateFromSetter(): void;
-export declare function installGlobalBatching(target?: EventTarget): () => void;
+export declare function transaction(cb: () => void): void;
+export declare function autorun(cb: () => void): import("mobx").IReactionDisposer;
 //# sourceMappingURL=scheduler.d.ts.map

package/dist/scheduler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,SAExB;AAeD,wBAAgB,uBAAuB,SAWtC;AAmED,wBAAgB,qBAAqB,CAAC,MAAM,GAAE,WAAoB,cAoBjE"}
+{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,IAAI,QAKzC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,oCAOrC"}

package/dist/scheduler.js

@@ -1,107 +1,34 @@
-let depth = 0; // batching scope nesting
-let dirty = false; // has any state update been enqueued?
-let scheduled = false; // async flush scheduled?
-export function markDirty() {
-    dirty = true;
-}
-function performWork() {
-    // TODO: call your Inferno render/commit once.
-    // infernoRender(vnode, container);
-}
-function flushNow() {
-    scheduled = false;
-    if (!dirty)
-        return;
-    dirty = false;
-    performWork();
-}
-// Called by setters after enqueueing their state change
-export function enqueueUpdateFromSetter() {
-    dirty = true;
-    if (depth > 0) {
-        // We're inside a batched input event; we'll flush on exit (same frame).
-        return;
-    }
-    if (!scheduled) {
-        scheduled = true;
-        queueMicrotask(flushNow); // one flush per task
-    }
-}
-// Batch-scope control used by the global capture listeners
-function enter() {
-    depth++;
-}
-function exit() {
-    if (--depth === 0) {
-        // End of the event propagation; commit now (before next paint).
-        flushNow();
-    }
+import { configure, transaction as mobxTransaction, autorun as mobxAutorun, } from "mobx";
+let isSync = false;
+export function transaction(cb) {
+    isSync = true;
+    mobxTransaction(() => {
+        cb();
+    });
 }
-// eventBatching.ts
-const INTERACTIVE_EVENTS = [
-    // Pointer + mouse
-    "click",
-    "dblclick",
-    "contextmenu",
-    "mousedown",
-    "mouseup",
-    "mousemove",
-    "pointerdown",
-    "pointerup",
-    "pointermove",
-    "touchstart",
-    "touchmove",
-    "touchend",
-    "touchcancel",
-    "dragstart",
-    "drag",
-    "dragend",
-    "dragenter",
-    "dragleave",
-    "dragover",
-    "drop",
-    "wheel",
-    // Keyboard
-    "keydown",
-    "keypress",
-    "keyup",
-    // Focus & input
-    "focus",
-    "blur",
-    "focusin",
-    "focusout",
-    "input",
-    "beforeinput",
-    "change",
-    "compositionstart",
-    "compositionupdate",
-    "compositionend",
-    // Forms
-    "submit",
-    "reset",
-    // Selection / clipboard
-    "select",
-    "selectionchange",
-    "copy",
-    "cut",
-    "paste",
-];
-export function installGlobalBatching(target = window) {
-    const handlers = [];
-    INTERACTIVE_EVENTS.forEach((type) => {
-        const onCapture = () => {
-            enter();
-            // Close the scope after all handlers (capture→target→bubble) have run.
-            queueMicrotask(exit);
-        };
-        target.addEventListener(type, onCapture, { capture: true });
-        handlers.push([onCapture, { capture: true }]);
+export function autorun(cb) {
+    isSync = true;
+    const disposer = mobxAutorun(() => {
+        cb();
     });
-    // Return a disposer so you can remove on unmount
-    return () => {
-        INTERACTIVE_EVENTS.forEach((type, i) => {
-            const [fn, opts] = handlers[i];
-            target.removeEventListener(type, fn, opts);
-        });
-    };
+    return disposer;
 }
+let hasQueuedFlush = false;
+configure({
+    enforceActions: "never",
+    reactionScheduler: (f) => {
+        if (isSync) {
+            f(); // Flush immediately at the end the transaction
+            hasQueuedFlush = false;
+            isSync = false;
+        }
+        else if (!hasQueuedFlush) {
+            hasQueuedFlush = true;
+            queueMicrotask(() => {
+                isSync = true;
+                f();
+                hasQueuedFlush = false;
+            }); // Defer "loose" user changes
+        }
+    },
+});

package/dist/tests/batch.test.js

@@ -1,10 +1,10 @@
 import { describe, it, expect } from "vitest";
 import { syncBatch } from "../batch";
-import { createState } from "../createState";
+import { useState } from "../useState";
 import { Observer } from "../observation";
 describe("syncBatch", () => {
     it("should batch multiple state changes into a single notification", () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -26,7 +26,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should handle nested batches correctly", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -47,7 +47,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should handle multiple observers with syncBatch", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount1 = 0;
         let notifyCount2 = 0;
         const observer1 = new Observer(() => {
@@ -74,7 +74,7 @@ describe("syncBatch", () => {
         observer2.dispose();
     });
     it("should maintain correct state values after syncBatch", () => {
-        const state = createState({
+        const state = useState({
             count: 0,
             name: "Alice",
             items: [1, 2, 3],
@@ -90,7 +90,7 @@ describe("syncBatch", () => {
         expect(state.items).toEqual([100, 2, 3, 4]);
     });
     it("should not flush if exception thrown within syncBatch", () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -114,7 +114,7 @@ describe("syncBatch", () => {
         observer.dispose();
     });
     it("should deduplicate notifications for the same observer", () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -135,7 +135,7 @@ describe("syncBatch", () => {
 });
 describe("queue (async batching)", () => {
     it("should queue updates and flush on microtask", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -157,7 +157,7 @@ describe("queue (async batching)", () => {
         observer.dispose();
     });
     it("should batch multiple async updates into one notification", async () => {
-        const state = createState({ count: 0, name: "Alice" });
+        const state = useState({ count: 0, name: "Alice" });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -175,7 +175,7 @@ describe("queue (async batching)", () => {
         observer.dispose();
     });
     it("should handle separate async batches", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -196,7 +196,7 @@ describe("queue (async batching)", () => {
 });
 describe("syncBatch with nested async updates", () => {
     it("should handle syncBatch inside async context", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -217,7 +217,7 @@ describe("syncBatch with nested async updates", () => {
         observer.dispose();
     });
     it("should handle async updates inside syncBatch callback", async () => {
-        const state = createState({ count: 0 });
+        const state = useState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
             notifyCount++;
@@ -242,3 +242,193 @@ describe("syncBatch with nested async updates", () => {
         observer.dispose();
     });
 });
+describe("syncBatch with cascading updates", () => {
+    it("should handle cascading observer notifications within the same batch", () => {
+        const state = useState({ count: 0 });
+        const derived = useState({ doubled: 0 });
+        let stateNotifyCount = 0;
+        let derivedNotifyCount = 0;
+        let componentNotifyCount = 0;
+        // Observer 1: Watches state, updates derived (simulates useDerived)
+        const derivedObserver = new Observer(() => {
+            stateNotifyCount++;
+            // When state changes, update derived synchronously
+            derived.doubled = state.count * 2;
+        });
+        const dispose1 = derivedObserver.observe();
+        state.count; // Track state
+        dispose1();
+        // Observer 2: Watches derived (simulates component)
+        const componentObserver = new Observer(() => {
+            derivedNotifyCount++;
+        });
+        const dispose2 = componentObserver.observe();
+        derived.doubled; // Track derived
+        dispose2();
+        // Observer 3: Also watches derived (another component)
+        const component2Observer = new Observer(() => {
+            componentNotifyCount++;
+        });
+        const dispose3 = component2Observer.observe();
+        derived.doubled; // Track derived
+        dispose3();
+        // Make a change in a batch
+        syncBatch(() => {
+            state.count = 5;
+        });
+        // All observers should have been notified exactly once
+        expect(stateNotifyCount).toBe(1);
+        expect(derivedNotifyCount).toBe(1);
+        expect(componentNotifyCount).toBe(1);
+        expect(state.count).toBe(5);
+        expect(derived.doubled).toBe(10);
+        derivedObserver.dispose();
+        componentObserver.dispose();
+        component2Observer.dispose();
+    });
+    it("should handle multi-level cascading updates", () => {
+        const state = useState({ value: 0 });
+        const derived1 = useState({ level1: 0 });
+        const derived2 = useState({ level2: 0 });
+        const derived3 = useState({ level3: 0 });
+        const notifyCounts = [0, 0, 0, 0];
+        // Level 1: state -> derived1
+        const observer1 = new Observer(() => {
+            notifyCounts[0]++;
+            derived1.level1 = state.value + 1;
+        });
+        const dispose1 = observer1.observe();
+        state.value;
+        dispose1();
+        // Level 2: derived1 -> derived2
+        const observer2 = new Observer(() => {
+            notifyCounts[1]++;
+            derived2.level2 = derived1.level1 + 1;
+        });
+        const dispose2 = observer2.observe();
+        derived1.level1;
+        dispose2();
+        // Level 3: derived2 -> derived3
+        const observer3 = new Observer(() => {
+            notifyCounts[2]++;
+            derived3.level3 = derived2.level2 + 1;
+        });
+        const dispose3 = observer3.observe();
+        derived2.level2;
+        dispose3();
+        // Final observer: watches derived3
+        const observer4 = new Observer(() => {
+            notifyCounts[3]++;
+        });
+        const dispose4 = observer4.observe();
+        derived3.level3;
+        dispose4();
+        // Update state in a batch
+        syncBatch(() => {
+            state.value = 10;
+        });
+        // All levels should have cascaded and each observer notified exactly once
+        expect(notifyCounts).toEqual([1, 1, 1, 1]);
+        expect(state.value).toBe(10);
+        expect(derived1.level1).toBe(11);
+        expect(derived2.level2).toBe(12);
+        expect(derived3.level3).toBe(13);
+        observer1.dispose();
+        observer2.dispose();
+        observer3.dispose();
+        observer4.dispose();
+    });
+    it("should handle diamond dependency pattern", () => {
+        // Diamond: state -> [derived1, derived2] -> derived3
+        const state = useState({ value: 0 });
+        const derived1 = useState({ path1: 0 });
+        const derived2 = useState({ path2: 0 });
+        const derived3 = useState({ combined: 0 });
+        let derived3NotifyCount = 0;
+        // State -> derived1
+        const obs1 = new Observer(() => {
+            derived1.path1 = state.value * 2;
+        });
+        const d1 = obs1.observe();
+        state.value;
+        d1();
+        // State -> derived2
+        const obs2 = new Observer(() => {
+            derived2.path2 = state.value * 3;
+        });
+        const d2 = obs2.observe();
+        state.value;
+        d2();
+        // [derived1, derived2] -> derived3
+        const obs3 = new Observer(() => {
+            derived3.combined = derived1.path1 + derived2.path2;
+        });
+        const d3 = obs3.observe();
+        derived1.path1;
+        derived2.path2;
+        d3();
+        // Watch derived3
+        const obs4 = new Observer(() => {
+            derived3NotifyCount++;
+        });
+        const d4 = obs4.observe();
+        derived3.combined;
+        d4();
+        syncBatch(() => {
+            state.value = 5;
+        });
+        // derived3 should only be notified once despite two paths updating
+        expect(derived3NotifyCount).toBe(1);
+        expect(derived1.path1).toBe(10);
+        expect(derived2.path2).toBe(15);
+        expect(derived3.combined).toBe(25);
+        obs1.dispose();
+        obs2.dispose();
+        obs3.dispose();
+        obs4.dispose();
+    });
+    it("should not create infinite loops with circular dependencies", () => {
+        const state1 = useState({ value: 0 });
+        const state2 = useState({ value: 0 });
+        let notify1Count = 0;
+        let notify2Count = 0;
+        // Observer 1: watches state1, updates state2
+        const obs1 = new Observer(() => {
+            notify1Count++;
+            if (notify1Count > 10) {
+                throw new Error("Infinite loop detected");
+            }
+            // Only update if different to break the cycle
+            if (state2.value !== state1.value + 1) {
+                state2.value = state1.value + 1;
+            }
+        });
+        const d1 = obs1.observe();
+        state1.value;
+        d1();
+        // Observer 2: watches state2, updates state1
+        const obs2 = new Observer(() => {
+            notify2Count++;
+            if (notify2Count > 10) {
+                throw new Error("Infinite loop detected");
+            }
+            // Only update if different to break the cycle
+            if (state1.value !== state2.value - 1) {
+                state1.value = state2.value - 1;
+            }
+        });
+        const d2 = obs2.observe();
+        state2.value;
+        d2();
+        syncBatch(() => {
+            state1.value = 5;
+        });
+        // Should stabilize without infinite loop
+        expect(notify1Count).toBeLessThan(10);
+        expect(notify2Count).toBeLessThan(10);
+        expect(state1.value).toBe(5);
+        expect(state2.value).toBe(6);
+        obs1.dispose();
+        obs2.dispose();
+    });
+});