MPA Counter

P361:[{"_376":21,"_377":59,"_378":379},"app1","app2","diffPatch","diff --git a/index.js b/index.js\nindex b0cd37a..0280718 100644\n--- a/index.js\n+++ b/index.js\n@@ -1,37 +1,208 @@\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 * as db from './db.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 const app = new Hono({ strict: true })\n \n+app.use(\n+\t'/ui/*',\n+\tserveStatic({\n+\t\troot: './ui',\n+\t\trewriteRequestPath: (path) => path.replace('/ui', ''),\n+\t}),\n+)\n+\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+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+})\n+\n app.get('/', async (c) => {\n-\t// 🐨 get the count from the database with db.getCount()\n-\tconst html = `\n-\t\t\n-\t\t\n+\tconst rscResponse = await fetch(`${new URL('/rsc', c.req.url).href}`)\n+\tconst rscStream = rscResponse.body\n+\n+\t// Convert Web ReadableStream to Node.js Readable stream\n+\tconst nodeReadable = Readable.fromWeb(rscStream)\n+\n+\tconst moduleBasePath = new URL('./ui', import.meta.url).href\n+\tconst moduleBaseURL = '/ui'\n+\n+\tlet root\n+\tconst Root = () => {\n+\t\tif (!root) {\n+\t\t\tconst result = React.use(\n+\t\t\t\tcreateFromNodeStream(nodeReadable, moduleBasePath, moduleBaseURL),\n+\t\t\t)\n+\t\t\troot = result.root\n+\t\t}\n+\t\treturn root\n+\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\t\n-\t\t\tMPA Counter\n+\t\t\n+\t\tRSC Counter\n \t\n \t\n-\t\t\t\n-\t\t\t\n-\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 requestId = uuidv4()\n+\tconst formData = await c.req.formData()\n+\tconst serverReference = c.req.header('rsc-action')\n+\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.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-// 🐨 add a POST route for /update-count\n-// 🐨 get the form data from the request\n-// 🐨 get the change value from the form data (and convert it to a number)\n-// 🐨 change the count with db.changeCount(change)\n-// 🐨 redirect to '/' (POST -> REDIRECT -> GET)\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@@ -42,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 7192807..8b70a55 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,22 +1,25 @@\n {\n- \"name\": \"exercises_01.early-web_01.problem.mpa\",\n+ \"name\": \"exercises_04.modern-react_01.solution.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- },\n- \"devDependencies\": {\n- \"@types/node\": \"^24.0.14\"\n+ \"hono\": \"^4.8.5\",\n+ \"react\": \"19.0.0-beta-94eed63c49-20240425\",\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\nnew file mode 100644\nindex 0000000..a304ee2\n--- /dev/null\n+++ b/ui/counter.js\n@@ -0,0 +1,35 @@\n+'use server'\n+\n+import { createElement as h } from 'react'\n+import * as db from '../db.js'\n+import { PendingDiv } from './pending-form.js'\n+\n+export async function updateCount(formData) {\n+\ttry {\n+\t\tconst change = Number(formData.get('change'))\n+\t\tawait db.changeCount(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 async function Counter() {\n+\tconst count = await db.getCount()\n+\n+\treturn h(\n+\t\t'div',\n+\t\tnull,\n+\t\th('h1', null, 'Count: ' + count),\n+\t\th(\n+\t\t\t'form',\n+\t\t\t{ action: updateCount },\n+\t\t\th(\n+\t\t\t\tPendingDiv,\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)\n+}\ndiff --git a/ui/index.js b/ui/index.js\nnew file mode 100644\nindex 0000000..36bffe3\n--- /dev/null\n+++ b/ui/index.js\n@@ -0,0 +1,66 @@\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 * as RSC from 'react-server-dom-esm/client'\n+\n+function updateContentPromise() {\n+\tconsole.error('updateContentPromise called before it was set!')\n+}\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..70db397\n--- /dev/null\n+++ b/ui/pending-form.js\n@@ -0,0 +1,10 @@\n+'use client'\n+\n+import { createElement as h } from 'react'\n+import { useFormStatus } from 'react-dom'\n+\n+export function PendingDiv(props) {\n+\tconst { pending } = useFormStatus()\n+\n+\treturn h('div', { style: { opacity: pending ? 0.6 : 1 }, ...props })\n+}"]

index.js-42+214App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

package.json-22+25App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/loader.js-0+35App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/register-loader.js-0+3App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/worker.js-0+93App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/counter.js-0+35App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/index.js-0+66App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/pending-form.js-0+10App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

index.js-42+214App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

package.json-22+25App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/loader.js-0+35App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/register-loader.js-0+3App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

rsc/worker.js-0+93App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/counter.js-0+35App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/index.js-0+66App 1Copy app 2 file to app 1Copy app 1 file to app 2App 2

ui/pending-form.js-0+10App 1Copy app 2 file to app 1Copy app 1 file to app 2App 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