@storve/react 1.0.2 → 1.0.4

package/tests/computed.react.test.tsx

@@ -1,71 +0,0 @@
-import { render, screen, act } from '@testing-library/react'
-import { createStore } from '@storve/core'
-import { computed } from '@storve/core/computed'
-import { useStore } from '../src/useStore'
-import { expect, it, describe, vi } from 'vitest'
-import React from 'react'
-
-describe('useStore with computed values', () => {
-    it('component using computed selector re-renders when computed result changes', () => {
-        const store = createStore({
-            count: 0,
-            doubled: computed((s: { count: number }) => s.count * 2),
-        })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const doubled = useStore(store, (s) => s.doubled)
-            return <div data-testid="val">{doubled}</div>
-        }
-        render(<Test />)
-        expect(screen.getByTestId('val')).toHaveTextContent('0')
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(screen.getByTestId('val')).toHaveTextContent('2')
-        expect(renderSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('component does NOT re-render when only unrelated state changes', () => {
-        const store = createStore({
-            count: 0,
-            other: 0,
-            doubled: computed((s: { count: number }) => s.count * 2),
-        })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            const doubled = useStore(store, (s) => s.doubled)
-            return <div data-testid="val">{doubled}</div>
-        }
-        render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-
-        act(() => {
-            store.setState({ other: 1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        expect(screen.getByTestId('val')).toHaveTextContent('0')
-    })
-
-    it('component re-renders when computed result changes after dependency update', () => {
-        const store = createStore({
-            a: 1,
-            b: 2,
-            sum: computed((s: { a: number; b: number }) => s.a + s.b),
-        })
-        function Test() {
-            const sum = useStore(store, (s) => s.sum)
-            return <div data-testid="sum">{sum}</div>
-        }
-        render(<Test />)
-        expect(screen.getByTestId('sum')).toHaveTextContent('3')
-
-        act(() => {
-            store.setState({ a: 10 })
-        })
-        expect(screen.getByTestId('sum')).toHaveTextContent('12')
-    })
-})

package/tests/concurrent.test.tsx

@@ -1,101 +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, { StrictMode, Suspense, startTransition } from 'react'
-
-describe('concurrent mode', () => {
-    it('works with React.StrictMode — double invoke safe', () => {
-        const store = createStore({ count: 0 })
-        const subscribeSpy = vi.spyOn(store, 'subscribe')
-
-        function Test() {
-            useStore(store)
-            return null
-        }
-
-        render(
-            <StrictMode>
-                <Test />
-            </StrictMode>
-        )
-
-        // StrictMode might double-invoke effects/hooks initialization in dev
-        // useSyncExternalStore handles this internally.
-        expect(subscribeSpy).toHaveBeenCalled()
-    })
-
-    it('no tearing — all components see consistent state snapshot', () => {
-        const store = createStore({ count: 0 })
-
-        function Display() {
-            const count = useStore(store, s => s.count)
-            return <div data-testid="count">{count}</div>
-        }
-
-        render(
-            <>
-                <Display />
-                <Display />
-                <Display />
-            </>
-        )
-
-        act(() => {
-            store.setState({ count: 1 })
-        })
-
-        const elements = screen.getAllByTestId('count')
-        const values = elements.map(el => el.textContent)
-        expect(new Set(values).size).toBe(1)
-        expect(values[0]).toBe('1')
-    })
-
-    it('works inside Suspense boundary', async () => {
-        const store = createStore({ data: 'ready' })
-
-        function Content() {
-            const data = useStore(store, s => s.data)
-            return <div>{data}</div>
-        }
-
-        render(
-            <Suspense fallback={<div>Loading...</div>}>
-                <Content />
-            </Suspense>
-        )
-
-        expect(screen.getByText('ready')).toBeInTheDocument()
-    })
-
-    it('state update inside startTransition updates correctly', () => {
-        const store = createStore({ count: 0 })
-
-        function Counter() {
-            const count = useStore(store, s => s.count)
-            return <div data-testid="count">{count}</div>
-        }
-
-        render(<Counter />)
-
-        act(() => {
-            startTransition(() => {
-                store.setState({ count: 1 })
-            })
-        })
-
-        expect(screen.getByTestId('count')).toHaveTextContent('1')
-    })
-
-    it('getSnapshot returns stable reference when state unchanged', () => {
-        const store = createStore({ a: 1 })
-        const state1 = store.getState()
-        const state2 = store.getState()
-
-        // Storve core ensures getState returns same Proxy reference if no changes
-        expect(state1).toBe(state2)
-
-        // useStore uses store.getState() internally via useSyncExternalStore's getSnapshot
-        // We can't easily inspect useSyncExternalStore internal state, but we verified getState() stability.
-    })
-})

package/tests/index.test.tsx

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { createStore } from '@storve/core'
-import { useStore } from '../src/index'
-import type { Selector } from '../src/index'
-import { expect, it, describe } from 'vitest'
-import React from 'react'
-
-describe('index (public API)', () => {
-    it('useStore exported from index works correctly', () => {
-        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('Selector type can be used with useStore', () => {
-        const store = createStore({ a: 1, b: 2 })
-        const selector: Selector<{ a: number; b: number }, number> = (s) => s.a + s.b
-        function Test() {
-            const sum = useStore(store, selector)
-            return <div data-testid="sum">{sum}</div>
-        }
-        render(<Test />)
-        expect(screen.getByTestId('sum')).toHaveTextContent('3')
-    })
-})

package/tests/integration.test.tsx

@@ -1,135 +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 from 'react'
-
-describe('integration scenarios', () => {
-    it('counter component — increment updates UI', () => {
-        const store = createStore({ count: 0 })
-        const increment = () => store.setState((s) => ({ count: s.count + 1 }))
-
-        function Counter() {
-            const count = useStore(store, s => s.count)
-            return (
-                <div>
-                    <span data-testid="count">{count}</span>
-                    <button onClick={increment}>+</button>
-                </div>
-            )
-        }
-
-        render(<Counter />)
-        expect(screen.getByTestId('count')).toHaveTextContent('0')
-
-        act(() => {
-            screen.getByText('+').click()
-        })
-        expect(screen.getByTestId('count')).toHaveTextContent('1')
-    })
-
-    it('todo list — add item renders new item', () => {
-        const store = createStore({ todos: [] as string[] })
-        const addTodo = (text: string) => store.setState(s => ({ todos: [...s.todos, text] }))
-
-        function TodoList() {
-            const todos = useStore(store, s => s.todos)
-            return (
-                <ul>
-                    {todos.map((t, i) => <li key={i}>{t}</li>)}
-                </ul>
-            )
-        }
-
-        render(<TodoList />)
-        expect(screen.queryByRole('listitem')).not.toBeInTheDocument()
-
-        act(() => {
-            addTodo('Learn Storve')
-        })
-        expect(screen.getByRole('listitem')).toHaveTextContent('Learn Storve')
-    })
-
-    it('todo list — filter selector shows correct items', () => {
-        const store = createStore({
-            todos: [
-                { id: 1, text: 'A', done: true },
-                { id: 2, text: 'B', done: false }
-            ],
-            filter: 'all' as 'all' | 'done' | 'pending'
-        })
-
-        function VisibleTodos() {
-            const filtered = useStore(store, s => {
-                if (s.filter === 'done') return s.todos.filter(t => t.done)
-                if (s.filter === 'pending') return s.todos.filter(t => !t.done)
-                return s.todos
-            })
-            return (
-                <ul>
-                    {filtered.map(t => <li key={t.id}>{t.text}</li>)}
-                </ul>
-            )
-        }
-
-        render(<VisibleTodos />)
-        expect(screen.getAllByRole('listitem')).toHaveLength(2)
-
-        act(() => {
-            store.setState({ filter: 'done' })
-        })
-        expect(screen.getAllByRole('listitem')).toHaveLength(1)
-        expect(screen.getByRole('listitem')).toHaveTextContent('A')
-    })
-
-    it('rapid state updates (100 in loop) — UI stays consistent', () => {
-        const store = createStore({ count: 0 })
-        function Counter() {
-            const count = useStore(store, s => s.count)
-            return <div data-testid="count">{count}</div>
-        }
-        render(<Counter />)
-
-        act(() => {
-            for (let i = 0; i < 100; i++) {
-                store.setState(s => ({ count: s.count + 1 }))
-            }
-        })
-        expect(screen.getByTestId('count')).toHaveTextContent('100')
-    })
-
-    it('sibling components — one updates, only affected re-renders', () => {
-        const store = createStore({ a: 0, b: 0 })
-        const renderSpyA = vi.fn()
-        const renderSpyB = vi.fn()
-
-        function ComponentA() {
-            renderSpyA()
-            const a = useStore(store, s => s.a)
-            return <div>{a}</div>
-        }
-
-        function ComponentB() {
-            renderSpyB()
-            const b = useStore(store, s => s.b)
-            return <div>{b}</div>
-        }
-
-        render(
-            <>
-                <ComponentA />
-                <ComponentB />
-            </>
-        )
-
-        renderSpyA.mockClear()
-        renderSpyB.mockClear()
-
-        act(() => {
-            store.setState({ a: 1 })
-        })
-
-        expect(renderSpyA).toHaveBeenCalledTimes(1)
-        expect(renderSpyB).toHaveBeenCalledTimes(0)
-    })
-})

package/tests/lifecycle.test.tsx

@@ -1,148 +0,0 @@
-import { render, act } from '@testing-library/react'
-import { createStore } from '@storve/core'
-import { useStore } from '../src/useStore'
-import { expect, it, describe, vi } from 'vitest'
-import React, { useEffect } from 'react'
-
-describe('lifecycle', () => {
-    it('subscription created on component mount', () => {
-        const store = createStore({ count: 0 })
-        const subscribeSpy = vi.spyOn(store, 'subscribe')
-        function Test() {
-            useStore(store)
-            return null
-        }
-        render(<Test />)
-        expect(subscribeSpy).toHaveBeenCalled()
-    })
-
-    it('subscription cleaned up on component unmount', () => {
-        const store = createStore({ count: 0 })
-        const unsubscribeSpy = vi.fn()
-        vi.spyOn(store, 'subscribe').mockReturnValue(unsubscribeSpy)
-
-        function Test() {
-            useStore(store)
-            return null
-        }
-        const { unmount } = render(<Test />)
-        unmount()
-        expect(unsubscribeSpy).toHaveBeenCalled()
-    })
-
-    it('no memory leak after 100 mount/unmount cycles', () => {
-        const store = createStore({ count: 0 })
-        const subscribeSpy = vi.spyOn(store, 'subscribe')
-        const unsubscribeSpy = vi.fn()
-        subscribeSpy.mockReturnValue(unsubscribeSpy)
-
-        function Test() {
-            useStore(store)
-            return null
-        }
-
-        for (let i = 0; i < 100; i++) {
-            const { unmount } = render(<Test />)
-            unmount()
-        }
-
-        expect(subscribeSpy).toHaveBeenCalledTimes(100)
-        expect(unsubscribeSpy).toHaveBeenCalledTimes(100)
-    })
-
-    it('unmounted component does not receive state updates', () => {
-        const store = createStore({ count: 0 })
-        const renderSpy = vi.fn()
-        function Test() {
-            renderSpy()
-            useStore(store)
-            return null
-        }
-        const { unmount } = render(<Test />)
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-        unmount()
-
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        expect(renderSpy).toHaveBeenCalledTimes(1)
-    })
-
-    it('re-mounted component resubscribes correctly', () => {
-        const store = createStore({ count: 0 })
-        const subscribeSpy = vi.spyOn(store, 'subscribe')
-        function Test() {
-            useStore(store)
-            return null
-        }
-        const { unmount } = render(<Test />)
-        unmount()
-        render(<Test />)
-        expect(subscribeSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('multiple mounts of same component — each has own subscription', () => {
-        const store = createStore({ count: 0 })
-        const subscribeSpy = vi.spyOn(store, 'subscribe')
-        function Test() {
-            useStore(store)
-            return null
-        }
-        render(
-            <>
-                <Test />
-                <Test />
-            </>
-        )
-        expect(subscribeSpy).toHaveBeenCalledTimes(2)
-    })
-
-    it('component unmount during state update — no crash', () => {
-        const store = createStore({ count: 0 })
-        function Test() {
-            useStore(store)
-            useEffect(() => {
-                // Trigger update on mount then unmount
-                // This is a bit tricky to simulate exactly but we can try
-            }, [])
-            return null
-        }
-        const { unmount } = render(<Test />)
-        act(() => {
-            store.setState({ count: 1 })
-            unmount()
-        })
-        // Should not crash
-    })
-
-    it('setState after all consumers unmounted — no crash', () => {
-        const store = createStore({ count: 0 })
-        function Test() {
-            useStore(store)
-            return null
-        }
-        const { unmount } = render(<Test />)
-        unmount()
-        act(() => {
-            store.setState({ count: 1 })
-        })
-        // Should not crash
-    })
-
-    it('parent unmount cleans up child subscriptions', () => {
-        const store = createStore({ count: 0 })
-        const unsubscribeSpy = vi.fn()
-        vi.spyOn(store, 'subscribe').mockReturnValue(unsubscribeSpy)
-
-        function Child() {
-            useStore(store)
-            return null
-        }
-        function Parent() {
-            return <Child />
-        }
-        const { unmount } = render(<Parent />)
-        unmount()
-        expect(unsubscribeSpy).toHaveBeenCalled()
-    })
-})