v137 roadmap

[ije]

Compile esm.sh to a local CLI that builds esm on your computer

This is useful for people don't like loading JS files from a CDN, but want the esm version of a CJS module on NPM. The idea has been discussed on bsky:

• https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/
• https://simonwillison.net/2024/Nov/23/without-a-build-system/
• https://bsky.app/profile/jex.me/post/3lbosjoaawk2w

Usage:

npx esm.sh add --local react react/ react-dom react-dom/

vendor/
├── react.mjs ([email protected], 9.41KB)
├── react/jsx-runtime.mjs ([email protected], 2.39KB)
├── react/jsx-dev-runtime.mjs ([email protected], 38.96KB)
├── react-dom.mjs ([email protected], 129.19KB)
├── react-dom/client.mjs ([email protected], 1.54KB)
└── react-dom/server.mjs ([email protected], 70.67KB)

Updating importmap...
✅ index.html
✅ blog/how-to-import-a-javascript-library.html

then you can import modules like:

<script type="module">
import { useState } from "./vendor/react.mjs"
import { createRoot } from "./vendor/react-dom/client.mjs"
</script>

with import map:

<script type="importmap">
{
  "imports": {
    "react": "./vendor/react.mjs",
    "react-dom/client": "./vendor/react-dom/client.mjs"
  }
}
</script>
<script type="module">
import { useState } from "react" // "./vendor/react.mjs"
import { createRoot } from "react-dom/client" // "./vendor/react-dom/client.mjs"
</script>

Progress:

• [x] remove nodejs/pnpm requirements
  • use native cjs-module-lexer: https://github.com/esm-dev/cjs-module-lexer/tree/main/native
  • #948
• [ ] esm.sh CLI
  • [x] esm.sh serve
  • [x] esm.sh init
  • [ ] esm.sh add

Get package with version closest to a provided date

This idea comes from @sickl8 in #1047, implemented by @nicksrandall in #1152 #1165

Examples:

esm.sh/lodash@2025-01-15 -> [email protected]

[mashaal]

Nice, I have been doing this manually by digging through the CDN and curling the required files. It might be nice to output the correct import map from this command... either as a file, or in the cli output for easy copying?

[ije]

@mashaal i agree, i think the cli should update the root index.html by default if it exists, and it also allow you to specify it via flags say --importmap=**/*.html

[b3nten]

This is a great idea! Would also be nice to install it with Go, and output/modify JSON import map files.

[dburles]

This looks amazing. @ije it's similar to what you mentioned here https://github.com/esm-dev/esm.sh/discussions/595#discussioncomment-9977163 a while back. Will the build command support the same package parameters as the CDN? and how will dependency resolution be managed?

[ije]

@dburles i think there will be a package.json like file, the CLI should resolve dependencies automatically.

[guybedford]

Great to see this as a fundamental goal. Ever since JSPM went CDN-only I've also been wanting to bring back a --local flag to the JSPM CLI, ideally with a provider hook to generate a package fully locally and store it in a standard location (formerly this was jspm_pacakges/registry/package@version, which could even be brought back).

This is a fundamental security property for JSPM in being able to provide auditable providers as a function of the original npm registry package.

JSPM does also already have the concept of layers on registries, which could possibly incorporate build version / custom build options - jspm_packages/registry/layer/package@version, where layer might be say v126-[build-opts-hash].

Would be happy to prototype some work here if there is interest in collaboration further too.