rask-ui 0.1.1 → 0.2.1

package/dist/integration.test.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
+import { describe, it, expect, vi } from "vitest";
+import { onCleanup, onMount } from "./vdom/ComponentVNode";
+import { render } from "./vdom";
+import { createState } from "./createState";
+import { createRef } from "./createRef";
+import { createContext } from "./createContext";
+import { ErrorBoundary } from "./error";
+describe("Integration Tests", () => {
+    it("should render a simple component", () => {
+        function App() {
+            return () => _jsx("div", { children: "Hello World" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(App, {}), container);
+        // After patch, container is replaced, so check body instead
+        expect(document.body.textContent).toContain("Hello World");
+    });
+    it("should handle reactive state updates", async () => {
+        function Counter() {
+            const state = createState({ count: 0 });
+            return () => (_jsxs("div", { children: [_jsxs("span", { children: ["Count: ", state.count] }), _jsx("button", { onClick: () => state.count++, children: "Increment" })] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Counter, {}), container);
+        expect(document.body.textContent).toContain("Count: 0");
+        // Simulate click
+        const button = document.querySelector("button");
+        button?.click();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(document.body.textContent).toContain("Count: 1");
+    });
+    it("should work with refs", async () => {
+        function App() {
+            const ref = createRef();
+            onMount(() => {
+                expect(ref.current).not.toBeNull();
+                expect(ref.current?.tagName).toBe("DIV");
+            });
+            return () => _jsx("div", { ref: ref, children: "Test" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(App, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+    it("should handle context", () => {
+        const ThemeContext = createContext();
+        function Child() {
+            const theme = ThemeContext.get();
+            return () => _jsx("div", { class: "child", children: theme.theme });
+        }
+        function Parent() {
+            ThemeContext.inject({ theme: "dark" });
+            return () => _jsx(Child, {});
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Parent, {}), container);
+        expect(document.body.textContent).toContain("dark");
+    });
+    it("should handle error boundaries", async () => {
+        function ThrowingChild() {
+            return () => {
+                throw new Error("Test error");
+            };
+        }
+        function App() {
+            return () => (_jsx(ErrorBoundary, { error: (error) => _jsxs("div", { class: "error", children: ["Error: ", String(error)] }), children: _jsx(ThrowingChild, {}) }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(App, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        const errorDiv = document.querySelector(".error");
+        expect(errorDiv).not.toBeNull();
+        expect(errorDiv?.textContent).toContain("Test error");
+    });
+    it("should call onMount and onCleanup", async () => {
+        const mountFn = vi.fn();
+        const cleanupFn = vi.fn();
+        let stateFn;
+        function Component() {
+            onMount(mountFn);
+            onCleanup(cleanupFn);
+            return () => _jsx("div", { children: "Test" });
+        }
+        function App() {
+            const state = createState({ show: true });
+            stateFn = state;
+            return () => (state.show ? _jsx(Component, {}) : _jsx("div", { children: "Empty" }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(App, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mountFn).toHaveBeenCalledTimes(1);
+        expect(cleanupFn).not.toHaveBeenCalled();
+        // Unmount by toggling state to render something else
+        stateFn.show = false;
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(cleanupFn).toHaveBeenCalledTimes(1);
+    });
+    it("should handle nested components", () => {
+        function GrandChild() {
+            return () => _jsx("span", { children: "GrandChild" });
+        }
+        function Child() {
+            return () => (_jsxs("div", { children: ["Child ", _jsx(GrandChild, {})] }));
+        }
+        function Parent() {
+            return () => (_jsxs("div", { children: ["Parent ", _jsx(Child, {})] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(Parent, {}), container);
+        expect(document.body.textContent).toContain("Parent");
+        expect(document.body.textContent).toContain("Child");
+        expect(document.body.textContent).toContain("GrandChild");
+    });
+    it("should handle conditional rendering", async () => {
+        function App() {
+            const state = createState({ show: true });
+            return () => (_jsxs("div", { children: [_jsx("button", { onClick: () => (state.show = !state.show), children: "Toggle" }), state.show ? _jsx("div", { class: "content", children: "Content" }) : null] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(App, {}), container);
+        // Wait for initial render
+        await new Promise((resolve) => setTimeout(resolve, 5));
+        expect(document.querySelector(".content")).not.toBeNull();
+        const button = document.querySelector("button");
+        button?.click();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(document.querySelector(".content")).toBeNull();
+    });
+    it("should handle list rendering", async () => {
+        function TodoList() {
+            const state = createState({ items: ["Item 1", "Item 2"] });
+            return () => (_jsxs("div", { children: [_jsx("button", { onClick: () => {
+                            state.items.push(`Item ${state.items.length + 1}`);
+                        }, children: "Add" }), _jsx("ul", { children: state.items.map((item) => (_jsx("li", { children: item }))) })] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        render(_jsx(TodoList, {}), container);
+        expect(document.querySelectorAll("li").length).toBe(2);
+        const button = document.querySelector("button");
+        button?.click();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(document.querySelectorAll("li").length).toBe(3);
+    });
+});

package/dist/jsx-dev-runtime.d.ts

@@ -1,4 +1,4 @@
-export { jsx, jsxs, Fragment, FragmentSymbol } from './jsx-runtime';
-export type { JSX } from './jsx-runtime';
-export { jsx as jsxDEV } from './jsx-runtime';
+export { jsx, jsxs, Fragment } from "./jsx-runtime";
+export type { JSX } from "./jsx-runtime";
+export { jsx as jsxDEV } from "./vdom";
 //# sourceMappingURL=jsx-dev-runtime.d.ts.map

package/dist/jsx-dev-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-dev-runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,EAAE,GAAG,IAAI,MAAM,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"jsx-dev-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-dev-runtime.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,EAAE,GAAG,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC"}

package/dist/jsx-dev-runtime.js

@@ -1,5 +1,5 @@
 // JSX dev runtime - adds jsxDEV for development mode
-export { jsx, jsxs, Fragment, FragmentSymbol } from './jsx-runtime';
+export { jsx, jsxs, Fragment } from "./jsx-runtime";
 // In development mode, TypeScript uses jsxDEV instead of jsx
 // We just alias it to jsx since we don't need the extra dev-mode params
-export { jsx as jsxDEV } from './jsx-runtime';
+export { jsx as jsxDEV } from "./vdom";

package/dist/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
 import type { JSXInternal } from "./jsx";
-export declare const FragmentSymbol: unique symbol;
+export { Fragment } from "./vdom/FragmentVNode";
 export declare function jsx(type: string, props: JSXInternal.HTMLAttributes & JSXInternal.SVGAttributes & Record<string, any>, key?: string): any;
 export declare function jsx<P>(type: (props: P) => any, props: P & {
     children?: any;
@@ -8,8 +8,5 @@ export declare function jsxs(type: string, props: JSXInternal.HTMLAttributes & J
 export declare function jsxs<P>(type: (props: P) => any, props: P & {
     children?: any[];
 }, key?: string): any;
-export declare function Fragment(props?: {
-    children?: any;
-}): any;
 export type { JSXInternal as JSX } from "./jsx";
 //# sourceMappingURL=jsx-runtime.d.ts.map

package/dist/jsx-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,eAAO,MAAM,cAAc,eAA8C,CAAC;AAE1E,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,WAAW,CAAC,cAAc,GAC/B,WAAW,CAAC,aAAa,GACzB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrB,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AACP,wBAAgB,GAAG,CAAC,CAAC,EACnB,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EACvB,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,EAC7B,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AAaP,wBAAgB,IAAI,CAClB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,WAAW,CAAC,cAAc,GAC/B,WAAW,CAAC,aAAa,GACzB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrB,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AACP,wBAAgB,IAAI,CAAC,CAAC,EACpB,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EACvB,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,EAC/B,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AAKP,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,GAAG,CAExD;AAKD,YAAY,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,WAAW,CAAC,cAAc,GAC/B,WAAW,CAAC,aAAa,GACzB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrB,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AACP,wBAAgB,GAAG,CAAC,CAAC,EACnB,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EACvB,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,EAC7B,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AAKP,wBAAgB,IAAI,CAClB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,WAAW,CAAC,cAAc,GAC/B,WAAW,CAAC,aAAa,GACzB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrB,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AACP,wBAAgB,IAAI,CAAC,CAAC,EACpB,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,EACvB,KAAK,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,EAC/B,GAAG,CAAC,EAAE,MAAM,GACX,GAAG,CAAC;AAMP,YAAY,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/jsx-runtime.js

@@ -1,19 +1,8 @@
-import { jsx as internalJsx } from "./render";
-export const FragmentSymbol = Symbol.for("superfine-components.Fragment");
+import { jsx as internalJsx } from "./vdom";
+export { Fragment } from "./vdom/FragmentVNode";
 export function jsx(type, props, key) {
-    const { children, ...restProps } = props;
-    const finalProps = key !== undefined ? { ...restProps, key } : restProps;
-    const finalChildren = Array.isArray(children)
-        ? children
-        : children === undefined
-            ? []
-            : [children];
-    return internalJsx(type, finalProps, finalChildren);
+    return internalJsx(type, props, key);
 }
 export function jsxs(type, props, key) {
     return jsx(type, props, key);
 }
-export function Fragment(props) {
-    return props?.children;
-}
-Fragment.$$typeof = FragmentSymbol;

package/dist/observation.d.ts

@@ -5,6 +5,7 @@ export declare class Signal {
     notify(): void;
 }
 export declare class Observer {
+    private _isDisposed;
     private signalDisposers;
     private clearSignals;
     private onNotify;

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,eAAe,CAAyB;IAChD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAS;gBACb,QAAQ,EAAE,MAAM,IAAI;IAchC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAGR"}
+{"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"}

package/dist/observation.js

@@ -15,6 +15,7 @@ export class Signal {
     }
 }
 export class Observer {
+    _isDisposed = false;
     signalDisposers = new Set();
     clearSignals() {
         this.signalDisposers.forEach((dispose) => dispose());
@@ -29,6 +30,9 @@ export class Observer {
             }
             queueMicrotask(() => {
                 this.isQueued = false;
+                if (this._isDisposed) {
+                    return;
+                }
                 onNotify();
             });
             this.isQueued = true;
@@ -46,5 +50,6 @@ export class Observer {
     }
     dispose() {
         this.clearSignals();
+        this._isDisposed = true;
     }
 }

package/dist/test-setup.d.ts

@@ -1,4 +1,4 @@
-import type { VNode } from 'snabbdom';
+import { VNode } from "./vdom/types";
 /**
  * Test helper to render a component and provide easy cleanup
  *
@@ -9,8 +9,8 @@ import type { VNode } from 'snabbdom';
  */
 export declare function renderComponent(vnode: VNode): {
     container: HTMLElement;
-    vnode: VNode;
+    vnode: import("./vdom/RootVNode").RootVNode;
     unmount: () => void;
-    rerender: (newVnode: VNode) => VNode;
+    rerender: (newVnode: VNode) => void;
 };
 //# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAUtC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK;;;;yBAmBnB,KAAK;EAK7B"}
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAUrC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK;;;;yBAmBnB,KAAK;EAI7B"}

package/dist/test-setup.js

@@ -1,11 +1,11 @@
 // Test setup file for vitest
-import { afterEach } from 'vitest';
-import { render, patch } from './render';
+import { afterEach } from "vitest";
+import { render } from "./vdom";
 // Clean up after each test
 afterEach(() => {
-    document.body.innerHTML = '';
+    document.body.innerHTML = "";
     // Remove any style tags added by render function
-    document.querySelectorAll('style').forEach(style => style.remove());
+    document.querySelectorAll("style").forEach((style) => style.remove());
 });
 /**
  * Test helper to render a component and provide easy cleanup
@@ -16,7 +16,7 @@ afterEach(() => {
  * unmount();
  */
 export function renderComponent(vnode) {
-    const container = document.createElement('div');
+    const container = document.createElement("div");
     document.body.appendChild(container);
     let currentVnode = render(vnode, container);
     const actualElement = currentVnode.elm;
@@ -33,8 +33,7 @@ export function renderComponent(vnode) {
         },
         // Re-render with new vnode
         rerender: (newVnode) => {
-            currentVnode = patch(currentVnode, newVnode);
-            return currentVnode;
-        }
+            currentVnode.patch(newVnode);
+        },
     };
 }

package/dist/tests/class.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=class.test.d.ts.map

package/dist/tests/class.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class.test.d.ts","sourceRoot":"","sources":["../../src/tests/class.test.ts"],"names":[],"mappings":""}

package/dist/tests/class.test.js

@@ -0,0 +1,185 @@
+import { describe, it, expect } from "vitest";
+import { jsx, render } from "../vdom";
+import { createState } from "../createState";
+describe("Class Property Support", () => {
+    it("should map string class to className", () => {
+        const container = document.createElement("div");
+        render(jsx("div", { class: "test-class" }), container);
+        const div = container.querySelector("div");
+        expect(div?.className).toBe("test-class");
+    });
+    it("should handle multiple classes as string", () => {
+        const container = document.createElement("div");
+        render(jsx("div", { class: "class-1 class-2 class-3" }), container);
+        const div = container.querySelector("div");
+        expect(div?.className).toBe("class-1 class-2 class-3");
+    });
+    it("should handle object notation with true values", () => {
+        const container = document.createElement("div");
+        render(jsx("div", {
+            class: {
+                active: true,
+                visible: true,
+                hidden: false,
+            },
+        }), container);
+        const div = container.querySelector("div");
+        expect(div?.classList.contains("active")).toBe(true);
+        expect(div?.classList.contains("visible")).toBe(true);
+        expect(div?.classList.contains("hidden")).toBe(false);
+    });
+    it("should handle mixed object notation", () => {
+        const container = document.createElement("div");
+        render(jsx("div", {
+            class: {
+                "class-1": true,
+                "class-2": false,
+                "class-3": true,
+                "class-4": false,
+            },
+        }), container);
+        const div = container.querySelector("div");
+        expect(div?.className).toBe("class-1 class-3");
+    });
+    it("should handle empty object notation", () => {
+        const container = document.createElement("div");
+        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");
+        render(jsx("div", {
+            class: {
+                "class-1": false,
+                "class-2": false,
+            },
+        }), 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");
+        let stateFn;
+        const App = () => {
+            const state = createState({ isActive: true, isVisible: false });
+            stateFn = state;
+            return () => jsx("div", {
+                class: {
+                    active: state.isActive,
+                    visible: state.isVisible,
+                },
+            });
+        };
+        render(jsx(App, {}), container);
+        const div = container.querySelector("div");
+        expect(div?.classList.contains("active")).toBe(true);
+        expect(div?.classList.contains("visible")).toBe(false);
+        stateFn.isActive = false;
+        stateFn.isVisible = true;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(div?.classList.contains("active")).toBe(false);
+        expect(div?.classList.contains("visible")).toBe(true);
+    });
+    it("should handle hyphenated class names in object notation", () => {
+        const container = document.createElement("div");
+        render(jsx("div", {
+            class: {
+                "my-custom-class": true,
+                "another-class-name": true,
+                "disabled-class": false,
+            },
+        }), container);
+        const div = container.querySelector("div");
+        expect(div?.classList.contains("my-custom-class")).toBe(true);
+        expect(div?.classList.contains("another-class-name")).toBe(true);
+        expect(div?.classList.contains("disabled-class")).toBe(false);
+    });
+    it("should prefer class over className when both provided", () => {
+        const container = document.createElement("div");
+        render(jsx("div", { class: "from-class", className: "from-className" }), container);
+        const div = container.querySelector("div");
+        // class should take precedence
+        expect(div?.className).toBe("from-class");
+    });
+    it("should work with nested components", () => {
+        const container = document.createElement("div");
+        const Child = () => {
+            return () => jsx("span", { class: "child-class" });
+        };
+        const Parent = () => {
+            return () => jsx("div", {
+                class: "parent-class",
+                children: jsx(Child, {}),
+            });
+        };
+        render(jsx(Parent, {}), container);
+        const parentDiv = container.querySelector("div");
+        const childSpan = container.querySelector("span");
+        expect(parentDiv?.className).toBe("parent-class");
+        expect(childSpan?.className).toBe("child-class");
+    });
+    it("should handle undefined and null class values", () => {
+        const container = document.createElement("div");
+        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");
+        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");
+        stateFn.className = "updated";
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(div?.className).toBe("updated");
+    });
+});

package/dist/tests/complex-rendering.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=complex-rendering.test.d.ts.map

package/dist/tests/complex-rendering.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complex-rendering.test.d.ts","sourceRoot":"","sources":["../../src/tests/complex-rendering.test.ts"],"names":[],"mappings":""}