Readme

Val Town's esm.town Transpiles TypeScript and JSX for browsers

When Val Town's code registry (esm.town) gets a request from a browser (which it can detect via the User Agent header), it transpiles that val's code to web-standard JavaScript be able to run in the browser.

It does do as much as other transpilers (such as esm.sh, such as rewriting npm: imports, etc). We may add that capability in the future. For now, if you want your npm imports to run in the browser, use https://esm.sh/package instead of npm:package.

The below script demonstrates this transiplation behavior by fetching its own source code (import.meta.url) with the user agent of a browser. You can uncoment the line setting the browser agent if you want to see the difference in the output. Or you could just load this val's module URL in your browser to see the untranspiled TS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** @jsxImportSource https://esm.sh/react */
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
const browserUserAgent: string =
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.142.86 Safari/537.36";
const exampleJSX = <p>Hello, World!</p>;
console.log(
await fetchText(import.meta.url, {
headers: {
"User-Agent": browserUserAgent, // comment this line out to see untransiled code
},
}),
);
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
July 7, 2024