docs: migrate Codesandbox embed for next.js swc example to Stackblitz (…

…#2773) * docs: migrate Codesandbox embed for next.js swc example to Stackblitz * docs: moved all code samples to stackblitz except 2 * fix: prettier
pmndrs · Oct 19, 2024 · 00f5e27 · 00f5e27
1 parent 8147e7b
commit 00f5e27
Show file tree

Hide file tree

Showing 33 changed files with 59 additions and 57 deletions.
diff --git a/docs/core/atom.mdx b/docs/core/atom.mdx
@@ -207,9 +207,9 @@ It's a special function to invoke the write function of the self atom.
 
 ⚠️ It's provided primarily for internal usage and third-party library authors. Read the source code carefully to understand the behavior. Check release notes for any breaking/non-breaking changes.
 
-## codesandbox
+## Stackblitz
 
-<CodeSandbox id="hg665r" />
+<Stackblitz id="vitejs-vite-ccqxix" file="src%2FApp.tsx" />
 
 ```tsx
 import { Suspense } from 'react'

diff --git a/docs/extensions/cache.mdx b/docs/extensions/cache.mdx
@@ -115,6 +115,6 @@ const App = () => {
 }
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="h09znd" />
+<Stackblitz id="vitejs-vite-p86ajq" file="src%2FApp.tsx" />
diff --git a/docs/extensions/effect.mdx b/docs/extensions/effect.mdx
@@ -77,7 +77,7 @@ function MyComponent() {
 }
 ```
 
-<CodeSandbox id="tg9xsf" />
+<Stackblitz id="vitejs-vite-fj5zjp" file="src%2FApp.tsx" />
 
 ### The `atomEffect` behavior
 

diff --git a/docs/extensions/immer.mdx b/docs/extensions/immer.mdx
@@ -44,7 +44,7 @@ const Controls = () => {
 
 Check this example with atomWithImmer:
 
-<CodeSandbox id="83l6sr" />
+<Stackblitz id="vitejs-vite-tblppw" file="src%2FApp.tsx" />
 
 ## withImmer
 
@@ -77,7 +77,7 @@ const Controls = () => {
 
 Check this example with withImmer:
 
-<CodeSandbox id="fn49h2" />
+<Stackblitz id="vitejs-vite-jwfjqm" file="src%2FApp.tsx" />
 
 ## useImmerAtom
 
@@ -113,8 +113,8 @@ You can use `useSetImmerAtom` if you need only the setter part of `useImmerAtom`
 
 Check this example with useImmerAtom:
 
-<CodeSandbox id="np7y97" />
+<Stackblitz id="vitejs-vite-k2rixl" file="src%2FApp.tsx" />
 
 ## Demo
 
-<CodeSandbox id="9q4dg7" />
+<Stackblitz id="vitejs-vite-tksbwq" file="src%2FApp.tsx" />
diff --git a/docs/extensions/location.mdx b/docs/extensions/location.mdx
@@ -104,9 +104,9 @@ const App = () => {
 }
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="kism55" />
+<Stackblitz id="vitejs-vite-9v72fq" file="src%2FApp.tsx" />
 
 ## atomWithHash
 
@@ -157,9 +157,9 @@ const Counter = () => {
 }
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="2mocd1" />
+<Stackblitz id="vitejs-vite-zngpjt" file="src%2FApp.tsx" />
 
 ### Deleting Item
 

diff --git a/docs/extensions/optics.mdx b/docs/extensions/optics.mdx
@@ -56,6 +56,6 @@ const Controls = () => {
 }
 ```
 
-#### Codesandbox
+#### Stackblitz
 
-<CodeSandbox id="nsy4u8" />
+<Stackblitz id="vitejs-vite-jjunki" file="src%2FApp.tsx" />
diff --git a/docs/extensions/query.mdx b/docs/extensions/query.mdx
@@ -433,12 +433,12 @@ Similar to `atomsWithQuery` and `atomsWithInfiniteQuery`, `atomWithMutation` als
 
 #### Basic demo
 
-<CodeSandbox id="jm8mf7" />
+<Stackblitz id="vitejs-vite-pr9eaf" file="src%2FApp.tsx" />
 
 #### Devtools demo
 
-<CodeSandbox id="zlp3pj" />
+<Stackblitz id="vitejs-vite-btdqkh" file="src%2FApp.tsx" />
 
 #### Hackernews
 
-<CodeSandbox id="8v4mc4" />
+<Stackblitz id="vitejs-vite-wqsyj8" file="src%2FApp.tsx" />
diff --git a/docs/extensions/redux.mdx b/docs/extensions/redux.mdx
@@ -54,4 +54,4 @@ const Counter = () => {
 
 ### Examples
 
-<CodeSandbox id="487792" />
+<Stackblitz id="vitejs-vite-qqsnwc" file="src%2FApp.tsx" />
diff --git a/docs/extensions/relay.mdx b/docs/extensions/relay.mdx
@@ -92,7 +92,7 @@ const App = () => {
 
 #### Examples
 
-<CodeSandbox id="cxc6p5" />
+<Stackblitz id="vitejs-vite-divyhe" file="src%2FApp.tsx" />
 
 ### atomWithMutation
 

diff --git a/docs/extensions/scope.mdx b/docs/extensions/scope.mdx
@@ -71,7 +71,7 @@ const App = () => {
 }
 ```
 
-<CodeSandbox id="rf3r4n" />
+<Stackblitz id="vitejs-vite-ctcuhj" file="src%2FApp.tsx" />
 
 ## `createIsolation`
 
@@ -149,4 +149,4 @@ const App = () => (
 )
 ```
 
-<CodeSandbox id="6dvlzf" />
+<Stackblitz id="vitejs-vite-8akpt6" file="src%2FApp.tsx" />
diff --git a/docs/extensions/trpc.mdx b/docs/extensions/trpc.mdx
@@ -82,7 +82,7 @@ const Pokemon = () => {
 
 #### Examples
 
-<CodeSandbox id="j1vhcg" />
+<Stackblitz id="vitejs-vite-8kgfpj" file="src%2FApp.tsx" />
 
 ### atomWithMutation
 

diff --git a/docs/extensions/urql.mdx b/docs/extensions/urql.mdx
@@ -205,7 +205,7 @@ function use(promise: Promise<any> | any) {
 
 #### Basic demo
 
-<CodeSandbox id="5rwunq" />
+<Stackblitz id="vitejs-vite-1nhtrj" file="src%2FApp.tsx" />
 
 ### Referencing the same instance of the client for both atoms and urql provider
 

diff --git a/docs/extensions/valtio.mdx b/docs/extensions/valtio.mdx
@@ -73,7 +73,7 @@ atomWithProxy(proxyObject, { sync: true })
 
 ### Examples
 
-<CodeSandbox id="ew98ll" />
+<Stackblitz id="vitejs-vite-wmsazx" file="src%2FApp.tsx" />
 
 ## mutableAtom
 
@@ -102,7 +102,7 @@ mutableAtom(value, options?)
 
 ### Examples
 
-<CodeSandbox id="f84sk5" />
+<Stackblitz id="vitejs-vite-wmsazx" file="src%2FApp.tsx" />
 
 ### Caution on Mutating Proxies
 

diff --git a/docs/extensions/xstate.mdx b/docs/extensions/xstate.mdx
@@ -124,11 +124,11 @@ const YourComponent = () => {
 
 Check examples with atomWithMachine:
 
-<CodeSandbox id="fxtoe3" />
+<Stackblitz id="vitejs-vite-oqfhy4" file="src%2FApp.tsx" />
 
 Restartable machine:
 
-<CodeSandbox id="n179xd" />
+<Stackblitz id="vitejs-vite-tqdtym" file="src%2FApp.tsx" />
 
 ### Tutorials
 

diff --git a/docs/extensions/zustand.mdx b/docs/extensions/zustand.mdx
@@ -52,4 +52,4 @@ const Counter = () => {
 
 ### Examples
 
-<CodeSandbox id="mqtugt" />
+<Stackblitz id="vitejs-vite-kfzyun" file="src%2FApp.tsx" />
diff --git a/docs/guides/persistence.mdx b/docs/guides/persistence.mdx
@@ -140,7 +140,7 @@ const Persist = () => {
 
 #### Examples
 
-<CodeSandbox id="g96xjx" />
+<Stackblitz id="vitejs-vite-zda5uw" file="src%2FApp.tsx" />
 
 ### A pattern with atomFamily
 
@@ -201,4 +201,4 @@ const Persist = () => {
 
 #### Examples
 
-<CodeSandbox id="oyiw5r" />
+<Stackblitz id="vitejs-vite-z4kjv3" file="src%2FApp.tsx" />
diff --git a/docs/guides/resettable.mdx b/docs/guides/resettable.mdx
@@ -51,7 +51,7 @@ const TodoList = () => {
 
 ### Examples
 
-<CodeSandbox id="w91cq" />
+<Stackblitz id="vitejs-vite-2s1vg6" file="src%2FApp.tsx" />
 
 ### Derived atom with RESET symbol
 
@@ -84,4 +84,4 @@ const ResetExample = () => {
 
 ### Examples
 
-<CodeSandbox id="41c0s" />
+<Stackblitz id="vitejs-vite-wjgquh" file="src%2FApp.tsx" />
diff --git a/docs/guides/using-store-outside-react.mdx b/docs/guides/using-store-outside-react.mdx
@@ -42,4 +42,4 @@ export default function App() {
 
 ### Examples
 
-<CodeSandbox id="2jvynm" />
+<Stackblitz id="vitejs-vite-m1h61f" file="src%2FApp.tsx" />
diff --git a/docs/recipes/atom-with-broadcast.mdx b/docs/recipes/atom-with-broadcast.mdx
@@ -71,4 +71,4 @@ const ListOfThings = () => {
 }
 ```
 
-<CodeSandbox id="ugkzm0" />
+<Stackblitz id="vitejs-vite-imqbzg" file="src%2FApp.tsx" />
diff --git a/docs/recipes/atom-with-debounce.mdx b/docs/recipes/atom-with-debounce.mdx
@@ -91,4 +91,4 @@ When typing a pokemon's name in `<SearchInput>`, we do not send a get request on
 
 This reduces the number of backend requests to the server.
 
-<CodeSandbox id="cjrz2y" />
+<Stackblitz id="vitejs-vite-chvvtu" file="src%2FApp.tsx" />
diff --git a/docs/recipes/atom-with-refresh-and-default.mdx b/docs/recipes/atom-with-refresh-and-default.mdx
@@ -72,4 +72,4 @@ const resetRootAtom = atom(null, (get, set) => {
 })
 ```
 
-<CodeSandbox id="tcx2mk" />
+<Stackblitz id="vitejs-vite-1m7ce3" file="src%2FApp.tsx" />
diff --git a/docs/recipes/custom-useatom-hooks.mdx b/docs/recipes/custom-useatom-hooks.mdx
@@ -70,8 +70,8 @@ useFocusAtom(anAtom) {
 }
 ```
 
-#### CodeSandbox
+#### Stackblitz
 
-<CodeSandbox id="y5wef8" />
+<Stackblitz id="vitejs-vite-ge1mah" file="src%2FApp.tsx" />
 
 Please note that in this case `keyFn` must be stable, either define outside render or wrap with `useCallback`.
diff --git a/docs/recipes/use-reducer-atom.mdx b/docs/recipes/use-reducer-atom.mdx
@@ -53,4 +53,4 @@ const Counter = () => {
 }
 ```
 
-<CodeSandbox id="eg0mw" />
+<Stackblitz id="vitejs-vite-gsctj6" file="src%2FApp.tsx" />
diff --git a/docs/tools/devtools.mdx b/docs/tools/devtools.mdx
@@ -157,7 +157,7 @@ const App = () => {
 
 ### Preview
 
-<CodeSandbox id="k5p12d" />
+<Stackblitz id="vitejs-vite-hzldhk" file="src%2FApp.tsx" />
 
 ## useAtomsDebugValue
 
@@ -207,7 +207,7 @@ const App = () => (
 )
 ```
 
-<CodeSandbox id="vvp12f" />
+<Stackblitz id="vitejs-vite-dmts5e" file="src%2FApp.tsx" />
 
 ## useAtomDevtools
 
@@ -305,7 +305,7 @@ export default function App()  {
  }
 ```
 
-<CodeSandbox id="3xobn" />
+<Stackblitz id="vitejs-vite-lpr5rs" file="src%2FApp.tsx" />
 
 ## useAtomsSnapshot
 

diff --git a/docs/tools/swc.mdx b/docs/tools/swc.mdx
@@ -131,4 +131,4 @@ module.exports = {
 
 ### Next.js
 
-<CodeSandbox id="ygiuzm" />
+<Stackblitz id="stackblitz-starters-ha5txx" file="app%2Fpage.tsx" />
diff --git a/docs/utilities/async.mdx b/docs/utilities/async.mdx
@@ -77,9 +77,9 @@ const counterAtom2 = atomWithObservable(() => counterSubject, {
 })
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="88pnt" />
+<Stackblitz id="vitejs-vite-3bkqrb" file="src%2FApp.tsx" />
 
 ## unwrap
 

diff --git a/docs/utilities/callback.mdx b/docs/utilities/callback.mdx
@@ -63,6 +63,6 @@ const Monitor = () => {
 }
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="95gxnt" />
+<Stackblitz id="vitejs-vite-ekxjhs" file="src%2FApp.tsx" />
diff --git a/docs/utilities/family.mdx b/docs/utilities/family.mdx
@@ -112,6 +112,6 @@ const todoFamily = atomFamily(
 )
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="huxd4i" />
+<Stackblitz id="vitejs-vite-rx6npn" file="src%2FApp.tsx" />
diff --git a/docs/utilities/reducer.mdx b/docs/utilities/reducer.mdx
@@ -21,7 +21,9 @@ const countReducer = (prev, action) => {
 const countReducerAtom = atomWithReducer(0, countReducer)
 ```
 
-<CodeSandbox id="g3tsx" />
+### Stackblitz
+
+<Stackblitz id="vitejs-vite-bbpmjn" file="src%2FApp.tsx" />
 
 ## useReducerAtom
 

diff --git a/docs/utilities/resettable.mdx b/docs/utilities/resettable.mdx
@@ -106,9 +106,9 @@ const count1Atom = atom(1)
 const count2Atom = atomWithDefault((get) => get(count1Atom) * 2)
 ```
 
-### Codesandbox
+### Stackblitz
 
-<CodeSandbox id="unfro" />
+<Stackblitz id="vitejs-vite-gffb5v" file="src%2FApp.tsx" />
 
 ### Resetting default values
 

diff --git a/docs/utilities/select.mdx b/docs/utilities/select.mdx
@@ -90,6 +90,6 @@ const Component = () => {
 }
 ```
 
-### CodeSandbox
+### Stackblitz
 
-<CodeSandbox id="8czek" />
+<Stackblitz id="vitejs-vite-tgejq7" file="src%2FApp.tsx" />
diff --git a/docs/utilities/split.mdx b/docs/utilities/split.mdx
@@ -47,7 +47,7 @@ Important considerations for the `keyExtractor`:
 
 Here's an example demonstrating the use of `splitAtom`:
 
-<CodeSandbox id="s4hvgo" />
+<Stackblitz id="vitejs-vite-oavdw2" file="src%2FApp.tsx" />
 
 ```tsx
 import { Provider, atom, useAtom, PrimitiveAtom } from 'jotai'

diff --git a/docs/utilities/storage.mdx b/docs/utilities/storage.mdx
@@ -47,7 +47,7 @@ The `atomWithStorage` function creates an atom with a value persisted in `localS
 
 If not specified, the default storage implementation uses `localStorage` for storage/retrieval, `JSON.stringify()`/`JSON.parse()` for serialization/deserialization, and subscribes to `storage` events for cross-tab synchronization.
 
-<CodeSandbox id="vuwi7" />
+<Stackblitz id="vitejs-vite-wewrmi" file="src%2FApp.tsx" />
 
 ### `createJSONStorage` util