Hello, Remix 3!

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_101":100,"_38":50,"_109":91,"_33":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_26":-5,"_121":-5,"_122":-5,"_123":54,"_124":125,"_126":31,"_127":-5,"_128":-5,"_129":130},"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":54,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":62,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":54},"version",40,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f31b9dd5-ff05-4348-a3ed-4a18096f7315","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",true,"deletedHere","path","probe.ts","latestPath","fileId","8d5eb126-44d2-11f1-aa2d-42b51c65c3df","name","fileType","script","content","// Actually evaluate the browser-transpiled module and inspect Page.\nconst url = \"https://esm.town/v/stevekrouse/remix-3-beta-demo/1.tsx\";\nconst r = await fetch(url, { headers: { \"User-Agent\": \"Mozilla/5.0 Chrome/120\" } });\nconst text = await r.text();\nconsole.log(\"Page line in source:\");\nfor (const line of text.split(\"\\n\")) {\n if (line.includes(\"Page = clientEntry\") || line.includes(\"export const Page\") || line.includes(\"export {\")) {\n console.log(\" \", line);\n }\n}\n\n// Try importing it and seeing what we get\nconst blobUrl = \"data:text/javascript,\" + encodeURIComponent(text);\ntry {\n const mod = await import(blobUrl);\n console.log(\"mod keys:\", Object.keys(mod));\n console.log(\"typeof mod.Page:\", typeof mod.Page);\n console.log(\"mod.Page:\", mod.Page);\n if (typeof mod.Page === \"object\") {\n console.log(\"Page own keys:\", Object.keys(mod.Page));\n }\n} catch (e) {\n console.log(\"import error:\", e.message);\n}\n","createdAt",["D",1777580804485],"branchVersion","branchId","7d054cb6-44cf-11f1-8921-42b51c65c3df","id","7d04b008-44cf-11f1-8921-42b51c65c3df","remix-3-beta-demo",["D",1777579337157],"deletedAt","legacyEnvVars",false,"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",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_19":60,"_105":106,"_107":54},"branch",{"_13":90,"_38":91,"_48":47,"_92":49,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":50,"_99":100},"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":172,"_52":-5,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":62,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":173,"_85":174,"_87":175,"_89":54},"tree",[163,164],"files",[163,164],"counts",{"_152":153,"_154":67,"_155":153,"_156":157,"_158":159},"contents",[131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":145,"_38":146,"_36":62,"_136":-5,"_46":47,"_45":147,"_138":54,"_43":148,"_13":149,"_39":141,"_41":150,"_30":54,"_143":-5,"_33":151},{"_48":133,"_38":134,"_36":135,"_136":-5,"_46":47,"_45":137,"_138":54,"_43":139,"_13":140,"_39":141,"_41":142,"_30":54,"_143":-5,"_33":144},"5de22f5a-44d1-11f1-9873-42b51c65c3df","2.tsx","07981f16-44d0-11f1-a803-42b51c65c3df","parentId",28,"latest",["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 · v40