fix: add tests

Author: yf-yang

.changeset/bright-coats-peel.md

@@ -0,0 +1,5 @@
+---
+'jotai-x': patch
+---
+
+Add test cases and fix bugs

README.md

@@ -153,8 +153,7 @@ const [stars, setStars] = useAppState('stars');
 // With selector and deps
 const upperName = useAppValue('name', {
   selector: (name) => name.toUpperCase(),
-  deps: []
-});
+}, []);
 ```
 
 #### 2. Store Instance Methods
@@ -204,14 +203,14 @@ const name = useAppValue('name');
 // With selector
 const upperName = useAppValue('name', {
   selector: (name) => name.toUpperCase(),
-  deps: [] // Optional deps array
-});
+}, [] // if selector is not memoized, provide deps array
+);
 
 // With equality function
 const name = useAppValue('name', {
   selector: (name) => name,
   equalityFn: (prev, next) => prev.length === next.length
-});
+}, []);
 ```
 
 #### `use<Name>Set(key)`
@@ -404,7 +403,7 @@ const selector = useCallback((name) => name.toUpperCase(), []);
 useUserValue('name', { selector });
 
 // ✅ Correct - provide deps array
-useUserValue('name', { selector: (name) => name.toUpperCase(), deps: [] });
+useUserValue('name', { selector: (name) => name.toUpperCase() }, []);
 
 // ✅ Correct - no selector
 useUserValue('name');

packages/jotai-x/README.md

@@ -153,8 +153,7 @@ const [stars, setStars] = useAppState('stars');
 // With selector and deps
 const upperName = useAppValue('name', {
   selector: (name) => name.toUpperCase(),
-  deps: []
-});
+}, []);
 ```
 
 #### 2. Store Instance Methods
@@ -204,14 +203,14 @@ const name = useAppValue('name');
 // With selector
 const upperName = useAppValue('name', {
   selector: (name) => name.toUpperCase(),
-  deps: [] // Optional deps array
-});
+}, [] // if selector is not memoized, provide deps array
+);
 
 // With equality function
 const name = useAppValue('name', {
   selector: (name) => name,
   equalityFn: (prev, next) => prev.length === next.length
-});
+}, []);
 ```
 
 #### `use<Name>Set(key)`
@@ -404,7 +403,7 @@ const selector = useCallback((name) => name.toUpperCase(), []);
 useUserValue('name', { selector });
 
 // ✅ Correct - provide deps array
-useUserValue('name', { selector: (name) => name.toUpperCase(), deps: [] });
+useUserValue('name', { selector: (name) => name.toUpperCase() }, []);
 
 // ✅ Correct - no selector
 useUserValue('name');

packages/jotai-x/src/createAtomStore.spec.tsx

@@ -29,10 +29,8 @@ describe('createAtomStore', () => {
       arr: INITIAL_ARR,
     };
 
-    const { useMyTestStoreStore, MyTestStoreProvider } = createAtomStore(
-      initialTestStoreValue,
-      { name: 'myTestStore' as const }
-    );
+    const { useMyTestStoreStore, MyTestStoreProvider, useMyTestStoreValue } =
+      createAtomStore(initialTestStoreValue, { name: 'myTestStore' as const });
 
     let numRenderCount = 0;
     const NumRenderer = () => {
@@ -92,6 +90,24 @@ describe('createAtomStore', () => {
       );
     };
 
+    let arrNumRenderCountWithOneHook = 0;
+    const ArrNumRendererWithOneHook = () => {
+      arrNumRenderCountWithOneHook += 1;
+      const num = useMyTestStoreValue('num');
+      const arrNum = useMyTestStoreValue(
+        'arr',
+        {
+          selector: (v) => v[num],
+        },
+        [num]
+      );
+      return (
+        <div>
+          <div>arrNumWithOneHook: {arrNum}</div>
+        </div>
+      );
+    };
+
     let arrNumRenderWithDepsCount = 0;
     const ArrNumRendererWithDeps = () => {
       arrNumRenderWithDepsCount += 1;
@@ -110,6 +126,11 @@ describe('createAtomStore', () => {
       return <div>{arr0}</div>;
     };
 
+    const BadSelectorRenderer2 = () => {
+      const arr0 = useMyTestStoreValue('arr', { selector: (v) => v[0] });
+      return <div>{arr0}</div>;
+    };
+
     const Buttons = () => {
       const store = useMyTestStoreStore();
       return (
@@ -154,6 +175,7 @@ describe('createAtomStore', () => {
           <Arr0Renderer />
           <Arr1Renderer />
           <ArrNumRenderer />
+          <ArrNumRendererWithOneHook />
           <ArrNumRendererWithDeps />
           <Buttons />
         </MyTestStoreProvider>
@@ -166,6 +188,7 @@ describe('createAtomStore', () => {
       expect(arr0RenderCount).toBe(2);
       expect(arr1RenderCount).toBe(2);
       expect(arrNumRenderCount).toBe(2);
+      expect(arrNumRenderCountWithOneHook).toBe(2);
       expect(arrNumRenderWithDepsCount).toBe(2);
       expect(getByText('arrNum: alice')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: alice')).toBeInTheDocument();
@@ -177,6 +200,7 @@ describe('createAtomStore', () => {
       expect(arr0RenderCount).toBe(2);
       expect(arr1RenderCount).toBe(2);
       expect(arrNumRenderCount).toBe(5);
+      expect(arrNumRenderCountWithOneHook).toBe(5);
       expect(arrNumRenderWithDepsCount).toBe(5);
       expect(getByText('arrNum: bob')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: bob')).toBeInTheDocument();
@@ -188,6 +212,7 @@ describe('createAtomStore', () => {
       expect(arr0RenderCount).toBe(2);
       expect(arr1RenderCount).toBe(2);
       expect(arrNumRenderCount).toBe(5);
+      expect(arrNumRenderCountWithOneHook).toBe(5);
       expect(arrNumRenderWithDepsCount).toBe(5);
       expect(getByText('arrNum: bob')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: bob')).toBeInTheDocument();
@@ -199,6 +224,7 @@ describe('createAtomStore', () => {
       expect(arr0RenderCount).toBe(2);
       expect(arr1RenderCount).toBe(2);
       expect(arrNumRenderCount).toBe(5);
+      expect(arrNumRenderCountWithOneHook).toBe(5);
       expect(arrNumRenderWithDepsCount).toBe(5);
       expect(getByText('arrNum: bob')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: bob')).toBeInTheDocument();
@@ -210,6 +236,7 @@ describe('createAtomStore', () => {
       expect(arr0RenderCount).toBe(3);
       expect(arr1RenderCount).toBe(2);
       expect(arrNumRenderCount).toBe(8);
+      expect(arrNumRenderCountWithOneHook).toBe(8);
       expect(arrNumRenderWithDepsCount).toBe(8);
       expect(getByText('arrNum: ava')).toBeInTheDocument();
       expect(getByText('arrNumWithDeps: ava')).toBeInTheDocument();
@@ -224,6 +251,16 @@ describe('createAtomStore', () => {
         )
       ).toThrow();
     });
+
+    it('Throw error is user does memoize selector 2', () => {
+      expect(() =>
+        render(
+          <MyTestStoreProvider>
+            <BadSelectorRenderer2 />
+          </MyTestStoreProvider>
+        )
+      ).toThrow();
+    });
   });
 
   describe('single provider', () => {

packages/jotai-x/src/createAtomStore.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { getDefaultStore, useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom, useHydrateAtoms } from 'jotai/utils';
 
+
+
 import { atomWithFn } from './atomWithFn';
 import { createAtomProvider, useAtomStore } from './createAtomProvider';
 
@@ -493,10 +495,10 @@ export interface CreateAtomStoreOptions<
  * Each property will have a getter and setter.
  *
  * @example
- * const { exampleStore, useExampleStore } = createAtomStore({ count: 1, say: 'hello' }, { name: 'example' as const })
- * const [count, setCount] = useExampleStore().useCountState()
- * const say = useExampleStore().useSayValue()
- * const setSay = useExampleStore().useSetSay()
+ * const { exampleStore, useExampleStore, useExampleValue, useExampleState, useExampleSet } = createAtomStore({ count: 1, say: 'hello' }, { name: 'example' as const })
+ * const [count, setCount] = useExampleState()
+ * const say = useExampleValue('say')
+ * const setSay = useExampleSet('say')
  * setSay('world')
  * const countAtom = exampleStore.atom.count
  */
@@ -591,7 +593,7 @@ export const createAtomStore = <
       if (renderCount > infiniteRenderDetectionLimit) {
         throw new Error(
           `
-use<Key>Value/useValue has rendered ${infiniteRenderDetectionLimit} times in the same render.
+use<Key>Value/useValue/use<StoreName>Value has rendered ${infiniteRenderDetectionLimit} times in the same render.
 It is very likely to have fallen into an infinite loop.
 That is because you do not memoize the selector/equalityFn function param.
 Please wrap them with useCallback or configure the deps array correctly.`
@@ -1008,4 +1010,4 @@ export function useStoreAtomState<T, E, V, A extends unknown[], R>(
   atom: WritableAtom<V, A, R>
 ) {
   return store.useAtomState(atom);
-}
+}