My App with Live Reloading

Edit this file and save to see instant updates!

\n ,\n );\n});\n\n// Enable live reloading\nexport default liveReload(app.fetch, import.meta.url);\n```\n\n## Troubleshooting\n\n### Live reload isn't working\n\n1. **Check the domain**: Live reload only works on *.val.run domains (not custom domains)\n2. **Check the console**: Look for messages about live-reload being skipped\n3. **Iframe detection**: Live reload is disabled in iframes (like the Val Town editor preview)\n\n## Disabled on development\n\n- Only works on *.val.run domains (not custom domains)\n- Disabled in iframes (including the Val Town editor preview)\n- Requires the Val Town API to be accessible\n\n## Prior Art\n\nThis project is a port of [reloadOnSave](https://www.val.town/v/stevekrouse/reloadOnSave).","deleted","label","children",[],[154],{"_102":174,"_95":175,"_155":176,"_156":-5,"_157":140,"_158":177,"_160":161,"_104":178,"_99":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_170":182,"_98":183},"d6267328-430a-11f0-b31a-76b3cceeab13","client.ts","5c7fba2e-16fb-11f0-a72b-569c3dd06744",247,["D",1749237426997],39,"script","/**\n * Registers a long polling mechanism to check for updates and reload the page if needed\n * @param {Object} params - The parameters object\n * @param {number} params.pageLoadedAt - Timestamp when the page was initially loaded\n * @returns {Promise} A promise that resolves when the long poll is registered\n */\nasync function registerLongPoll({ pageLoadedAt }: { pageLoadedAt: number }) {\n const { lastUpdatedAt, status } = await (await fetch(\"/__lastUpdatedAt\"))\n .json();\n if (lastUpdatedAt > pageLoadedAt) {\n window.location.href = `https://reload.val.run?${new URLSearchParams({\n url: window.location.href,\n })}`;\n return;\n }\n if (status === \"TIMEOUT\") {\n console.log(\"Long poll timed out - starting a new one...\");\n return registerLongPoll({ pageLoadedAt });\n }\n throw Error(\"Unexpected state: \" + JSON.stringify({ lastUpdatedAt, status }));\n}\n\nasync function wait(ms: number) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nasync function pollForChange(message?: string) {\n let targetURL = new URLSearchParams(window.location.search).get(\"url\");\n if (!targetURL) {\n console.error(\"Error: URL not found in search params\");\n return;\n }\n const resp = await fetch(targetURL);\n if (resp.ok) {\n window.location.href = targetURL;\n return;\n }\n let newMessage;\n try {\n newMessage = (await resp.json()).message;\n if (message && newMessage.replaceAll(/@\\d+/g, \"\") !== message) {\n // still an error, but the error message has changed\n window.location.reload();\n }\n } catch (e) {\n console.error(e);\n }\n\n await wait(500);\n pollForChange(newMessage?.replaceAll(/@\\d+/g, \"\"));\n}\n\n// Only run this on val.run domains, not on custom domains.\n// This is a heuristic for \"in-development\".\n// TODO: Once we're on NextGen, we should be able to detect this via server-side env variables\nif (!window.location.hostname.endsWith(\".val.run\")) {\n console.log(\n \"Skipping live-reload because not on *.val.run. Learn more about live-reload: https://www.val.town/x/stevekrouse/live-reload\",\n );\n} // Don't register for polling when in an iframe, ie the Val Town dev iframe\nelse if (window.self !== window.top) {\n console.log(\n \"Skipping live-reload because in an iframe. Learn more about live-reload: https://www.val.town/x/stevekrouse/live-reload\",\n );\n} // If we're in an error state, poll for non error\nelse if (window.location.hostname === \"reload.val.run\") {\n pollForChange();\n} // Otherwise, start long polling\nelse {\n console.log(\n \"Long-polling for new versions of this project. Learn more about live-reload: https://www.val.town/x/stevekrouse/live-reload\",\n );\n await registerLongPoll({ pageLoadedAt: Date.now() });\n}",[],[175],{"_102":185,"_95":186,"_155":187,"_156":-5,"_157":140,"_158":139,"_160":161,"_104":188,"_99":189,"_164":190,"_166":191,"_168":22,"_169":-5,"_170":192,"_98":193},"7f8f0150-47c5-11f0-97df-76b3cceeab13","demo.tsx","27760cd0-1704-11f0-a475-569c3dd06744",["D",1749757402260],126,"http","/** @jsxImportSource npm:hono/jsx **/\nimport { Hono } from \"npm:hono\";\nimport { liveReload } from \"./main.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html(\n \n

Live reloading demo

\n ,\n );\n});\n\napp.onError((e) => Promise.reject(e));\nexport default app.fetch\n// export default liveReload(app.fetch, import.meta.url);",[],[186],{"_102":195,"_95":196,"_155":197,"_156":-5,"_157":140,"_158":198,"_160":161,"_104":199,"_99":200,"_164":190,"_166":201,"_168":22,"_169":202,"_170":203,"_98":204},"d8d22b66-170a-11f0-83cc-569c3dd06744","error-proxy.ts","f403b6c2-1708-11f0-b477-569c3dd06744",123,["D",1744399580317],9,"import { injectHTMLResponse } from \"./utils.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const targetURL = url.searchParams.get(\"url\");\n if (!targetURL) {\n return new Response(`Learn more at https://www.val.town/x/stevekrouse/live-reload`);\n }\n const resp = await fetch(targetURL, {\n headers: req.headers,\n });\n if (resp.ok) {\n return new Response(null, { status: 302, headers: { Location: targetURL } });\n } else {\n return injectHTMLResponse(\n resp,\n ``,\n );\n }\n}","reload",[],[196],{"_102":206,"_95":207,"_155":208,"_156":-5,"_157":140,"_158":209,"_160":161,"_104":210,"_99":211,"_164":180,"_166":212,"_168":22,"_169":-5,"_170":213,"_98":214},"4bbf2c68-1707-11f0-adb1-569c3dd06744","main.ts","c634acc0-13d8-11f0-bcc5-569c3dd06744",104,["D",1744398055142],32,"import { getProjectIds, injectHTML, longPollLastUpdated, timeout } from \"./utils.ts\";\n\n/**\n * Wraps a request handler to enable live reloading functionality\n *\n * @param handler - The original request handler function\n * @param importMetaUrl - The import.meta.url string used to identify the project\n * @returns A new request handler that includes live reload capabilities\n */\nexport function liveReload(\n handler: (request: Request) => Promise,\n importMetaUrl: string,\n): (request: Request) => Promise {\n return async (req: Request) => {\n const url = new URL(req.url);\n if (url.pathname === \"/__lastUpdatedAt\") return longPollResponse(importMetaUrl);\n\n return injectHTML(\n handler,\n ``,\n )(req);\n };\n}\n\nconst idMap: { [key: string]: { project_id: string; branch_id: string } } = {};\nexport async function longPollResponse(\n importMetaUrl: string,\n): Promise {\n idMap[importMetaUrl] ||= await getProjectIds(importMetaUrl);\n try {\n const updated = await timeout(longPollLastUpdated(idMap[importMetaUrl]), 50_000); // 50 second timeout\n return Response.json(updated);\n } catch (e) {\n if (e.message === \"Operation timed out\") {\n return Response.json({ lastUpdateAt: 0, status: \"TIMEOUT\" });\n }\n throw e;\n }\n}",[],[207],{"_102":216,"_95":217,"_155":218,"_156":-5,"_157":140,"_158":219,"_160":161,"_104":220,"_99":221,"_164":180,"_166":222,"_168":22,"_169":-5,"_170":223,"_98":224},"6c0a8862-2753-11f0-9980-569c3dd06744","utils.ts","d1c7712a-16fe-11f0-aa50-569c3dd06744",243,["D",1746189969675],24,"import { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { HTMLRewriter } from \"https://ghuc.cc/worker-tools/html-rewriter/index.ts\";\nimport ValTown from \"npm:@valtown/sdk@0.37.0\";\n\nconst client = new ValTown();\n\n/**\n * Retrieves project and branch IDs from a given import meta URL\n *\n * @param importMetaUrl - The import.meta.url string to parse\n * @returns {Promise<{project_id: string, branch_id: string}>} Object containing project and branch IDs\n * @throws {Error} If the specified branch is not found\n */\nexport async function getProjectIds(importMetaUrl: string) {\n const {\n name: projectName,\n branch: branchName,\n username,\n } = parseProject(importMetaUrl);\n const { id: project_id } = await client.alias.username.projectName.retrieve(username, projectName);\n const branches = await client.projects.branches.list(project_id, { limit: 100 });\n const branch = branches.data.find(branch => branch.name === branchName);\n if (!branch) {\n throw new Error(`Branch ${branchName} not found`);\n }\n const branch_id = branch.id;\n return { project_id, branch_id, version: branch.version };\n}\n\nasync function projectLastUpdated({ project_id, branch_id }: { project_id: string; branch_id: string }) {\n const { updatedAt, version } = await client.projects.branches.retrieve(\n project_id,\n branch_id,\n );\n return { lastUpdatedAt: new Date(updatedAt).getTime(), version };\n}\n\nasync function wait(ms: number) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\n/**\n * Creates a promise that resolves with the result of the original promise\n * or rejects with a timeout error if the original promise takes longer than the specified time.\n *\n * @param {Promise} promise - The promise to apply a timeout to\n * @param {number} timeoutMs - Timeout in milliseconds\n * @param {string} [errorMessage] - Optional custom error message\n * @returns {Promise} A new promise with timeout behavior\n */\nexport function timeout(\n promise: Promise,\n timeoutMs: number,\n errorMessage: string = \"Operation timed out\",\n): Promise {\n // Create a promise that rejects after the specified timeout\n const timeoutPromise = new Promise((_, reject) => {\n const timeoutId = setTimeout(() => {\n clearTimeout(timeoutId);\n reject(new Error(errorMessage));\n }, timeoutMs);\n });\n\n // Return a race between the original promise and the timeout promise\n return Promise.race([promise, timeoutPromise]) as Promise;\n}\n\nexport async function longPollLastUpdated({\n version,\n project_id,\n branch_id,\n}: {\n version: number;\n project_id: string;\n branch_id: string;\n}): Promise {\n const { lastUpdatedAt, version: newVersion } = await projectLastUpdated({ project_id, branch_id });\n if (newVersion > version) {\n return { lastUpdatedAt, version: newVersion };\n }\n\n // last edit < 15 min, poll in 500ms\n // last edit < 1 hour, poll in 1 seconds\n // last edit > 1 hour, poll in 5 seconds\n let waitTime = lastUpdatedAt > Date.now() - 15 * 60 * 1000\n ? 500\n : lastUpdatedAt > Date.now() - 3 * 60 * 60 * 1000\n ? 1000\n : 5000;\n await wait(waitTime);\n\n return longPollLastUpdated({ version, project_id, branch_id });\n}\n/**\n * Creates a wrapper around a fetch handler that injects an HTML string\n * into the document. It first checks for a tag; if missing,\n * it looks for an tag. If neither are present, it appends to\n * the full text response.\n *\n * @param handler The original fetch handler function\n * @param html The HTML content to inject\n * @returns A new fetch handler with HTML rewriting\n */\nexport function injectHTML(\n handler: (request: Request) => Promise,\n html: string,\n): (request: Request) => Promise {\n return async (request: Request) => {\n const response = await handler(request);\n return injectHTMLResponse(response, html);\n };\n}\n\nexport async function injectHTMLResponse(\n response: Response,\n html: string,\n): Promise {\n const contentType = response.headers.get(\"Content-Type\");\n\n // Only modify responses with HTML content\n if (contentType && contentType.includes(\"text/html\")) {\n // Clone the response so we can inspect its text without disturbing the original stream\n const clonedResponse = response.clone();\n const responseText = await clonedResponse.text();\n\n // Check if a tag exists in the HTML document\n if (/ is missing but the tag exists, inject into as a fallback\n else if (/ nor tags are found, simply append the HTML to the raw text response\n else {\n return new Response(responseText + html, {\n headers: response.headers,\n status: response.status,\n statusText: response.statusText,\n });\n }\n }\n\n // For non-HTML responses, return the original response unmodified\n return response;\n}",[],[217],"files",[152,173,184,194,205,215],"counts",{"_229":32,"_230":231,"_232":233,"_234":235},"pulls","branches",1,"forks",3,"envVars",{"_236":32,"_237":32},"count","emptyCount","contents",[240,243,246,249,252,255],{"_102":153,"_95":154,"_155":115,"_156":-5,"_157":140,"_158":159,"_160":161,"_104":241,"_99":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":242},["D",1748900837953],[154],{"_102":174,"_95":175,"_155":176,"_156":-5,"_157":140,"_158":177,"_160":161,"_104":244,"_99":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_98":245},["D",1749237426997],[175],{"_102":185,"_95":186,"_155":187,"_156":-5,"_157":140,"_158":139,"_160":161,"_104":247,"_99":189,"_164":190,"_166":191,"_168":22,"_169":-5,"_98":248},["D",1749757402260],[186],{"_102":195,"_95":196,"_155":197,"_156":-5,"_157":140,"_158":198,"_160":161,"_104":250,"_99":200,"_164":190,"_166":201,"_168":22,"_169":202,"_98":251},["D",1744399580317],[196],{"_102":206,"_95":207,"_155":208,"_156":-5,"_157":140,"_158":209,"_160":161,"_104":253,"_99":211,"_164":180,"_166":212,"_168":22,"_169":-5,"_98":254},["D",1744398055142],[207],{"_102":216,"_95":217,"_155":218,"_156":-5,"_157":140,"_158":219,"_160":161,"_104":256,"_99":221,"_164":180,"_166":222,"_168":22,"_169":-5,"_98":257},["D",1746189969675],[217],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":266,"_234":271},{"_102":103,"_95":96,"_104":267,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":22,"_117":118,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":268,"_134":269,"_137":270,"_149":22},["D",1744048213626],{"_93":94,"_132":133},{"_93":94,"_136":133,"_14":113},{"_99":139,"_95":43,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[],"actionData","errors"]

stevekrouse

live-reload

Environment variables