.eslintrc.json

@@ -36,6 +36,7 @@
     "prefer-const": "error",
     "curly": ["warn", "multi-line", "consistent"],
     "no-console": "off",
+    "import/extensions": ["error", "always"],
     "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
     "import/export": "error",
     "@typescript-eslint/no-duplicate-imports": ["error"],
@@ -93,12 +94,8 @@
       "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
     },
     "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
-        "paths": ["src"]
-      },
       "alias": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
         "map": [
           ["^jotai$", "./src/index.ts"],
           ["jotai", "./src"]
@@ -108,9 +105,9 @@
   },
   "overrides": [
     {
-      "files": ["src"],
-      "parserOptions": {
-        "project": "./tsconfig.json"
+      "files": ["tests/**/*.ts", "tests/**/*.tsx"],
+      "rules": {
+        "import/extensions": ["error", "never"]
       }
     },
     {

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

@@ -48,13 +48,18 @@ jobs:
           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/SystemJS
-        if: ${{ matrix.build == 'umd' || matrix.build == 'system' }}
+      - name: Patch for UMD
+        if: ${{ matrix.build == 'umd' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/${BUILD}\1.${NODE_ENV}.js/" package.json
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/umd\1.${NODE_ENV}.js/" package.json
           sed -i~ 's/"test:ci":.*,$/"test:ci": "jest",/' package.json
         env:
-          BUILD: ${{ matrix.build }}
+          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
+        env:
           NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |

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

@@ -33,8 +33,8 @@ jobs:
           - 18.0.0
           - 18.1.0
           - 18.2.0
-          - 18.3.0-next-41110021f-20230301
-          - 0.0.0-experimental-41110021f-20230301
+          - 18.3.0-next-dd5365878-20230407
+          - 0.0.0-experimental-dd5365878-20230407
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

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

@@ -13,7 +13,7 @@ jobs:
       fail-fast: false
       matrix:
         typescript:
-          - 4.9.4
+          - 4.9.5
           - 4.8.4
           - 4.7.4
           - 4.6.4
@@ -34,6 +34,9 @@ jobs:
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
       - run: yarn build
+      - name: Patch for All TS
+          sed -i~ 's/"moduleResolution": "nodenext",/"moduleResolution": "node",/' tsconfig.json
+          sed -i~ 's/"allowImportingTsExtensions": true,//' 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.') }}
         run: |

CONTRIBUTING.md

@@ -10,35 +10,59 @@ Also for usage questions, please [start a discussion](https://github.com/pmndrs/
 
 If you are here to suggest a feature, first [start a discussion](https://github.com/pmndrs/jotai/discussions/new) if it does not already exist. From there, we will discuss use-cases for the feature and then finally discuss how it could be implemented.
 
-## Development
+## Development guide
 
 If you would like to contribute by fixing an open issue or developing a new feature you can use this suggested workflow:
 
-- Fork this repository.
-- Create a new feature branch based off the `main` branch.
-- Install dependencies by running `$ yarn`. [(version 1)](https://classic.yarnpkg.com/lang/en/docs/install)
-- Create failing tests for your fix or new feature.
-- Implement your changes and confirm that all test are passing. You can run the tests continuously during development via the `$ yarn test:dev` command.
-- If you want to test it in a React project you can either use `$ yarn link` or `yalc` package.
-- Git stage your required changes and commit (see below commit guidelines).
-- Submit PR for review.
+### General
+
+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
+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
+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)
+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
+4. Navigate to [`http://localhost:9000`](http://localhost:9000) to view the docs
+5. Naivgate 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
+7. Follow step 4 and onwards from the [general](#general) guide above to bring it to the finish line
 
 ### Type
 
-Must be one of the following:
+We follow the [conventional commit spec](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. Please review the spec for more details.
+
+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.)
+- **ci**: Changes to our CI configuration files and scripts (example scopes: GitHub Actions)
+- **docs**: Documentation only changes
 - **feat**: A new feature
 - **fix**: A bug fix
-- **docs**: Documentation only changes
+- **perf**: A code change that improves performance
 - **refactor**: A code change that neither fixes a bug nor adds a feature
-- **test**: Adding missing or correcting existing tests
-- **chore**: Changes to the build process or auxiliary tools and libraries such as documentation
-  generation
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- **test**: Adding missing tests or correcting existing tests
 
 ## Pull requests
 
 Please try to keep your pull request focused in scope and avoid including unrelated commits.
 
-After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
+After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or request improvements, therefore, please check ✅ ["Allow edits from maintainers"](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork) on your PR
 
 Thank you for contributing!

benchmarks/simple-read.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env npx ts-node
 
 import { add, complete, cycle, save, suite } from 'benny'
-import { atom } from '../src/vanilla/atom'
-import type { PrimitiveAtom } from '../src/vanilla/atom'
-import { createStore } from '../src/vanilla/store'
+import { atom } from '../src/vanilla/atom.ts'
+import type { PrimitiveAtom } from '../src/vanilla/atom.ts'
+import { createStore } from '../src/vanilla/store.ts'
 
 const createStateWithAtoms = (n: number) => {
   let targetAtom: PrimitiveAtom<number> | undefined

benchmarks/simple-write.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env npx ts-node
 
 import { add, complete, cycle, save, suite } from 'benny'
-import { atom } from '../src/vanilla/atom'
-import type { PrimitiveAtom } from '../src/vanilla/atom'
-import { createStore } from '../src/vanilla/store'
+import { atom } from '../src/vanilla/atom.ts'
+import type { PrimitiveAtom } from '../src/vanilla/atom.ts'
+import { createStore } from '../src/vanilla/store.ts'
 
 const createStateWithAtoms = (n: number) => {
   let targetAtom: PrimitiveAtom<number> | undefined

benchmarks/subscribe-write.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env npx ts-node
 
 import { add, complete, cycle, save, suite } from 'benny'
-import { atom } from '../src/vanilla/atom'
-import type { PrimitiveAtom } from '../src/vanilla/atom'
-import { createStore } from '../src/vanilla/store'
+import { atom } from '../src/vanilla/atom.ts'
+import type { PrimitiveAtom } from '../src/vanilla/atom.ts'
+import { createStore } from '../src/vanilla/store.ts'
 
 const cleanupFns = new Set<() => void>()
 const cleanup = () => {

docs/basics/comparison.mdx

@@ -25,7 +25,7 @@ This avoids the need for memoization.
 Jotai has two principles.
 
 - Primitive: Its basic API is simple, like `useState`.
-- Flexible: Atoms can derive another atom and form a graph. Atoms can also be updated by another arbitrary atom. It allows to abstract complex state model.
+- Flexible: Atoms can derive another atom and form a graph. Atoms can also be updated by another arbitrary atom. It allows abstracting complex state models.
 
 ## How is Jotai different from useContext of React?
 

docs/guides/initialize-atom-on-render.mdx

@@ -12,7 +12,7 @@ Below is a basic example of illustrating how you can use `Provider` and its prop
 
 ### Basic Example
 
-> CodeSandbox link: [codesandbox](https://codesandbox.io/s/strange-tdd-gb1eo0?file=/src/App.js).
+> CodeSandbox link: [codesandbox](https://codesandbox.io/s/init-atoms-with-usehydrateatoms-nryk1w).
 
 Consider a basic example where you have a reusable `TextDisplay` component that allows you to display and update plain text.
 
@@ -63,7 +63,7 @@ const HydrateAtoms = ({ initialValues, children }) => {
 }
 
 export const TextDisplay = ({ initialTextValue }) => (
-  <Provider store={storeRef.current}>
+  <Provider>
     <HydrateAtoms initialValues={[[textAtom, initialTextValue]]}>
       <PrettyText />
       <br />

docs/guides/resettable.mdx

@@ -55,7 +55,7 @@ const TodoList = () => {
 ## Derived atom with RESET symbol
 
 ```jsx
-import { atom, useAtom } from 'jotai'
+import { atom, useAtom, useSetAtom } from 'jotai'
 import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'
 
 const dollarsAtom = atomWithReset(0)
@@ -67,7 +67,7 @@ const centsAtom = atom(
 
 const ResetExample = () => {
   const [dollars] = useAtom(dollarsAtom)
-  const setCents = useUpdateAtom(centsAtom)
+  const setCents = useSetAtom(centsAtom)
   const resetCents = useResetAtom(centsAtom)
 
   return (

docs/guides/testing.mdx

@@ -19,7 +19,7 @@ Here's an example using [React testing library](https://github.com/testing-libra
 ```jsx
 import { atom, useAtom } from 'jotai'
 
-const countAtom = atom(0)
+export const countAtom = atom(0)
 
 export function Counter() {
   const [count, setCount] = useAtom(countAtom)
@@ -61,6 +61,7 @@ In order to do that, simply use a [Provider](../core/provider.mdx), and export y
 ```tsx
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { useHydrateAtoms } from 'jotai/utils'
 import { countAtom, Counter } from './Counter'
 import { Provider } from 'jotai'
 

docs/integrations/query.mdx

@@ -38,9 +38,9 @@ The second optional `getQueryClient` parameter is a function that return [QueryC
 
 The return values have two atoms.
 The first one is called `dataAtom` and it's an atom for the data from the observer. `dataAtom` requires Suspense.
-The second one is called `statusAtom` and it's an atom for the full result from the observer. `statusAtom` doesn't require Suspense.
+The second one is called `statusAtom` and it's an atom for the full result from the observer. `statusAtom` doesn't require Suspense and won't throw errors to Error Boundary.
 The data from the observer is also included in `statusAtom`,
-so if you don't use Suspense, you don't need to use `dataAtom`.
+so if you don't use Suspense and Error Boundary, you don't need to use `dataAtom`.
 
 ## `atomsWithQuery` usage
 

docs/recipes/atom-creators.mdx

@@ -301,8 +301,7 @@ those state changes.
 
 ```ts
 import { useEffect } from 'react'
-import { atom, Getter, Setter, SetStateAction } from 'jotai'
-import { useUpdateAtom } from 'jotai/utils'
+import { atom, useSetAtom, Getter, Setter, SetStateAction } from 'jotai'
 
 type Callback<Value> = (
   get: Getter,
@@ -326,7 +325,7 @@ export function atomWithListeners<Value>(initialValue: Value) {
     }
   )
   const useListener = (callback: Callback<Value>) => {
-    const setListeners = useUpdateAtom(listenersAtom)
+    const setListeners = useSetAtom(listenersAtom)
     useEffect(() => {
       setListeners((prev) => [...prev, callback])
       return () =>