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);",[151],"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}",[158],"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).",[166],"pulls",0,"branches",1,"forks","envVars",{"_181":173,"_183":173},"connections",{"_181":173,"_182":173},"count","unfilledCount","emptyCount",{"_18":165,"_20":166,"_116":36,"_118":-5,"_119":68,"_120":167,"_122":103,"_22":206,"_65":169,"_125":96,"_127":170,"_129":26,"_130":-5,"_191":207,"_85":208},{"_18":157,"_20":158,"_116":159,"_118":-5,"_119":68,"_120":160,"_122":103,"_22":203,"_65":162,"_125":126,"_127":163,"_129":26,"_130":-5,"_191":204,"_85":205},{"_18":150,"_20":151,"_116":152,"_118":-5,"_119":68,"_120":66,"_122":103,"_22":200,"_65":154,"_125":146,"_127":155,"_129":26,"_130":-5,"_191":201,"_85":202},{"_18":140,"_20":141,"_116":142,"_118":-5,"_119":68,"_120":143,"_122":103,"_22":197,"_65":145,"_125":146,"_127":147,"_129":26,"_130":148,"_191":198,"_85":199},{"_18":132,"_20":133,"_116":134,"_118":-5,"_119":68,"_120":135,"_122":103,"_22":194,"_65":137,"_125":126,"_127":138,"_129":26,"_130":-5,"_191":195,"_85":196},{"_18":114,"_20":115,"_116":117,"_118":-5,"_119":68,"_120":121,"_122":103,"_22":190,"_65":124,"_125":126,"_127":128,"_129":26,"_130":-5,"_191":192,"_85":193},["D",1746189969675],"children",[],[115],["D",1744398055142],[],[133],["D",1744399580317],[],[141],["D",1749757402260],[],[151],["D",1749237426997],[],[158],["D",1748900837953],[],[166],["D",1744048213626],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_33":34,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_105":246,"_247":248,"_249":250,"_251":26,"_252":26,"_253":26,"_254":103,"_255":-5,"_256":-7,"_257":-7,"_258":173,"_259":26,"_260":26,"_261":-5,"_262":26,"_263":26,"_264":26,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":67,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"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"]