rask-ui 0.4.0 → 0.4.1

package/README.md

@@ -62,9 +62,7 @@ RASK gives you:
 
 - **Simple state management** - No reconciler interference with your state management
 - **Full reconciler power** - Express complex UIs naturally with the language
-- **No special syntax** - Access state properties directly, no function calls
-- **No compiler magic** - Plain JavaScript/TypeScript
-- **Simple mental model** - Just implement state and UI. No manual optimizations, special syntax or compiler magic
+- **No compiler magic** - Plain JavaScript/TypeScript, it runs as you write it
 
 :fire: Built on [Inferno JS](https://github.com/infernojs/inferno).
 
@@ -76,6 +74,19 @@ RASK gives you:
 npm install rask-ui
 ```
 
+### Configuration
+
+Configure TypeScript to use RASK's JSX runtime:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "rask-ui"
+  }
+}
+```
+
 ### Basic Example
 
 ```tsx
@@ -449,8 +460,7 @@ function ShoppingCart() {
       state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
     tax: () => computed.subtotal * state.taxRate,
     total: () => computed.subtotal + computed.tax,
-    itemCount: () =>
-      state.items.reduce((sum, item) => sum + item.quantity, 0),
+    itemCount: () => state.items.reduce((sum, item) => sum + item.quantity, 0),
   });
 
   return () => (
@@ -467,7 +477,9 @@ function ShoppingCart() {
       </ul>
       <div>
         <p>Subtotal: ${computed.subtotal.toFixed(2)}</p>
-        <p>Tax ({state.taxRate * 100}%): ${computed.tax.toFixed(2)}</p>
+        <p>
+          Tax ({state.taxRate * 100}%): ${computed.tax.toFixed(2)}
+        </p>
         <p>
           <strong>Total: ${computed.total.toFixed(2)}</strong>
         </p>
@@ -966,6 +978,7 @@ function ShoppingCart() {
 ```
 
 Benefits of `createComputed`:
+
 - **Cached** - Only recalculates when dependencies change
 - **Lazy** - Only calculates when accessed
 - **Composable** - Computed properties can depend on other computed properties
@@ -1117,21 +1130,6 @@ function TodoList() {
 }
 ```
 
-## Configuration
-
-### JSX Setup
-
-Configure TypeScript to use RASK's JSX runtime:
-
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "rask-ui"
-  }
-}
-```
-
 ## Performance
 
 RASK is designed for performance:

package/dist/batch.d.ts

@@ -1,4 +1,7 @@
-export declare function queue(cb: () => void): void;
+export type QueuedCallback = (() => void) & {
+    __queued: boolean;
+};
+export declare function queue(cb: QueuedCallback): void;
 export declare function syncBatch(cb: () => void): void;
 export declare function installEventBatching(target?: EventTarget): void;
 //# sourceMappingURL=batch.d.ts.map

package/dist/batch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAmDA,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,QAWnC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAOvC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAsB,QA0BlE"}
+{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAyBA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAwClE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAYvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAavC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAsB,QA4BlE"}

package/dist/batch.js

@@ -20,65 +20,86 @@ const INTERACTIVE_EVENTS = [
     "touchend",
     "touchcancel",
 ];
+const asyncQueue = [];
+const syncQueue = [];
 let inInteractive = 0;
-let hasAsyncQueue = false;
-let hasSyncQueue = false;
-const flushQueue = new Set();
-const syncFlushQueue = new Set();
-function queueAsync() {
-    if (hasAsyncQueue) {
+let asyncScheduled = false;
+let inSyncBatch = 0;
+function scheduleAsyncFlush() {
+    if (asyncScheduled)
         return;
+    asyncScheduled = true;
+    queueMicrotask(flushAsyncQueue);
+}
+function flushAsyncQueue() {
+    asyncScheduled = false;
+    if (!asyncQueue.length)
+        return;
+    for (let i = 0; i < asyncQueue.length; i++) {
+        const cb = asyncQueue[i];
+        asyncQueue[i] = undefined;
+        cb();
+        cb.__queued = false;
     }
-    hasAsyncQueue = true;
-    queueMicrotask(() => {
-        hasAsyncQueue = false;
-        if (!flushQueue.size) {
-            return;
-        }
-        const queued = Array.from(flushQueue);
-        flushQueue.clear();
-        queued.forEach((cb) => cb());
-    });
+    asyncQueue.length = 0;
+}
+function flushSyncQueue() {
+    if (!syncQueue.length)
+        return;
+    for (let i = 0; i < syncQueue.length; i++) {
+        const cb = syncQueue[i];
+        syncQueue[i] = undefined;
+        cb();
+        cb.__queued = false;
+    }
+    syncQueue.length = 0;
 }
 export function queue(cb) {
-    if (hasSyncQueue) {
-        syncFlushQueue.add(cb);
+    cb.__queued = true;
+    if (inSyncBatch) {
+        syncQueue.push(cb);
         return;
     }
-    flushQueue.add(cb);
+    asyncQueue.push(cb);
     if (!inInteractive) {
-        queueAsync();
+        scheduleAsyncFlush();
     }
 }
 export function syncBatch(cb) {
-    hasSyncQueue = true;
-    cb();
-    hasSyncQueue = false;
-    const queued = Array.from(syncFlushQueue);
-    syncFlushQueue.clear();
-    queued.forEach((cb) => cb());
+    inSyncBatch++;
+    try {
+        cb();
+        // Only flush on successful completion
+        inSyncBatch--;
+        if (!inSyncBatch) {
+            flushSyncQueue();
+        }
+    }
+    catch (e) {
+        inSyncBatch--;
+        throw e; // Re-throw without flushing
+    }
 }
 export function installEventBatching(target = document) {
-    const captureOptions = { capture: true, passive: true };
+    const captureOptions = {
+        capture: true,
+        passive: true,
+    };
     const bubbleOptions = { passive: true };
     const onCapture = () => {
         inInteractive++;
-        // Backup in case of stop propagation
-        queueAsync();
+        scheduleAsyncFlush(); // backup in case of stopPropagation
     };
     const onBubble = () => {
-        if (--inInteractive === 0 && flushQueue.size) {
-            const queued = Array.from(flushQueue);
-            flushQueue.clear();
-            queued.forEach((cb) => cb());
+        if (--inInteractive === 0 && asyncQueue.length) {
+            // Flush inline once outermost interactive event finishes
+            flushAsyncQueue();
         }
     };
-    // 1) open scope before handlers
     INTERACTIVE_EVENTS.forEach((type) => {
         target.addEventListener(type, onCapture, captureOptions);
     });
     queueMicrotask(() => {
-        // 2) close + flush after handlers (bubble on window/document)
         INTERACTIVE_EVENTS.forEach((type) => {
             target.addEventListener(type, onBubble, bubbleOptions);
         });

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAOjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,cAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CACzD,CAAC,GAAG;IAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;CAAE,CAC9C;IACC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,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;IAgC3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;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,EAEN,MAAM,SAAS,CAAC;AAQjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,cAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CACzD,CAAC,GAAG;IAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;CAAE,CAC9C;IACC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,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;IA4D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -43,15 +43,36 @@ class RaskComponent extends Component {
     createReactiveProps() {
         const reactiveProps = {};
         const self = this;
+        const signals = new Map();
         for (const prop in this.props) {
-            const signal = new Signal();
-            // @ts-ignore
-            let reactiveValue = this.props[prop];
+            const value = this.props[prop];
+            // Skip known non-reactive props
+            if (typeof value === "function" ||
+                prop === "__component" ||
+                prop === "children" ||
+                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) {
+                reactiveProps[prop] = value;
+                continue;
+            }
+            // Only create reactive getters for primitives
             Object.defineProperty(reactiveProps, prop, {
                 get() {
                     if (!self.isRendering) {
                         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);
                         }
                     }
@@ -59,8 +80,9 @@ class RaskComponent extends Component {
                     return self.props[prop];
                 },
                 set(value) {
-                    if (reactiveValue !== value) {
-                        reactiveValue = value;
+                    // Only notify if signal was created (i.e., prop was accessed reactively)
+                    const signal = signals.get(prop);
+                    if (signal && self.props[prop] !== value) {
                         signal.notify();
                     }
                 },

package/dist/createComputed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComputed.d.ts","sourceRoot":"","sources":["../src/createComputed.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAChE,QAAQ,EAAE,CAAC,GACV;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAsCA"}
+{"version":3,"file":"createComputed.d.ts","sourceRoot":"","sources":["../src/createComputed.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAChE,QAAQ,EAAE,CAAC,GACV;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CA4CA"}

package/dist/createComputed.js

@@ -1,29 +1,36 @@
 import { getCurrentComponent, onCleanup } from "./component";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 export function createComputed(computed) {
-    const currentComponent = getCurrentComponent();
+    let currentComponent;
+    try {
+        currentComponent = getCurrentComponent();
+    }
+    catch {
+        currentComponent = undefined;
+    }
     const proxy = {};
     for (const prop in computed) {
         let isDirty = true;
         let value;
         const signal = new Signal();
-        const observer = new Observer(() => {
+        const computedObserver = new Observer(() => {
             isDirty = true;
             signal.notify();
         });
         if (currentComponent) {
-            onCleanup(() => observer.dispose());
+            onCleanup(() => computedObserver.dispose());
         }
         Object.defineProperty(proxy, prop, {
             get() {
-                const observer = getCurrentObserver();
-                if (observer) {
-                    observer.subscribeSignal(signal);
+                const currentObserver = getCurrentObserver();
+                if (currentObserver) {
+                    currentObserver.subscribeSignal(signal);
                 }
                 if (isDirty) {
-                    const stopObserving = observer.observe();
+                    const stopObserving = computedObserver.observe();
                     value = computed[prop]();
                     stopObserving();
+                    isDirty = false;
                     return value;
                 }
                 return value;

package/dist/createEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createEffect.d.ts","sourceRoot":"","sources":["../src/createEffect.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,QAmB1C"}
+{"version":3,"file":"createEffect.d.ts","sourceRoot":"","sources":["../src/createEffect.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,QAwB1C"}

package/dist/createEffect.js

@@ -1,7 +1,13 @@
 import { getCurrentComponent, onCleanup } from "./component";
 import { Observer } from "./observation";
 export function createEffect(cb) {
-    const currentComponent = getCurrentComponent();
+    let currentComponent;
+    try {
+        currentComponent = getCurrentComponent();
+    }
+    catch {
+        currentComponent = undefined;
+    }
     const observer = new Observer(() => {
         // We trigger effects on micro task as synchronous observer notifications
         // (Like when components sets props) should not synchronously trigger effects

package/dist/createState.d.ts

@@ -23,4 +23,5 @@
  * @returns A reactive proxy of the state object
  */
 export declare function createState<T extends object>(state: T): T;
+export declare const PROXY_MARKER: unique symbol;
 //# sourceMappingURL=createState.d.ts.map

package/dist/createState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createState.d.ts","sourceRoot":"","sources":["../src/createState.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEzD"}
+{"version":3,"file":"createState.d.ts","sourceRoot":"","sources":["../src/createState.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEzD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}

package/dist/createState.js

@@ -27,7 +27,7 @@ export function createState(state) {
     return getProxy(state);
 }
 const proxyCache = new WeakMap();
-const PROXY_MARKER = Symbol("isProxy");
+export const PROXY_MARKER = Symbol("isProxy");
 function getProxy(value) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {

package/dist/observation.d.ts

@@ -1,17 +1,93 @@
-export declare function getCurrentObserver(): Observer;
+/**
+ * ---------------------------------------------------------------------------
+ *  OBSERVER–SIGNAL SYSTEM (OPTIMIZED / LOW MEMORY / ZERO PENDING ARRAYS)
+ * ---------------------------------------------------------------------------
+ *
+ *  STRATEGY OVERVIEW
+ *  -----------------
+ *  Instead of storing subscriber callbacks and disposer closures,
+ *  we model the connection between an Observer and a Signal using a
+ *  lightweight Subscription node.
+ *
+ *  Each Subscription is owned *by both sides*:
+ *    - Signal keeps a doubly-linked list of all Subscriptions.
+ *    - Observer keeps a doubly-linked list of all Subscriptions it has made.
+ *
+ *  This gives several important advantages:
+ *
+ *  ✔ NO per-subscription closures (disposers)
+ *  ✔ NO Set allocations in Signal or Observer
+ *  ✔ NO Array copies during notify()
+ *  ✔ Unsubscribing while iterating is safe (linked-list + cached "next")
+ *  ✔ New subscriptions inside notify() DO NOT fire in the same notify pass
+ *    (using an epoch barrier)
+ *  ✔ Observer.clearSignals() is O(n) with real O(1) unlink
+ *  ✔ Memory overhead is extremely small (one node with 4 pointers)
+ *
+ *  NOTIFY BARRIER
+ *  --------------
+ *  A global integer `epoch` increments for each notify().
+ *  New subscriptions created during notify() store `createdAtEpoch = epoch+1`.
+ *  During traversal, we only fire subscriptions where:
+ *
+ *        sub.createdAtEpoch <= epoch
+ *
+ *  This guarantees consistency and prevents "late" subscribers from firing too early.
+ *
+ * ---------------------------------------------------------------------------
+ */
+export declare function getCurrentObserver(): Observer | undefined;
+/**
+ * A lightweight link connecting ONE observer ↔ ONE signal.
+ * Stored in a linked list on both sides.
+ */
+declare class Subscription {
+    signal: Signal;
+    observer: Observer;
+    prevInSignal: Subscription | null;
+    nextInSignal: Subscription | null;
+    prevInObserver: Subscription | null;
+    nextInObserver: Subscription | null;
+    active: boolean;
+    createdAtEpoch: number;
+    constructor(signal: Signal, observer: Observer, epoch: number);
+}
+/**
+ * SIGNAL — Notifies subscribed observers.
+ */
 export declare class Signal {
-    private subscribers;
-    subscribe(cb: () => void): () => void;
+    private head;
+    private tail;
+    private epoch;
+    /** INTERNAL: Create a subscription from observer → signal. */
+    _subscribe(observer: Observer): Subscription;
+    /** INTERNAL: Unlink a subscription from this signal. */
+    _unsubscribe(sub: Subscription): void;
+    /** Notify all observers.
+     *  Safe even if observers unsubscribe themselves or subscribe new ones mid-run.
+     */
     notify(): void;
 }
+/**
+ * OBSERVER — Reacts to signal changes.
+ * Typically wraps a computation or component.
+ */
 export declare class Observer {
     isDisposed: boolean;
-    private signalDisposers;
-    private clearSignals;
-    private onNotify;
+    private subsHead;
+    private subsTail;
+    private readonly onNotify;
     constructor(onNotify: () => void);
+    /** Called from Signal.notify() */
+    _notify(): void;
+    /** Subscribe this observer to a signal */
     subscribeSignal(signal: Signal): void;
+    /** Remove all signal subscriptions (fast + safe) */
+    private clearSignals;
+    /** Begin dependency collection */
     observe(): () => void;
+    /** Dispose the observer completely */
     dispose(): void;
 }
+export {};
 //# sourceMappingURL=observation.d.ts.map

package/dist/observation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAIA,wBAAgB,kBAAkB,aAEjC;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,WAAW,CAAyB;IAC5C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAOxB,MAAM;CAIP;AAED,qBAAa,QAAQ;IACnB,UAAU,UAAS;IACnB,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAa;gBACjB,QAAQ,EAAE,MAAM,IAAI;IAKhC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAIR"}
+{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AASH,wBAAgB,kBAAkB,yBAEjC;AAED;;;GAGG;AACH,cAAM,YAAY;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IAGnB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IACzC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGzC,cAAc,EAAE,YAAY,GAAG,IAAI,CAAQ;IAC3C,cAAc,EAAE,YAAY,GAAG,IAAI,CAAQ;IAG3C,MAAM,UAAQ;IAGd,cAAc,EAAE,MAAM,CAAC;gBAEX,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM;CAK9D;AAED;;GAEG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,IAAI,CAA6B;IACzC,OAAO,CAAC,IAAI,CAA6B;IAGzC,OAAO,CAAC,KAAK,CAAK;IAElB,8DAA8D;IAC9D,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY;IAe5C,wDAAwD;IACxD,YAAY,CAAC,GAAG,EAAE,YAAY;IAe9B;;OAEG;IACH,MAAM;CAgBP;AAED;;;GAGG;AACH,qBAAa,QAAQ;IACnB,UAAU,UAAS;IAGnB,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,QAAQ,CAA6B;IAG7C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAa;gBAE1B,QAAQ,EAAE,MAAM,IAAI;IAUhC,kCAAkC;IAClC,OAAO;IAMP,0CAA0C;IAC1C,eAAe,CAAC,MAAM,EAAE,MAAM;IAe9B,oDAAoD;IACpD,OAAO,CAAC,YAAY;IAiBpB,kCAAkC;IAClC,OAAO;IAUP,sCAAsC;IACtC,OAAO;CAKR"}

package/dist/observation.js

@@ -1,46 +1,195 @@
+/**
+ * ---------------------------------------------------------------------------
+ *  OBSERVER–SIGNAL SYSTEM (OPTIMIZED / LOW MEMORY / ZERO PENDING ARRAYS)
+ * ---------------------------------------------------------------------------
+ *
+ *  STRATEGY OVERVIEW
+ *  -----------------
+ *  Instead of storing subscriber callbacks and disposer closures,
+ *  we model the connection between an Observer and a Signal using a
+ *  lightweight Subscription node.
+ *
+ *  Each Subscription is owned *by both sides*:
+ *    - Signal keeps a doubly-linked list of all Subscriptions.
+ *    - Observer keeps a doubly-linked list of all Subscriptions it has made.
+ *
+ *  This gives several important advantages:
+ *
+ *  ✔ NO per-subscription closures (disposers)
+ *  ✔ NO Set allocations in Signal or Observer
+ *  ✔ NO Array copies during notify()
+ *  ✔ Unsubscribing while iterating is safe (linked-list + cached "next")
+ *  ✔ New subscriptions inside notify() DO NOT fire in the same notify pass
+ *    (using an epoch barrier)
+ *  ✔ Observer.clearSignals() is O(n) with real O(1) unlink
+ *  ✔ Memory overhead is extremely small (one node with 4 pointers)
+ *
+ *  NOTIFY BARRIER
+ *  --------------
+ *  A global integer `epoch` increments for each notify().
+ *  New subscriptions created during notify() store `createdAtEpoch = epoch+1`.
+ *  During traversal, we only fire subscriptions where:
+ *
+ *        sub.createdAtEpoch <= epoch
+ *
+ *  This guarantees consistency and prevents "late" subscribers from firing too early.
+ *
+ * ---------------------------------------------------------------------------
+ */
 import { queue } from "./batch";
+// GLOBAL OBSERVER STACK (for dependency tracking)
 const observerStack = [];
+let stackTop = -1;
+// Get the active observer during a render/compute
 export function getCurrentObserver() {
-    return observerStack[0];
+    return stackTop >= 0 ? observerStack[stackTop] : undefined;
 }
+/**
+ * A lightweight link connecting ONE observer ↔ ONE signal.
+ * Stored in a linked list on both sides.
+ */
+class Subscription {
+    signal;
+    observer;
+    // Linked list pointers within the signal
+    prevInSignal = null;
+    nextInSignal = null;
+    // Linked list pointers within the observer
+    prevInObserver = null;
+    nextInObserver = null;
+    // Whether this subscription is active
+    active = true;
+    // Used for the notify barrier
+    createdAtEpoch;
+    constructor(signal, observer, epoch) {
+        this.signal = signal;
+        this.observer = observer;
+        this.createdAtEpoch = epoch;
+    }
+}
+/**
+ * SIGNAL — Notifies subscribed observers.
+ */
 export class Signal {
-    subscribers = new Set();
-    subscribe(cb) {
-        this.subscribers.add(cb);
-        return () => {
-            this.subscribers.delete(cb);
-        };
+    head = null;
+    tail = null;
+    // Incremented for every notify() call
+    epoch = 0;
+    /** INTERNAL: Create a subscription from observer → signal. */
+    _subscribe(observer) {
+        const sub = new Subscription(this, observer, this.epoch + 1);
+        // Attach to signal's linked list
+        if (this.tail) {
+            this.tail.nextInSignal = sub;
+            sub.prevInSignal = this.tail;
+            this.tail = sub;
+        }
+        else {
+            this.head = this.tail = sub;
+        }
+        return sub;
+    }
+    /** INTERNAL: Unlink a subscription from this signal. */
+    _unsubscribe(sub) {
+        if (!sub.active)
+            return;
+        sub.active = false;
+        const { prevInSignal, nextInSignal } = sub;
+        if (prevInSignal)
+            prevInSignal.nextInSignal = nextInSignal;
+        else
+            this.head = nextInSignal;
+        if (nextInSignal)
+            nextInSignal.prevInSignal = prevInSignal;
+        else
+            this.tail = prevInSignal;
+        sub.prevInSignal = sub.nextInSignal = null;
     }
+    /** Notify all observers.
+     *  Safe even if observers unsubscribe themselves or subscribe new ones mid-run.
+     */
     notify() {
-        const currentSubscribers = Array.from(this.subscribers);
-        currentSubscribers.forEach((cb) => cb());
+        if (!this.head)
+            return;
+        const barrier = ++this.epoch; // new subs won't fire now
+        let sub = this.head;
+        while (sub) {
+            const next = sub.nextInSignal; // cache next → safe if sub unlinks itself
+            if (sub.active && sub.createdAtEpoch <= barrier) {
+                sub.observer._notify();
+            }
+            sub = next;
+        }
     }
 }
+/**
+ * OBSERVER — Reacts to signal changes.
+ * Typically wraps a computation or component.
+ */
 export class Observer {
     isDisposed = false;
-    signalDisposers = new Set();
-    clearSignals() {
-        this.signalDisposers.forEach((dispose) => dispose());
-        this.signalDisposers.clear();
-    }
+    // Doubly-linked list of all subscriptions from this observer
+    subsHead = null;
+    subsTail = null;
+    // Only ONE notify callback closure per observer
     onNotify;
     constructor(onNotify) {
+        const onNotifyQueued = onNotify;
+        onNotifyQueued.__queued = false;
         this.onNotify = () => {
+            if (onNotifyQueued.__queued)
+                return;
             queue(onNotify);
         };
     }
+    /** Called from Signal.notify() */
+    _notify() {
+        if (!this.isDisposed) {
+            this.onNotify();
+        }
+    }
+    /** Subscribe this observer to a signal */
     subscribeSignal(signal) {
-        this.signalDisposers.add(signal.subscribe(this.onNotify));
+        if (this.isDisposed)
+            return;
+        const sub = signal._subscribe(this);
+        // Add to observer's linked list
+        if (this.subsTail) {
+            this.subsTail.nextInObserver = sub;
+            sub.prevInObserver = this.subsTail;
+            this.subsTail = sub;
+        }
+        else {
+            this.subsHead = this.subsTail = sub;
+        }
+    }
+    /** Remove all signal subscriptions (fast + safe) */
+    clearSignals() {
+        let sub = this.subsHead;
+        this.subsHead = this.subsTail = null;
+        while (sub) {
+            const next = sub.nextInObserver;
+            // Unlink from the signal
+            sub.signal._unsubscribe(sub);
+            // Clean up observer-side pointers
+            sub.prevInObserver = sub.nextInObserver = null;
+            sub = next;
+        }
     }
+    /** Begin dependency collection */
     observe() {
         this.clearSignals();
-        observerStack.unshift(this);
+        observerStack[++stackTop] = this;
+        // Return a disposer for this observation frame
         return () => {
-            observerStack.shift();
+            stackTop--;
         };
     }
+    /** Dispose the observer completely */
     dispose() {
-        this.clearSignals();
+        if (this.isDisposed)
+            return;
         this.isDisposed = true;
+        this.clearSignals();
     }
 }

package/package.json

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