[{"_1":2,"_219":-5,"_220":-5},"loaderData",{"_3":4,"_91":92,"_206":207,"_218":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_201":-5,"_202":-5,"_203":204,"_132":133,"_145":146,"_100":101,"_98":99,"_119":-7,"_50":51,"_205":26},"type","val","author","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":123,"_124":90,"_125":126,"_127":123,"_128":31,"_129":31,"_130":-5,"_20":131,"_136":137,"_142":-7,"_143":144,"_145":146,"_147":148},"name","reloadOnSave","valNameId","a2dff218-ead8-11ee-a1bc-8aad37b30b4b","parentFolderId","eecc26b7-476b-4e93-9487-ae8b4988d6e5","isOwned","privacy","public","readme","# Reload in new tabs when your vals change\n\nWhen you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that.\n\n## Usage\n\n```ts\nimport { html } from \"https://esm.town/v/stevekrouse/html\";\nimport { reloadOnSaveFetchMiddleware } from \"https://esm.town/v/stevekrouse/reloadOnSave\";\n\nexport default reloadOnSaveFetchMiddleware(async function(req: Request): Promise {\n return html(`

Hello!!

`);\n})\n```","valType","script","currentVersion","7818244e-22ad-11ef-b249-cab58f78796a","legacyPrivate","id","code","import { InjectHTMLElementStream } from \"https://esm.town/v/andreterron/InjectHTMLElementStream?v=9\";\nimport { rootValRef } from \"https://esm.town/v/andreterron/rootValRef?v=3\";\nimport { ValRef } from \"https://esm.town/v/andreterron/ValRef?v=1\";\nimport { getCurrentValVersionNumber } from \"https://esm.town/v/stevekrouse/getCurrentValVersionNumber\";\nimport { modifyResponse } from \"https://esm.town/v/stevekrouse/modifyResponse\";\nimport { parentReference } from \"https://esm.town/v/stevekrouse/parentReference\";\nimport type { MiddlewareHandler } from \"npm:hono\";\n\n// this script runs client-side\nexport const reloadOnVals = async function(vals: ValRef[]) {\n const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));\n // console.log(\"initialValVersions: \", valVersions);\n const interval = setInterval(async () => {\n let newValVersions = await Promise.all(vals.map(getCurrentValVersionNumber));\n // console.log(\"newValVersions: \", newValVersions);\n if (JSON.stringify(newValVersions) !== JSON.stringify(valVersions)) {\n clearInterval(interval);\n window.location.reload();\n }\n }, 1000);\n};\n\n// experimental - don't use this\nexport function reloadOnSaveHonoMiddleware(vals: ValRef[] = [rootValRef()]): MiddlewareHandler {\n return async function(c, next) {\n await next();\n // don't reload on custom domains, only reload on val.run URLs\n if (!new URL(c.req.url).hostname.includes(\"val.run\")) {\n return;\n }\n c.res = modifyResponse(\n c.res,\n new InjectHTMLElementStream(ReloadScriptText(vals)),\n );\n };\n}\n\n/**\n * @param handler http val's fetch handler\n * @param vals to watch\n */\nexport function reloadOnSaveFetchMiddleware(\n handler: (req: Request) => Response | Promise,\n vals = [rootValRef()],\n): (req: Request) => Promise {\n return async (req: Request): Promise => {\n const res = await handler(req);\n // don't reload on custom domains, only reload on val.run URLs\n if (!new URL(req.url).hostname.includes(\"val.run\")) {\n return res;\n }\n return modifyResponse(\n res,\n new InjectHTMLElementStream(ReloadScriptText(vals)),\n );\n };\n}\n\n// generates a script element as a string\nexport const ReloadScriptText = (vals = [rootValRef()]) =>\n ``;","createdAt",["D",1717531391130],"version",13,"currentUserHasLiked","likeCount",6,"forkCount","referenceCount",151,"dependencyCount","commentCount","prCount","mergedPr",{"_132":133,"_134":135},"handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","forkedVal",{"_114":138,"_132":133,"_98":139,"_119":140,"_141":-5},"a1491700-e0b4-11ee-8082-8aad37b30b4b","ReloadScript",14,"prDisabledHint","interval","slug","stevekrouse/reloadOnSave","description","Reload in new tabs when your vals change When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that. Usage import { html } from \"https://esm.town/v/stevekrouse/html\";\nimport { reloadOnSaveFetchMiddleware } from \"https://esm.town/v/stevekrouse/reloadOnSave\";\n\nexport default reloadOnSaveFetchMiddleware(async function(req: Request): Promise {\n return html(`

Hello!!

`);\n})","versions",[149,152,156,160,164,168,172,176,179,183,187,191,194,198],{"_119":120,"_150":-5,"_117":151,"_114":112},"prId",["D",1717531391130],{"_119":153,"_150":-5,"_117":154,"_114":155},12,["D",1711400670112],"459bfd0a-eaeb-11ee-be12-8aad37b30b4b",{"_119":157,"_150":-5,"_117":158,"_114":159},11,["D",1711400667494],"440c7348-eaeb-11ee-8f49-8aad37b30b4b",{"_119":161,"_150":-5,"_117":162,"_114":163},10,["D",1711397656717],"417c6f0e-eae4-11ee-aa3a-8aad37b30b4b",{"_119":165,"_150":-5,"_117":166,"_114":167},9,["D",1711395966150],"51d4616c-eae0-11ee-a7de-8aad37b30b4b",{"_119":169,"_150":-5,"_117":170,"_114":171},8,["D",1711395616384],"815a396c-eadf-11ee-bc63-8aad37b30b4b",{"_119":173,"_150":-5,"_117":174,"_114":175},7,["D",1711395035451],"2716f0fe-eade-11ee-a51c-8aad37b30b4b",{"_119":123,"_150":-5,"_117":177,"_114":178},["D",1711394989524],"0bb7155a-eade-11ee-9d4c-8aad37b30b4b",{"_119":180,"_150":-5,"_117":181,"_114":182},5,["D",1711393771723],"35d969a8-eadb-11ee-89e4-8aad37b30b4b",{"_119":184,"_150":-5,"_117":185,"_114":186},4,["D",1711393715787],"14823a28-eadb-11ee-892d-8aad37b30b4b",{"_119":188,"_150":-5,"_117":189,"_114":190},3,["D",1711393640810],"e7d1a7fc-eada-11ee-94d5-8aad37b30b4b",{"_119":90,"_150":-5,"_117":192,"_114":193},["D",1711393483427],"8a02eb0e-eada-11ee-825b-8aad37b30b4b",{"_119":195,"_150":-5,"_117":196,"_114":197},1,["D",1711392993356],"65e7f508-ead9-11ee-a4b1-8aad37b30b4b",{"_119":31,"_150":-5,"_117":199,"_114":200},["D",1711392666159],"a2e1a810-ead8-11ee-a1bc-8aad37b30b4b","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":208,"_209":210,"_94":211},"single","redirect","/v/stevekrouse/reloadOnSave/versions",{"_114":159,"_115":212,"_119":157,"_117":213,"_214":99,"_100":101,"_109":110,"_132":133,"_11":96,"_215":-5,"_216":-5,"_217":-5,"_205":26,"_143":144},"import { createElement } from \"https://esm.sh/react\";\nimport { InjectHTMLElementStream } from \"https://esm.town/v/andreterron/InjectHTMLElementStream?v=9\";\nimport { rootValRef } from \"https://esm.town/v/andreterron/rootValRef?v=3\";\nimport { ValRef } from \"https://esm.town/v/andreterron/ValRef?v=1\";\nimport { getCurrentValVersionNumber } from \"https://esm.town/v/stevekrouse/getCurrentValVersionNumber\";\nimport { modifyResponse } from \"https://esm.town/v/stevekrouse/modifyResponse\";\nimport { parentReference } from \"https://esm.town/v/stevekrouse/parentReference\";\nimport type { MiddlewareHandler } from \"npm:hono\";\n\n// this script runs client-side\nexport const reloadOnVals = async function(vals: ValRef[]) {\n const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));\n // console.log(\"initialValVersions: \", valVersions);\n const interval = setInterval(async () => {\n let newValVersions = await Promise.all(vals.map(getCurrentValVersionNumber));\n // console.log(\"newValVersions: \", newValVersions);\n if (JSON.stringify(newValVersions) !== JSON.stringify(valVersions)) {\n clearInterval(interval);\n window.location.reload();\n }\n }, 1000);\n};\n\n// experimental - maybe don't use this\nexport function reloadOnSaveHonoMiddleware(vals: ValRef[] = [rootValRef()]): MiddlewareHandler {\n return async function(c, next) {\n await next();\n // don't reload on custom domains, only reload on val.run URLs\n if (!new URL(c.req.url).hostname.includes(\"val.run\")) {\n return;\n }\n c.res = modifyResponse(\n c.res,\n new InjectHTMLElementStream(ReloadScriptText(vals)),\n );\n };\n}\n\n/**\n * @param handler http val's fetch handler\n * @param vals to watch\n */\nexport function reloadOnSaveFetchMiddleware(\n handler: (req: Request) => Response | Promise,\n vals = [rootValRef()],\n): (req: Request) => Promise {\n return async (req: Request): Promise => {\n const res = await handler(req);\n // don't reload on custom domains, only reload on val.run URLs\n if (!new URL(req.url).hostname.includes(\"val.run\")) {\n return res;\n }\n return modifyResponse(\n res,\n new InjectHTMLElementStream(ReloadScriptText(vals)),\n );\n };\n}\n\n// generates a script element as a string\nexport const ReloadScriptText = (vals = [rootValRef()]) =>\n ``;\n\n// generates a react element\nexport const ReloadScriptReactElement = ({ vals } = { vals: [rootValRef()] }) =>\n createElement(\"script\", {\n type: \"module\",\n dangerouslySetInnerHTML: {\n __html: `import { reloadOnVals } from \"${import.meta.url}\";\nreloadOnVals(${JSON.stringify(vals)});`,\n },\n });",["D",1711400667494],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

reloadOnSave

Version 11