rask-ui 0.2.0 → 0.2.2

package/dist/observation.d.ts

@@ -5,11 +5,10 @@ export declare class Signal {
     notify(): void;
 }
 export declare class Observer {
-    private _isDisposed;
+    isDisposed: boolean;
     private signalDisposers;
     private clearSignals;
     private onNotify;
-    private isQueued;
     constructor(onNotify: () => void);
     subscribeSignal(signal: Signal): void;
     observe(): () => void;

package/dist/observation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,aAEjC;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,WAAW,CAAyB;IAC5C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAOxB,MAAM;CAGP;AAED,qBAAa,QAAQ;IACnB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAS;gBACb,QAAQ,EAAE,MAAM,IAAI;IAmBhC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAIR"}
+{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,aAEjC;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,WAAW,CAAyB;IAC5C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAOxB,MAAM;CAGP;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;IAGhC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAIR"}

package/dist/observation.js

@@ -15,28 +15,15 @@ export class Signal {
     }
 }
 export class Observer {
-    _isDisposed = false;
+    isDisposed = false;
     signalDisposers = new Set();
     clearSignals() {
         this.signalDisposers.forEach((dispose) => dispose());
         this.signalDisposers.clear();
     }
     onNotify;
-    isQueued = false;
     constructor(onNotify) {
-        this.onNotify = () => {
-            if (this.isQueued) {
-                return;
-            }
-            queueMicrotask(() => {
-                this.isQueued = false;
-                if (this._isDisposed) {
-                    return;
-                }
-                onNotify();
-            });
-            this.isQueued = true;
-        };
+        this.onNotify = onNotify;
     }
     subscribeSignal(signal) {
         this.signalDisposers.add(signal.subscribe(this.onNotify));
@@ -50,6 +37,6 @@ export class Observer {
     }
     dispose() {
         this.clearSignals();
-        this._isDisposed = true;
+        this.isDisposed = true;
     }
 }

package/dist/tests/class.test.js

@@ -46,6 +46,7 @@ describe("Class Property Support", () => {
         render(jsx("div", { class: {} }), container);
         const div = container.querySelector("div");
         expect(div?.className).toBe("");
+        expect(div?.hasAttribute("class")).toBe(false);
     });
     it("should handle all false object notation", () => {
         const container = document.createElement("div");
@@ -57,6 +58,7 @@ describe("Class Property Support", () => {
         }), container);
         const div = container.querySelector("div");
         expect(div?.className).toBe("");
+        expect(div?.hasAttribute("class")).toBe(false);
     });
     it("should update classes when object notation changes", async () => {
         const container = document.createElement("div");
@@ -124,6 +126,46 @@ describe("Class Property Support", () => {
         render(jsx("div", { class: undefined }), container);
         const div = container.querySelector("div");
         expect(div?.className).toBe("");
+        expect(div?.hasAttribute("class")).toBe(false);
+    });
+    it("should remove class attribute when empty string is provided", () => {
+        const container = document.createElement("div");
+        render(jsx("div", { class: "" }), container);
+        const div = container.querySelector("div");
+        expect(div?.hasAttribute("class")).toBe(false);
+    });
+    it("should remove class attribute when null is provided", () => {
+        const container = document.createElement("div");
+        render(jsx("div", { class: null }), container);
+        const div = container.querySelector("div");
+        expect(div?.hasAttribute("class")).toBe(false);
+    });
+    it("should remove class attribute when object notation results in empty string", () => {
+        const container = document.createElement("div");
+        render(jsx("div", {
+            class: {
+                active: false,
+                visible: false,
+            },
+        }), container);
+        const div = container.querySelector("div");
+        expect(div?.hasAttribute("class")).toBe(false);
+    });
+    it("should remove class attribute when updating from non-empty to empty string", async () => {
+        const container = document.createElement("div");
+        let stateFn;
+        const App = () => {
+            const state = createState({ className: "initial" });
+            stateFn = state;
+            return () => jsx("div", { class: state.className });
+        };
+        render(jsx(App, {}), container);
+        const div = container.querySelector("div");
+        expect(div?.className).toBe("initial");
+        expect(div?.hasAttribute("class")).toBe(true);
+        stateFn.className = "";
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(div?.hasAttribute("class")).toBe(false);
     });
     it("should handle dynamic string class updates", async () => {
         const container = document.createElement("div");

package/dist/tests/component.props.test.js

@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { jsx, render } from "../vdom";
+import { createState } from "../createState";
 describe("Component Props", () => {
     it("should pass string props to component", () => {
         const container = document.createElement("div");
@@ -75,14 +76,259 @@ describe("Component Props", () => {
         render(jsx(MyComponent, { message: "Custom message" }), container2);
         expect(container2.children[0].textContent).toBe("Custom message");
     });
-    it("should update when props change", () => {
+    it("should pass props from parent to child component", () => {
         const container = document.createElement("div");
-        const MyComponent = (props) => {
+        const ChildComponent = (props) => {
             return () => jsx("div", { children: props.message });
         };
-        render(jsx(MyComponent, { message: "Initial" }), container);
-        expect(container.children[0].textContent).toBe("Initial");
-        // Simulate props update
-        // The implementation will handle prop updates through patch
+        const ParentComponent = (props) => {
+            return () => jsx("div", {
+                children: jsx(ChildComponent, { message: props.text }),
+            });
+        };
+        render(jsx(ParentComponent, { text: "Hello from parent" }), container);
+        expect(container.children[0].children[0].textContent).toBe("Hello from parent");
+    });
+    it("should pass props through multiple levels of nesting", () => {
+        const container = document.createElement("div");
+        const GrandchildComponent = (props) => {
+            return () => jsx("span", { children: props.value });
+        };
+        const ChildComponent = (props) => {
+            return () => jsx("div", {
+                children: jsx(GrandchildComponent, { value: props.data }),
+            });
+        };
+        const ParentComponent = (props) => {
+            return () => jsx("div", {
+                children: jsx(ChildComponent, { data: props.info }),
+            });
+        };
+        render(jsx(ParentComponent, { info: "Deep nested value" }), container);
+        const span = container.querySelector("span");
+        expect(span?.textContent).toBe("Deep nested value");
+    });
+    it("should update nested component when parent props change", async () => {
+        const container = document.createElement("div");
+        const ChildComponent = (props) => {
+            return () => jsx("div", { children: String(props.count) });
+        };
+        const ParentComponent = () => {
+            const state = createState({ value: 5 });
+            return () => jsx("div", {
+                children: [
+                    jsx(ChildComponent, { count: state.value }),
+                    jsx("button", {
+                        onclick: () => (state.value = 10),
+                        children: "Update",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        expect(container.children[0].children[0].textContent).toBe("5");
+        // Trigger update
+        container.querySelector("button").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].children[0].textContent).toBe("10");
+    });
+    it("should correctly update props in nested components with state changes", async () => {
+        const container = document.createElement("div");
+        const ChildComponent = (props) => {
+            return () => jsx("div", { children: `${props.message}: ${props.count}` });
+        };
+        const ParentComponent = () => {
+            const state = createState({ count: 0 });
+            return () => jsx("div", {
+                children: [
+                    jsx(ChildComponent, { message: "Count", count: state.count }),
+                    jsx("button", {
+                        onclick: () => state.count++,
+                        children: "Increment",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        // Check initial state
+        const childDiv = container.querySelector(":scope > div > div");
+        expect(childDiv.textContent).toBe("Count: 0");
+        // Simulate button click
+        const button = container.querySelector("button");
+        button.click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Check updated state - THIS is where the bug would show
+        // If old props are used instead of new props, this will fail
+        expect(childDiv.textContent).toBe("Count: 1");
+    });
+    it("should pass updated object props to nested components", async () => {
+        const container = document.createElement("div");
+        const ChildComponent = (props) => {
+            return () => jsx("div", { children: `${props.user.name} - ${props.user.age}` });
+        };
+        const ParentComponent = () => {
+            const state = createState({
+                userData: { name: "Alice", age: 25 },
+            });
+            return () => jsx("div", {
+                children: [
+                    jsx(ChildComponent, { user: state.userData }),
+                    jsx("button", {
+                        onclick: () => {
+                            state.userData.name = "Bob";
+                            state.userData.age = 30;
+                        },
+                        children: "Update",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        expect(container.children[0].children[0].textContent).toBe("Alice - 25");
+        // Trigger update
+        container.querySelector("button").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].children[0].textContent).toBe("Bob - 30");
+    });
+    it("should correctly update props in deeply nested components on state change", async () => {
+        const container = document.createElement("div");
+        const DeepChild = (props) => {
+            return () => jsx("span", { children: String(props.value) });
+        };
+        const MiddleChild = (props) => {
+            return () => jsx("div", {
+                children: jsx(DeepChild, { value: props.data }),
+            });
+        };
+        const ParentComponent = () => {
+            const state = createState({ value: 100 });
+            return () => jsx("div", {
+                children: [
+                    jsx(MiddleChild, { data: state.value }),
+                    jsx("button", {
+                        onclick: () => (state.value += 50),
+                        children: "Update",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        // Check initial state
+        const span = container.querySelector("span");
+        expect(span.textContent).toBe("100");
+        // Trigger update
+        const button = container.querySelector("button");
+        button.click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // THIS is the critical test - ensures new props propagate correctly
+        expect(span.textContent).toBe("150");
+    });
+    it("should handle multiple nested components receiving different updated props", async () => {
+        const container = document.createElement("div");
+        const ChildA = (props) => {
+            return () => jsx("div", { class: "child-a", children: props.value });
+        };
+        const ChildB = (props) => {
+            return () => jsx("div", { class: "child-b", children: props.value });
+        };
+        const ParentComponent = () => {
+            const state = createState({ valueA: "A1", valueB: "B1" });
+            return () => jsx("div", {
+                children: [
+                    jsx(ChildA, { value: state.valueA }),
+                    jsx(ChildB, { value: state.valueB }),
+                    jsx("button", {
+                        class: "btn-a",
+                        onclick: () => (state.valueA = "A2"),
+                        children: "Update A",
+                    }),
+                    jsx("button", {
+                        class: "btn-b",
+                        onclick: () => (state.valueB = "B2"),
+                        children: "Update B",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        const childA = container.querySelector(".child-a");
+        const childB = container.querySelector(".child-b");
+        expect(childA.textContent).toBe("A1");
+        expect(childB.textContent).toBe("B1");
+        // Update only A
+        container.querySelector(".btn-a").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(childA.textContent).toBe("A2");
+        expect(childB.textContent).toBe("B1"); // B should remain unchanged
+        // Update only B
+        container.querySelector(".btn-b").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(childA.textContent).toBe("A2"); // A should remain unchanged
+        expect(childB.textContent).toBe("B2");
+    });
+    it("should pass array of props to nested components and update correctly", async () => {
+        const container = document.createElement("div");
+        const ItemComponent = (props) => {
+            return () => jsx("li", { children: `${props.index}: ${props.item}` });
+        };
+        const ListComponent = (props) => {
+            return () => jsx("ul", {
+                children: props.items.map((item, index) => jsx(ItemComponent, { item, index, key: index })),
+            });
+        };
+        const ParentComponent = () => {
+            const state = createState({ items: ["apple", "banana"] });
+            return () => jsx("div", {
+                children: [
+                    jsx(ListComponent, { items: state.items }),
+                    jsx("button", {
+                        onclick: () => state.items.push("cherry"),
+                        children: "Add",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        const ul = container.querySelector("ul");
+        expect(ul.children.length).toBe(2);
+        expect(ul.children[0].textContent).toBe("0: apple");
+        expect(ul.children[1].textContent).toBe("1: banana");
+        // Add item
+        container.querySelector("button").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ul.children.length).toBe(3);
+        expect(ul.children[2].textContent).toBe("2: cherry");
+    });
+    it("should maintain correct prop values when sibling components update", async () => {
+        const container = document.createElement("div");
+        const DisplayComponent = (props) => {
+            return () => jsx("div", {
+                class: props.label.toLowerCase().replace(/\s/g, "-"),
+                children: `${props.label}: ${props.value}`,
+            });
+        };
+        const ParentComponent = () => {
+            const state = createState({ countA: 0, countB: 100 });
+            return () => jsx("div", {
+                children: [
+                    jsx(DisplayComponent, { label: "Counter A", value: state.countA }),
+                    jsx(DisplayComponent, { label: "Counter B", value: state.countB }),
+                    jsx("button", {
+                        class: "update-a",
+                        onclick: () => state.countA++,
+                        children: "Inc A",
+                    }),
+                ],
+            });
+        };
+        render(jsx(ParentComponent, {}), container);
+        const displayA = container.querySelector(".counter-a");
+        const displayB = container.querySelector(".counter-b");
+        // Update A
+        container.querySelector(".update-a").click();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Ensure A updated and B kept its value (didn't get stale/wrong props)
+        expect(displayA?.textContent).toContain("1");
+        expect(displayB?.textContent).toContain("100");
     });
 });

package/dist/tests/component.state.test.js

@@ -11,7 +11,7 @@ describe("Component State", () => {
         render(jsx(MyComponent, {}), container);
         expect(container.children[0].textContent).toBe("0");
     });
-    it("should update state when value changes", () => {
+    it("should update state when value changes", async () => {
         const container = document.createElement("div");
         let stateFn;
         const MyComponent = () => {
@@ -20,9 +20,10 @@ describe("Component State", () => {
             return () => jsx("div", { children: String(state.count) });
         };
         render(jsx(MyComponent, {}), container);
+        expect(container.children[0].textContent).toBe("0");
         stateFn.count = 5;
-        // After state update, component should re-render
-        // The implementation will handle this
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].textContent).toBe("5");
     });
     it("should support multiple state values", () => {
         const container = document.createElement("div");
@@ -40,7 +41,7 @@ describe("Component State", () => {
         expect(div.children[0].textContent).toBe("0");
         expect(div.children[1].textContent).toBe("John");
     });
-    it("should support incremental state updates", () => {
+    it("should support incremental state updates", async () => {
         const container = document.createElement("div");
         let stateFn;
         const MyComponent = () => {
@@ -49,11 +50,12 @@ describe("Component State", () => {
             return () => jsx("div", { children: String(state.count) });
         };
         render(jsx(MyComponent, {}), container);
+        expect(container.children[0].textContent).toBe("0");
         stateFn.count = stateFn.count + 1;
-        // After state update, component should re-render
-        // The implementation will handle this
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].textContent).toBe("1");
     });
-    it("should preserve state between re-renders", () => {
+    it("should preserve state between re-renders", async () => {
         const container = document.createElement("div");
         let stateFn;
         const MyComponent = () => {
@@ -62,11 +64,12 @@ describe("Component State", () => {
             return () => jsx("div", { children: String(state.count) });
         };
         render(jsx(MyComponent, {}), container);
+        expect(container.children[0].textContent).toBe("0");
         stateFn.count = 1;
         stateFn.count = 2;
         stateFn.count = 3;
-        // State should be preserved across multiple updates
-        // The implementation will handle this
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].textContent).toBe("3");
     });
     it("should support nested objects as state", () => {
         const container = document.createElement("div");
@@ -94,7 +97,7 @@ describe("Component State", () => {
         expect(ul.children[1].textContent).toBe("2");
         expect(ul.children[2].textContent).toBe("3");
     });
-    it("should update nested state properties", () => {
+    it("should update nested state properties", async () => {
         const container = document.createElement("div");
         let stateFn;
         const MyComponent = () => {
@@ -108,10 +111,10 @@ describe("Component State", () => {
         expect(container.children[0].textContent).toBe("Alice is 25");
         stateFn.user.name = "Bob";
         stateFn.user.age = 30;
-        // After nested state update, component should re-render
-        // The implementation will handle this
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(container.children[0].textContent).toBe("Bob is 30");
     });
-    it("should support array mutations", () => {
+    it("should support array mutations", async () => {
         const container = document.createElement("div");
         let stateFn;
         const MyComponent = () => {
@@ -122,8 +125,11 @@ describe("Component State", () => {
             });
         };
         render(jsx(MyComponent, {}), container);
+        const ul = container.children[0];
+        expect(ul.children).toHaveLength(3);
         stateFn.items.push(4);
-        // After array mutation, component should re-render
-        // The implementation will handle this
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ul.children).toHaveLength(4);
+        expect(ul.children[3].textContent).toBe("4");
     });
 });

package/dist/tests/createState.test.js

@@ -27,7 +27,7 @@ describe("createState", () => {
         state.items.push(4);
         expect(state.items).toEqual([1, 2, 3, 4]);
     });
-    it("should track property access in observers", () => {
+    it("should track property access in observers", async () => {
         const state = createState({ count: 0 });
         let renderCount = 0;
         const observer = new Observer(() => {
@@ -42,13 +42,9 @@ describe("createState", () => {
         const value = state.count; // Track
         dispose2(); // Stop observing, subscriptions are now active
         state.count = 1;
-        // Wait for microtask
-        return new Promise((resolve) => {
-            queueMicrotask(() => {
-                expect(renderCount).toBeGreaterThan(0);
-                resolve(undefined);
-            });
-        });
+        // Wait for microtasks to complete
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(renderCount).toBeGreaterThan(0);
     });
     it("should handle property deletion", () => {
         const state = createState({ count: 0, temp: "value" });
@@ -67,7 +63,7 @@ describe("createState", () => {
         const state = createState({ [sym]: "value" });
         expect(state[sym]).toBe("value");
     });
-    it("should notify observers only on actual changes", () => {
+    it("should notify observers only on actual changes", async () => {
         const state = createState({ count: 0 });
         let notifyCount = 0;
         const observer = new Observer(() => {
@@ -78,13 +74,9 @@ describe("createState", () => {
         dispose();
         state.count = 0; // Same value - should still notify per current implementation
         state.count = 0;
-        return new Promise((resolve) => {
-            queueMicrotask(() => {
-                // The implementation notifies even for same value, except for optimization cases
-                observer.dispose();
-                resolve(undefined);
-            });
-        });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // The implementation notifies even for same value, except for optimization cases
+        observer.dispose();
     });
     it("should handle deeply nested objects", () => {
         const state = createState({

package/dist/tests/observation.test.js

@@ -39,26 +39,6 @@ describe("Signal", () => {
     });
 });
 describe("Observer", () => {
-    it("should queue notifications in microtasks", async () => {
-        let callCount = 0;
-        const observer = new Observer(() => {
-            callCount++;
-        });
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        // Trigger multiple notifications
-        signal.notify();
-        signal.notify();
-        signal.notify();
-        // Should not be called synchronously
-        expect(callCount).toBe(0);
-        // Wait for microtask
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        // Should be called only once due to queuing
-        expect(callCount).toBe(1);
-    });
     it("should track signals during observation", () => {
         const callback = vi.fn();
         const observer = new Observer(callback);
@@ -130,21 +110,4 @@ describe("Observer", () => {
         dispose1();
         expect(getCurrentObserver()).toBeUndefined();
     });
-    it("should prevent duplicate notifications while queued", async () => {
-        let callCount = 0;
-        const observer = new Observer(() => {
-            callCount++;
-        });
-        const signal = new Signal();
-        const dispose = observer.observe();
-        observer.subscribeSignal(signal);
-        dispose();
-        // Rapid-fire notifications
-        for (let i = 0; i < 100; i++) {
-            signal.notify();
-        }
-        await new Promise((resolve) => queueMicrotask(() => resolve()));
-        // Should only be called once
-        expect(callCount).toBe(1);
-    });
 });

package/dist/vdom/ComponentVNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ComponentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,MAAM,GACN,IAAI,GACJ,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,IACjC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,iBAAiB,CAAC,GACvC,CAAC,MAAM,MAAM,iBAAiB,CAAC,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAKF,wBAAgB,mBAAmB,sBAYlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAYrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAYvC;AAED,qBAAa,cAAe,SAAQ,aAAa;IAC/C,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IAEb,QAAQ,EAAE,KAAK,EAAE,CAAM;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;gBAE3B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAWd,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IAuH7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}
+{"version":3,"file":"ComponentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ComponentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,MAAM,GACN,IAAI,GACJ,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,IACjC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,iBAAiB,CAAC,GACvC,CAAC,MAAM,MAAM,iBAAiB,CAAC,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAKF,wBAAgB,mBAAmB,sBAYlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAYrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAYvC;AAED,qBAAa,cAAe,SAAQ,aAAa;IAC/C,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IAEb,QAAQ,EAAE,KAAK,EAAE,CAAM;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;gBAE3B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAWd,QAAQ,IAAI,IAAI;IAGhB,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IAyI7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -78,28 +78,38 @@ export class ComponentVNode extends AbstractVNode {
             }
             return normalizeChildren(renderResult);
         };
+        let isObserverQueued = false;
         const instance = (this.instance = {
             parent,
             contexts: null,
             onCleanups: [],
             onMounts: [],
             observer: new Observer(() => {
-                this.root?.setAsCurrent();
-                const newChildren = executeRender();
-                const prevChildren = this.children;
-                this.children = this.patchChildren(newChildren);
-                // Typically components return a single element, which does
-                // not require the parent to apply elements to the DOM again
-                const canSelfUpdate = prevChildren.length === 1 &&
-                    this.children.length === 1 &&
-                    prevChildren[0] instanceof ElementVNode &&
-                    this.children[0] instanceof ElementVNode &&
-                    this.canPatch(prevChildren[0], this.children[0]);
-                if (!canSelfUpdate) {
-                    this.parent?.rerender();
+                if (isObserverQueued) {
+                    return;
                 }
-                this.root?.flushLifecycle();
-                this.root?.clearCurrent();
+                isObserverQueued = true;
+                this.root?.queueObserver(() => {
+                    if (instance.observer.isDisposed) {
+                        return;
+                    }
+                    isObserverQueued = false;
+                    this.root?.setAsCurrent();
+                    const newChildren = executeRender();
+                    const prevChildren = this.children;
+                    this.children = this.patchChildren(newChildren);
+                    // Typically components return a single element, which does
+                    // not require the parent to apply elements to the DOM again
+                    const canSelfUpdate = prevChildren.length === 1 &&
+                        this.children.length === 1 &&
+                        prevChildren[0] instanceof ElementVNode &&
+                        this.children[0] instanceof ElementVNode &&
+                        this.canPatch(prevChildren[0], this.children[0]);
+                    if (!canSelfUpdate) {
+                        this.parent?.rerender();
+                    }
+                    this.root?.clearCurrent();
+                });
             }),
             reactiveProps: createReactiveProps(this.props),
             get error() {
@@ -164,7 +174,7 @@ export class ComponentVNode extends AbstractVNode {
         this.root?.setAsCurrent();
         this.root?.pushComponent(this.instance);
         for (const prop in newNode.props) {
-            this.instance.reactiveProps[prop] = this.props[prop];
+            this.instance.reactiveProps[prop] = newNode.props[prop];
         }
         this.root?.popComponent();
         this.root?.clearCurrent();