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);",[157],"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}",[164],"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).",[172],"pulls",0,1,"forks","envVars",{"_186":179,"_188":179},"connections",{"_186":179,"_187":179},"count","unfilledCount","emptyCount",{"_20":171,"_13":172,"_122":48,"_124":-5,"_125":21,"_126":173,"_128":109,"_22":211,"_29":175,"_131":102,"_133":176,"_135":38,"_136":-5,"_196":212,"_90":213},{"_20":163,"_13":164,"_122":165,"_124":-5,"_125":21,"_126":166,"_128":109,"_22":208,"_29":168,"_131":132,"_133":169,"_135":38,"_136":-5,"_196":209,"_90":210},{"_20":156,"_13":157,"_122":158,"_124":-5,"_125":21,"_126":30,"_128":109,"_22":205,"_29":160,"_131":152,"_133":161,"_135":38,"_136":-5,"_196":206,"_90":207},{"_20":146,"_13":147,"_122":148,"_124":-5,"_125":21,"_126":149,"_128":109,"_22":202,"_29":151,"_131":152,"_133":153,"_135":38,"_136":154,"_196":203,"_90":204},{"_20":138,"_13":139,"_122":140,"_124":-5,"_125":21,"_126":141,"_128":109,"_22":199,"_29":143,"_131":132,"_133":144,"_135":38,"_136":-5,"_196":200,"_90":201},{"_20":120,"_13":121,"_122":123,"_124":-5,"_125":21,"_126":127,"_128":109,"_22":195,"_29":130,"_131":132,"_133":134,"_135":38,"_136":-5,"_196":197,"_90":198},["D",1746189969675],"children",[],[121],["D",1744398055142],[],[139],["D",1744399580317],[],[147],["D",1749757402260],[],[157],["D",1749237426997],[],[164],["D",1748900837953],[],[172],["D",1744048213626],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_45":46,"_85":86,"_87":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_111":251,"_252":253,"_254":255,"_256":38,"_257":38,"_258":38,"_259":109,"_260":-5,"_261":-7,"_262":-7,"_263":179,"_264":38,"_265":38,"_266":-5,"_267":38,"_268":38,"_269":38,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":26,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Branches1

Branches
1