rask-ui 0.2.0 → 0.2.1

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/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;IAyH7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -164,7 +164,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();

package/dist/vdom/dom-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../src/vdom/dom-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,QAO3B;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAc3D;AAGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,QAQtE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,QAE3E;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,IAAI,QAOrB;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,QAe/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,QAkB3D"}
+{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../src/vdom/dom-utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,IAAI,GAAG,IAAI,EAAE,QAO3B;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAc3D;AAGD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,QAQtE;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,QAE3E;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,GAAG,IAAI,QAOrB;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,QAe/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,QA0B3D"}

package/dist/vdom/dom-utils.js

@@ -59,16 +59,26 @@ export function isEventProp(name) {
 }
 export function setElementClass(elm, value) {
     if (value === null || value === undefined) {
-        elm.className = "";
+        elm.removeAttribute("class");
         return;
     }
     if (typeof value === "string") {
-        elm.className = value;
+        if (value === "") {
+            elm.removeAttribute("class");
+        }
+        else {
+            elm.className = value;
+        }
         return;
     }
     // Handle object notation: { "class-name": true, "other-class": false }
     const classes = Object.keys(value)
         .filter((key) => value[key])
         .join(" ");
-    elm.className = classes;
+    if (classes === "") {
+        elm.removeAttribute("class");
+    }
+    else {
+        elm.className = classes;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,10 +19,11 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
-    "build": "tsc && cp src/jsx.d.ts dist/",
+    "build": "tsc && cp src/jsx.d.ts dist/ && cp ../../README.md .",
     "dev": "tsc --watch",
     "test": "vitest",
     "test:ui": "vitest --ui",