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 build --dir=vendor react 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/using-esm-on-npm.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 importmap:

<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:

• remove nodejs dependecy
  • use native cjs-module-lexer: https://github.com/esm-dev/cjs-module-lexer/releases/tag/v1.0.2
  • Use built-in npm package manager #948

[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 #595 (reply in thread) 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.