[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_223":224,"_225":226},"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":123,"_124":-5,"_125":-5,"_126":127},"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":25,"_59":-5,"_60":61,"_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",253,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","demo.tsx","latestPath","fileId","27760cd0-1704-11f0-a475-569c3dd06744","name","fileType","http","content","/** @jsxImportSource npm:hono/jsx **/\nimport { Hono } from \"npm:hono\";\nimport { liveReload } from \"./main.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n throw new Error(\"test\");\n return c.html(\n \n

Live reloading demo

\n ,\n );\n});\n\napp.onError((e) => Promise.reject(e));\nexport default liveReload(app.fetch, import.meta.url);","/** @jsxImportSource npm:hono/jsx **/\nimport { Hono } from \"npm:hono\";\nimport { liveReload } from \"./main.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n throw\n return c.html(\n \n

Live reloading demo

\n ,\n );\n});\n\napp.onError((e) => Promise.reject(e));\nexport default liveReload(app.fetch, import.meta.url);","createdAt",["D",1749238422607],"branchVersion","branchId","c1f3680e-13d8-11f0-a31b-569c3dd06744","id","c1f31c00-13d8-11f0-a31b-569c3dd06744","live-reload",["D",1744048213626],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Middleware for live-reloading HTTP vals when they change","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","ca919ae4-13d8-11f0-b855-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",254,"likeCount",5,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","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",255,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":219,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_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":220,"_81":221,"_83":222,"_85":25},"tree",[194,195,196,197,198,199],"files",[194,195,196,197,198,199],"counts",{"_182":183,"_184":185,"_186":183,"_187":188,"_189":190},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":175,"_32":176,"_30":57,"_137":-5,"_41":42,"_40":177,"_139":123,"_38":178,"_13":179,"_33":20,"_35":180,"_24":25,"_144":-5,"_27":181},{"_43":167,"_32":168,"_30":169,"_137":-5,"_41":42,"_40":170,"_139":123,"_38":171,"_13":172,"_33":142,"_35":173,"_24":25,"_144":-5,"_27":174},{"_43":163,"_32":28,"_30":31,"_137":-5,"_41":42,"_40":14,"_139":25,"_38":164,"_13":165,"_33":34,"_35":37,"_24":25,"_144":-5,"_27":166},{"_43":154,"_32":155,"_30":156,"_137":-5,"_41":42,"_40":157,"_139":123,"_38":158,"_13":159,"_33":34,"_35":160,"_24":25,"_144":161,"_27":162},{"_43":146,"_32":147,"_30":148,"_137":-5,"_41":42,"_40":149,"_139":123,"_38":150,"_13":151,"_33":142,"_35":152,"_24":25,"_144":-5,"_27":153},{"_43":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":123,"_38":140,"_13":141,"_33":142,"_35":143,"_24":25,"_144":-5,"_27":145},"6c0a8862-2753-11f0-9980-569c3dd06744","utils.ts","d1c7712a-16fe-11f0-aa50-569c3dd06744","parentId",243,"latest",["D",1746189969675],24,"script","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}","label",[135],"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}",[147],"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",[155],"2794788e-430d-11f0-9778-76b3cceeab13",["D",1749238422607],124,[28],"d6267328-430a-11f0-b31a-76b3cceeab13","client.ts","5c7fba2e-16fb-11f0-a72b-569c3dd06744",247,["D",1749237426997],39,"/**\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}",[168],"2771f5da-3ffb-11f0-a5a0-76b3cceeab13","README.md",246,["D",1748900837953],19,"# Live-Reload for Val Town\n\nAutomatically reload your Val Town project in the browser when any of its files change. No more manual refreshing to see your updates!\n\n### [📺 Demo video](https://share.cleanshot.com/lxR38Whg)\n\n## Features\n\n- 🔄 Instant page reloads when your code changes\n- 🔌 Simple one-line integration\n- 🧠 Smart polling frequency based on edit recency\n- 🛡️ Error state handling with automatic recovery\n- 🔍 Works only in development environments (*.val.run domains)\n\n## Installation\n\nImport and use the `liveReload` wrapper function in your main entry point:\n\n```typescript\nimport { liveReload } from \"https://esm.town/v/stevekrouse/live-reload/main.ts\";\n\nconst handler = (req: Request) => { /* your fetch handler */}\nexport default liveReload(handler, import.meta.url);\n```\n\nYou can also [remix this example](https://www.val.town/x/stevekrouse/live-reload-demo/) to get started.\n\n\n## How It Works\n\n1. **Detection**: The system uses the Val Town API to monitor your project for changes\n2. **Long Polling**: The client periodically checks if the project has been updated\n3. **Smart Polling**: Polling frequency adjusts based on how recently the project was edited:\n - < 15 minutes: Polls every 500ms\n - < 3 hours: Polls every 1 second\n - \\> 3 hours: Polls every 5 seconds\n4. **Reload**: When a change is detected, the page is redirected through a special proxy that handles error states\n5. **Error Recovery**: If val returns an error, we'll redirect you to our `reload.val.run` proxy, which will show you the error, and poll for non-error responses, and reload the page when it gets one.\n\n## Example Usage\n\nHere's a complete example using Hono:\n\n```typescript\n/** @jsxImportSource npm:hono/jsx **/\nimport { Hono } from \"npm:hono\";\nimport { liveReload } from \"https://esm.town/v/stevekrouse/live-reload/main.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html(\n \n

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).",[176],"pulls",0,"branches",1,"forks","envVars",{"_191":183,"_193":183},"connections",{"_191":183,"_192":183},"count","unfilledCount","emptyCount",{"_43":175,"_32":176,"_30":57,"_137":-5,"_41":42,"_40":177,"_139":123,"_38":216,"_13":179,"_33":20,"_35":180,"_24":25,"_144":-5,"_201":217,"_27":218},{"_43":167,"_32":168,"_30":169,"_137":-5,"_41":42,"_40":170,"_139":123,"_38":213,"_13":172,"_33":142,"_35":173,"_24":25,"_144":-5,"_201":214,"_27":215},{"_43":163,"_32":28,"_30":31,"_137":-5,"_41":42,"_40":14,"_139":25,"_38":210,"_13":165,"_33":34,"_35":37,"_24":25,"_144":-5,"_201":211,"_27":212},{"_43":154,"_32":155,"_30":156,"_137":-5,"_41":42,"_40":157,"_139":123,"_38":207,"_13":159,"_33":34,"_35":160,"_24":25,"_144":161,"_201":208,"_27":209},{"_43":146,"_32":147,"_30":148,"_137":-5,"_41":42,"_40":149,"_139":123,"_38":204,"_13":151,"_33":142,"_35":152,"_24":25,"_144":-5,"_201":205,"_27":206},{"_43":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":123,"_38":200,"_13":141,"_33":142,"_35":143,"_24":25,"_144":-5,"_201":202,"_27":203},["D",1746189969675],"children",[],[135],["D",1744398055142],[],[147],["D",1744399580317],[],[155],["D",1749238422607],[],[28],["D",1749237426997],[],[168],["D",1748900837953],[],[176],["D",1744048213626],{"_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,"_125":256,"_257":258,"_259":260,"_261":25,"_262":25,"_263":25,"_264":123,"_265":-5,"_266":-7,"_267":-7,"_268":183,"_269":25,"_270":25,"_271":-5,"_272":25,"_273":25,"_274":25,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":87,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"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 · v253