rask-ui 0.21.0 → 0.22.0

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.d.ts

@@ -0,0 +1,6 @@
+export declare function createRef<T>(cb?: (element: T) => (() => void) | void): {
+    (node: T | null): void;
+    current: T | null;
+    cb: ((element: T) => (() => void) | void) | undefined;
+};
+//# sourceMappingURL=createRef.d.ts.map

package/dist/createRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRef.d.ts","sourceRoot":"","sources":["../src/createRef.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;WAChD,CAAC,GAAG,IAAI;;mBADe,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;EASpE"}

package/dist/createRef.js

@@ -0,0 +1,8 @@
+export function createRef(cb) {
+    function ref(node) {
+        ref.current = node;
+    }
+    ref.current = null;
+    ref.cb = cb;
+    return ref;
+}

package/dist/createState.d.ts

@@ -1,4 +1,3 @@
-export declare function assignState<T extends object>(state: T, newState: T): T;
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
  *
@@ -24,5 +23,4 @@ export declare function assignState<T extends object>(state: T, newState: T): T;
  * @returns A reactive proxy of the state object
  */
 export declare function createState<T extends object>(state: T): T;
-export declare const PROXY_MARKER: unique symbol;
 //# 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":"AAIA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAOzD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}
+{"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,9 +1,4 @@
-import { getCurrentComponent } from "./component";
-import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 import { getCurrentObserver, Signal } from "./observation";
-export function assignState(state, newState) {
-    return Object.assign(state, newState);
-}
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
  *
@@ -29,14 +24,11 @@ export function assignState(state, newState) {
  * @returns A reactive proxy of the state object
  */
 export function createState(state) {
-    if (getCurrentComponent()?.isRendering) {
-        throw new Error("createState cannot be called during render. Call it in component setup or globally.");
-    }
-    return getProxy(state, {});
+    return getProxy(state);
 }
 const proxyCache = new WeakMap();
-export const PROXY_MARKER = Symbol("isProxy");
-function getProxy(value, notifyInspectorRef) {
+const PROXY_MARKER = Symbol("isProxy");
+function getProxy(value) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {
         return value;
@@ -51,9 +43,6 @@ function getProxy(value, notifyInspectorRef) {
             if (key === PROXY_MARKER) {
                 return true;
             }
-            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
-                return true;
-            }
             return Reflect.has(target, key);
         },
         get(target, key) {
@@ -61,9 +50,6 @@ function getProxy(value, notifyInspectorRef) {
             if (key === PROXY_MARKER) {
                 return true;
             }
-            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
-                return !notifyInspectorRef.current;
-            }
             const value = Reflect.get(target, key);
             if (typeof key === "symbol" || typeof value === "function") {
                 return value;
@@ -75,26 +61,11 @@ function getProxy(value, notifyInspectorRef) {
             }
             if (Array.isArray(value) ||
                 (typeof value === "object" && value !== null)) {
-                return getProxy(value, INSPECTOR_ENABLED && notifyInspectorRef.current
-                    ? {
-                        current: {
-                            notify: notifyInspectorRef.current.notify,
-                            path: notifyInspectorRef.current.path.concat(key),
-                        },
-                    }
-                    : notifyInspectorRef);
+                return getProxy(value);
             }
             return value;
         },
         set(target, key, newValue) {
-            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
-                Object.defineProperty(notifyInspectorRef, "current", {
-                    get() {
-                        return newValue.current;
-                    },
-                });
-                return Reflect.set(target, key, newValue);
-            }
             if (typeof key === "symbol") {
                 return Reflect.set(target, key, newValue);
             }
@@ -102,16 +73,10 @@ function getProxy(value, notifyInspectorRef) {
             const setResult = Reflect.set(target, key, newValue);
             // We only notify if actual change, though array length actually updates under the hood
             if (newValue !== oldValue || (Array.isArray(value) && key === "length")) {
+                console.log("WTF", key, newValue);
                 const signal = signals[key];
                 signal?.notify();
             }
-            if (INSPECTOR_ENABLED) {
-                notifyInspectorRef.current?.notify({
-                    type: "mutation",
-                    path: notifyInspectorRef.current.path,
-                    value: newValue,
-                });
-            }
             return setResult;
         },
         deleteProperty(target, key) {

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]);
+    });
+});

package/dist/createView.d.ts

@@ -1,28 +1,54 @@
-type Simplify<T> = T extends any ? {
+type Simplify<T> = {
     [K in keyof T]: T[K];
-} : never;
-type UndefinedKeys<T> = {
-    [K in keyof T]-?: [T[K]] extends [undefined] ? K : never;
-}[keyof T];
-type MergeTwo<A extends object, B extends object> = A extends any ? Simplify<Omit<A, keyof B> & Omit<B, UndefinedKeys<B>>> : never;
+} & {};
+type MergeTwo<A extends object, B extends object> = Simplify<Omit<A, keyof B> & B>;
 type MergeMany<T extends readonly object[]> = T extends [
     infer H extends object,
     ...infer R extends object[]
-] ? MergeManyAcc<H, R> : {};
-type MergeManyAcc<Acc extends object, Rest extends object[]> = Rest extends [
-    infer H extends object,
-    ...infer R extends object[]
-] ? MergeManyAcc<MergeTwo<Acc, H>, R> : Acc;
+] ? MergeTwo<H, MergeMany<R>> : {};
 /**
- * Creates a view that merges multiple objects (reactive or not) into a single
- * object while maintaining reactivity through getters. Properties from later
- * arguments override earlier ones.
+ * Creates a view that merges multiple objects (reactive or not) into a single object while
+ * maintaining reactivity through getters. Properties from later arguments override earlier ones.
+ *
+ * @warning **Do not destructure the returned view object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining getter access. This is the same rule
+ * as other reactive primitives.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component() {
+ *   const state = createState({ count: 0 });
+ *   const helpers = { increment: () => state.count++ };
+ *   const view = createView(state, helpers);
+ *   const { count, increment } = view; // Don't do this!
+ *   return () => <button onClick={increment}>{count}</button>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component() {
+ *   const state = createState({ count: 0 });
+ *   const helpers = { increment: () => state.count++ };
+ *   const view = createView(state, helpers);
+ *   return () => <button onClick={view.increment}>{view.count}</button>; // Reactive!
+ * }
+ *
+ * @example
+ * // Merge multiple reactive objects
+ * const state = createState({ count: 0 });
+ * const user = createState({ name: "Alice" });
+ * const view = createView(state, user);
+ * // view has both count and name properties, maintaining reactivity
+ *
+ * @example
+ * // Later arguments override earlier ones
+ * const a = { x: 1, y: 2 };
+ * const b = { y: 3, z: 4 };
+ * const view = createView(a, b);
+ * // view.x === 1, view.y === 3, view.z === 4
  *
- * ⚠️ Do not destructure the returned view object; always read properties
- * directly from the view to preserve reactivity.
+ * @param args - Objects to merge (reactive or plain objects)
+ * @returns A view object with getters for all properties, maintaining reactivity
  */
-export declare function createView<A extends object>(a: A): A;
-export declare function createView<A extends object, B extends object>(a: A, b: B): MergeTwo<A, B>;
 export declare function createView<T extends readonly object[]>(...args: T): MergeMany<T>;
 export {};
 //# sourceMappingURL=createView.d.ts.map

package/dist/createView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createView.d.ts","sourceRoot":"","sources":["../src/createView.ts"],"names":[],"mappings":"AAGA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,KAAK,CAAC;AAEpE,KAAK,aAAa,CAAC,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CACzD,CAAC,MAAM,CAAC,CAAC,CAAC;AAEX,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,GAC7D,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GACtD,KAAK,CAAC;AAEV,KAAK,SAAS,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,EAAE,CAAC;AAEP,KAAK,YAAY,CAAC,GAAG,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,SAAS;IAC1E,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACjC,GAAG,CAAC;AAER;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACtD,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GACH,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAClB,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACpD,GAAG,IAAI,EAAE,CAAC,GACT,SAAS,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"createView.d.ts","sourceRoot":"","sources":["../src/createView.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,EAAE,CAAC;AAEjD,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,QAAQ,CAC1D,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CACrB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,GACzB,EAAE,CAAC;AAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACpD,GAAG,IAAI,EAAE,CAAC,GACT,SAAS,CAAC,CAAC,CAAC,CA0Bd"}

package/dist/createView.js

@@ -1,77 +1,68 @@
-import { getCurrentComponent } from "./component";
-import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+/**
+ * Creates a view that merges multiple objects (reactive or not) into a single object while
+ * maintaining reactivity through getters. Properties from later arguments override earlier ones.
+ *
+ * @warning **Do not destructure the returned view object!** Destructuring breaks reactivity
+ * because it extracts plain values instead of maintaining getter access. This is the same rule
+ * as other reactive primitives.
+ *
+ * @example
+ * // ❌ Bad - destructuring loses reactivity
+ * function Component() {
+ *   const state = createState({ count: 0 });
+ *   const helpers = { increment: () => state.count++ };
+ *   const view = createView(state, helpers);
+ *   const { count, increment } = view; // Don't do this!
+ *   return () => <button onClick={increment}>{count}</button>; // Won't update!
+ * }
+ *
+ * // ✅ Good - access properties directly in render
+ * function Component() {
+ *   const state = createState({ count: 0 });
+ *   const helpers = { increment: () => state.count++ };
+ *   const view = createView(state, helpers);
+ *   return () => <button onClick={view.increment}>{view.count}</button>; // Reactive!
+ * }
+ *
+ * @example
+ * // Merge multiple reactive objects
+ * const state = createState({ count: 0 });
+ * const user = createState({ name: "Alice" });
+ * const view = createView(state, user);
+ * // view has both count and name properties, maintaining reactivity
+ *
+ * @example
+ * // Later arguments override earlier ones
+ * const a = { x: 1, y: 2 };
+ * const b = { y: 3, z: 4 };
+ * const view = createView(a, b);
+ * // view.x === 1, view.y === 3, view.z === 4
+ *
+ * @param args - Objects to merge (reactive or plain objects)
+ * @returns A view object with getters for all properties, maintaining reactivity
+ */
 export function createView(...args) {
-    if (!getCurrentComponent()) {
-        throw new Error("Only use createView in component setup");
-    }
     const result = {};
     const seen = new Set();
-    let notifyInspectorRef = {};
     for (let i = args.length - 1; i >= 0; i--) {
         const src = args[i];
-        if (!src)
-            continue;
-        if (INSPECTOR_ENABLED && src[INSPECT_MARKER]) {
-            src[INSPECT_MARKER] = notifyInspectorRef;
-        }
-        // Mimic Object.assign: only enumerable own property keys
+        // mimic Object.assign: only enumerable own property keys
         for (const key of Reflect.ownKeys(src)) {
             if (seen.has(key))
                 continue;
             const desc = Object.getOwnPropertyDescriptor(src, key);
             if (!desc || !desc.enumerable)
                 continue;
+            // Capture the current source for this key (last write wins).
             Object.defineProperty(result, key, {
                 enumerable: true,
                 configurable: true,
-                get: () => {
-                    const value = src[key];
-                    if (!INSPECTOR_ENABLED || !notifyInspectorRef.current) {
-                        return value;
-                    }
-                    // Propagate inspector marker into nested observables
-                    if (value?.[INSPECT_MARKER]) {
-                        value[INSPECT_MARKER] = {
-                            current: {
-                                notify: notifyInspectorRef.current.notify,
-                                path: notifyInspectorRef.current.path.concat(key),
-                            },
-                        };
-                    }
-                    else if (typeof value === "function") {
-                        // Wrap actions to notify inspector
-                        return (...params) => {
-                            notifyInspectorRef.current.notify({
-                                type: "action",
-                                path: notifyInspectorRef.current.path.concat(key),
-                                params,
-                            });
-                            return value(...params);
-                        };
-                    }
-                    return value;
-                },
+                get: () => src[key],
+                // Optional write-through (commented out by default):
+                // set: (value) => { (src as any)[key as any] = value; },
             });
             seen.add(key);
         }
     }
-    if (INSPECTOR_ENABLED) {
-        Object.defineProperty(result, INSPECT_MARKER, {
-            enumerable: false,
-            configurable: false,
-            get() {
-                return !notifyInspectorRef.current;
-            },
-            set: (value) => {
-                Object.defineProperty(notifyInspectorRef, "current", {
-                    configurable: true,
-                    get() {
-                        return value.current;
-                    },
-                });
-            },
-        });
-    }
-    // The overload signatures expose a precise type; this is the shared impl.
     return result;
 }

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

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