hooks

Author: zbeyens

.changeset/cool-swans-flash.md

@@ -0,0 +1,8 @@
+---
+'jotai-x': minor
+---
+
+- `createAtomStore` now returns new utility hooks to provide a more direct way to access store atoms without having to call `useStore()` first:
+  - `use<Name>State(key, storeOptions)` - Get/set state for a specific key
+  - `use<Name>Value(key, options, deps)` - Get value for a specific key with optional selector and equality function
+  - `use<Name>Set(key, storeOptions)` - Get setter for a specific key

.eslintrc.cjs

@@ -11,7 +11,7 @@ module.exports = {
     './config/eslint/bases/javascript.cjs',
     './config/eslint/bases/typescript.cjs',
     './config/eslint/bases/regexp.cjs',
-    './config/eslint/bases/jest.cjs',
+    './config/eslint/bases/vitest.cjs',
     './config/eslint/bases/react.cjs',
     './config/eslint/bases/react-compiler.cjs',
     './config/eslint/bases/rtl.cjs',
@@ -29,7 +29,6 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    jest: true,
     node: true,
     webextensions: false,
   },

config/eslint/bases/jest.cjs

@@ -9,6 +9,7 @@ module.exports = {
         checkArrowFunctions: false,
       },
     ],
+    'unicorn/prefer-module': 'off',
     'unicorn/expiring-todo-comments': 'off',
     'unicorn/filename-case': 'off',
     'unicorn/no-array-callback-reference': 'off',

config/eslint/bases/unicorn.cjs

@@ -0,0 +1,22 @@
+const vitest = require('@vitest/eslint-plugin');
+
+module.exports = {
+  plugins: ['vitest'],
+  overrides: [
+    {
+      files: ['**/?(*.)+(test|spec).{js,jsx,ts,tsx}'],
+      rules: {
+        ...vitest.configs.recommended.rules,
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-object-literal-type-assertion': 'off',
+        'import/default': 'off',
+        'import/namespace': 'off',
+        'import/no-duplicates': 'off',
+        'import/no-named-as-default-member': 'off',
+      },
+    },
+  ],
+};

config/eslint/bases/vitest.cjs

@@ -4,6 +4,7 @@
   "workspaces": [
     "packages/**"
   ],
+  "type": "module",
   "scripts": {
     "build": "yarn g:build",
     "build:watch": "ROARR_LOG=true turbowatch ./config/turbowatch.config.ts | roarr",
@@ -38,11 +39,11 @@
     "p:brl:below": "cd $INIT_CWD && barrelsby -d $INIT_CWD/src -D -l below -q -e '.*(fixture|template|spec|__tests__).*'",
     "p:build": "cd $INIT_CWD && yarn p:tsup",
     "p:build:watch": "cd $INIT_CWD && yarn p:tsup --watch",
-    "p:clean": "cd $INIT_CWD && rimraf dist && jest --clear-cache",
+    "p:clean": "cd $INIT_CWD && rimraf dist",
     "p:lint": "eslint $INIT_CWD/src --color",
     "p:lint:fix": "eslint $INIT_CWD/src --color --fix",
     "p:tsup": "cd $INIT_CWD && tsup --config=${PROJECT_CWD}/config/tsup.config.ts",
-    "p:test": "cd $INIT_CWD && jest --config=${PROJECT_CWD}/jest.config.cjs --maxWorkers=1 --passWithNoTests $INIT_CWD ",
+    "p:test": "cd $INIT_CWD && vitest run --config=${PROJECT_CWD}/vitest.config.ts --passWithNoTests",
     "p:typecheck": "cd $INIT_CWD && tsc --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
@@ -54,18 +55,17 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@roarr/cli": "^5.12.4",
     "@swc/core": "1.3.100",
-    "@swc/jest": "0.2.29",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/glob": "8.1.0",
-    "@types/jest": "^29.5.11",
     "@types/node": "^20.10.4",
     "@types/react": "18.2.42",
     "@types/react-dom": "18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
+    "@vitest/eslint-plugin": "1.1.25",
     "app-root-path": "^3.1.0",
     "barrelsby": "^2.8.1",
     "concurrently": "^8.2.2",
@@ -77,7 +77,6 @@
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-mdx": "^2.2.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -89,21 +88,21 @@
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-unicorn": "^49.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-vitest": "0.5.4",
     "jotai": "^2.6.0",
+    "jsdom": "26.0.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "18.2.0",
     "react-test-renderer": "18.2.0",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.1",
     "tsup": "8.0.1",
     "turbo": "^1.11.0",
     "turbowatch": "2.29.4",
     "typedoc": "^0.25.4",
-    "typescript": "5.7.3"
+    "typescript": "5.7.3",
+    "vitest": "3.0.5"
   },
   "packageManager": "[email protected]",
   "engines": {

jest.config.cjs

@@ -242,8 +242,16 @@ describe('createAtomStore', () => {
       becomeFriends: () => {},
     };
 
-    const { myTestStoreStore, useMyTestStoreStore, MyTestStoreProvider } =
-      createAtomStore(initialTestStoreValue, { name: 'myTestStore' as const });
+    const {
+      myTestStoreStore,
+      useMyTestStoreStore,
+      MyTestStoreProvider,
+      useMyTestStoreSet,
+      useMyTestStoreState,
+      useMyTestStoreValue,
+    } = createAtomStore(initialTestStoreValue, {
+      name: 'myTestStore' as const,
+    });
 
     const ReadOnlyConsumer = () => {
       const name = useMyTestStoreStore().useNameValue();
@@ -414,6 +422,7 @@ describe('createAtomStore', () => {
       // Just guarantee that the react compiler doesn't complain
       /* eslint-enable react-compiler/react-compiler */
       const store = useMyTestStoreStore();
+      const becomeFriends0 = useMyTestStoreValue('becomeFriends');
       const becomeFriends1 = useStoreValue(store, 'becomeFriends');
       const becomeFriends2 = useStoreAtomValue(
         store,
@@ -424,6 +433,7 @@ describe('createAtomStore', () => {
         <button
           type="button"
           onClick={() => {
+            becomeFriends0();
             becomeFriends1();
             becomeFriends2();
           }}
@@ -507,14 +517,18 @@ describe('createAtomStore', () => {
       // Just guarantee that the react compiler doesn't complain
       /* eslint-enable react-compiler/react-compiler */
       const store = useMyTestStoreStore();
+      const setName = useMyTestStoreSet('name');
       const setBecomeFriends = useStoreSet(store, 'becomeFriends');
       const [becameFriends, setBecameFriends] = React.useState(false);
 
       return (
         <>
           <button
             type="button"
-            onClick={() => setBecomeFriends(() => setBecameFriends(true))}
+            onClick={() => {
+              setName('new');
+              setBecomeFriends(() => setBecameFriends(true));
+            }}
           >
             Change Callback
           </button>
@@ -603,16 +617,20 @@ describe('createAtomStore', () => {
       // Just guarantee that the react compiler doesn't complain
       /* eslint-enable react-compiler/react-compiler */
       const store = useMyTestStoreStore();
+      const [name, setName] = useMyTestStoreState('name');
       const [, setBecomeFriends] = useStoreState(store, 'becomeFriends');
       const [becameFriends, setBecameFriends] = React.useState(false);
 
       return (
         <>
           <button
             type="button"
-            onClick={() => setBecomeFriends(() => setBecameFriends(true))}
+            onClick={() => {
+              setName('new');
+              setBecomeFriends(() => setBecameFriends(true));
+            }}
           >
-            Change Callback
+            Change Callback {name}
           </button>
 
           <div>useBecameFriends: {becameFriends.toString()}</div>
@@ -791,8 +809,8 @@ describe('createAtomStore', () => {
     });
 
     it('can subscribe', () => {
-      const subName = jest.fn();
-      const subAge = jest.fn();
+      const subName = vi.fn();
+      const subAge = vi.fn();
       const { getByText } = render(
         <MutableProvider>
           <SubscribeConsumer subName={subName} subAge={subAge} />
@@ -820,8 +838,8 @@ describe('createAtomStore', () => {
     });
 
     it('can subscribe with key param', () => {
-      const subName = jest.fn();
-      const subAge = jest.fn();
+      const subName = vi.fn();
+      const subAge = vi.fn();
       const { getByText } = render(
         <MutableProvider>
           <SubscribeConsumerWithKeyParam subName={subName} subAge={subAge} />
@@ -1014,9 +1032,10 @@ describe('createAtomStore', () => {
         </BecomeFriendsProvider>
       );
 
-      act(() => getByText('Change Callback').click());
+      act(() => getByText('Change Callback John').click());
       expect(getByText('useBecameFriends: false')).toBeInTheDocument();
       act(() => getByText('Become Friends').click());
+      expect(getByText('Change Callback new')).toBeInTheDocument();
       expect(getByText('useBecameFriends: true')).toBeInTheDocument();
     });
   });