Merge branch 'main' into jsr-trial

.github/pull_request_template.md

@@ -8,4 +8,4 @@ Fixes #
 
 ## Check List
 
-- [ ] `yarn run prettier` for formatting code and docs
+- [ ] `pnpm run prettier` for formatting code and docs

.github/workflows/compressed-size-action.yml

@@ -8,7 +8,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: preactjs/compressed-size-action@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+      - uses: actions/setup-node@v3
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - uses: preactjs/compressed-size-action@v2

.github/workflows/lint-and-type.yml

@@ -10,16 +10,16 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '18'
-          cache: yarn
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: yarn install --frozen-lockfile --check-files
-      - name: Prettier
-        run: yarn prettier:ci
-      - name: Lint
-        run: yarn eslint:ci
-      - name: Type
-        run: yarn pretest
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test:format
+      - run: pnpm test:types
+      - run: pnpm test:lint

.github/workflows/livecodes-preview.yml

@@ -7,8 +7,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
       - uses: live-codes/preview-in-livecodes@v1
         with:
-          install-command: "yarn install --frozen-lockfile --check-files"
-          build-command: "yarn build"
+          install-command: "pnpm install --frozen-lockfile"
+          build-command: "pnpm build"
           base-url: "https://{{LC::REF}}.preview-in-livecodes-demo.pages.dev"

.github/workflows/test-multiple-builds.yml

@@ -12,21 +12,24 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        build: [cjs, umd] # [cjs, esm, umd, system]
+        build: [cjs, esm, umd]
         env: [development, production]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '18'
-          cache: yarn
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: yarn install --frozen-lockfile --check-files
-      - run: yarn build
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
       - name: Use React 17 for production test
         if: ${{ matrix.env == 'production' }}
         run: |
-          yarn add -D [email protected] [email protected] @testing-library/[email protected]
+          pnpm add -D [email protected] [email protected] @testing-library/[email protected]
       - name: Patch for DEV-ONLY
         if: ${{ matrix.env == 'development' }}
         run: |
@@ -40,28 +43,31 @@ jobs:
       - name: Patch for CJS
         if: ${{ matrix.build == 'cjs' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\1.js/" package.json
+          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\1.js')/" vitest.config.ts
+          sed -i~ "s/import { useResetAtom } from 'jotai\/react\/utils'/const { useResetAtom } = require('..\/..\/..\/dist\/react\/utils.js')/" tests/react/utils/useResetAtom.test.tsx
+          sed -i~ "s/import { RESET, atomWithReducer, atomWithReset } from 'jotai\/vanilla\/utils'/const { RESET, atomWithReducer, atomWithReset } = require('..\/..\/..\/dist\/vanilla\/utils.js')/" tests/react/utils/useResetAtom.test.tsx
       - name: Patch for ESM
         if: ${{ matrix.build == 'esm' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/esm\1.js" package.json
+          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/esm\1.mjs')/" vitest.config.ts
           sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests/*/*.tsx tests/*/*/*.tsx
         env:
           NODE_ENV: ${{ matrix.env }}
       - name: Patch for UMD
         if: ${{ matrix.build == 'umd' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.${NODE_ENV}.js/" package.json
+          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/umd\1.${NODE_ENV}.js')/" vitest.config.ts
+          rm tests/react/utils/useResetAtom.test.tsx # FIXME we skip this for now. Actually I'm not sure if we really run tests with UMD build
         env:
           NODE_ENV: ${{ matrix.env }}
       - name: Patch for SystemJS
         if: ${{ matrix.build == 'system' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/system\1.${NODE_ENV}.js/" package.json
+          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/system\1.${NODE_ENV}.js')/" vitest.config.ts
         env:
           NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |
-          yarn test:ci
+          pnpm test-build:spec # test:spec
         env:
           NODE_ENV: ${{ matrix.env }}

.github/workflows/test-multiple-versions.yml

@@ -10,17 +10,18 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '18'
-          cache: yarn
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: yarn install --frozen-lockfile --check-files
-      - name: Test Build # we don't have any other workflows to test build
-        run: yarn build
-      - name: Test Default
-        run: yarn test:ci
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build # we don't have any other workflows to test build
+      - run: pnpm test:spec
 
   test_matrix:
     runs-on: ubuntu-latest
@@ -36,25 +37,28 @@ jobs:
           - 18.3.0-canary-4b84f1161-20240318
           - 0.0.0-experimental-4b84f1161-20240318
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+      - uses: actions/setup-node@v3
         with:
-          node-version: '18'
-          cache: yarn
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: yarn install --frozen-lockfile --check-files
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
       - name: Install legacy testing-library
         if: ${{ startsWith(matrix.react, '16.') || startsWith(matrix.react, '17.') }}
-        run: yarn add -D @testing-library/[email protected]
+        run: pnpm add -D @testing-library/[email protected]
       - name: Patch for React 16
         if: ${{ startsWith(matrix.react, '16.') }}
         run: |
           sed -i~ '1s/^/import React from "react";/' tests/*/*.tsx tests/*/*/*.tsx
           sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
           sed -i~ 's/import\.meta\.env[?]\.MODE/"DEVELOPMENT".toLowerCase()/' src/*.ts src/*/*.ts src/*/*/*.ts
       - name: Test Build # we need to build for babel tests
-        run: yarn build
+        run: pnpm build
       - name: Test ${{ matrix.react }}
         run: |
-          yarn add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
-          yarn test:ci
+          pnpm add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
+          pnpm test:spec

.github/workflows/test-old-typescript.yml

@@ -13,7 +13,8 @@ jobs:
       fail-fast: false
       matrix:
         typescript:
-          - 5.3.2
+          - 5.4.4
+          - 5.3.3
           - 5.2.2
           - 5.1.6
           - 5.0.4
@@ -30,14 +31,17 @@ jobs:
           - 3.9.7
           - 3.8.3
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '18'
-          cache: yarn
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: yarn install --frozen-lockfile --check-files
-      - run: yarn build
+          version: 8.2.0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
       - name: Patch for Newer TS
         if: ${{ matrix.typescript == '4.9.5' || matrix.typescript == '4.8.4' }}
         run: |
@@ -47,7 +51,7 @@ jobs:
           sed -i~ 's/"jotai\/\*": \["\.\/src\/\*\.ts"\]/"jotai\/*": [".\/dist\/*.d.ts"]/' tsconfig.json
           sed -i~ 's/"include": .*/"include": ["src\/types.d.ts", "dist\/**\/*", "tests\/**\/*"],/' tsconfig.json
       - name: Patch for Old TS
-        if: ${{ matrix.typescript == '4.7.4' || matrix.typescript == '4.6.4' || matrix.typescript == '4.5.5' ||   matrix.typescript == '4.4.4' || matrix.typescript == '4.3.5' || matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
+        if: ${{ matrix.typescript == '4.7.4' || matrix.typescript == '4.6.4' || matrix.typescript == '4.5.5' || matrix.typescript == '4.4.4' || matrix.typescript == '4.3.5' || matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
         run: |
           sed -i~ 's/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//' tests/*/*.tsx tests/*/*/*.tsx
           sed -i~ 's/"target":/"skipLibCheck":true,"target":/' tsconfig.json
@@ -65,19 +69,23 @@ jobs:
           sed -i~ 's/"jsx": "react-jsx",/"jsx": "react",/' tsconfig.json
           sed -i~ 's/"noUncheckedIndexedAccess": true,//' tsconfig.json
           sed -i~ 's/^import type /import /' tests/*/*.tsx tests/*/*/*.tsx
-          yarn json -I -f package.json -e "this.resolutions={};  this.resolutions['@types/prettier']='2.4.2'; this.resolutions['@types/node']='18.11.18';"
-          yarn add -D @types/[email protected] @types/[email protected] @types/[email protected] @types/[email protected]
+          pnpm json -I -f package.json -e "this.resolutions={};  this.resolutions['@types/prettier']='2.4.2'; this.resolutions['@types/node']='18.11.18';"
+          pnpm add -D @types/[email protected] @types/[email protected] @types/[email protected] @types/[email protected]
           rm -r tests/react/vanilla-utils/atomWithObservable.*
       - name: Install old TypeScript
-        run: yarn add -D typescript@${{ matrix.typescript }}
+        run: pnpm add -D typescript@${{ matrix.typescript }}
+      - name: Patch testing setup for Old TS
+        if: ${{ matrix.typescript == '4.4.4' || matrix.typescript == '4.3.5' || matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
+        run: |
+          pnpm add -D [email protected] @vitest/[email protected] @vitest/[email protected]
       - name: Patch testing setup for older TS
         if: ${{ matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
         run: |
-          yarn add -D @testing-library/[email protected] @testing-library/[email protected]
+          pnpm add -D @testing-library/[email protected] @testing-library/[email protected]
           rm node_modules/vitest/dist/*.d.ts
           echo "declare module 'vitest'" >> ./src/types.d.ts
       - name: Test ${{ matrix.typescript }}
         run: |
           rm -r node_modules/@types/babel__core/node_modules
           sed -i~ 's/">=4.2": {/">=4.1": {/' node_modules/rxjs/package.json
-          yarn tsc --noEmit
+          pnpm test:types

CONTRIBUTING.md

@@ -19,25 +19,25 @@ If you would like to contribute by fixing an open issue or developing a new feat
 1. Fork this repository
 2. Create a new feature branch based off the `main` branch
 3. Follow the [Core lib](#core-lib) and/or the [docs](#docs) guide below and come back to this once done
-4. Run `yarn run prettier` to format the code
+4. Run `pnpm run prettier` to format the code
 5. Git stage your required changes and commit (review the commit guidelines below)
 6. Submit the PR for review
 
 ### Core lib
 
-1. Install dependencies by running `yarn`. We use [version 1](https://classic.yarnpkg.com/lang/en/docs/install) of yarn
+1. Install dependencies by running `pnpm`.
 2. Create failing tests for your fix or new feature in the `tests` folder
 3. Implement your changes
-4. Build the library `yarn run build` _(Pro-tip: `yarn run build-watch` runs the build in watch mode)_
-5. Run the tests and ensure that they pass. _(Pro-tip: `yarn test:dev` runs the test in watch mode)_
-6. You can use `yarn link` or `yalc` to sym-link this package and test it locally on your own project. Alternatively, you may use CodeSandbox CI's canary releases to test the changes in your own project (requires a PR to be created first)
+4. Build the library `pnpm run build` _(Pro-tip: `pnpm run build-watch` runs the build in watch mode)_
+5. Run the tests and ensure that they pass.
+6. You can use `pnpm link` or `yalc` to sym-link this package and test it locally on your own project. Alternatively, you may use CodeSandbox CI's canary releases to test the changes in your own project (requires a PR to be created first)
 7. Follow step 4 and onwards from the [general](#general) guide above to bring it to the finish line
 
 ### Docs
 
 1. Navigate to the `website` folder. Eg. `cd website`
-2. Install dependencies by running `yarn` in the `website` folder We use [version 1](https://classic.yarnpkg.com/lang/en/docs/install) of yarn
-3. Run `yarn dev` to start the dev server
+2. Install dependencies by running `pnpm` in the `website` folder
+3. Run `pnpm dev` to start the dev server
 4. Navigate to [`http://localhost:9000`](http://localhost:9000) to view the docs
 5. Navigate to the `docs` folder and make necessary changes to the docs
 6. Add your changes to the docs and see them live reloaded in the browser
@@ -49,7 +49,7 @@ We follow the [conventional commit spec](https://www.conventionalcommits.org/en/
 
 Your commit type must be one of the following:
 
-- **build**: Changes that affect the build system or external dependencies (example scopes: yarn, npm, rollup, etc.)
+- **build**: Changes that affect the build system or external dependencies (example scopes: pnpm, npm, rollup, etc.)
 - **ci**: Changes to our CI configuration files and scripts (example scopes: GitHub Actions)
 - **docs**: Documentation only changes
 - **feat**: A new feature

docs/extensions/effect.mdx

@@ -97,7 +97,7 @@ function MyComponent() {
 
   </details>
 
-- **Resistent To Infinite Loops:**
+- **Resistant To Infinite Loops:**
   `atomEffect` does not rerun when it changes a value with `set` that it is watching.
 
   <!-- prettier-ignore -->
@@ -370,7 +370,7 @@ This guarantees that a single effect will be used regardless of how many calls t
 
 The same guarantee can be achieved with the useEffect hook if you ensure that the useEffect is idempotent.
 
-atomEffects are distinguished from useEffect in a few other ways. They can directly react to atom state changes, are resistent to infinite loops, and can be mounted conditionally.
+atomEffects are distinguished from useEffect in a few other ways. They can directly react to atom state changes, are resistant to infinite loops, and can be mounted conditionally.
 
 #### It's up to you
 

docs/extensions/immer.mdx

@@ -15,7 +15,7 @@ npm i immer jotai-immer
 
 ## atomWithImmer
 
-`atomWithImmer` creates a new atom similar to the regular [`atom`](../core/atom.mdx) [atom] with a different `writeFunction`. In this bundle, we don't have read-only atoms, because the point of these functions is the immer produce(mutability) function.
+`atomWithImmer` creates a new atom similar to the regular [`atom`](../core/atom.mdx) with a different `writeFunction`. In this bundle, we don't have read-only atoms, because the point of these functions is the immer produce(mutability) function.
 The signature of writeFunction is `(get, set, update: (draft: Draft<Value>) => void) => void`.
 
 ```jsx

docs/extensions/query.mdx

@@ -30,19 +30,18 @@ npm i jotai-tanstack-query @tanstack/query-core wonka
 You can incrementally adopt `jotai-tanstack-query` in your app. It's not an all or nothing solution. You just have to ensure you are using the same QueryClient instance. [QueryClient Setup](#referencing-the-same-instance-of-query-client-in-your-project).
 
 ```jsx
-# existing useQueryHook
-  const { data, isPending, isError } = useQuery({
-    queryKey: ['todos'],
-    queryFn: fetchTodoList
-  });
-
-# jotai-tanstack-query
-  const todosAtom = atomWithQuery(() => ({
-    queryKey: ['todos'],
-  }))
+// existing useQueryHook
+const { data, isPending, isError } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
 
-  const [{ data, isPending, isError }] = useAtom(todosAtom)
+// jotai-tanstack-query
+const todosAtom = atomWithQuery(() => ({
+  queryKey: ['todos'],
+}))
 
+const [{ data, isPending, isError }] = useAtom(todosAtom)
 ```
 
 ### Exported functions