[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_172":173,"_174":175},"routes/_app.x.$handle.$name",{"_102":101,"_38":51,"_110":92,"_33":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_26":-5,"_122":-5,"_123":-5,"_124":31,"_125":126,"_127":64,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":31},"version",51,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","25e529c7-2509-4932-8fd1-57286b7df25e","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","2.tsx","latestPath","fileId","07981f16-44d0-11f1-a803-42b51c65c3df","name","fileType","http","content","/** @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 \n \n \n );\n },\n);\n\nif (typeof document !== \"undefined\") {\n run({ loadModule: (url, name) => import(url).then((m) => m[name]) });\n}\n\nconst render = () => createHtmlResponse(renderToStream(, {\n resolveClientEntry: (id) => {\n const [href, exportName] = id.split(\"#\");\n return { href, exportName };\n },\n}));\n\nconst router = createRouter();\nrouter.get(\"/\", render);\nrouter.post(\"/\", render);\n\nexport default router.fetch;\n","createdAt",["D",1777582395707],"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",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_19":60,"_106":107,"_108":31},"branch",{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"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",{"_49":50,"_38":51,"_44":168,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":169,"_86":170,"_88":171,"_90":31},"tree",[159,160],"files",[159,160],"counts",{"_148":149,"_150":68,"_151":149,"_152":153,"_154":155},"contents",[132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":141,"_38":142,"_36":62,"_135":-5,"_47":48,"_46":143,"_136":31,"_44":144,"_13":145,"_39":40,"_41":146,"_30":31,"_139":-5,"_33":147},{"_49":134,"_38":34,"_36":37,"_135":-5,"_47":48,"_46":14,"_136":31,"_44":137,"_13":138,"_39":40,"_41":43,"_30":31,"_139":-5,"_33":140},"9c1215ec-44d6-11f1-b491-42b51c65c3df","parentId","latest",["D",1777582395707],12,"label",[34],"7c370206-44d5-11f1-a10c-42b51c65c3df","1.tsx",50,["D",1777581912774],18,"/** @jsxImportSource https://esm.sh/@remix-run/ui@0.1.1 */\nimport { createRouter } from \"https://esm.sh/@remix-run/fetch-router@0.18.2\";\nimport {\n clientEntry,\n type Handle,\n on,\n run,\n} from \"https://esm.sh/@remix-run/ui@0.1.1\";\nimport { renderToStream } from \"https://esm.sh/@remix-run/ui@0.1.1/server\";\nimport { createHtmlResponse } from \"https://esm.sh/@remix-run/response@0.3.3/html\";\n\nexport const Page = clientEntry(\n `${import.meta.url}#Page`,\n function Page(handle: Handle) {\n let count = 0;\n return () => (\n \n \n

Hello from Remix 3! 👋

\n {\n count++;\n handle.update();\n })]}\n >\n Clicked {count} times\n \n \n \n \n );\n },\n);\n\nif (typeof document !== \"undefined\") {\n run({ loadModule: (url, name) => import(url).then((m) => m[name]) });\n}\n\nconst router = createRouter();\nrouter.get(\"/\", () =>\n createHtmlResponse(renderToStream(, {\n resolveClientEntry: (id) => {\n const [href, exportName] = id.split(\"#\");\n return { href, exportName };\n },\n })));\n\nexport default router.fetch;",[142],"pulls",0,"branches","forks","envVars",{"_156":149,"_158":149},"connections",{"_156":149,"_157":149},"count","unfilledCount","emptyCount",{"_49":141,"_38":142,"_36":62,"_135":-5,"_47":48,"_46":143,"_136":31,"_44":165,"_13":145,"_39":40,"_41":146,"_30":31,"_139":-5,"_162":166,"_33":167},{"_49":134,"_38":34,"_36":37,"_135":-5,"_47":48,"_46":14,"_136":31,"_44":161,"_13":138,"_39":40,"_41":43,"_30":31,"_139":-5,"_162":163,"_33":164},["D",1777582395707],"children",[],[34],["D",1777581912774],[],[142],["D",1777579337157],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_19":60,"_106":107,"_108":31},{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"ctx",{"_84":-5,"_129":205,"_206":207,"_208":209,"_210":31,"_211":31,"_212":31,"_213":64,"_214":-5,"_215":-7,"_216":-7,"_217":149,"_218":31,"_219":31,"_220":-5,"_221":31,"_222":31,"_223":31,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":92,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v51