[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_187":188,"_189":190},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":37,"_35":36,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","hono.yjs.tsx","latestPath","fileId","8d922a5c-7b90-11f1-9d4f-1607ee4eb77e","name","fileType","script","content","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport { createFactory, createMiddleware } from \"npm:hono/factory\";\nimport { jsxRenderer } from \"npm:hono/jsx-renderer\";\n// Match the exact yjs build the shared doc val uses, so the Y.Doc we create and\n// the maps we read are the SAME module instance connectYjs operates on.\nimport * as Y from \"https://esm.sh/yjs@^13.6.20?target=esnext\";\n// Shared \"yjs val\" utility: owns the Hocuspocus provider + websocket wiring.\nimport { connectYjs } from \"https://esm.town/v/dinavinter/doc\";\n// @cxai/stream: async-iterator view over a Y.Map's changes (used by the SSE route).\nimport { yMapIterate } from \"https://esm.sh/@cxai/stream/yjs\";\n\n/**\n * hono.yjs — the shared Hono app factory + handler builder for the gallery's\n * Yjs-backed SSR components. Lives at the val root because every component\n * folder (toggle/, …) reuses it.\n *\n * It reuses shared \"yjs val\" utilities instead of local copies:\n * - `connectYjs` from the val `dinavinter/doc` (Yjs + Hocuspocus wiring)\n * - `yMapIterate` from `@cxai/stream` for streaming Y.Map changes\n *\n * Two exports work together:\n * - `yjs` — a `createFactory` instance whose `initApp` wires the\n * cross-cutting concerns (cors + base document renderer).\n * - `createHandler` — builds a component's route surface, pre-wired with the\n * per-instance state middleware (doc + map + waitForState).\n *\n * A component depends ONLY on the injected `c.var.map` (+ `waitForState`/`doc`).\n * State is keyed `component:instance` in ONE shared doc; the component name is\n * pinned into `createHandler`, so the same handler composes into the gallery\n * router AND wraps in `yjs.createApp()` for standalone deploy — identical keys.\n */\n\n/** Context provided to every route of a `yjs` app. */\nexport type YjsEnv = {\n Variables: {\n doc: Y.Doc;\n map: Y.Map;\n /** Resolve once the instance map reaches `want`, or on timeout / abort. */\n waitForState: (want: boolean, timeoutMs?: number) => Promise;\n };\n};\n\n/**\n * Long-poll helper. Resolves as soon as `map` reaches `want`, or when the\n * timeout / request abort fires — whichever comes first. Uses a raw Y.Map\n * observer (not a stream) since it just awaits a target state, not a feed.\n */\nfunction waitForState(\n map: Y.Map,\n want: boolean,\n timeoutMs: number,\n signal: AbortSignal,\n): Promise {\n // Coerce to boolean so a fresh instance (value === undefined) reads as \"off\"\n // and a `waitForState(false)` on it resolves immediately instead of hanging.\n const current = () => map.get(\"value\") === true;\n if (current() === want) return Promise.resolve();\n return new Promise((resolve) => {\n const finish = () => {\n map.unobserve(observer);\n clearTimeout(timer);\n signal.removeEventListener(\"abort\", onAbort);\n resolve();\n };\n const observer = () => {\n if (current() === want) finish();\n };\n const onAbort = () => finish();\n const timer = setTimeout(finish, timeoutMs);\n map.observe(observer);\n signal.addEventListener(\"abort\", onAbort);\n });\n}\n\n/**\n * ONE process-wide Y.Doc for everything, connected once on first use (via the\n * shared `connectYjs`) and keyed `component:instance`.\n */\nlet doc: Y.Doc | undefined;\nfunction mapFor(component: string, instance: string): Y.Map {\n if (!doc) {\n // connectYjs takes a Y.Doc and returns the connected document.\n doc = connectYjs(new Y.Doc({ guid: \"components\" })) as Y.Doc;\n }\n return doc.getMap(`${component}:${instance}`);\n}\n\n/**\n * yjs — THE Hono app factory (a `createFactory` instance, not a function).\n * `yjs.createApp()` runs `initApp` (cors + the base document renderer) and\n * returns a bare app; you then mount one or more component handlers on it.\n */\nexport const yjs = createFactory({\n initApp(app) {\n app.use(\"/*\", cors());\n app.get(\"*\", renderer);\n },\n});\n\n/**\n * createHandler — a component's route surface, pre-wired with the per-instance\n * state middleware. `component` is PINNED here (not read from the mount path),\n * so the handler produces stable `component:instance` keys wherever mounted.\n */\nexport function createHandler(component: string) {\n const app = new Hono();\n\n const state = createMiddleware(async (c, next) => {\n const instance = c.req.param(\"instance\") ?? \"default\";\n const map = mapFor(component, instance);\n c.set(\"doc\", doc!);\n c.set(\"map\", map);\n c.set(\"waitForState\", (want, timeoutMs = 30_000) =>\n waitForState(map, want, timeoutMs, c.req.raw.signal),\n );\n await next();\n });\n app.use(\"/:instance\", state);\n app.use(\"/:instance/*\", state);\n\n return app;\n}\n\n/**\n * changes — stream a Y.Map's changes as an async iterator, using `@cxai/stream`'s\n * `yMapIterate`. Yields the changed key on every real change (no on-connect\n * snapshot). Ends cleanly when `signal` aborts (client disconnect).\n */\nexport async function* changes(\n map: Y.Map,\n signal: AbortSignal,\n): AsyncGenerator {\n const it = yMapIterate(map);\n signal.addEventListener(\"abort\", () => void it.return?.(undefined as never));\n for await (const [key] of it) {\n if (signal.aborted) return;\n yield String(key);\n }\n}\n\n/** htmx sends `HX-Request` on ajax/swap requests — then we skip the document. */\nconst isHx = (c: { req: { header: (name: string) => string | undefined } }) =>\n c.req.header(\"HX-Request\") === \"true\";\n\n/**\n * renderer — the base HTML document + CDN scripts (incl. htmx path-params,\n * which components rely on). On an htmx request it returns just the child (no\n * document) so swaps stay clean.\n */\nexport const renderer = jsxRenderer(\n ({ children }, c) => {\n if (isHx(c)) return <>{children};\n return (\n \n \n \n \n Component Gallery\n \n \n \n \n \n \n {children}\n \n );\n },\n (c) => ({ stream: true, docType: !isHx(c) }),\n);\n","http","createdAt",["D",1783601079241],"branchVersion","branchId","89dd9e90-891f-45a2-aa18-f3512f064f79","id","50c582a3-a1a6-4c6c-8677-8613bbc316ef","gallary",["D",1783599528265],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Component gallery: headless Hono SSR + htmx + Yjs","imageUrl","6d45e71e-9df4-45e8-82ab-e09c45bfc5a1","pinnedFileId","b1d7da38-7b90-11f1-af08-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b636164b-34c9-4e0c-9d39-dd3dc6f25436","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"isOwned",45,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dinavinter","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVgxSUNRd1V1VDlqTnNmYUh6MDA0VW1ldlMifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":183,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":184,"_81":185,"_83":186,"_85":25},"tree",[162,164,165],"files",[162,163,164,165],"counts",{"_152":63,"_153":137,"_154":63,"_155":156,"_157":158},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":145,"_32":146,"_30":147,"_133":-5,"_41":42,"_40":148,"_135":59,"_38":149,"_13":63,"_33":150,"_35":-5,"_24":25,"_139":-5,"_27":151},{"_43":141,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":142,"_13":143,"_33":37,"_35":36,"_24":25,"_139":-5,"_27":144},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":136,"_13":137,"_33":37,"_35":138,"_24":25,"_139":-5,"_27":140},"e496e4ea-57dc-4572-9866-9fcd6c8cd914","main.tsx","56976634-7b90-11f1-87f2-1607ee4eb77e","parentId",5,"latest",["D",1783599722209],1,"/** @jsxImportSource npm:hono/jsx */\nimport { yjs } from \"./hono.yjs.tsx\";\nimport { handler as toggle } from \"./toggle/index.tsx\";\n\n/**\n * The gallery router — the val's HTTP entry point.\n *\n * Built from the shared factory (`yjs.createApp()` → cors + base document\n * renderer), it composes each component handler at its own path. Every handler\n * pins its own component key, so `toggle` is reached at `/toggle/:instance`\n * here, while the SAME handler is also deployable standalone from\n * `toggle/index.tsx`'s default export — identical state keys either way.\n *\n * Add more components by dropping a folder next to `toggle/` and mounting its\n * handler here with another `.route(\"/\", handler)`.\n */\nconst app = yjs\n .createApp()\n .get(\"/\", (c) =>\n c.render(\n

Component Gallery

\n Headless Hono SSR components with htmx + Yjs sync. Each component is a\n self-contained handler, composed here and deployable standalone.\n

\n \n

,\n ),\n )\n .route(\"/toggle\", toggle);\n\nexport default app.fetch;\n","label",[131],"8940b587-1eb5-4120-a1a5-55b3a9b84ad1",["D",1783601079241],3,[28],"1c2f5d02-c60b-40f9-a913-8f20aa8f27f8","toggle","677b21a2-7b90-11f1-9d92-1607ee4eb77e",2,["D",1783599556675],"directory",[146],"pulls","branches","forks","envVars",{"_159":137,"_161":63},"connections",{"_159":63,"_160":63},"count","unfilledCount","emptyCount",{"_43":145,"_32":146,"_30":147,"_133":-5,"_41":42,"_40":148,"_135":59,"_38":180,"_13":63,"_33":150,"_35":-5,"_24":25,"_139":-5,"_167":181,"_27":182},{"_43":173,"_32":174,"_30":57,"_133":147,"_41":42,"_40":175,"_135":25,"_38":176,"_13":63,"_33":37,"_35":177,"_24":25,"_139":146,"_167":178,"_27":179},{"_43":141,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":170,"_13":143,"_33":37,"_35":36,"_24":25,"_139":-5,"_167":171,"_27":172},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":166,"_13":137,"_33":37,"_35":138,"_24":25,"_139":-5,"_167":168,"_27":169},["D",1783599722209],"children",[],[131],["D",1783601079241],[],[28],"da710500-e2dd-41b4-8612-fc164e4d28ac","index.tsx",4,["D",1783599681435],"/** @jsxImportSource npm:hono/jsx */\nimport type { Context } from \"npm:hono\";\nimport { jsxRenderer } from \"npm:hono/jsx-renderer\";\nimport { streamSSE } from \"npm:hono/streaming\";\nimport type * as Y from \"https://esm.sh/yjs@^13.6.20?target=esnext\";\nimport { changes, createHandler, yjs } from \"../hono.yjs.tsx\";\n\n/**\n * Toggle — a headless Hono SSR component with htmx + Yjs sync.\n *\n * It exports two things (see the bottom of the file):\n * - `handler` — the component's routes, pre-wired with the per-instance Yjs\n * state middleware. The gallery router composes it with `.route(path, handler)`.\n * - `default` — a standalone Val Town fetch handler: the routes wrapped in\n * `yjs.createApp()` (cors + base document renderer), plus a `/` redirect.\n *\n * Because the component name is pinned via `createHandler(\"toggle\")`, state is\n * keyed `toggle:` no matter where the handler is mounted, and all\n * paths are derived from the request (see `paths`) so nothing hardcodes a mount\n * prefix. Standalone at `/job1` and composed at `/toggle/job1` behave identically\n * — and, sharing the same doc, even stay in sync across deployments.\n *\n * Each `:instance` is its own `Y.Map` — e.g. `job1` and `job2` are independent\n * switches, while every consumer of the same instance stays in sync. Per\n * instance the routes are:\n * GET /:instance → the shell page (SSE-driven view + test slot)\n * GET|POST /:instance/on → turn on (POST) / await on (GET), return view\n * GET|POST /:instance/off → turn off (POST) / await off (GET), return view\n * GET /:instance/stream → SSE \"toggle\" change notifications\n * GET /:instance/inspect → raw CRDT state (debug)\n */\n\nconst isOn = (map: Y.Map) => map.get(\"value\") === true;\n\n// Mount-agnostic paths: derive the mount prefix + instance base from the ACTUAL\n// request path, so the same handler works at \"/\" (standalone) or \"/toggle\"\n// (composed) with zero hardcoded prefixes. `base` is the instance's own path\n// (e.g. \"/toggle/job1\"); `mount` is everything before it (e.g. \"/toggle\" or \"\").\nfunction paths(c: Context) {\n const instance = c.req.param(\"instance\") ?? \"default\";\n const idx = c.req.path.lastIndexOf(`/${instance}`);\n const mount = idx > 0 ? c.req.path.slice(0, idx) : \"\";\n return { instance, mount, base: `${mount}/${instance}` };\n}\n\n/* ------------------------------- layout ------------------------------- */\n\n// Extend c.render() so pages can pass page-chrome props to the shell layout.\n// Props are optional so routes rendered on the bare document layout can still\n// call c.render(content) with no extra arguments.\ndeclare module \"npm:hono\" {\n interface ContextRenderer {\n (\n content: string | Promise,\n props?: { title?: string; subtitle?: string; footer?: string },\n ): Response | Promise;\n }\n}\n\n// htmx sends `HX-Request` on ajax/swap requests — then we skip the page chrome.\nconst isHx = (c: { req: { header: (name: string) => string | undefined } }) =>\n c.req.header(\"HX-Request\") === \"true\";\n\n// Nested layout: the shared page chrome (header/section/footer). It wraps its\n// content in — the base document renderer — so shelled pages just do\n// `c.render(content, { title, subtitle, footer })`. On an htmx request we skip\n// the chrome (and the Layout) and return just the child. Footer nav links are\n// built from the derived mount so they work standalone and composed.\nconst shell = jsxRenderer(\n ({ children, title, subtitle, footer, Layout }, c) => {\n if (isHx(c)) return <>{children};\n const { mount } = paths(c);\n return (\n \n

{title}

\n {subtitle}\n

\n {children}\n

\n \n

\n \n );\n },\n (c) => ({ stream: true, docType: !isHx(c) }),\n);\n\n/* ------------------------------- routes ------------------------------- */\n\n// `createHandler(\"toggle\")` returns a Hono app pre-wired with the per-instance\n// state middleware (doc + map + waitForState), with \"toggle\" pinned as the\n// component key. We just add routes; the mount point is decided by whoever\n// composes/deploys this handler (see the exports at the bottom).\nconst handler = createHandler(\"toggle\");\n\n// GET /:instance — the stable shell. `sse-connect` lives on the outer wrapper\n// (never swapped); the inner #toggle-view owns the trigger/get/swap. The SSE\n// \"toggle\" event carries the new state as data (\"on\"/\"off\"), hx-vals lifts it\n// onto `value`, and path-params substitutes it into hx-get so the event routes\n// straight to `.../on` or `.../off`. On the initial `load` there is no event,\n// so we fall back to the server's current state.\nhandler.get(\"/:instance\", shell, (c) => {\n const { instance, base } = paths(c);\n const on = isOn(c.var.map);\n return c.render(\n

\n {/* #toggle-view is the STABLE parent of the swapped on/off root. Every\n class the on/off root shares lives here as `*:` child utilities, so\n the partials only carry what actually differs (state colors/content).\n `group` also lives here so future inner elements can use group-* . */}\n \n

Loading…

\n\n {/* The click's POST response lands here on purpose, proving the mutation\n round-tripped while the toggle above waits for the SSE event. */}\n

\n Last POST response (the toggle above is driven by SSE)\n

\n none yet\n

\n ,\n {\n title: instance,\n subtitle:\n \"Clicking POSTs to the opposite state; the response is diverted to a test slot so the view only ever updates from the SSE 'toggle' event. Open the same URL in two tabs to see live sync.\",\n footer:\n \"GET .../on and .../off long-poll until the shared state matches the path (?timeout=ms), so they double as await-a-state endpoints.\",\n },\n );\n});\n\n// GET|POST /:instance/on — the ON view lives here and nowhere else.\n// POST: turn on, then return the view.\n// GET: long-poll until on (?timeout=ms), then return the view.\nhandler.on([\"GET\", \"POST\"], \"/:instance/on\", async (c) => {\n const { base } = paths(c);\n const { doc, map, waitForState } = c.var;\n if (c.req.method === \"POST\") {\n doc.transact(() => map.set(\"value\", true));\n } else {\n await waitForState(true, Number(c.req.query(\"timeout\")) || 30_000);\n }\n // Render exactly the ON state — no flags, no branching. This route IS \"on\".\n return c.render(\n \n \n \n \n \n \n \n ON\n Click to turn off\n \n ,\n );\n});\n\n// GET|POST /:instance/off — the OFF view lives here and nowhere else.\nhandler.on([\"GET\", \"POST\"], \"/:instance/off\", async (c) => {\n const { base } = paths(c);\n const { doc, map, waitForState } = c.var;\n if (c.req.method === \"POST\") {\n doc.transact(() => map.set(\"value\", false));\n } else {\n await waitForState(false, Number(c.req.query(\"timeout\")) || 30_000);\n }\n // Render exactly the OFF state — no flags, no branching. This route IS \"off\".\n return c.render(\n \n \n \n \n \n \n \n OFF\n Click to turn on\n \n ,\n );\n});\n\n// GET /:instance/stream — \"toggle\" change notifications carrying the new state\n// as data (\"on\"/\"off\"). `changes()` yields the changed key on every real change\n// (no on-connect snapshot), so every iteration is an actual toggle worth pushing.\nhandler.get(\"/:instance/stream\", (c) => {\n const { map } = c.var;\n return streamSSE(c, async (stream) => {\n for await (const _key of changes(map, c.req.raw.signal)) {\n await stream.writeSSE({ event: \"toggle\", data: map.get(\"value\") ? \"on\" : \"off\" });\n }\n });\n});\n\n// Debug: inspect the whole CRDT state (all instances of this component).\nhandler.get(\"/:instance/inspect\", (c) => c.json(c.var.doc.toJSON()));\n\n/* ------------------------------- exports ------------------------------- */\n\n// The routes, for the gallery router to compose: `app.route(\"/toggle\", handler)`.\nexport { handler };\n\n// Standalone deploy (Val Town): wrap the routes in the shared factory (cors +\n// base document renderer) and redirect `/` to a default instance so the val's\n// root shows a live toggle.\nexport default yjs\n .createApp()\n .get(\"/\", (c) => c.redirect(\"/job1\"))\n .route(\"/\", handler).fetch;\n",[],[146,174],["D",1783599556675],[163],[146],["D",1783599528265],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":220,"_221":222,"_223":224,"_225":25,"_226":25,"_227":25,"_228":59,"_229":-5,"_230":-7,"_231":-7,"_232":63,"_233":25,"_234":25,"_235":-5,"_236":25,"_237":25,"_238":25,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":87,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v8