Component Gallery

[{"_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",{"_95":94,"_31":43,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","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 if (map.get(\"value\") === 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 (map.get(\"value\") === 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","createdAt",["D",1783599620573],"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",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"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",{"_41":42,"_31":43,"_36":172,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":173,"_79":174,"_81":175,"_83":24},"tree",[159,160,161],"files",[159,160,161],"counts",{"_149":61,"_150":132,"_151":61,"_152":153,"_154":155},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":142,"_31":143,"_29":144,"_131":-5,"_39":40,"_38":145,"_133":57,"_36":146,"_13":61,"_32":147,"_34":-5,"_23":24,"_137":-5,"_26":148},{"_41":139,"_31":27,"_29":30,"_131":-5,"_39":40,"_38":14,"_133":24,"_36":140,"_13":61,"_32":33,"_34":35,"_23":24,"_137":-5,"_26":141},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":24,"_36":134,"_13":61,"_32":135,"_34":136,"_23":24,"_137":-5,"_26":138},"35e3b012-cdbe-405a-9123-725d815e5c0f","main.tsx","56976634-7b90-11f1-87f2-1607ee4eb77e","parentId",1,"latest",["D",1783599528327],"http","// placeholder — replaced by the gallery router\nexport default () => new Response(\"ok\");\n","label",[129],"03238119-31a4-4321-b1b2-417da29ae9d0",["D",1783599620573],[27],"1c2f5d02-c60b-40f9-a913-8f20aa8f27f8","toggle","677b21a2-7b90-11f1-9d92-1607ee4eb77e",2,["D",1783599556675],"directory",[143],"pulls","branches","forks","envVars",{"_156":132,"_158":61},"connections",{"_156":61,"_157":61},"count","unfilledCount","emptyCount",{"_41":142,"_31":143,"_29":144,"_131":-5,"_39":40,"_38":145,"_133":57,"_36":169,"_13":61,"_32":147,"_34":-5,"_23":24,"_137":-5,"_163":170,"_26":171},{"_41":139,"_31":27,"_29":30,"_131":-5,"_39":40,"_38":14,"_133":24,"_36":166,"_13":61,"_32":33,"_34":35,"_23":24,"_137":-5,"_163":167,"_26":168},{"_41":128,"_31":129,"_29":130,"_131":-5,"_39":40,"_38":132,"_133":24,"_36":162,"_13":61,"_32":135,"_34":136,"_23":24,"_137":-5,"_163":164,"_26":165},["D",1783599528327],"children",[],[129],["D",1783599620573],[],[27],["D",1783599556675],[],[143],["D",1783599528265],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":209,"_210":211,"_212":213,"_214":24,"_215":24,"_216":24,"_217":57,"_218":-5,"_219":-7,"_220":-7,"_221":61,"_222":24,"_223":24,"_224":-5,"_225":24,"_226":24,"_227":24,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":85,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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 · v3