feat(valtio,zustand,redux,xstate,immer,optics): move integrations to …

…peer deps (#1573) * chore(valtio): move to peer dep * run prettier * chore(zustand): move to peer dep * chore(redux): move to peer dep * a workaround for older ts * another workaround for older ts * chore(xstate): move to peer dep * chore(immer): move to peer dep * the workaround for older ts * chore(optics): move to peer dep
pmndrs · Nov 17, 2022 · 14065f6 · 14065f6 · vercel · Nov 17, 2022
1 parent a34d6a8
commit 14065f6
Show file tree

Hide file tree

Showing 23 changed files with 125 additions and 545 deletions.
diff --git a/.github/workflows/test-old-typescript.yml b/.github/workflows/test-old-typescript.yml
@@ -57,4 +57,5 @@ jobs:
           yarn add -D typescript@${{ matrix.typescript }}
           rm -r node_modules/@types/jsdom node_modules/parse5
           sed -i~ "s/\">=4.2\": {/\">=4.1\": {/" node_modules/rxjs/package.json
+          sed -i~ "s/^import type /import /" node_modules/jotai-redux/dist/src/atomWithStore.d.ts node_modules/jotai-immer/dist/src/*.d.ts
           yarn tsc --noEmit
diff --git a/docs/integrations/immer.mdx b/docs/integrations/immer.mdx
@@ -1,17 +1,17 @@
 ---
 title: Immer
-description: This doc describes `jotai/immer` bundle.
+description: This doc describes Immer integration.
 nav: 4.01
 ---
 
 ## Install
 
-You have to install `immer` to access this bundle and its functions.
+You have to install `immer` and `jotai-immer` to use this feature.
 
 ```
-npm install immer
+npm install immer jotai-immer
 # or
-yarn add immer
+yarn add immer jotai-immer
 ```
 
 ## atomWithImmer
@@ -21,7 +21,7 @@ The signature of writeFunction is `(get, set, update: (draft: Draft<Value>) => v
 
 ```jsx
 import { useAtom } from 'jotai'
-import { atomWithImmer } from 'jotai/immer'
+import { atomWithImmer } from 'jotai-immer'
 
 const countAtom = atomWithImmer(0)
 
@@ -42,15 +42,15 @@ const Controls = () => {
 
 Check this example with atomWithImmer:
 
-<CodeSandbox id="vtp3j" />
+<CodeSandbox id="4xnr17" />
 
 ## withImmer
 
 `withImmer` takes an atom and returns a derived atom, same as `atomWithImmer` it has a different `writeFunction`.
 
 ```jsx
 import { useAtom, atom } from 'jotai'
-import { withImmer } from 'jotai/immer'
+import { withImmer } from 'jotai-immer'
 
 const primitiveAtom = atom(0)
 const countAtom = withImmer(primitiveAtom)
@@ -68,13 +68,19 @@ const Controls = () => {
 }
 ```
 
+### Examples
+
+Check this example with withImmer:
+
+<CodeSandbox id="9188j1" />
+
 ## useImmerAtom
 
 This hook takes an atom and replaces the atom's `writeFunction` with the new immer-like `writeFunction` like the previous helpers.
 
 ```jsx
 import { useAtom } from 'jotai'
-import { useImmerAtom } from 'jotai/immer'
+import { useImmerAtom } from 'jotai-immer'
 
 const primitiveAtom = atom(0)
 
@@ -93,6 +99,14 @@ const Controls = () => {
 
 It would be better if you don't use `withImmer` and `atomWithImmer` with `useImmerAtom` because they provide the immer-like `writeFunction` and we don't need to create a new one.
 
-## Codesandbox
+### Examples
+
+Check this example with useImmerAtom:
+
+<CodeSandbox id="tyivk0" />
+
+## Demo
+
+FIXME: update this demo
 
 <CodeSandbox id="ms9pv" />
diff --git a/docs/integrations/optics.mdx b/docs/integrations/optics.mdx
@@ -1,17 +1,17 @@
 ---
 title: Optics
-description: This doc describes `jotai/optics` bundle.
+description: This doc describes Optics-ts integration.
 nav: 4.02
 ---
 
 ## Install
 
-You have to install `optics-ts` to access this bundle and its functions.
+You have to install `optics-ts` and `jotai-optics` to use this feature.
 
 ```
-npm install optics-ts
+npm install optics-ts jotai-optics
 # or
-yarn add optics-ts
+yarn add optics-ts jotai-optics
 ```
 
 ## focusAtom
@@ -37,7 +37,7 @@ To see more advanced optics, please see the example at: /~https://github.com/akher
 
 ```jsx
 import { atom } from 'jotai'
-import { focusAtom } from 'jotai/optics'
+import { focusAtom } from 'jotai-optics'
 
 const objectAtom = atom({ a: 5, b: 10 })
 const aAtom = focusAtom(objectAtom, (optic) => optic.prop('a'))
@@ -59,4 +59,4 @@ const Controls = () => {
 
 ### Codesandbox
 
-<CodeSandbox id="y5wef8" />
+<CodeSandbox id="nsy4u8" />
diff --git a/docs/integrations/redux.mdx b/docs/integrations/redux.mdx
@@ -1,6 +1,6 @@
 ---
 title: Redux
-description: This doc describes `jotai/redux` bundle.
+description: This doc describes Redux integration.
 nav: 4.07
 ---
 
@@ -12,12 +12,12 @@ and sync with atoms in Jotai.
 
 ## Install
 
-You have to install `redux` to access this bundle and its functions.
+You have to install `redux` and `jotai-redux` to use this feature.
 
 ```
-npm install redux
+npm install redux jotai-redux
 # or
-yarn add redux
+yarn add redux jotai-redux
 ```
 
 ## atomWithStore
@@ -27,7 +27,7 @@ It's two-way binding and you can change the value from both ends.
 
 ```jsx
 import { useAtom } from 'jotai'
-import { atomWithStore } from 'jotai/redux'
+import { atomWithStore } from 'jotai-redux'
 import { createStore } from 'redux'
 
 const initialState = { count: 0 }
@@ -54,4 +54,4 @@ const Counter = () => {
 
 ### Examples
 
-<CodeSandbox id="cmlu5" />
+<CodeSandbox id="487792" />
diff --git a/docs/integrations/valtio.mdx b/docs/integrations/valtio.mdx
@@ -1,6 +1,6 @@
 ---
 title: Valtio
-description: This doc describes `jotai/valtio` bundle.
+description: This doc describes Valtio integration.
 nav: 4.05
 ---
 
@@ -14,12 +14,12 @@ This only uses the vanilla api of valtio.
 
 ## Install
 
-You have to install `valtio` to access this bundle and its functions.
+You have to install `valtio` and `jotai-valtio` to use this feature.
 
 ```
-npm install valtio
+npm install valtio jotai-valtio
 # or
-yarn add valtio
+yarn add valtio jotai-valtio
 ```
 
 ## atomWithProxy
@@ -29,7 +29,7 @@ It's two-way binding and you can change the value from both ends.
 
 ```jsx
 import { useAtom } from 'jotai'
-import { atomWithProxy } from 'jotai/valtio'
+import { atomWithProxy } from 'jotai-valtio'
 import { proxy } from 'valtio/vanilla'
 
 const proxyState = proxy({ count: 0 })
@@ -67,4 +67,4 @@ atomWithProxy(proxyObject, { sync: true })
 
 ### Examples
 
-<CodeSandbox id="f5u4l" />
+<CodeSandbox id="ew98ll" />
diff --git a/docs/integrations/xstate.mdx b/docs/integrations/xstate.mdx
@@ -1,24 +1,22 @@
 ---
 title: XState
-description: This doc describes `jotai/xstate` bundle.
+description: This doc describes XState integration.
 nav: 4.04
 ---
 
-This doc describes `jotai/xstate` bundle.
-
 Jotai's state management is primitive and flexible,
 but that sometimes means too free.
 XState is a sophisticated library to provide
 a better and safer abstraction for state management.
 
 ## Install
 
-You have to install `xstate` to access this bundle and its functions.
+You have to install `xstate` and `jotai-xstate` to use this feature.
 
 ```
-npm install xstate
+npm install xstate jotai-xstate
 # or
-yarn add xstate
+yarn add xstate jotai-xstate
 ```
 
 ## atomWithMachine
@@ -30,7 +28,7 @@ with which you can read other atom values.
 
 ```tsx
 import { useAtom } from 'jotai'
-import { atomWithMachine } from 'jotai/xstate'
+import { atomWithMachine } from 'jotai-xstate'
 import { assign, createMachine } from 'xstate'
 
 const createEditableMachine = (value: string) =>
@@ -107,7 +105,7 @@ If your atomWithMachine is initialized in global scope (aka provider-less mode),
 to restart it you need to send a `RESTART` event to your machine like so:
 
 ```tsx
-import { RESTART } from 'jotai/xstate'
+import { RESTART } from 'jotai-xstate'
 
 const YourComponent = () => {
   const [current, send] = useAtom(yourMachineAtom)
@@ -123,12 +121,20 @@ const YourComponent = () => {
 }
 ```
 
-### Examples
+## Examples
 
 Check examples with atomWithMachine:
 
-<CodeSandbox id="gxwnx" />
+<CodeSandbox id="fxtoe3" />
 
 Restartable machine:
 
-<CodeSandbox id="zur3wg" />
+<CodeSandbox id="n179xd" />
+
+## Tutorials
+
+Check out a course about Jotai and XState.
+
+[Complex State Management in React with Jotai and XState](https://egghead.io/courses/complex-state-management-in-react-with-jotai-and-xstate-3be0a740)
+
+(Note: In the course, it uses `jotai/xstate` which is supersede by `jotai-xstate`.)
diff --git a/docs/integrations/zustand.mdx b/docs/integrations/zustand.mdx
@@ -1,6 +1,6 @@
 ---
 title: Zustand
-description: This doc describes `jotai/zustand` bundle.
+description: This doc describes Zustand integration.
 nav: 4.06
 ---
 
@@ -14,12 +14,12 @@ This only uses the vanilla api of zustand.
 
 ## Install
 
-You have to install `zustand` to access this bundle and its functions.
+You have to install `zustand` and `jotai-zustand` to use this feature.
 
 ```
-npm install zustand
+npm install zustand jotai-zusntand
 # or
-yarn add zustand
+yarn add zustand jotai-zusntand
 ```
 
 ## atomWithStore
@@ -29,7 +29,7 @@ It's two-way binding and you can change the value from both ends.
 
 ```jsx
 import { useAtom } from 'jotai'
-import { atomWithStore } from 'jotai/zustand'
+import { atomWithStore } from 'jotai-zustand'
 import create from 'zustand/vanilla'
 
 const store = create(() => ({ count: 0 }))
@@ -53,4 +53,4 @@ const Counter = () => {
 
 ### Examples
 
-<CodeSandbox id="c6zi9" />
+<CodeSandbox id="mqtugt" />
diff --git a/package.json b/package.json
@@ -281,8 +281,14 @@
     "immer": "^9.0.16",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
+    "jotai-immer": "^0.1.0",
+    "jotai-optics": "^0.2.0",
+    "jotai-redux": "^0.1.0",
     "jotai-tanstack-query": "^0.4.0",
     "jotai-urql": "^0.2.0",
+    "jotai-valtio": "^0.1.0",
+    "jotai-xstate": "^0.1.0",
+    "jotai-zustand": "^0.1.0",
     "json": "^11.0.0",
     "optics-ts": "^2.4.0",
     "postinstall-postinstall": "^2.1.0",
@@ -310,13 +316,15 @@
   "peerDependencies": {
     "@babel/core": "*",
     "@babel/template": "*",
-    "immer": "*",
+    "jotai-immer": "*",
+    "jotai-optics": "*",
+    "jotai-redux": "*",
     "jotai-tanstack-query": "*",
     "jotai-urql": "*",
-    "optics-ts": "*",
-    "react": ">=16.8",
-    "valtio": "*",
-    "xstate": "*"
+    "jotai-valtio": "*",
+    "jotai-xstate": "*",
+    "jotai-zustand": "*",
+    "react": ">=16.8"
   },
   "peerDependenciesMeta": {
     "@babel/core": {
@@ -325,22 +333,28 @@
     "@babel/template": {
       "optional": true
     },
-    "immer": {
+    "jotai-immer": {
       "optional": true
     },
-    "jotai-urql": {
+    "jotai-optics": {
+      "optional": true
+    },
+    "jotai-redux": {
       "optional": true
     },
     "jotai-tanstack-query": {
       "optional": true
     },
-    "optics-ts": {
+    "jotai-urql": {
+      "optional": true
+    },
+    "jotai-valtio": {
       "optional": true
     },
-    "valtio": {
+    "jotai-zustand": {
       "optional": true
     },
-    "xstate": {
+    "jotai-xstate": {
       "optional": true
     }
   }

diff --git a/src/immer.ts b/src/immer.ts
@@ -1,3 +1 @@
-export { atomWithImmer } from './immer/atomWithImmer'
-export { useImmerAtom } from './immer/useImmerAtom'
-export { withImmer } from './immer/withImmer'
+export { atomWithImmer, useImmerAtom, withImmer } from 'jotai-immer'