🎉🎉🎉 Introducing esm.sh/run, a 1KB script allows you to write jsx/tsx in HTML without build step!
Installation
<script type="module" src="https://esm.sh/run"></script>Usage
The script allows you to add <script> elements with jsx/typescript in your HTML, for example:
<script type="text/babel">
console.log("esm.sh run!" as string)
</script>Supported types:
text/babel(recommended, highlighting is working in vscode)text/jsxtext/tstext/tsx
Using Import Maps
esm.sh run supports import maps, it even works in outdated browser that doesn't support the feature.
<script type="importmap">
{
"imports": {
"@jsxImportSource": "https://esm.sh/[email protected]",
"react-dom/client": "https://esm.sh/[email protected]/client"
}
}
</script>The special
@jsxImportSourcein theimportsis using for JSX transform, you can alternate it to your preferred runtime, for examplehttps://esm.sh/[email protected].
How it Works?
After the page loaded, the run script computes the hash of the source code of non-javascript <script> elements as the cache key, if the cache exists then run it, otherwise sends the source code to esm.sh build API and stores it in the cache system.
The cache system includes two iters of storage, are the localStoarge and Cloudflare Edge cache, to make the compiled JS load fast!
Limitations
There are some limitations you need to be aware of:
- the build task is slower than local babel/swc/esbuild (only happens when the source code has been changed)
- 60 build tasks pre minute is allowed