Hello!

\", {\n * headers: { \"Content-Type\": \"text/html\" },\n * });\n * });\n * ```\n */\nexport function hotReload(\n handler: (req: Request) => Response | Promise,\n): (req: Request) => Promise {\n const val = parseVal();\n const startVersion = parseInt(val.version, 10);\n\n // Lazily initialize the SDK and val/branch IDs on first poll request\n let pollContext:\n | Promise<{ vt: ValTown; valId: string; branchName: string }>\n | null = null;\n\n function getPollContext() {\n if (!pollContext) {\n pollContext = (async () => {\n const vt = new ValTown({ baseURL: API_URL });\n const { id: valId } = await vt.alias.username.valName.retrieve(\n val.username,\n val.name,\n );\n return { vt, valId, branchName: val.branch };\n })();\n }\n return pollContext;\n }\n\n return async (req: Request): Promise => {\n const url = new URL(req.url);\n\n // Only activate on val.run domains\n if (!url.hostname.endsWith(\".val.run\")) {\n return handler(req);\n }\n\n // Handle long-poll endpoint\n if (url.pathname === POLL_PATH) {\n return handlePoll(getPollContext, startVersion);\n }\n\n // Normal request — call user handler, maybe inject script\n const res = await handler(req);\n\n // Don't inject into iframe responses — Sec-Fetch-Dest is \"iframe\" for\n // iframe loads and \"document\" for top-level navigations.\n const fetchDest = req.headers.get(\"sec-fetch-dest\");\n if (fetchDest && fetchDest !== \"document\") {\n return res;\n }\n\n return maybeInjectScript(res, startVersion);\n };\n}\n\n/**\n * Handles the long-poll request from the client.\n *\n * Actively polls the Val Town API for branch version changes.\n * If the branch version has increased, respond immediately (triggering reload).\n * Otherwise, keep checking every ~1s for up to ~30s, then respond 304.\n */\nasync function handlePoll(\n getPollContext: () => Promise<\n { vt: ValTown; valId: string; branchName: string }\n >,\n startVersion: number,\n): Promise {\n const { vt, valId, branchName } = await getPollContext();\n const deadline = Date.now() + HOLD_DURATION_MS;\n\n while (Date.now() < deadline) {\n try {\n const latestVersion = await getBranchVersion(vt, valId, branchName);\n if (latestVersion !== null && latestVersion > startVersion) {\n return Response.json({ version: latestVersion });\n }\n } catch {\n // API error — don't crash, just retry next interval\n }\n // Wait before next check (but don't overshoot the deadline)\n const remaining = deadline - Date.now();\n if (remaining <= 0) break;\n await new Promise((resolve) =>\n setTimeout(resolve, Math.min(CHECK_INTERVAL_MS, remaining))\n );\n }\n\n return new Response(null, { status: 304 });\n}\n\n/**\n * Gets the current version of a branch from the Val Town API.\n */\nasync function getBranchVersion(\n vt: ValTown,\n valId: string,\n branchName: string,\n): Promise {\n const branches = await Array.fromAsync(vt.vals.branches.list(valId, {}));\n const branch = branches.find((b) => b.name === branchName);\n return branch ? branch.version : null;\n}\n\n/**\n * If the response is HTML, inject the hot-reload client script before or .\n * Otherwise, return the response unmodified.\n */\nasync function maybeInjectScript(\n res: Response,\n version: number,\n): Promise {\n const contentType = res.headers.get(\"content-type\") || \"\";\n if (!contentType.includes(\"text/html\")) {\n return res;\n }\n\n const script = clientScript(version);\n\n // If the response body is a ReadableStream, use the streaming injector\n if (res.body) {\n const injected = res.body\n .pipeThrough(new TextDecoderStream())\n .pipeThrough(new InjectBeforeCloseStream(script))\n .pipeThrough(new TextEncoderStream());\n\n return new Response(injected, {\n status: res.status,\n statusText: res.statusText,\n headers: res.headers,\n });\n }\n\n // Fallback for bodyless responses\n return res;\n}\n\n/**\n * Generates the inline client-side script that long-polls for version changes.\n */\nfunction clientScript(version: number): string {\n return ``;\n}\n\n/**\n * A TransformStream that injects a string before or in an HTML stream.\n * If neither tag is found, appends at the end.\n */\nclass InjectBeforeCloseStream extends TransformStream {\n constructor(content: string) {\n const state = { injected: false, buffer: \"\" };\n\n super({\n transform(chunk, controller) {\n if (state.injected) {\n controller.enqueue(chunk);\n return;\n }\n\n const combined = state.buffer + chunk;\n state.buffer = \"\";\n\n // Try to inject before or \n const bodyMatch = combined.match(/(<\\/body[\\s>])/i);\n const htmlMatch = combined.match(/(<\\/html[\\s>])/i);\n const match = bodyMatch || htmlMatch;\n\n if (match && match.index !== undefined) {\n const before = combined.slice(0, match.index);\n const after = combined.slice(match.index);\n controller.enqueue(before + content + after);\n state.injected = true;\n return;\n }\n\n // Buffer the tail in case = 1; i--) {\n const slice = combined.slice(-i);\n if (\"\".startsWith(slice) || \"\".startsWith(slice)) {\n state.buffer = slice;\n controller.enqueue(combined.slice(0, -i));\n return;\n }\n }\n\n controller.enqueue(combined);\n },\n flush(controller) {\n if (state.buffer) {\n controller.enqueue(state.buffer);\n }\n if (!state.injected) {\n controller.enqueue(content);\n }\n },\n });\n }\n}","deleted","label",[103],"permalink","https://www.val.town/x/std/utils/code/hot-reload.ts","extension","actionData","errors"]