[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_255":256,"_257":258},"routes/_app.x.$handle.$name",{"_106":105,"_37":50,"_114":92,"_32":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":127,"_128":129,"_130":30,"_131":132,"_133":64,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_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":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","1801ad79-9708-4e85-b7b4-019eab8a50a1","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/webrtc.ts","latestPath","fileId","62605e00-3985-11f1-b5eb-42b51c65c3df","name","webrtc.ts","fileType","script","content","// WebRTC + SSE signaling client — zero external dependencies\n// This is a plain-JS module (no React) so the logic is reusable.\n\nconst ICE_SERVERS = [\n { urls: \"stun:stun.l.google.com:19302\" },\n { urls: \"stun:stun1.l.google.com:19302\" },\n];\n\nexport type PeerState = {\n id: string;\n connection: RTCPeerConnection;\n stream: MediaStream | null;\n};\n\nexport type RoomCallbacks = {\n onPeerStream: (peerId: string, stream: MediaStream) => void;\n onPeerLeft: (peerId: string) => void;\n onError: (err: string) => void;\n};\n\nexport class RoomClient {\n roomId: string;\n clientId: string;\n localStream: MediaStream;\n peers: Map = new Map();\n eventSource: EventSource | null = null;\n callbacks: RoomCallbacks;\n\n constructor(\n roomId: string,\n clientId: string,\n localStream: MediaStream,\n callbacks: RoomCallbacks,\n ) {\n this.roomId = roomId;\n this.clientId = clientId;\n this.localStream = localStream;\n this.callbacks = callbacks;\n }\n\n connect() {\n const url = `/api/room/${this.roomId}/events?clientId=${this.clientId}`;\n this.eventSource = new EventSource(url);\n\n this.eventSource.addEventListener(\"peers\", (e) => {\n const { peers } = JSON.parse(e.data);\n // We are the new joiner — create offers to all existing peers\n for (const peerId of peers) {\n this.createPeerConnection(peerId, true);\n }\n });\n\n this.eventSource.addEventListener(\"peer-joined\", (e) => {\n const { peerId } = JSON.parse(e.data);\n // New peer joined — they will send us an offer, so just wait\n // (they got us in their \"peers\" list and will initiate)\n });\n\n this.eventSource.addEventListener(\"peer-left\", (e) => {\n const { peerId } = JSON.parse(e.data);\n this.removePeer(peerId);\n this.callbacks.onPeerLeft(peerId);\n });\n\n this.eventSource.addEventListener(\"signal\", (e) => {\n const { from, type, data } = JSON.parse(e.data);\n this.handleSignal(from, type, data);\n });\n\n this.eventSource.onerror = () => {\n this.callbacks.onError(\"SSE connection lost — try refreshing\");\n };\n }\n\n private createPeerConnection(peerId: string, initiator: boolean) {\n if (this.peers.has(peerId)) return;\n\n const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });\n this.peers.set(peerId, pc);\n\n // Add our local tracks\n for (const track of this.localStream.getTracks()) {\n pc.addTrack(track, this.localStream);\n }\n\n // When we get remote tracks\n pc.ontrack = (e) => {\n if (e.streams[0]) {\n this.callbacks.onPeerStream(peerId, e.streams[0]);\n }\n };\n\n // Send ICE candidates\n pc.onicecandidate = (e) => {\n if (e.candidate) {\n this.signal(peerId, \"ice-candidate\", e.candidate);\n }\n };\n\n pc.onconnectionstatechange = () => {\n if (pc.connectionState === \"failed\" || pc.connectionState === \"disconnected\") {\n this.removePeer(peerId);\n this.callbacks.onPeerLeft(peerId);\n }\n };\n\n // If we're the initiator, create and send an offer\n if (initiator) {\n pc.createOffer()\n .then((offer) => pc.setLocalDescription(offer))\n .then(() => {\n this.signal(peerId, \"offer\", pc.localDescription);\n })\n .catch((err) => this.callbacks.onError(`Offer failed: ${err.message}`));\n }\n\n return pc;\n }\n\n private async handleSignal(from: string, type: string, data: any) {\n if (type === \"offer\") {\n // Someone sent us an offer — create our side and send answer\n this.createPeerConnection(from, false);\n const pc = this.peers.get(from)!;\n await pc.setRemoteDescription(new RTCSessionDescription(data));\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n this.signal(from, \"answer\", pc.localDescription);\n } else if (type === \"answer\") {\n const pc = this.peers.get(from);\n if (pc) await pc.setRemoteDescription(new RTCSessionDescription(data));\n } else if (type === \"ice-candidate\") {\n const pc = this.peers.get(from);\n if (pc) {\n try {\n await pc.addIceCandidate(new RTCIceCandidate(data));\n } catch {\n // ignore late candidates\n }\n }\n }\n }\n\n private signal(to: string, type: string, data: any) {\n fetch(`/api/room/${this.roomId}/signal`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ from: this.clientId, to, type, data }),\n }).catch(() => {});\n }\n\n private removePeer(peerId: string) {\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.close();\n this.peers.delete(peerId);\n }\n }\n\n disconnect() {\n this.eventSource?.close();\n for (const [id, pc] of this.peers) {\n pc.close();\n }\n this.peers.clear();\n }\n}\n","createdAt",["D",1776338046884],"branchVersion","branchId","e8eda870-3984-11f1-ab80-42b51c65c3df","id","e8df5482-3984-11f1-ab80-42b51c65c3df","web-native-video",["D",1776337843007],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d95fc-73ea-733f-8112-fcfc6240c387","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":60,"_110":111,"_112":30},"branch",{"_13":91,"_37":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"isOwned",7,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",72,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":251,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_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":252,"_86":253,"_88":254,"_90":30},"tree",[185,193,194],"files",[185,186,187,188,189,190,191,192,193,194],"counts",{"_175":68,"_176":158,"_177":68,"_178":179,"_180":181},"contents",[149,150,151],"upstreamProject",{"_48":100,"_37":145,"_57":58,"_59":146,"_54":55,"_84":147},"upstreamBranch",{"_48":95,"_43":138,"_139":140,"_37":92,"_93":100,"_13":141,"_94":-5,"_96":-5,"_142":143,"_52":-5,"_90":30,"_54":55,"_104":144,"_69":102,"_103":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789708297&sig=bd06cf3f5c784f0362f2303752d5932a8f9952b0e8c7b70a7574504647682911",{"_106":144,"_113":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789708297&sig=b9333e2d288b9aace428794caf3f0540a24faa33e71fea9c8c77b4d6409e607a",{"_48":169,"_37":170,"_35":171,"_154":-5,"_46":47,"_45":158,"_156":64,"_43":172,"_13":68,"_39":173,"_41":-5,"_29":30,"_161":-5,"_32":174},{"_48":163,"_37":164,"_35":165,"_154":-5,"_46":47,"_45":158,"_156":30,"_43":166,"_13":68,"_39":26,"_41":167,"_29":30,"_161":-5,"_32":168},{"_48":152,"_37":153,"_35":62,"_154":-5,"_46":47,"_45":155,"_156":64,"_43":157,"_13":158,"_39":159,"_41":160,"_29":30,"_161":-5,"_32":162},"51f2d606-3985-11f1-b5eb-42b51c65c3df","index.ts","parentId",2,"latest",["D",1776338019322],1,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// ─── In-memory signaling state ───────────────────────────────────\n\ntype Client = {\n id: string;\n controller: ReadableStreamDefaultController;\n};\n\n// roomId -> list of connected SSE clients\nconst rooms = new Map();\n\nfunction sendToClient(client: Client, event: string, data: unknown) {\n try {\n client.controller.enqueue(\n new TextEncoder().encode(`event: ${event}\\ndata: ${JSON.stringify(data)}\\n\\n`),\n );\n } catch {\n // client disconnected\n }\n}\n\n// ─── API routes ──────────────────────────────────────────────────\n\n// SSE: join a room and listen for signaling messages\napp.get(\"/api/room/:roomId/events\", (c) => {\n const roomId = c.req.param(\"roomId\");\n const clientId = c.req.query(\"clientId\");\n if (!clientId) return c.text(\"clientId required\", 400);\n\n const stream = new ReadableStream({\n start(controller) {\n const client: Client = { id: clientId, controller };\n\n if (!rooms.has(roomId)) rooms.set(roomId, []);\n const room = rooms.get(roomId)!;\n\n // Tell the new peer about existing peers\n const existingPeerIds = room.map((c) => c.id);\n sendToClient(client, \"peers\", { peers: existingPeerIds });\n\n // Tell existing peers someone joined\n for (const peer of room) {\n sendToClient(peer, \"peer-joined\", { peerId: clientId });\n }\n\n room.push(client);\n console.log(`[room:${roomId}] ${clientId} joined (${room.length} peers)`);\n\n // Cleanup on disconnect — poll since we can't listen for abort\n const interval = setInterval(() => {\n try {\n // Try to send a comment (SSE keepalive)\n controller.enqueue(new TextEncoder().encode(\": keepalive\\n\\n\"));\n } catch {\n clearInterval(interval);\n const room = rooms.get(roomId);\n if (room) {\n const idx = room.findIndex((c) => c.id === clientId);\n if (idx !== -1) room.splice(idx, 1);\n for (const peer of room) {\n sendToClient(peer, \"peer-left\", { peerId: clientId });\n }\n if (room.length === 0) rooms.delete(roomId);\n console.log(`[room:${roomId}] ${clientId} left (${room.length} peers)`);\n }\n }\n }, 5000);\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n Connection: \"keep-alive\",\n },\n });\n});\n\n// POST signaling messages (offer, answer, ice-candidate) to a specific peer\napp.post(\"/api/room/:roomId/signal\", async (c) => {\n const roomId = c.req.param(\"roomId\");\n const body = await c.req.json();\n const { from, to, type, data } = body;\n\n const room = rooms.get(roomId);\n if (!room) return c.json({ error: \"room not found\" }, 404);\n\n const target = room.find((c) => c.id === to);\n if (!target) return c.json({ error: \"peer not found\" }, 404);\n\n sendToClient(target, \"signal\", { from, type, data });\n return c.json({ ok: true });\n});\n\n// Room info\napp.get(\"/api/room/:roomId/info\", (c) => {\n const roomId = c.req.param(\"roomId\");\n const room = rooms.get(roomId) || [];\n return c.json({ roomId, peers: room.length });\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Static files ────────────────────────────────────────────────\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[153],"e8f61406-3984-11f1-ab80-42b51c65c3df","README.md","019d95fc-73ea-733f-8112-f8caa1731e61",["D",1776337843007],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[164],"e8f612a8-3984-11f1-ab80-42b51c65c3df","frontend","019d95fc-73ea-733f-8112-f6cc1130ac9f",["D",1776337843007],"directory",[170],"pulls","branches","forks","envVars",{"_182":68,"_184":68},"connections",{"_182":68,"_183":68},"count","unfilledCount","emptyCount",{"_48":169,"_37":170,"_35":171,"_154":-5,"_46":47,"_45":158,"_156":64,"_43":248,"_13":68,"_39":173,"_41":-5,"_29":30,"_161":-5,"_196":249,"_32":250},{"_48":244,"_37":243,"_35":238,"_154":171,"_46":47,"_45":158,"_156":64,"_43":245,"_13":68,"_39":173,"_41":-5,"_29":30,"_161":-5,"_196":246,"_32":247},{"_48":235,"_37":236,"_35":237,"_154":238,"_46":47,"_45":158,"_156":30,"_43":239,"_13":68,"_39":40,"_41":240,"_29":30,"_161":-5,"_196":241,"_32":242},{"_48":228,"_37":229,"_35":230,"_154":171,"_46":47,"_45":158,"_156":30,"_43":231,"_13":68,"_39":26,"_41":232,"_29":30,"_161":-5,"_196":233,"_32":234},{"_48":220,"_37":221,"_35":222,"_154":171,"_46":47,"_45":223,"_156":64,"_43":224,"_13":158,"_39":26,"_41":225,"_29":30,"_161":-5,"_196":226,"_32":227},{"_48":213,"_37":214,"_35":215,"_154":171,"_46":47,"_45":158,"_156":64,"_43":216,"_13":68,"_39":40,"_41":217,"_29":30,"_161":-5,"_196":218,"_32":219},{"_48":206,"_37":207,"_35":208,"_154":171,"_46":47,"_45":158,"_156":64,"_43":209,"_13":68,"_39":26,"_41":210,"_29":30,"_161":-5,"_196":211,"_32":212},{"_48":202,"_37":38,"_35":36,"_154":171,"_46":47,"_45":14,"_156":64,"_43":203,"_13":68,"_39":40,"_41":42,"_29":30,"_161":-5,"_196":204,"_32":205},{"_48":163,"_37":164,"_35":165,"_154":-5,"_46":47,"_45":158,"_156":30,"_43":199,"_13":68,"_39":26,"_41":167,"_29":30,"_161":-5,"_196":200,"_32":201},{"_48":152,"_37":153,"_35":62,"_154":-5,"_46":47,"_45":155,"_156":64,"_43":195,"_13":158,"_39":159,"_41":160,"_29":30,"_161":-5,"_196":197,"_32":198},["D",1776338019322],"children",[],[153],["D",1776337843007],[],[164],"62605d24-3985-11f1-b5eb-42b51c65c3df",["D",1776338046884],[],[170,38],"e8f60f1a-3984-11f1-ab80-42b51c65c3df","style.css","019d95fc-73ea-733f-8112-f0c196d5f37d",["D",1776337843007],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[170,207],"e8f60b46-3984-11f1-ab80-42b51c65c3df","index.tsx","019d95fc-73ea-733f-8112-ed6d6dacdef2",["D",1776337843007],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[170,214],"54f99452-3985-11f1-9b30-42b51c65c3df","index.html","019d95fc-73ea-733f-8112-eaed6e2c0d18",3,["D",1776338024399],"\n\n \n \n \n Video Chat — Zero Dependencies\n \n \n \n \n

\n \n \n \n\n",[],[170,221],"e8f5ee40-3984-11f1-ab80-42b51c65c3df","favicon.svg","019d95fc-73ea-733f-8112-e4ead7373891",["D",1776337843007],"\n",[],[170,229],"e8f5c866-3984-11f1-ab80-42b51c65c3df","App.tsx","019d95fc-73ea-733f-8112-de225c091646","019d95fc-73ea-733f-8112-e3d675782b43",["D",1776337843007],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[170,243,236],"components","e8f5ec1a-3984-11f1-ab80-42b51c65c3df",["D",1776337843007],[187],[170,243],["D",1776337843007],[186,188,189,190,191,192],[170],["D",1776337843007],{"_106":105,"_113":109},{"_106":105,"_107":-5,"_108":109,"_19":60,"_110":111,"_112":30},{"_13":91,"_37":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"ctx",{"_84":-5,"_135":288,"_289":290,"_291":292,"_293":30,"_294":30,"_295":30,"_296":64,"_297":-5,"_298":-7,"_299":-7,"_300":68,"_301":30,"_302":30,"_303":-5,"_304":30,"_305":30,"_306":30,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":92,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v4