Hello, Remix 3!

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_183":184,"_185":186},"routes/_app.x.$handle.$name",{"_100":99,"_38":50,"_108":90,"_33":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_26":-5,"_120":-5,"_121":-5,"_122":32,"_123":124,"_125":30,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":32,"_54":55,"_56":55,"_57":-5,"_58":-5,"_19":59,"_60":61,"_62":30,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":32},"version",30,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f31b9dd5-ff05-4348-a3ed-4a18096f7315","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":32,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":32},"previous","deleted",true,"deletedHere",false,"path","probe-transpile.ts","latestPath","fileId","c0e4fb3c-44d1-11f1-a4b7-42b51c65c3df","name","fileType","script","content","// Probe: does Val Town's esm.town serve transpiled JS when fetched with a\n// browser-looking User-Agent? Per the docs at\n// https://www.val.town/x/stevekrouse/esmTownTranspileDemo it's UA-detected.\nconst url = \"https://esm.town/v/stevekrouse/remix-3-beta-demo/1.tsx\";\n\nconst browserUA =\n \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36\";\n\nconst [browserResp, defaultResp] = await Promise.all([\n fetch(url, { headers: { \"User-Agent\": browserUA } }),\n fetch(url, { headers: { \"User-Agent\": \"\" } }),\n]);\n\nconst browserBody = await browserResp.text();\nconst defaultBody = await defaultResp.text();\n\nconsole.log(\"--- BROWSER UA (first 600 chars) ---\");\nconsole.log(browserBody.slice(0, 600));\nconsole.log(\"\\n--- DEFAULT UA (first 300 chars) ---\");\nconsole.log(defaultBody.slice(0, 300));\n\nconsole.log(\"\\nbrowser body length:\", browserBody.length);\nconsole.log(\"default body length:\", defaultBody.length);\nconsole.log(\n \"browser contains JSX (`\"),\n);\nconsole.log(\n \"browser contains _jsx call?\",\n /\\bjsx\\s*\\(/.test(browserBody) || /\\b_jsx\\s*\\(/.test(browserBody),\n);\n","createdAt",["D",1777580310016],"branchVersion","branchId","7d054cb6-44cf-11f1-8921-42b51c65c3df","id","7d04b008-44cf-11f1-8921-42b51c65c3df","remix-3-beta-demo",["D",1777579337157],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","7d081220-44cf-11f1-8921-42b51c65c3df","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_19":59,"_104":105,"_106":32},"branch",{"_13":89,"_38":90,"_48":47,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"isOwned",61,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":179,"_52":-5,"_53":32,"_54":55,"_56":55,"_57":-5,"_58":-5,"_19":59,"_60":61,"_62":30,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":180,"_84":181,"_86":182,"_88":32},"tree",[166,167,168],"files",[166,167,168],"counts",{"_156":137,"_157":66,"_158":137,"_159":160,"_161":162},"contents",[130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":149,"_38":150,"_36":61,"_134":-5,"_46":47,"_45":151,"_135":32,"_43":152,"_13":153,"_39":146,"_41":154,"_29":32,"_138":-5,"_33":155},{"_48":140,"_38":141,"_36":142,"_134":-5,"_46":47,"_45":143,"_135":32,"_43":144,"_13":145,"_39":146,"_41":147,"_29":32,"_138":-5,"_33":148},{"_48":133,"_38":34,"_36":37,"_134":-5,"_46":47,"_45":14,"_135":32,"_43":136,"_13":137,"_39":40,"_41":42,"_29":32,"_138":-5,"_33":139},"c0e4faa6-44d1-11f1-a4b7-42b51c65c3df","parentId","latest",["D",1777580310016],0,"label",[34],"5de22f5a-44d1-11f1-9873-42b51c65c3df","2.tsx","07981f16-44d0-11f1-a803-42b51c65c3df",28,["D",1777580143897],11,"http","/** @jsxImportSource npm:@remix-run/ui */\n// Step 2: Hello World, vtrr-style — server time, client time, counter, refresh.\n//\n// We're modeling the vtrr `demos/hello-world.tsx` demo, but in Remix 3 idioms.\n// All in one file: server-rendered HTML + an isomorphic component that\n// hydrates on the client. The same `Page` function runs on the server (for\n// SSR) and on the client (for hydration).\n//\n// JSX\n// ---\n// JSX uses Remix's own JSX runtime (`@remix-run/ui/jsx-runtime`, set via the\n// `@jsxImportSource` pragma above) — not React. Differences from React JSX:\n// * `class` instead of `className`\n// * `style` is a raw CSS string, not an object\n// * Inline scripts use `innerHTML=\"...\"` instead of\n// React's `dangerouslySetInnerHTML={{ __html: ... }}`\n// * Event handlers go through `mix={[on('click', ...)]}` (the Remix\n// composition primitive) instead of `onClick={...}`.\n//\n// Components\n// ----------\n// Components are *higher-order*. The outer function receives a `handle` and\n// runs ONCE per instance (setup); it returns a render function that runs on\n// each render. State is just a plain closure variable — call `handle.update()`\n// to re-render. (No hooks, no virtual-DOM rules.)\n//\n// Hydration\n// ---------\n// `clientEntry(entryId, Component)` marks a component as hydratable. The\n// `entryId` is `\"#\"`. On the client we boot with\n// `run({ loadModule: url => import(url) })` and Remix walks the SSR'd tree,\n// calling `loadModule` for each entry to take over the matching DOM.\n//\n// Transpiling for the browser\n// ---------------------------\n// Remix's official answer to \"how do I serve TS/JSX to the browser?\" is\n// `@remix-run/assets` — a fetch-based asset server that compiles on demand\n// with OXC. But it needs `node:fs` + `chokidar`, which Val Town's Deno\n// runtime doesn't provide. So we do the same job in ~5 lines: a `/__client.js`\n// route fetches our own source via `import.meta.url`, runs `sucrase` on it,\n// and serves real browser JS. The component's `clientEntry` id points at\n// that route, so when the browser hydrates it imports a working module.\n//\n// Imports\n// -------\n// We import the standalone scoped packages because the umbrella `remix`\n// package pulls in `@remix-run/node-serve`, whose non-npm GitHub dep Deno\n// refuses to resolve.\nimport { createRouter } from \"npm:@remix-run/fetch-router\";\nimport { form, route } from \"npm:@remix-run/fetch-router/routes\";\nimport { clientEntry, type Handle, on } from \"npm:@remix-run/ui\";\nimport { renderToStream } from \"npm:@remix-run/ui/server\";\nimport { transform } from \"npm:sucrase@3.35.0\";\n\n// ─── Routes ────────────────────────────────────────────────────────────────\n\nconst routes = route({\n home: form(\"/\"), // -> { index: GET /, action: POST / }\n client: \"/__client.js\", // browser bundle for this very file\n source: \"/source\",\n});\n\n// ─── The Page (isomorphic — runs on server AND hydrates on client) ─────────\n\n// `clientEntry` tags this component so SSR knows to emit a hydration marker\n// and the client knows to take over the same DOM. The entry id is\n// \"#\". We point browsers at our own /__client.js\n// route, which serves a transpiled version of THIS file.\nexport const Page = clientEntry(\n \"/__client.js#Page\",\n function Page(handle: Handle<{ initialServerTime: string }>) {\n // Plain closure variables — no useState. This setup function runs once\n // per instance: once on the server during SSR, once on the client when\n // hydrating. The render function below closes over them.\n let count = 0;\n let clientTime: string | null = null;\n\n // On the client only, kick off a clock that updates every second.\n if (typeof window !== \"undefined\") {\n const tick = () => {\n clientTime = new Date().toLocaleString();\n handle.update();\n };\n tick();\n const id = setInterval(tick, 1000);\n handle.signal.addEventListener(\"abort\", () => clearInterval(id));\n }\n\n return ({ initialServerTime }) => (\n \n \n \n Hello, Remix 3!\n \n

Diff · v30