PESPA Counter

P297:[{"_312":51,"_313":55,"_314":315},"app1","app2","diffPatch","diff --git a/index.js b/index.js\nindex c10df45..0280718 100644\n--- a/index.js\n+++ b/index.js\n@@ -1,13 +1,15 @@\n-import fs from 'node:fs/promises'\n+import { readFile } from 'fs/promises'\n+import { Writable, Readable } from 'stream'\n+import { Worker } from 'worker_threads'\n import { serve } from '@hono/node-server'\n import { serveStatic } from '@hono/node-server/serve-static'\n+import { RESPONSE_ALREADY_SENT } from '@hono/node-server/utils/response'\n import closeWithGrace from 'close-with-grace'\n import { Hono } from 'hono'\n-import { createElement as h } from 'react'\n-import { renderToStaticMarkup } from 'react-dom/server'\n-import * as db from './db.js'\n-import { Counter } from './ui/counter.js'\n-import * as framework from './ui/framework.js'\n+import React from 'react'\n+import { renderToPipeableStream } from 'react-dom/server'\n+import { createFromNodeStream } from 'react-server-dom-esm/client'\n+import { v4 as uuidv4 } from 'uuid'\n \n const PORT = Number(process.env.PORT ?? 3000)\n \n@@ -21,53 +23,187 @@ app.use(\n \t}),\n )\n \n-app.get('/data', async (c) => {\n-\tconst data = await framework.handleLoaderRequest(c.req)\n-\treturn c.json(data)\n+const worker = new Worker('./rsc/worker.js', {\n+\texecArgv: [\n+\t\t'--import',\n+\t\t'./rsc/register-loader.js',\n+\t\t'--conditions',\n+\t\t'react-server',\n+\t],\n })\n \n-app.get('/*', async (c) => {\n-\tconst initialData = await framework.handleLoaderRequest(c.req)\n-\tconst appHtml = renderToStaticMarkup(\n-\t\th(framework.FrameworkProvider, { initialData }, h(Counter)),\n+const requestHandlers = new Map()\n+\n+worker.on('message', (message) => {\n+\tconst handler = requestHandlers.get(message.requestId)\n+\tif (handler) {\n+\t\thandler(message)\n+\t\tif (message.type === 'end') {\n+\t\t\trequestHandlers.delete(message.requestId)\n+\t\t}\n+\t}\n+})\n+\n+app.get('/rsc', async (c) => {\n+\tconst requestId = uuidv4()\n+\treturn c.body(\n+\t\tnew ReadableStream({\n+\t\t\tstart(controller) {\n+\t\t\t\trequestHandlers.set(requestId, (message) => {\n+\t\t\t\t\tif (message.type === 'chunk') {\n+\t\t\t\t\t\tcontroller.enqueue(message.data)\n+\t\t\t\t\t} else if (message.type === 'end') {\n+\t\t\t\t\t\tcontroller.close()\n+\t\t\t\t\t}\n+\t\t\t\t})\n+\t\t\t\tworker.postMessage({ type: 'rsc', requestId })\n+\t\t\t},\n+\t\t\tcancel() {\n+\t\t\t\trequestHandlers.delete(requestId)\n+\t\t\t},\n+\t\t}),\n \t)\n-\tconst html = `\n-\t\t\n-\t\t\n-\t\t\t\n-\t\t\t\t\n-\t\t\t\t\n-\t\t\t\tPESPA Counter\n-\t\t\t\t\n+\n+\tconst { pipe } = renderToPipeableStream(React.createElement(Root), {\n+\t\timportMap: {\n+\t\t\timports: {\n+\t\t\t\treact:\n+\t\t\t\t\t'https://esm.sh/react@19.0.0-beta-94eed63c49-20240425?pin=v126&dev',\n+\t\t\t\t'react-dom':\n+\t\t\t\t\t'https://esm.sh/react-dom@19.0.0-beta-94eed63c49-20240425?pin=v126&dev',\n+\t\t\t\t'react-dom/client':\n+\t\t\t\t\t'https://esm.sh/react-dom@19.0.0-beta-94eed63c49-20240425/client?pin=v126&dev',\n+\t\t\t\t'react-server-dom-esm/client':\n+\t\t\t\t\t'https://esm.sh/@kentcdodds/tmp-react-server-dom-esm@19.0.0-beta-94eed63c49-20240425/client?pin=v126&dev',\n+\t\t\t},\n+\t\t},\n+\t\tbootstrapModules: ['/ui/index.js'],\n+\t})\n+\n+\tc.header('Content-Type', 'text/html')\n+\treturn c.body(\n+\t\tnew ReadableStream({\n+\t\t\tstart(controller) {\n+\t\t\t\tcontroller.enqueue(\n+\t\t\t\t\t`\n+\n+\n+\t\n+\t\t\n+\t\t\n+\t\tRSC Counter\n \t\n \t\n-\t\t\t\t

${appHtml}

\n-\t\t\t\t\n-\t\t\t\t\n+\t\t

`,\n+\t\t\t\t)\n+\t\t\t\tconst writable = new Writable({\n+\t\t\t\t\twrite(chunk, encoding, callback) {\n+\t\t\t\t\t\tcontroller.enqueue(chunk)\n+\t\t\t\t\t\tcallback()\n+\t\t\t\t\t},\n+\t\t\t\t\tfinal(callback) {\n+\t\t\t\t\t\tcontroller.enqueue(`

\n \t\n-\t\t\n-\t`\n-\treturn c.html(html)\n+\n+`)\n+\t\t\t\t\t\tcontroller.close()\n+\t\t\t\t\t\tcallback()\n+\t\t\t\t\t},\n+\t\t\t\t})\n+\n+\t\t\t\tpipe(writable)\n+\t\t\t},\n+\t\t}),\n+\t)\n })\n \n-app.post('/*', async (c) => {\n-\tconst response = await framework.handleActionRequest(c.req)\n+app.post('*', async (c) => {\n+\tconst requestId = uuidv4()\n+\tconst formData = await c.req.formData()\n+\tconst serverReference = c.req.header('rsc-action')\n \n-\tif (c.req.header('Accept')?.includes('text/html')) {\n-\t\treturn c.redirect(c.req.url)\n+\tconst serializedFormData = await serializeFormData(formData)\n+\n+\tif (c.req.header('Accept').includes('text/html')) {\n+\t\treturn new Promise((resolve) => {\n+\t\t\trequestHandlers.set(requestId, (message) => {\n+\t\t\t\tif (message.type === 'end') {\n+\t\t\t\t\tresolve(c.redirect('/'))\n+\t\t\t\t}\n+\t\t\t})\n+\t\t\tworker.postMessage({\n+\t\t\t\ttype: 'action',\n+\t\t\t\trequestId,\n+\t\t\t\tformData: serializedFormData,\n+\t\t\t\tserverReference,\n+\t\t\t})\n+\t\t})\n \t} else {\n-\t\treturn c.json(response)\n+\t\treturn c.body(\n+\t\t\tnew ReadableStream({\n+\t\t\t\tstart(controller) {\n+\t\t\t\t\trequestHandlers.set(requestId, (message) => {\n+\t\t\t\t\t\tif (message.type === 'chunk') {\n+\t\t\t\t\t\t\tcontroller.enqueue(message.data)\n+\t\t\t\t\t\t} else if (message.type === 'end') {\n+\t\t\t\t\t\t\tcontroller.close()\n+\t\t\t\t\t\t}\n+\t\t\t\t\t})\n+\t\t\t\t\tworker.postMessage({\n+\t\t\t\t\t\ttype: 'action',\n+\t\t\t\t\t\trequestId,\n+\t\t\t\t\t\tformData: serializedFormData,\n+\t\t\t\t\t\tserverReference,\n+\t\t\t\t\t})\n+\t\t\t\t},\n+\t\t\t\tcancel() {\n+\t\t\t\t\trequestHandlers.delete(requestId)\n+\t\t\t\t},\n+\t\t\t}),\n+\t\t)\n \t}\n })\n \n+async function serializeFormData(formData) {\n+\tconst serialized = {}\n+\tfor (const [key, value] of formData.entries()) {\n+\t\tif (value instanceof File) {\n+\t\t\tconst buffer = await value.arrayBuffer()\n+\t\t\tserialized[key] = {\n+\t\t\t\ttype: 'file',\n+\t\t\t\tname: value.name,\n+\t\t\t\tlastModified: value.lastModified,\n+\t\t\t\tbuffer: Array.from(new Uint8Array(buffer)),\n+\t\t\t}\n+\t\t} else {\n+\t\t\tserialized[key] = { type: 'string', value }\n+\t\t}\n+\t}\n+\treturn serialized\n+}\n+\n const server = serve({ fetch: app.fetch, port: PORT }, (info) => {\n \tconsole.log(`Server is running on http://localhost:${info.port}`)\n })\n@@ -77,5 +213,6 @@ closeWithGrace(async ({ signal, err }) => {\n \telse console.log('Shutting down server due to signal', signal)\n \n \tawait new Promise((resolve) => server.close(resolve))\n+\tworker.terminate()\n \tprocess.exit()\n })\ndiff --git a/package.json b/package.json\nindex c0549d4..67f8688 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,24 +1,25 @@\n {\n- \"name\": \"exercises_03.framework-react_01.solution.pespa\",\n+ \"name\": \"exercises_04.modern-react_01.problem.rsc\",\n \"version\": \"1.0.0\",\n- \"main\": \"index.js\",\n \"type\": \"module\",\n+ \"private\": true,\n+ \"description\": \"Super simple implementation of RSCs with minimal deps\",\n+ \"main\": \"index.js\",\n \"scripts\": {\n- \"dev\": \"node --watch ./index.js\",\n+ \"dev\": \"node --watch-path=./ui --watch-path=./rsc --watch ./index.js\",\n \"start\": \"node ./index.js\"\n },\n \"keywords\": [],\n \"author\": \"Kent C. Dodds (https://kentcdodds.com/)\",\n \"license\": \"MIT\",\n- \"description\": \"\",\n \"dependencies\": {\n \"@hono/node-server\": \"^1.16.0\",\n \"close-with-grace\": \"^2.2.0\",\n \"hono\": \"^4.8.5\",\n \"react\": \"19.0.0-beta-94eed63c49-20240425\",\n- \"react-dom\": \"19.0.0-beta-94eed63c49-20240425\"\n- },\n- \"devDependencies\": {\n- \"@types/node\": \"^24.0.14\"\n+ \"react-dom\": \"19.0.0-beta-94eed63c49-20240425\",\n+ \"react-error-boundary\": \"^6.0.0\",\n+ \"react-server-dom-esm\": \"npm:@kentcdodds/tmp-react-server-dom-esm@19.0.0-beta-94eed63c49-20240425\",\n+ \"uuid\": \"^11.1.0\"\n }\n }\ndiff --git a/rsc/loader.js b/rsc/loader.js\nnew file mode 100644\nindex 0000000..c45ac32\n--- /dev/null\n+++ b/rsc/loader.js\n@@ -0,0 +1,35 @@\n+import {\n+\tresolve as reactResolve,\n+\tload as reactLoad,\n+} from 'react-server-dom-esm/node-loader'\n+\n+async function textLoad(url, context, defaultLoad) {\n+\tconst result = await defaultLoad(url, context, defaultLoad)\n+\tif (result.format === 'module') {\n+\t\tif (typeof result.source === 'string') {\n+\t\t\treturn result\n+\t\t}\n+\t\treturn {\n+\t\t\tsource: Buffer.from(result.source).toString('utf8'),\n+\t\t\tformat: 'module',\n+\t\t}\n+\t}\n+\treturn result\n+}\n+\n+export async function load(url, context, defaultLoad) {\n+\tconst result = await reactLoad(url, context, (u, c) => {\n+\t\treturn textLoad(u, c, defaultLoad)\n+\t})\n+\treturn result\n+}\n+\n+export async function resolve(specifier, context, defaultResolve) {\n+\tconst { conditions = [] } = context\n+\tconst newContext = {\n+\t\t...context,\n+\t\tconditions: ['react-server', ...conditions],\n+\t}\n+\n+\treturn reactResolve(specifier, newContext, defaultResolve)\n+}\ndiff --git a/rsc/register-loader.js b/rsc/register-loader.js\nnew file mode 100644\nindex 0000000..0bcecef\n--- /dev/null\n+++ b/rsc/register-loader.js\n@@ -0,0 +1,3 @@\n+import { register } from 'node:module'\n+\n+register('./loader.js', import.meta.url)\ndiff --git a/rsc/worker.js b/rsc/worker.js\nnew file mode 100644\nindex 0000000..237ecc1\n--- /dev/null\n+++ b/rsc/worker.js\n@@ -0,0 +1,93 @@\n+import { Readable, Writable } from 'stream'\n+import { parentPort } from 'worker_threads'\n+import { createElement as h } from 'react'\n+import {\n+\trenderToPipeableStream,\n+\tdecodeReply,\n+\tdecodeAction,\n+} from 'react-server-dom-esm/server'\n+import { Counter } from '../ui/counter.js'\n+\n+const moduleBasePath = new URL('../ui', import.meta.url).href\n+\n+async function renderApp(returnValue, requestId) {\n+\tconst root = h(Counter)\n+\tconst payload = { root, returnValue }\n+\treturn new Promise((resolve) => {\n+\t\tconst { pipe } = renderToPipeableStream(payload, moduleBasePath)\n+\t\tconst writable = new Writable({\n+\t\t\twrite(chunk, encoding, callback) {\n+\t\t\t\tparentPort.postMessage({\n+\t\t\t\t\ttype: 'chunk',\n+\t\t\t\t\tdata: chunk.toString('utf-8'),\n+\t\t\t\t\trequestId,\n+\t\t\t\t})\n+\t\t\t\tcallback()\n+\t\t\t},\n+\t\t})\n+\t\twritable.on('finish', () => {\n+\t\t\tparentPort.postMessage({ type: 'end', requestId })\n+\t\t\tresolve()\n+\t\t})\n+\t\tpipe(writable)\n+\t})\n+}\n+\n+async function handleMessage(message) {\n+\tif (message.type === 'rsc') {\n+\t\tawait renderApp(null, message.requestId)\n+\t} else if (message.type === 'action') {\n+\t\tconst formData = deserializeFormData(message.formData)\n+\t\tif (message.serverReference) {\n+\t\t\tconst [filepath, name] = message.serverReference.split('#')\n+\t\t\tconst action = (await import(filepath))[name]\n+\t\t\tif (!action) {\n+\t\t\t\tthrow new Error(`No action found at ${message.serverReference}`)\n+\t\t\t}\n+\t\t\tif (action.$$typeof !== Symbol.for('react.server.reference')) {\n+\t\t\t\tthrow new Error('Invalid action')\n+\t\t\t}\n+\n+\t\t\tconst args = await decodeReply(formData, moduleBasePath)\n+\t\t\tconst result = await action(...args)\n+\t\t\tawait renderApp(result, message.requestId)\n+\t\t} else {\n+\t\t\tconst action = await decodeAction(formData, moduleBasePath)\n+\t\t\tif (!action) {\n+\t\t\t\tconsole.error(formData)\n+\t\t\t\tthrow new Error('No action found from formData')\n+\t\t\t}\n+\t\t\tawait action()\n+\t\t\tawait renderApp(null, message.requestId)\n+\t\t}\n+\t}\n+}\n+\n+parentPort.on('message', async (message) => {\n+\ttry {\n+\t\tconst result = await handleMessage(message)\n+\t\treturn result\n+\t} catch (error) {\n+\t\tconsole.error(error)\n+\t\tparentPort.postMessage({\n+\t\t\ttype: 'error',\n+\t\t\terror: error.message,\n+\t\t\trequestId: message.requestId,\n+\t\t})\n+\t}\n+})\n+\n+function deserializeFormData(serialized) {\n+\tconst formData = new FormData()\n+\tfor (const [key, value] of Object.entries(serialized)) {\n+\t\tif (value.type === 'file') {\n+\t\t\tconst file = new File([new Uint8Array(value.buffer)], value.name, {\n+\t\t\t\tlastModified: value.lastModified,\n+\t\t\t})\n+\t\t\tformData.append(key, file)\n+\t\t} else {\n+\t\t\tformData.append(key, value.value)\n+\t\t}\n+\t}\n+\treturn formData\n+}\ndiff --git a/ui/counter.js b/ui/counter.js\nindex ac79df8..85c17c9 100644\n--- a/ui/counter.js\n+++ b/ui/counter.js\n@@ -1,43 +1,37 @@\n-import { createElement as h } from 'react'\n-import { useLoaderData, useFetcher } from './framework.js'\n+// 🐨 add 'use server' to this file so a reference to the action can be sent to the client\n \n-export async function loader() {\n-\tconst db = await import('../db.js')\n-\treturn { count: await db.getCount() }\n-}\n+import { createElement as h } from 'react'\n+// 💰 you'll want this\n+// import * as db from '../db.js'\n+import { PendingDiv } from './pending-form.js'\n \n-export async function action({ request }) {\n-\tconst db = await import('../db.js')\n-\tconst formData = await request.formData()\n+export async function updateCount(formData) {\n+\ttry {\n \t\tconst change = Number(formData.get('change'))\n-\tawait db.changeCount(change)\n-\treturn { success: true }\n+\t\t// 🐨 call db.changeCount with the change\n+\t\treturn { status: 'success', message: 'Success!' }\n+\t} catch (error) {\n+\t\treturn { status: 'error', message: error?.message || String(error) }\n+\t}\n }\n \n-export function Counter() {\n-\tconst data = useLoaderData()\n-\tconst fetcher = useFetcher()\n+export async function Counter() {\n+\t// 🐨 get the count from the database\n+\tconst count = 0\n \n \treturn h(\n \t\t'div',\n \t\tnull,\n+\t\th('h1', null, 'Count: ' + count),\n \t\th(\n-\t\t\tfetcher.Form,\n-\t\t\t{ method: 'POST', action: '/counter' },\n-\t\t\th('h1', null, 'Count: ' + data.count),\n+\t\t\t'form',\n+\t\t\t{ action: updateCount },\n \t\t\th(\n+\t\t\t\t// 🐨 swap this out for PendingDiv\n \t\t\t\t'div',\n-\t\t\t\t{ style: { opacity: fetcher.isPending ? 0.6 : 1 } },\n-\t\t\t\th(\n-\t\t\t\t\t'button',\n-\t\t\t\t\t{ type: 'submit', name: 'change', value: '-1' },\n-\t\t\t\t\t'Decrement',\n-\t\t\t\t),\n-\t\t\t\th(\n-\t\t\t\t\t'button',\n-\t\t\t\t\t{ type: 'submit', name: 'change', value: '1' },\n-\t\t\t\t\t'Increment',\n-\t\t\t\t),\n+\t\t\t\tnull,\n+\t\t\t\th('button', { type: 'submit', name: 'change', value: -1 }, 'Decrement'),\n+\t\t\t\th('button', { type: 'submit', name: 'change', value: 1 }, 'Increment'),\n \t\t\t),\n \t\t),\n \t)\ndiff --git a/ui/framework.js b/ui/framework.js\ndeleted file mode 100644\nindex a8e9b88..0000000\n--- a/ui/framework.js\n+++ /dev/null\n@@ -1,83 +0,0 @@\n-import {\n-\tcreateElement as h,\n-\tcreateContext,\n-\tuseContext,\n-\tuseState,\n-\tuseMemo,\n-\tuseTransition,\n-} from 'react'\n-\n-export const FrameworkContext = createContext()\n-\n-export function FrameworkProvider({ children, initialData }) {\n-\tconst [data, setData] = useState(initialData)\n-\n-\tasync function revalidate() {\n-\t\tconst response = await fetch('/data')\n-\t\tconst data = await response.json()\n-\t\tsetData(data)\n-\t}\n-\n-\treturn h(FrameworkContext.Provider, { value: { revalidate, data } }, children)\n-}\n-\n-export function useFetcher() {\n-\tconst framework = useContext(FrameworkContext)\n-\tconst [isPending, startTransition] = useTransition()\n-\tconst [data, setData] = useState()\n-\n-\tconst Form = useMemo(\n-\t\t() =>\n-\t\t\tfunction Form(props) {\n-\t\t\t\tconst framework = useContext(FrameworkContext)\n-\n-\t\t\t\treturn h('form', {\n-\t\t\t\t\t...props,\n-\t\t\t\t\tonSubmit: async (event) => {\n-\t\t\t\t\t\tstartTransition(async () => {\n-\t\t\t\t\t\t\tevent.preventDefault()\n-\t\t\t\t\t\t\tconst form = event.currentTarget\n-\n-\t\t\t\t\t\t\tconst formData = new FormData(form)\n-\n-\t\t\t\t\t\t\tconst { submitter } = event.nativeEvent\n-\n-\t\t\t\t\t\t\tif (submitter) {\n-\t\t\t\t\t\t\t\tformData.append(submitter.name, submitter.value)\n-\t\t\t\t\t\t\t}\n-\n-\t\t\t\t\t\t\tconst response = await fetch(form.action, {\n-\t\t\t\t\t\t\t\tmethod: form.method,\n-\t\t\t\t\t\t\t\tbody: formData,\n-\t\t\t\t\t\t\t})\n-\t\t\t\t\t\t\tif (response.ok) {\n-\t\t\t\t\t\t\t\tconst data = await response.json()\n-\t\t\t\t\t\t\t\tsetData(data)\n-\t\t\t\t\t\t\t\tawait framework.revalidate()\n-\t\t\t\t\t\t\t} else {\n-\t\t\t\t\t\t\t\tconsole.error('Failed to update the count')\n-\t\t\t\t\t\t\t}\n-\t\t\t\t\t\t})\n-\t\t\t\t\t},\n-\t\t\t\t})\n-\t\t\t},\n-\t\t[],\n-\t)\n-\n-\treturn { Form, data, isPending }\n-}\n-\n-export function useLoaderData() {\n-\tconst framework = useContext(FrameworkContext)\n-\treturn framework.data\n-}\n-\n-export async function handleLoaderRequest(request) {\n-\tconst counter = await import('./counter.js')\n-\treturn counter.loader()\n-}\n-\n-export async function handleActionRequest(request) {\n-\tconst counter = await import('./counter.js')\n-\treturn counter.action({ request })\n-}\ndiff --git a/ui/index.js b/ui/index.js\nindex f125fed..36bffe3 100644\n--- a/ui/index.js\n+++ b/ui/index.js\n@@ -1,11 +1,66 @@\n-import { createElement as h } from 'react'\n+import {\n+\tSuspense,\n+\tcreateElement as h,\n+\tstartTransition,\n+\tuse,\n+\tuseEffect,\n+\tuseRef,\n+\tuseState,\n+\tuseTransition,\n+} from 'react'\n import { hydrateRoot } from 'react-dom/client'\n-import { Counter } from './counter.js'\n-import { FrameworkProvider } from './framework.js'\n+import * as RSC from 'react-server-dom-esm/client'\n \n-const initialData = window.__initialData\n+function updateContentPromise() {\n+\tconsole.error('updateContentPromise called before it was set!')\n+}\n \n-hydrateRoot(\n-\tdocument.getElementById('root'),\n-\th(FrameworkProvider, { initialData }, h(Counter)),\n-)\n+function createFromFetch(fetchPromise) {\n+\treturn RSC.createFromFetch(fetchPromise, {\n+\t\tmoduleBaseURL: `${window.location.origin}/ui`,\n+\t\tcallServer,\n+\t})\n+}\n+\n+async function callServer(id, args) {\n+\tconst fetchPromise = fetch(`/action`, {\n+\t\tmethod: 'POST',\n+\t\theaders: { 'rsc-action': id },\n+\t\tbody: await RSC.encodeReply(args),\n+\t})\n+\tonStreamFinished(fetchPromise, () => {\n+\t\tupdateContentPromise(actionResponsePromise)\n+\t})\n+\tconst actionResponsePromise = createFromFetch(fetchPromise)\n+\tconst { returnValue } = await actionResponsePromise\n+\treturn returnValue\n+}\n+\n+const initialContentPromise = createFromFetch(fetch(`/rsc`))\n+\n+function onStreamFinished(fetchPromise, onFinished) {\n+\t// create a promise chain that resolves when the stream is completely consumed\n+\treturn (\n+\t\tfetchPromise\n+\t\t\t// clone the response so createFromFetch can use it (otherwise we lock the reader)\n+\t\t\t// and wait for the text to be consumed so we know the stream is finished\n+\t\t\t.then((response) => response.clone().text())\n+\t\t\t.then(onFinished)\n+\t)\n+}\n+\n+function Root() {\n+\tconst [contentPromise, setContentPromise] = useState(initialContentPromise)\n+\n+\tuseEffect(() => {\n+\t\tupdateContentPromise = (newContentPromise) => {\n+\t\t\tstartTransition(() => setContentPromise(newContentPromise))\n+\t\t}\n+\t}, [])\n+\n+\treturn use(contentPromise).root\n+}\n+\n+startTransition(() => {\n+\thydrateRoot(document.getElementById('root'), h(Root))\n+})\ndiff --git a/ui/pending-form.js b/ui/pending-form.js\nnew file mode 100644\nindex 0000000..5be66ec\n--- /dev/null\n+++ b/ui/pending-form.js\n@@ -0,0 +1,12 @@\n+// 🐨 add 'use client' to this file so the reference to useFormStatus can be sent to the client\n+\n+import { createElement as h } from 'react'\n+// 💰 you'll want this\n+// import { useFormStatus } from 'react-dom'\n+\n+export function PendingDiv(props) {\n+\t// 🐨 get the pending status from useFormStatus\n+\tconst pending = false\n+\n+\treturn h('div', { style: { opacity: pending ? 0.6 : 1 }, ...props })\n+}"]

index.js-71+208App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-24+25App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/loader.js-0+35App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/register-loader.js-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/worker.js-0+93App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/counter.js-43+37App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/framework.js-83+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/index.js-11+66App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/pending-form.js-0+12App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

index.js-71+208App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-24+25App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/loader.js-0+35App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/register-loader.js-0+3App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

rsc/worker.js-0+93App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/counter.js-43+37App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/framework.js-83+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/index.js-11+66App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/pending-form.js-0+12App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2