Skip to content

v135 / Introducing esm.sh/run

Latest
Latest
Compare
Choose a tag to compare
@ije ije released this 22 Nov 23:16
· 414 commits to main since this release
v135
09f04c5

🎉🎉🎉 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/jsx
  • text/ts
  • text/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/react@18.2.0",
      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
    }
  }
</script>

The special @jsxImportSource in the imports is using for JSX transform, you can alternate it to your preferred runtime, for example https://esm.sh/preact@10.19.2.

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!

image

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

Try it Online

👉 Play with TailwindCSS ⏎

Other changes

  • worker: Use raw.esm.sh hostname for ?raw option
  • Add ?no-bundle option
  • Support esm.sh field in package.json
  • Fix sub-module resolving (close #754, #743)
  • Upgrade esbuild to 0.19.7
Assets 2