1# Reload in new tabs when your vals change
2
3When 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.
4
5## Usage
7```ts
8import { html } from "https://esm.town/v/stevekrouse/html";
9import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
10
11export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> {
12 return html(`<h1>Hello!!</h1>`);
13})
37
38/**
39 * @param handler http val's fetch handler
40 * @param vals to watch
41 */
42export function reloadOnSaveFetchMiddleware(
43 handler: (req: Request) => Response | Promise<Response>,
44 vals = [rootValRef()],
99 return c.json(match, match ? 200 : 401);
100});
101export default app.fetch;
102
103// console.log(await opaque.getOpaqueConfig(opaque.OpaqueID.OPAQUE_P521).ake.generateAuthKeyPair());
1import { email } from "https://esm.town/v/std/email?v=9";
2
3// Fetches a random joke.
4const fetchRandomJoke = async () => {
5 const response = await fetch(
6 "https://official-joke-api.appspot.com/random_joke",
7 );
9};
10
11const randomJoke = await fetchRandomJoke();
12const setup = randomJoke.setup;
13const punchline = randomJoke.punchline;
1import { fetchTranspiledJavaScript, listFiles, readFile } from "./file/index.ts";
2import { parseProject } from "./parseImportMeta/project.ts";
3import { getContentType, serveFile } from "./serve-file/index.ts";
4import { testServer } from "./test/index.tsx";
5
6export { fetchTranspiledJavaScript, getContentType, listFiles, parseProject, readFile, serveFile };
8 let text;
9 try {
10 text = await fetchTranspiledJavaScript(esmURL);
11 } catch (err) {
12 throw new Error("Failed to fetch file " + esmURL);
13 }
14 return text;
35}
36
37export async function fetchTranspiledJavaScript(url: string) {
38 if (!url.startsWith("https://esm.town")) throw Error("Can only fetch from https://esm.town");
39 const res = await fetch(url, {
40 headers: {
41 // Always transpile TS to JS
46 });
47 if (!res.ok) {
48 throw new Error("Failed to fetch " + url);
49 }
50 return await res.text();
32 // use a trick to turn a data uri into a blob
33 if (!text.startsWith("data:")) return Response.json({}, { status: 500 });
34 responseBlob = await (await fetch(text)).blob();
35 }
36
62
63 // Use a trick to turn a data uri into a blob
64 let imageBlob = await (await fetch(image)).blob();
65 await blob.set("pondiverse_image" + id.lastInsertRowid, imageBlob);
66
3import { blob } from "https://esm.town/v/std/blob";
4import { email } from "https://esm.town/v/std/email";
5import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
6import { load } from "npm:cheerio";
7import { XMLParser } from "npm:fast-xml-parser";
46 }
47
48 // Fetch content from the regulatory source
49 async fetchContent() {
50 try {
51 const pageHtml = await fetchText(this.url);
52 return await this.extractContent(pageHtml);
53 } catch (error) {
54 console.error(`Error fetching content from ${this.name}: ${error.message}`);
55 return null;
56 }
76 console.log(`Checking ${this.name} for updates...`);
77
78 const currentContent = await this.fetchContent();
79 if (!currentContent) return null;
80
2
3import addCreation from "./addCreation";
4import fetchCreations from "./fetchCreations";
5import getCreation from "./getCreation";
6
12
13 if (req.method == "GET" && url.pathname == "/")
14 return fetchCreations(req);
15
16 if (req.method == "GET" && url.pathname == "/images" && url.searchParams.has("c"))
22 return getCreation(req);
23 if (req.method == "GET" && url.pathname == "/creations")
24 return fetchCreations(req);
25
26 if (req.method == "POST" && url.pathname == "/updateDatabase")