@storve/react 1.0.2 → 1.0.4

package/tests/selector.test.tsx

@@ -1,288 +0,0 @@
-import { render, screen, act } from '@testing-library/react'
-import { createStore } from '@storve/core'
-import { useStore } from '../src/useStore'
-import { expect, it, describe, vi } from 'vitest'
-import React, { useCallback } from 'react'
-
-describe('useStore with selector', () => {
-    it('selector receives full state as argument', () => {
-        const store = createStore({ a: 1, b: 2 })
-        let receivedState: unknown
-        function Test() {
-            useStore(store, (s: unknown) => {
-                receivedState = s
-                return (s as { a: number; b: number }).a
-            })
-            return null
-        }
-        render(<Test />)
-        expect(receivedState).toEqual({ a: 1, b: 2 })
-    })
-
-    it('selector return value is what component receives', () => {
-        const store = createStore({ count: 10 })
-        function Test() {
-            const doubled = useStore(store, (s) => s.count * 2)
-            return <div data-testid="val">{doubled}</div>
-        }
-        render(<Test />)
-        expect(screen.getByTestId('val')).toHaveTextContent('20')
-    })
-
-    it('component re-renders when selector return value changes', () => {
-        const store = createStore({ count: 0, unrelated: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const count = useStore(store, (s) => s.count)
-            return <div>{count}</div>
-        }
-        render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('component does NOT re-render when selector return value unchanged', () => {
-        const store = createStore({ count: 0, unrelated: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const isPositive = useStore(store, (s) => s.count > 0)
-            return <div>{String(isPositive)}</div>
-        }
-        render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        // Unrelated state change
-        act(() => {
-            store.setState({ unrelated: 1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        // Related state change but result remains same (0 -> -1, both NOT > 0)
-        act(() => {
-            store.setState({ count: -1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-    })
-
-    it('selector returning primitive re-renders correctly', () => {
-        const store = createStore({ val: 'a' })
-        function Test() {
-            const val = useStore(store, (s) => s.val)
-            return <div data-testid="val">{val}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ val: 'b' })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('b')
-    })
-
-    it('selector returning object re-renders correctly', () => {
-        const store = createStore({ a: 1, b: 2 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const sub = useStore(store, (s) => ({ combined: s.a + s.b }))
-            return <div>{sub.combined}</div>
-        }
-        render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        // Even if values are same, returning a new object literal triggers re-render
-        // because useSyncExternalStore uses Object.is comparison
-        act(() => {
-            store.setState({ a: 1 }) // No actual change, but store.subscribe might fire
-        })
-        // Storve only notifies if state actually changed.
-        // If we change 'a' to '1' (same), Storve might not notify.
-
-        act(() => {
-            store.setState({ a: 10 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('selector returning array re-renders correctly', () => {
-        const store = createStore({ items: [1, 2] })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const first = useStore(store, (s) => [s.items[0]])
-            return <div>{first[0]}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ items: [10, 2] })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('selector returning derived number re-renders correctly', () => {
-        const store = createStore({ a: 1, b: 2 })
-        function Test() {
-            const sum = useStore(store, (s) => s.a + s.b)
-            return <div data-testid="sum">{sum}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ a: 5 })
-        })
-        expect(screen.getByTestId('sum')).toHaveTextContent('7')
-    })
-
-    it('selector returning derived boolean re-renders correctly', () => {
-        const store = createStore({ count: 0 })
-        function Test() {
-            const isZero = useStore(store, (s) => s.count === 0)
-            return <div data-testid="val">{String(isZero)}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('false')
-    })
-
-    it('selector returning null does not crash', () => {
-        const store = createStore<{ data: { name: string } | null }>({ data: { name: 'test' } })
-        function Test() {
-            const name = useStore(store, (s: unknown) => {
-                const state = s as { data: { name: string } | null }
-                return state.data ? state.data.name : null
-            })
-            return <div data-testid="val">{name === null ? 'null' : name}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ data: null })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('null')
-    })
-
-    it('selector returning undefined does not crash', () => {
-        const store = createStore({ val: 1 } as { val?: number })
-        function Test() {
-            const val = useStore(store, (s) => s.val)
-            return <div data-testid="val">{val === undefined ? 'undefined' : val}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ val: undefined })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('undefined')
-    })
-
-    it('selector with multiple state dependencies updates correctly', () => {
-        const store = createStore({ a: 1, b: 2, c: 3 })
-        function Test() {
-            const total = useStore(store, (s) => s.a + s.b + s.c)
-            return <div data-testid="total">{total}</div>
-        }
-        render(<Test />)
-        act(() => {
-            store.setState({ a: 10, b: 20 })
-        })
-        expect(screen.getByTestId('total')).toHaveTextContent('33')
-    })
-
-    it('inline selector function — stable behavior', () => {
-        const store = createStore({ count: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const count = useStore(store, (s) => s.count)
-            return <div>{count}</div>
-        }
-        const { rerender } = render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        rerender(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('memoized selector via useCallback — no extra re-renders', () => {
-        const store = createStore({ count: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const selector = useCallback((s: unknown) => (s as { count: number }).count, [])
-            const count = useStore(store, selector)
-            return <div>{count}</div>
-        }
-        const { rerender } = render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        rerender(<Test />)
-        // Even if selector is memoized, Component itself re-renders because rerender() was called
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('changing selector between renders — returns correct value', () => {
-        const store = createStore({ a: 1, b: 2 })
-        function Test({ mode }: { mode: 'a' | 'b' }) {
-            const val = useStore(store, mode === 'a' ? (s) => s.a : (s) => s.b)
-            return <div data-testid="val">{val}</div>
-        }
-        const { rerender } = render(<Test mode="a" />)
-        expect(screen.getByTestId('val')).toHaveTextContent('1')
-        rerender(<Test mode="b" />)
-        expect(screen.getByTestId('val')).toHaveTextContent('2')
-    })
-
-    it('selector returning primitive then object — shallowEqual with type mismatch', () => {
-        const store = createStore({ mode: 'num' as 'num' | 'obj' })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const val = useStore(
-                store,
-                (s) => (s.mode === 'num' ? 42 : { value: 42 })
-            )
-            return (
-                <div data-testid="val">
-                    {typeof val === 'object' ? val.value : val}
-                </div>
-            )
-        }
-        render(<Test />)
-        expect(screen.getByTestId('val')).toHaveTextContent('42')
-        act(() => store.setState({ mode: 'obj' }))
-        expect(screen.getByTestId('val')).toHaveTextContent('42')
-    })
-
-    it('selector returning null then object — shallowEqual with null', () => {
-        const store = createStore<{ data: { x: number } | null }>({ data: null })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const data = useStore(store, (s) => s.data)
-            return (
-                <div data-testid="val">
-                    {data === null ? 'null' : data.x}
-                </div>
-            )
-        }
-        render(<Test />)
-        expect(screen.getByTestId('val')).toHaveTextContent('null')
-        act(() => store.setState({ data: { x: 1 } }))
-        expect(screen.getByTestId('val')).toHaveTextContent('1')
-    })
-
-    it('selector returning same object reference — Object.is early return', () => {
-        const nested = { x: 1 }
-        const store = createStore({ nested, other: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const sub = useStore(store, (s) => s.nested)
-            return <div data-testid="val">{sub.x}</div>
-        }
-        render(<Test />)
-        expect(screen.getByTestId('val')).toHaveTextContent('1')
-        act(() => store.setState({ other: 1 }))
-        expect(screen.getByTestId('val')).toHaveTextContent('1')
-    })
-})

package/tests/setup.ts

@@ -1,7 +0,0 @@
-import '@testing-library/jest-dom'
-import { afterEach } from 'vitest'
-import { cleanup } from '@testing-library/react'
-
-afterEach(() => {
-    cleanup()
-})

package/tests/useDevtools.test.tsx

@@ -1,80 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import React from 'react';
-import type { Store } from '../../storve/src/types';
-import { createStore } from '../../storve/src/store';
-import { withDevtools } from '../../storve/src/devtools/withDevtools';
-import { useDevtools } from '../src/useDevtools';
-
-/** @internal */
-type DevtoolsStore<S extends object> = Store<S> & {
-    undo: () => void;
-    redo: () => void;
-    snapshot: (name: string) => void;
-}
-
-
-function TestComponent({ store }: { store: Store<object> }) {
-    const { canUndo, canRedo, history, snapshots } = useDevtools(store);
-
-    return (
-        <div>
-            <div data-testid="can-undo">{String(canUndo)}</div>
-            <div data-testid="can-redo">{String(canRedo)}</div>
-            <div data-testid="history-count">{history.length}</div>
-            <div data-testid="snapshots">{snapshots.join(',')}</div>
-        </div>
-    );
-}
-
-describe('useDevtools hook', () => {
-    it('canRedo becomes true after undo', () => {
-        const store = createStore(withDevtools({ count: 0 }, { name: 'test' }));
-        
-        render(<TestComponent store={store} />);
-        expect(screen.getByTestId('can-redo').textContent).toBe('false');
-        expect(screen.getByTestId('history-count').textContent).toBe('0'); // empty until first state change
-
-        act(() => {
-            store.setState({ count: 1 });
-            store.setState({ count: 2 });
-        });
-        
-        act(() => {
-            store.undo();
-        });
-
-        expect(screen.getByTestId('can-redo').textContent).toBe('true');
-    });
-
-    it('re-renders when undo is called', () => {
-        const store = createStore(withDevtools({ count: 0 }, { name: 'test' }));
-        act(() => {
-            store.setState({ count: 1 });
-            store.setState({ count: 2 });
-        });
-
-        render(<TestComponent store={store} />);
-        expect(screen.getByTestId('history-count').textContent).toBe('2');
-
-        act(() => {
-            store.undo();
-        });
-
-        expect(screen.getByTestId('can-undo').textContent).toBe('false');
-        expect(screen.getByTestId('can-redo').textContent).toBe('true');
-    });
-
-    it('snapshot list updates reactively after snapshot()', () => {
-        const store = createStore(withDevtools({ count: 0 }, { name: 'test' }));
-        render(<TestComponent store={store} />);
-        
-        expect(screen.getByTestId('snapshots').textContent).toBe('');
-
-        act(() => {
-            (store as unknown as DevtoolsStore<object>).snapshot('s1');
-        });
-
-        expect(screen.getByTestId('snapshots').textContent).toBe('s1');
-    });
-});

package/tests/useStore.test.tsx

@@ -1,233 +0,0 @@
-import { render, screen, act } from '@testing-library/react'
-import { createStore, type Store } from '@storve/core'
-import { useStore, shallowEqual } from '../src/useStore'
-import { expect, it, describe, vi } from 'vitest'
-import React from 'react'
-
-describe('useStore', () => {
-    it('shallowEqual returns true for same reference (covers Object.is branch)', () => {
-        const obj = { a: 1 }
-        expect(shallowEqual(obj, obj)).toBe(true)
-    })
-
-    it('returns full state when no selector provided', () => {
-        const store = createStore({ count: 0 })
-        function Counter() {
-            const state = useStore(store)
-            return <div data-testid="count">{state.count}</div>
-        }
-        render(<Counter />)
-        expect(screen.getByTestId('count')).toHaveTextContent('0')
-    })
-
-    it('returns correct initial state on first render', () => {
-        type TestState = { name: string }
-        const store = createStore<TestState>({ name: 'flux' })
-        let renderedState: TestState | undefined
-        function Profile() {
-            renderedState = useStore(store)
-            return null
-        }
-        render(<Profile />)
-        expect(renderedState).toEqual({ name: 'flux' })
-    })
-
-    it('returns updated state after setState called', () => {
-        const store = createStore({ count: 0 })
-        function Counter() {
-            const state = useStore(store)
-            return <div data-testid="count">{state.count}</div>
-        }
-        render(<Counter />)
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(screen.getByTestId('count')).toHaveTextContent('1')
-    })
-
-    it('component re-renders when state changes', () => {
-        const store = createStore({ count: 0 })
-        const renderSpy = vi.fn()
-        function Counter() {
-            renderSpy()
-            const state = useStore(store)
-            return <div>{state.count}</div>
-        }
-        render(<Counter />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('component does NOT re-render when unrelated state changes', () => {
-        const store = createStore({ a: 1, b: 2 })
-        const renderSpy = vi.fn()
-        function Component() {
-            renderSpy()
-            const state = useStore(store)
-            // useSyncExternalStore with full state will re-render if any part of state changes
-            // because the state object returned by storve (Proxy) is updated on any change
-            return <div>{state.a}</div>
-        }
-        render(<Component />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        // Changing 'b' SHOULD trigger a re-render if we return the full state
-        // because useSyncExternalStore checks reference equality of the return value
-        act(() => {
-            store.setState({ b: 3 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('multiple components using same store all update correctly', () => {
-        const store = createStore({ count: 0 })
-        function Counter() {
-            const state = useStore(store)
-            return <div data-testid="count">{state.count}</div>
-        }
-        render(
-            <>
-                <Counter />
-                <Counter />
-            </>
-        )
-        act(() => {
-            store.setState({ count: 5 })
-        })
-        const elements = screen.getAllByTestId('count')
-        expect(elements[0]).toHaveTextContent('5')
-        expect(elements[1]).toHaveTextContent('5')
-    })
-
-    it('multiple components using different stores are independent', () => {
-        const store1 = createStore({ a: 1 })
-        const store2 = createStore({ b: 2 })
-        function A() {
-            const state = useStore(store1)
-            return <div data-testid="a">{state.a}</div>
-        }
-        function B() {
-            const state = useStore(store2)
-            return <div data-testid="b">{state.b}</div>
-        }
-        render(
-            <>
-                <A />
-                <B />
-            </>
-        )
-        act(() => {
-            store1.setState({ a: 10 })
-        })
-        expect(screen.getByTestId('a')).toHaveTextContent('10')
-        expect(screen.getByTestId('b')).toHaveTextContent('2')
-    })
-
-    it('useStore works with flat state', () => {
-        type TestState = { a: number; b: string }
-        const store = createStore<TestState>({ a: 1, b: 'test' })
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current).toEqual({ a: 1, b: 'test' })
-    })
-
-    it('useStore works with nested state', () => {
-        type TestState = { user: { id: number; profile: { name: string } } }
-        const store = createStore<TestState>({ user: { id: 1, profile: { name: 'John' } } })
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current?.user.profile.name).toBe('John')
-    })
-
-    it('useStore works with array state', () => {
-        type TestState = { list: number[] }
-        const store = createStore<TestState>({ list: [1, 2, 3] })
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current?.list).toEqual([1, 2, 3])
-    })
-
-    it('useStore works with boolean state', () => {
-        type TestState = { ok: boolean }
-        const store = createStore<TestState>({ ok: true })
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current?.ok).toBe(true)
-    })
-
-    it('useStore works with null state', () => {
-        // Note: createStore requires an object as initial state
-        type TestState = { data: null }
-        const store = createStore<TestState>({ data: null })
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current?.data).toBeNull()
-    })
-
-    it('useStore works with empty object state', () => {
-        type TestState = Record<string, never>
-        const store = createStore<TestState>({})
-        const { result } = { result: { current: null as TestState | null } }
-        function Test() {
-            result.current = useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(result.current).toEqual({})
-    })
-
-    it('hook called with same store reference — stable behavior', () => {
-        const store = createStore({ count: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            useStore(store)
-            return null
-        }
-        const { rerender } = render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        rerender(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('hook called with different store reference — switches correctly', () => {
-        const store1 = createStore({ val: 1 })
-        const store2 = createStore({ val: 2 })
-        function Test({ s }: { s: Store<{ val: number }> }) {
-            const state = useStore(s)
-            return <div data-testid="val">{state.val}</div>
-        }
-        const { rerender } = render(<Test s={store1} />)
-        expect(screen.getByTestId('val')).toHaveTextContent('1')
-        rerender(<Test s={store2} />)
-        expect(screen.getByTestId('val')).toHaveTextContent('2')
-
-        act(() => {
-            store1.setState({ val: 10 })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('2') // Should not update from store1 anymore
-    })
-})

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "extends": "../../tsconfig.base.json",
-    "compilerOptions": {
-        "outDir": "dist",
-        "rootDir": "src",
-        "jsx": "react"
-    },
-    "include": [
-        "src/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "dist",
-        "tests/**/*"
-    ]
-}

package/vitest.config.mts

@@ -1,30 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./tests/setup.ts'],
-    include: ['tests/**/*.{test,spec}.{ts,tsx}'],
-    pool: 'forks',
-    poolOptions: {
-      forks: {
-        singleFork: true
-      }
-    },
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json-summary'],
-      thresholds: {
-        statements: 85,
-        branches: 85,
-        functions: 85,
-        lines: 85,
-      },
-      include: ['src/**/*.ts', 'src/**/*.tsx'],
-      exclude: ['src/types.ts'],
-    },
-  },
-})
-
-