Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v137 roadmap #932

Open
ije opened this issue Nov 25, 2024 · 5 comments
Open

v137 roadmap #932

ije opened this issue Nov 25, 2024 · 5 comments

Comments

@ije
Copy link
Member

ije commented Nov 25, 2024

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:

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>

Status:

  • 🚧 on the plan
@ije ije pinned this issue Nov 25, 2024
@ije ije unpinned this issue Nov 25, 2024
@ije ije pinned this issue Nov 25, 2024
@mashaal
Copy link
Contributor

mashaal commented Nov 25, 2024

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
Copy link
Member Author

ije commented Nov 25, 2024

@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
Copy link

b3nten commented Nov 25, 2024

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

@dburles
Copy link

dburles commented Nov 27, 2024

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
Copy link
Member Author

ije commented Nov 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants