rask-ui 0.1.0 → 0.2.0

package/dist/createMutation.test.js

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createMutation } from './createMutation';
+describe('createMutation', () => {
+    it('should start in idle state', () => {
+        const mutator = vi.fn(() => Promise.resolve(null));
+        const mutation = createMutation(mutator);
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+        expect(mutation.error).toBeNull();
+        expect(mutator).not.toHaveBeenCalled();
+    });
+    it('should execute mutator when mutate is called', async () => {
+        const mutator = vi.fn((params) => Promise.resolve(params));
+        const mutation = createMutation(mutator);
+        mutation.mutate('test');
+        expect(mutation.isPending).toBe(true);
+        expect(mutation.params).toBe('test');
+        expect(mutator).toHaveBeenCalledWith('test');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+    });
+    it('should handle successful mutations', async () => {
+        const mutator = (params) => Promise.resolve(params);
+        const mutation = createMutation(mutator);
+        mutation.mutate({ id: 1 });
+        expect(mutation.isPending).toBe(true);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.error).toBeNull();
+        expect(mutation.params).toBeNull();
+    });
+    it('should handle mutation errors', async () => {
+        const mutator = (params) => Promise.reject(new Error('Mutation failed'));
+        const mutation = createMutation(mutator);
+        mutation.mutate('test');
+        expect(mutation.isPending).toBe(true);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.error).toContain('Mutation failed');
+        expect(mutation.params).toBeNull();
+    });
+    it('should cancel previous mutation on new mutate call', async () => {
+        let resolveFirst;
+        let resolveSecond;
+        const firstPromise = new Promise((resolve) => {
+            resolveFirst = resolve;
+        });
+        const secondPromise = new Promise((resolve) => {
+            resolveSecond = resolve;
+        });
+        const mutator = vi
+            .fn()
+            .mockReturnValueOnce(firstPromise)
+            .mockReturnValueOnce(secondPromise);
+        const mutation = createMutation(mutator);
+        mutation.mutate('first');
+        expect(mutation.params).toBe('first');
+        // Trigger second mutation before first completes
+        mutation.mutate('second');
+        expect(mutation.params).toBe('second');
+        // Resolve first (should be ignored due to cancellation)
+        resolveFirst('first');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.isPending).toBe(true); // Still pending second
+        // Resolve second
+        resolveSecond('second');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+    });
+    it('should handle rapid successive mutations', async () => {
+        let counter = 0;
+        const mutator = vi.fn(() => Promise.resolve(++counter));
+        const mutation = createMutation(mutator);
+        // Rapid mutations
+        mutation.mutate('1');
+        mutation.mutate('2');
+        mutation.mutate('3');
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        // Only the last mutation should complete
+        expect(mutator).toHaveBeenCalledTimes(3);
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+    });
+    it('should clear error on successful retry', async () => {
+        const mutator = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('First error'))
+            .mockResolvedValueOnce('success');
+        const mutation = createMutation(mutator);
+        mutation.mutate('attempt1');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.error).toContain('First error');
+        mutation.mutate('attempt2');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(mutation.error).toBeNull();
+        expect(mutation.isPending).toBe(false);
+    });
+    it('should handle different parameter types', async () => {
+        const mutator = vi.fn((params) => Promise.resolve(params));
+        const mutation = createMutation(mutator);
+        // Object params
+        mutation.mutate({ id: 1, name: 'test' });
+        expect(mutation.params).toEqual({ id: 1, name: 'test' });
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Array params
+        const mutation2 = createMutation(mutator);
+        mutation2.mutate([1, 2, 3]);
+        expect(mutation2.params).toEqual([1, 2, 3]);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // String params
+        const mutation3 = createMutation(mutator);
+        mutation3.mutate('string');
+        expect(mutation3.params).toBe('string');
+    });
+    it('should convert errors to strings', async () => {
+        const mutator = (params) => Promise.reject('string error');
+        const mutation = createMutation(mutator);
+        mutation.mutate('test');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(typeof mutation.error).toBe('string');
+        expect(mutation.error).toBe('string error');
+    });
+    it('should handle AbortController cancellation correctly', async () => {
+        const abortedPromise = new Promise((_, reject) => {
+            const error = new Error('Aborted');
+            error.name = 'AbortError';
+            setTimeout(() => reject(error), 5);
+        });
+        const successPromise = Promise.resolve('success');
+        const mutator = vi
+            .fn()
+            .mockReturnValueOnce(abortedPromise)
+            .mockReturnValueOnce(successPromise);
+        const mutation = createMutation(mutator);
+        mutation.mutate('first');
+        // Immediately trigger second mutation to abort first
+        mutation.mutate('second');
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.error).toBeNull();
+    });
+    it('should track params during pending state', () => {
+        const mutator = () => new Promise((resolve) => setTimeout(() => resolve(null), 100));
+        const mutation = createMutation(mutator);
+        const params = { id: 123, action: 'update' };
+        mutation.mutate(params);
+        expect(mutation.isPending).toBe(true);
+        expect(mutation.params).toEqual(params);
+    });
+    it('should expose reactive getters', async () => {
+        const mutator = () => Promise.resolve('data');
+        const mutation = createMutation(mutator);
+        // Access getters before mutation
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+        expect(mutation.error).toBeNull();
+        mutation.mutate('test');
+        // Access getters during mutation
+        expect(mutation.isPending).toBe(true);
+        expect(mutation.params).toBe('test');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Access getters after mutation
+        expect(mutation.isPending).toBe(false);
+        expect(mutation.params).toBeNull();
+    });
+});

package/dist/createQuery.d.ts

@@ -14,6 +14,29 @@ type QueryState<T> = {
 export type Query<T> = QueryState<T> & {
     fetch(force?: boolean): void;
 };
+/**
+ * Creates a reactive query that manages data fetching with loading and error states.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity.
+ * Access properties directly in your render function instead.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component() {
+ *   const query = createQuery(() => fetchUsers());
+ *   const { isPending, data, error } = query; // Don't do this!
+ *   return () => <div>{isPending ? "Loading..." : data.length}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly
+ * function Component() {
+ *   const query = createQuery(() => fetchUsers());
+ *   return () => <div>{query.isPending ? "Loading..." : query.data.length}</div>;
+ * }
+ *
+ * @param fetcher - Function that returns a promise with the data to fetch
+ * @returns Reactive query object with isPending, data, error properties and fetch method
+ */
 export declare function createQuery<T>(fetcher: () => Promise<T>): Query<T>;
 export {};
 //# sourceMappingURL=createQuery.d.ts.map

package/dist/createQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createQuery.d.ts","sourceRoot":"","sources":["../src/createQuery.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,CAAC,CAAC,IACb;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACrC,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CA+DlE"}
+{"version":3,"file":"createQuery.d.ts","sourceRoot":"","sources":["../src/createQuery.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,CAAC,CAAC,IACb;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG;IACrC,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CA+DlE"}

package/dist/createQuery.js

@@ -1,4 +1,27 @@
 import { createState } from "./createState";
+/**
+ * Creates a reactive query that manages data fetching with loading and error states.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity.
+ * Access properties directly in your render function instead.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component() {
+ *   const query = createQuery(() => fetchUsers());
+ *   const { isPending, data, error } = query; // Don't do this!
+ *   return () => <div>{isPending ? "Loading..." : data.length}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly
+ * function Component() {
+ *   const query = createQuery(() => fetchUsers());
+ *   return () => <div>{query.isPending ? "Loading..." : query.data.length}</div>;
+ * }
+ *
+ * @param fetcher - Function that returns a promise with the data to fetch
+ * @returns Reactive query object with isPending, data, error properties and fetch method
+ */
 export function createQuery(fetcher) {
     const state = createState({
         isPending: true,

package/dist/createQuery.test.d.ts

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

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

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

package/dist/createQuery.test.js

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createQuery } from './createQuery';
+describe('createQuery', () => {
+    it('should start in pending state and fetch immediately', async () => {
+        const fetcher = vi.fn(() => Promise.resolve('data'));
+        const query = createQuery(fetcher);
+        expect(query.isPending).toBe(true);
+        expect(query.data).toBeNull();
+        expect(query.error).toBeNull();
+        expect(fetcher).toHaveBeenCalledTimes(1);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.isPending).toBe(false);
+        expect(query.data).toBe('data');
+    });
+    it('should resolve to data state on success', async () => {
+        const fetcher = () => Promise.resolve({ id: 1, name: 'Test' });
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.isPending).toBe(false);
+        expect(query.data).toEqual({ id: 1, name: 'Test' });
+        expect(query.error).toBeNull();
+    });
+    it('should resolve to error state on failure', async () => {
+        const fetcher = () => Promise.reject(new Error('Network error'));
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.isPending).toBe(false);
+        expect(query.data).toBeNull();
+        expect(query.error).toContain('Network error');
+    });
+    it('should allow manual refetch', async () => {
+        const fetcher = vi.fn(() => Promise.resolve('data'));
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(fetcher).toHaveBeenCalledTimes(1);
+        query.fetch();
+        expect(query.isPending).toBe(true);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(fetcher).toHaveBeenCalledTimes(2);
+        expect(query.isPending).toBe(false);
+    });
+    it('should retain old data during refetch by default', async () => {
+        const fetcher = vi
+            .fn()
+            .mockResolvedValueOnce('data1')
+            .mockResolvedValueOnce('data2');
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBe('data1');
+        query.fetch();
+        expect(query.isPending).toBe(true);
+        expect(query.data).toBe('data1'); // Old data retained
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBe('data2');
+    });
+    it('should clear old data when force refetch is used', async () => {
+        const fetcher = vi
+            .fn()
+            .mockResolvedValueOnce('data1')
+            .mockResolvedValueOnce('data2');
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBe('data1');
+        query.fetch(true); // Force refresh
+        expect(query.isPending).toBe(true);
+        expect(query.data).toBeNull(); // Old data cleared
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBe('data2');
+    });
+    it('should cancel previous request on new fetch', async () => {
+        let resolveFirst;
+        let resolveSecond;
+        const firstPromise = new Promise((resolve) => {
+            resolveFirst = resolve;
+        });
+        const secondPromise = new Promise((resolve) => {
+            resolveSecond = resolve;
+        });
+        const fetcher = vi
+            .fn()
+            .mockReturnValueOnce(firstPromise)
+            .mockReturnValueOnce(secondPromise);
+        const query = createQuery(fetcher);
+        expect(query.isPending).toBe(true);
+        // Trigger second fetch before first completes
+        query.fetch();
+        // Resolve first (should be ignored due to cancellation)
+        resolveFirst('first');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBeNull(); // First result ignored
+        // Resolve second
+        resolveSecond('second');
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.data).toBe('second');
+    });
+    it('should handle rapid successive fetches', async () => {
+        let counter = 0;
+        const fetcher = vi.fn(() => Promise.resolve(`data-${++counter}`));
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        // Rapid fetches
+        query.fetch();
+        query.fetch();
+        query.fetch();
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        // Only the last fetch should matter
+        expect(fetcher).toHaveBeenCalledTimes(4); // Initial + 3 fetches
+        expect(query.data).toBe('data-4');
+    });
+    it('should cancel on error and allow refetch', async () => {
+        const fetcher = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('First error'))
+            .mockResolvedValueOnce('success');
+        const query = createQuery(fetcher);
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.error).toContain('First error');
+        expect(query.data).toBeNull();
+        query.fetch();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.error).toBeNull();
+        expect(query.data).toBe('success');
+    });
+    it('should handle AbortController cancellation correctly', async () => {
+        const abortedPromise = new Promise((_, reject) => {
+            const error = new Error('Aborted');
+            error.name = 'AbortError';
+            setTimeout(() => reject(error), 5);
+        });
+        const successPromise = Promise.resolve('success');
+        const fetcher = vi
+            .fn()
+            .mockReturnValueOnce(abortedPromise)
+            .mockReturnValueOnce(successPromise);
+        const query = createQuery(fetcher);
+        // Immediately trigger second fetch to abort first
+        query.fetch();
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(query.data).toBe('success');
+        expect(query.error).toBeNull();
+    });
+    it('should expose reactive getters', async () => {
+        const fetcher = () => Promise.resolve('data');
+        const query = createQuery(fetcher);
+        // Access getters
+        const pending1 = query.isPending;
+        const data1 = query.data;
+        const error1 = query.error;
+        expect(pending1).toBe(true);
+        expect(data1).toBeNull();
+        expect(error1).toBeNull();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(query.isPending).toBe(false);
+        expect(query.data).toBe('data');
+    });
+});

package/dist/createRef.test.d.ts

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

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

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

package/dist/createRef.test.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "./jsx-runtime";
+import { describe, it, expect } from "vitest";
+import { createRef } from "./createRef";
+import { render } from "./vdom";
+describe("createRef", () => {
+    it("should create a ref with null initial value", () => {
+        const ref = createRef();
+        expect(ref.current).toBeNull();
+    });
+    it("should be callable as a function", () => {
+        const ref = createRef();
+        expect(typeof ref).toBe("function");
+    });
+    it("should update current when called with a node", () => {
+        const ref = createRef();
+        const element = document.createElement("div");
+        ref(element);
+        expect(ref.current).toBe(element);
+    });
+    it("should update current when called with null", () => {
+        const ref = createRef();
+        const element = document.createElement("div");
+        ref(element);
+        expect(ref.current).toBe(element);
+        ref(null);
+        expect(ref.current).toBeNull();
+    });
+    it("should work with JSX ref attribute", async () => {
+        const ref = createRef();
+        function TestComponent() {
+            return () => _jsx("div", { ref: ref, children: "Hello" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(_jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ref.current).not.toBeNull();
+        expect(ref.current?.tagName).toBe("DIV");
+        expect(ref.current?.textContent).toBe("Hello");
+        document.body.removeChild(vnode.elm);
+    });
+    it("should handle multiple ref updates", () => {
+        const ref = createRef();
+        const div = document.createElement("div");
+        const span = document.createElement("span");
+        ref(div);
+        expect(ref.current).toBe(div);
+        ref(span);
+        expect(ref.current).toBe(span);
+        ref(null);
+        expect(ref.current).toBeNull();
+    });
+    it("should work with different element types", async () => {
+        const inputRef = createRef();
+        const buttonRef = createRef();
+        function TestComponent() {
+            return () => (_jsxs("div", { children: [_jsx("input", { ref: inputRef, type: "text" }), _jsx("button", { ref: buttonRef, children: "Click" })] }));
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(_jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(inputRef.current?.tagName).toBe("INPUT");
+        expect(buttonRef.current?.tagName).toBe("BUTTON");
+        document.body.removeChild(vnode.elm);
+    });
+    it("should allow accessing DOM properties", async () => {
+        const ref = createRef();
+        function TestComponent() {
+            return () => _jsx("input", { ref: ref, type: "text", value: "test" });
+        }
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const vnode = render(_jsx(TestComponent, {}), container);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(ref.current?.value).toBe("test");
+        expect(ref.current?.type).toBe("text");
+        document.body.removeChild(vnode.elm);
+    });
+});

package/dist/createState.d.ts

@@ -1,2 +1,26 @@
+/**
+ * Creates a reactive state object that tracks property access and notifies observers on changes.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining proxy access. This is the same rule
+ * as Solid.js signals.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   const { count, name } = state; // Don't do this!
+ *   return () => <div>{count} {name}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   return () => <div>{state.count} {state.name}</div>; // Reactive!
+ * }
+ *
+ * @param state - The initial state object to make reactive
+ * @returns A reactive proxy of the state object
+ */
 export declare function createState<T extends object>(state: T): T;
 //# sourceMappingURL=createState.d.ts.map

package/dist/createState.d.ts.map

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

package/dist/createState.js

@@ -1,4 +1,28 @@
 import { getCurrentObserver, Signal } from "./observation";
+/**
+ * Creates a reactive state object that tracks property access and notifies observers on changes.
+ *
+ * @warning **Do not destructure the returned reactive object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining proxy access. This is the same rule
+ * as Solid.js signals.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   const { count, name } = state; // Don't do this!
+ *   return () => <div>{count} {name}</div>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component(props) {
+ *   const state = createState({ count: 0, name: "foo" });
+ *   return () => <div>{state.count} {state.name}</div>; // Reactive!
+ * }
+ *
+ * @param state - The initial state object to make reactive
+ * @returns A reactive proxy of the state object
+ */
 export function createState(state) {
     return getProxy(state);
 }

package/dist/createState.test.d.ts

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

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

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

package/dist/createState.test.js

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { createState } from './createState';
+import { Observer } from './observation';
+describe('createState', () => {
+    it('should create a reactive proxy from an object', () => {
+        const state = createState({ count: 0 });
+        expect(state.count).toBe(0);
+    });
+    it('should allow mutations', () => {
+        const state = createState({ count: 0 });
+        state.count = 5;
+        expect(state.count).toBe(5);
+    });
+    it('should return the same proxy for the same object', () => {
+        const obj = { count: 0 };
+        const proxy1 = createState(obj);
+        const proxy2 = createState(obj);
+        expect(proxy1).toBe(proxy2);
+    });
+    it('should create nested proxies for nested objects', () => {
+        const state = createState({ user: { name: 'Alice', age: 30 } });
+        state.user.name = 'Bob';
+        expect(state.user.name).toBe('Bob');
+    });
+    it('should handle arrays reactively', () => {
+        const state = createState({ items: [1, 2, 3] });
+        state.items.push(4);
+        expect(state.items).toEqual([1, 2, 3, 4]);
+    });
+    it('should track property access in observers', () => {
+        const state = createState({ count: 0 });
+        let renderCount = 0;
+        const observer = new Observer(() => {
+            renderCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Access property to track it
+        dispose();
+        expect(renderCount).toBe(0);
+        // Mutate after observation setup
+        const dispose2 = observer.observe();
+        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);
+            });
+        });
+    });
+    it('should handle property deletion', () => {
+        const state = createState({ count: 0, temp: 'value' });
+        delete state.temp;
+        expect(state.temp).toBeUndefined();
+        expect('temp' in state).toBe(false);
+    });
+    it('should not create proxies for functions', () => {
+        const fn = () => 'hello';
+        const state = createState({ method: fn });
+        expect(state.method).toBe(fn);
+        expect(state.method()).toBe('hello');
+    });
+    it('should handle symbol properties', () => {
+        const sym = Symbol('test');
+        const state = createState({ [sym]: 'value' });
+        expect(state[sym]).toBe('value');
+    });
+    it('should notify observers only on actual changes', () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        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);
+            });
+        });
+    });
+    it('should handle deeply nested objects', () => {
+        const state = createState({
+            level1: {
+                level2: {
+                    level3: {
+                        value: 'deep',
+                    },
+                },
+            },
+        });
+        state.level1.level2.level3.value = 'modified';
+        expect(state.level1.level2.level3.value).toBe('modified');
+    });
+    it('should handle array mutations correctly', () => {
+        const state = createState({ items: [1, 2, 3] });
+        state.items.pop();
+        expect(state.items).toEqual([1, 2]);
+        state.items.unshift(0);
+        expect(state.items).toEqual([0, 1, 2]);
+        state.items.splice(1, 1, 99);
+        expect(state.items).toEqual([0, 99, 2]);
+    });
+});