rask-ui 0.1.0 → 0.2.0

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/observation.test.d.ts

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

package/dist/observation.test.d.ts.map

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

package/dist/observation.test.js

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Signal, Observer, getCurrentObserver } from './observation';
+describe('Signal', () => {
+    it('should allow subscribing to notifications', () => {
+        const signal = new Signal();
+        const callback = vi.fn();
+        signal.subscribe(callback);
+        signal.notify();
+        expect(callback).toHaveBeenCalledTimes(1);
+    });
+    it('should return a disposer function', () => {
+        const signal = new Signal();
+        const callback = vi.fn();
+        const dispose = signal.subscribe(callback);
+        dispose();
+        signal.notify();
+        expect(callback).not.toHaveBeenCalled();
+    });
+    it('should handle multiple subscribers', () => {
+        const signal = new Signal();
+        const callback1 = vi.fn();
+        const callback2 = vi.fn();
+        signal.subscribe(callback1);
+        signal.subscribe(callback2);
+        signal.notify();
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(1);
+    });
+    it('should allow unsubscribing individual callbacks', () => {
+        const signal = new Signal();
+        const callback1 = vi.fn();
+        const callback2 = vi.fn();
+        const dispose1 = signal.subscribe(callback1);
+        signal.subscribe(callback2);
+        dispose1();
+        signal.notify();
+        expect(callback1).not.toHaveBeenCalled();
+        expect(callback2).toHaveBeenCalledTimes(1);
+    });
+});
+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);
+        const signal = new Signal();
+        const dispose = observer.observe();
+        observer.subscribeSignal(signal);
+        dispose();
+        signal.notify();
+        return new Promise((resolve) => {
+            queueMicrotask(() => {
+                expect(callback).toHaveBeenCalledTimes(1);
+                resolve(undefined);
+            });
+        });
+    });
+    it('should clear signals when observing again', async () => {
+        let callCount = 0;
+        const observer = new Observer(() => {
+            callCount++;
+        });
+        const signal1 = new Signal();
+        const signal2 = new Signal();
+        // First observation
+        let dispose = observer.observe();
+        observer.subscribeSignal(signal1);
+        dispose();
+        // Second observation - should clear previous signals
+        dispose = observer.observe();
+        observer.subscribeSignal(signal2);
+        dispose();
+        // Notify first signal - should not trigger observer
+        signal1.notify();
+        await new Promise((resolve) => queueMicrotask(() => resolve()));
+        expect(callCount).toBe(0);
+        // Notify second signal - should trigger observer
+        signal2.notify();
+        await new Promise((resolve) => queueMicrotask(() => resolve()));
+        expect(callCount).toBe(1);
+    });
+    it('should dispose of all signal subscriptions', async () => {
+        const callback = vi.fn();
+        const observer = new Observer(callback);
+        const signal = new Signal();
+        const dispose = observer.observe();
+        observer.subscribeSignal(signal);
+        dispose();
+        observer.dispose();
+        signal.notify();
+        await new Promise((resolve) => queueMicrotask(() => resolve()));
+        expect(callback).not.toHaveBeenCalled();
+    });
+    it('should set current observer during observation', () => {
+        const observer = new Observer(() => { });
+        expect(getCurrentObserver()).toBeUndefined();
+        const dispose = observer.observe();
+        expect(getCurrentObserver()).toBe(observer);
+        dispose();
+        expect(getCurrentObserver()).toBeUndefined();
+    });
+    it('should handle nested observations with stack', () => {
+        const observer1 = new Observer(() => { });
+        const observer2 = new Observer(() => { });
+        const dispose1 = observer1.observe();
+        expect(getCurrentObserver()).toBe(observer1);
+        const dispose2 = observer2.observe();
+        expect(getCurrentObserver()).toBe(observer2);
+        dispose2();
+        expect(getCurrentObserver()).toBe(observer1);
+        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/render-test.d.ts

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

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

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

package/dist/render-test.js

@@ -0,0 +1,21 @@
+// Quick test to understand Snabbdom's behavior
+import { patch } from './render';
+import { h } from 'snabbdom';
+import { JSDOM } from 'jsdom';
+const dom = new JSDOM('<!DOCTYPE html><html><body><div id="app"></div></body></html>');
+global.window = dom.window;
+global.document = dom.window.document;
+const container = document.getElementById('app');
+const parent = container.parentElement;
+console.log('Before patch:');
+console.log('Container id:', container.id);
+console.log('Parent children:', parent.children.length);
+console.log('Parent innerHTML:', parent.innerHTML);
+const vnode = h('div', { props: { id: 'app' } }, [h('span', {}, 'Hello')]);
+const result = patch(container, vnode);
+console.log('\nAfter patch:');
+console.log('Result:', result);
+console.log('Result.elm:', result.elm);
+console.log('Parent children:', parent.children.length);
+console.log('Parent innerHTML:', parent.innerHTML);
+console.log('Container still in DOM?:', document.getElementById('app'));

package/dist/render.d.ts

@@ -2,6 +2,6 @@ import { type VNode } from "snabbdom";
 import { type Component } from "./component";
 export declare const patch: (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode;
 export type ChildNode = VNode | string | null | number;
-export declare function render(vnode: VNode, container: HTMLElement): void;
+export declare function render(vnode: VNode, container: HTMLElement): VNode;
 export declare function jsx(type: string | Component<any>, props: Record<string, unknown>, children: ChildNode[]): VNode;
 //# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,KAAK,EAEX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAE9D,eAAO,MAAM,KAAK,uEAOhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,QAK1D;AAED,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,SAAS,EAAE,SA6DtB"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,KAAK,EAEX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAE9D,eAAO,MAAM,KAAK,uEAOhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,SAK1D;AAED,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,SAAS,EAAE,SAyEtB"}

package/dist/render.js

@@ -12,7 +12,7 @@ export function render(vnode, container) {
     const style = document.createElement("style");
     style.innerHTML = "component { display: contents; }";
     document.head.appendChild(style);
-    patch(container, vnode);
+    return patch(container, vnode);
 }
 export function jsx(type, props, children) {
     let flatChildren = children.flat();
@@ -31,6 +31,18 @@ export function jsx(type, props, children) {
                 data.style = props[key];
                 continue;
             }
+            if (key === "class") {
+                // Snabbdom's classModule expects an object like { 'class-name': true }
+                // If it's a string, convert it to the object format
+                const classValue = props[key];
+                if (typeof classValue === 'string') {
+                    data.class = { [classValue]: true };
+                }
+                else {
+                    data.class = classValue;
+                }
+                continue;
+            }
             if (key === "ref") {
                 data.hook = data.hook || {};
                 const existingInsertHook = data.hook?.insert;

package/dist/test-setup.d.ts

@@ -0,0 +1,16 @@
+import { VNode } from "./vdom/types";
+/**
+ * Test helper to render a component and provide easy cleanup
+ *
+ * @example
+ * const { container, unmount } = renderComponent(<MyComponent />);
+ * expect(container.textContent).toBe('hello');
+ * unmount();
+ */
+export declare function renderComponent(vnode: VNode): {
+    container: HTMLElement;
+    vnode: import("./vdom/RootVNode").RootVNode;
+    unmount: () => void;
+    rerender: (newVnode: VNode) => void;
+};
+//# sourceMappingURL=test-setup.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,39 @@
+// Test setup file for vitest
+import { afterEach } from "vitest";
+import { render } from "./vdom";
+// Clean up after each test
+afterEach(() => {
+    document.body.innerHTML = "";
+    // Remove any style tags added by render function
+    document.querySelectorAll("style").forEach((style) => style.remove());
+});
+/**
+ * Test helper to render a component and provide easy cleanup
+ *
+ * @example
+ * const { container, unmount } = renderComponent(<MyComponent />);
+ * expect(container.textContent).toBe('hello');
+ * unmount();
+ */
+export function renderComponent(vnode) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    let currentVnode = render(vnode, container);
+    const actualElement = currentVnode.elm;
+    return {
+        // The actual rendered DOM element (after patch replaces container)
+        container: actualElement,
+        // The vnode returned by render
+        vnode: currentVnode,
+        // Cleanup function
+        unmount: () => {
+            if (actualElement && actualElement.parentNode) {
+                actualElement.parentNode.removeChild(actualElement);
+            }
+        },
+        // Re-render with new vnode
+        rerender: (newVnode) => {
+            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":""}