🚀 esm.sh/run(v2) - ts/jsx/vue/svelte just works™️ in browser. (#886)

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Welcome, and thank you for taking time in contributing to esm.sh project!
 
 ## Development Setup
 
-You will need [Golang](https://golang.org/)(1.21+) and [Deno](https://deno.land)(1.40+) installed on a Linux or macOS machine.
+You will need [Golang](https://golang.org/)(1.22+) and [Deno](https://deno.land)(1.40+) installed on a Linux or macOS machine.
 
 1. Fork this repository to your own GitHub account.
 2. Clone the repository to your local device.
@@ -47,7 +47,7 @@ We use [Deno](https://deno.land) to run all the integration testing cases. Make
 ./test/bootstrap.ts
 
 # Run a test for a specific case (directory name)
-./test/bootstrap.ts preact
+./test/bootstrap.ts react-18
 
 # Run tests with `clean` option (purge previous builds)
 ./test/bootstrap.ts --clean

HOSTING.md

@@ -76,10 +76,15 @@ docker run -p 8080:8080 \
 
 Available environment variables:
 
-- `AUTH_SECRET`: The server auth secret, default is no authrization check.
-- `DISABLE_COMPRESSION`: Disable http compression, default is `false`.
-- `DISABLE_SOURCEMAP`: Disable generating source map for build JS/CSS files, default is `false`.
-- `MINIFY`: Minify the build JS/CSS files, default is `true`.
+- `AUTH_SECRET`: The server auth secret, default is no authorization.
+- `STORAGE_TYPE`: The storage type, available values are ["fs", "s3"], default is "fs".
+- `STORAGE_ENDPOINT`: The storage endpoint, default is "~/.esmd/storage".
+- `STORAGE_REGION`: The region for S3 storage.
+- `STORAGE_ACCESS_KEY_ID`: The access key for S3 storage.
+- `STORAGE_SECRET_ACCESS_KEY`: The secret key for S3 storage.
+- `COMPRESS`: Compress http responses with gzip/brotli, default is `true`.
+- `MINIFY`: Minify the built JS/CSS files, default is `true`.
+- `SOURCEMAP`: Generate source map for built JS/CSS files, default is `true`.
 - `LOG_LEVEL`: The log level, available values are ["debug", "info", "warn", "error"], default is "info".
 - `NPM_REGISTRY`: The global NPM registry, default is "https://registry.npmjs.org/".
 - `NPM_TOKEN`: The access token for the global NPM registry.

README.md

@@ -8,11 +8,11 @@
 
 # esm.sh
 
-A global, fast & smart content delivery network(CDN) for modern(es2015+) web development.
+A global, fast & smart content delivery network(CDN) for modern web development.
 
 ## How to Use
 
-esm.sh allows you to import [JavaScript ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) on [NPM](https://npmjs.com), [GitHub](https://github.com), and [JSR](https://jsr.io) with a simple URL. **No installation/build steps needed.**
+esm.sh allows you to import [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) from http URLs, **no installation/build steps needed.**
 
 ```js
 import * as mod from "https://esm.sh/PKG[@SEMVER][/PATH]";
@@ -22,20 +22,20 @@ With [import maps](https://github.com/WICG/import-maps), you can even use bare i
 
 ```html
 <script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/[email protected]"
-    "react-dom/": "https://esm.sh/[email protected]/"
+  {
+    "imports": {
+      "react": "https://esm.sh/[email protected]",
+      "react-dom/": "https://esm.sh/[email protected]/"
+    }
   }
-}
 </script>
 <script type="module">
   import React from "react"; // → https://esm.sh/[email protected]
   import { render } from "react-dom/client"; // → https://esm.sh/[email protected]/client
 </script>
 ```
 
-> More details about the import map usage can be found in the [**Using Import Maps**](#using-import-maps) section.
+> More details about the import map usages can be found in the [**Using Import Maps**](#using-import-maps) section.
 
 ### Supported Registries
 
@@ -63,8 +63,7 @@ With [import maps](https://github.com/WICG/import-maps), you can even use bare i
 ### Specifying Dependencies
 
 By default, esm.sh rewrites import specifiers based on the package dependencies. To specify the version of these
-dependencies, you can add the `?deps=PACKAGE@VERSION` query. To specify multiple dependencies, separate them with a
-comma, like this: `[email protected],[email protected]`.
+dependencies, you can add `?deps=PACKAGE@VERSION` to the import URL. To specify multiple dependencies, separate them with commas, like this: `[email protected],[email protected]`.
 
 ```js
 import React from "https://esm.sh/[email protected]";
@@ -73,6 +72,8 @@ import useSWR from "https://esm.sh/[email protected]";
 
 ### Aliasing Dependencies
 
+You can also alias dependencies by adding `?alias=PACKAGE:ALIAS` to the import URL. This is useful when you want to use a different package for a dependency.
+
 ```js
 import useSWR from "https://esm.sh/swr?alias=react:preact/compat";
 ```
@@ -93,8 +94,8 @@ import { __await, __rest } from "https://esm.sh/tslib"; // 7.3KB
 import { __await, __rest } from "https://esm.sh/tslib?exports=__await,__rest"; // 489B
 ```
 
-By using this feature, you can take advantage of tree shaking with esbuild and achieve a smaller bundle size. **Note**
-that this feature is only supported for ESM modules and not CJS modules.
+By using this feature, you can take advantage of tree shaking with esbuild and achieve a smaller bundle size. **Note,
+this feature doesn't work with CommonJS modules.**
 
 ### Bundling Strategy
 
@@ -296,7 +297,7 @@ Deno supports type definitions for modules with a `types` field in their `packag
 `X-TypeScript-Types` header. This makes it possible to have type checking and auto-completion when using those modules
 in Deno. ([link](https://deno.land/manual/typescript/types#using-x-typescript-types-header)).
 
-![Figure #1](./server/embed/assets/sceenshot-deno-types.png)
+![Figure #1](./server/embed/assets/sceenshot-x-typescript-types.png)
 
 In case the type definitions provided by the `X-TypeScript-Types` header is incorrect, you can disable it by adding the
 `?no-dts` query to the module import URL:
@@ -316,7 +317,7 @@ We highly recommend [Reejs](https://ree.js.org/) as the runtime with esm.sh that
 
 ## Global CDN
 
-<img width="150" align="right" src="./server/embed/assets/cf.svg" />
+<img width="150" align="right" src="./server/embed/assets/cf-logo.svg" />
 
 The Global CDN of esm.sh is provided by [Cloudflare](https://cloudflare.com), one of the world's largest and fastest
 cloud network platforms.

cli/add.go

@@ -0,0 +1,15 @@
+package cli
+
+import (
+	"fmt"
+	"os"
+)
+
+// Add NPM packages to the "importmap" script
+func Add() {
+	packages := os.Args[2:]
+	if len(packages) == 0 {
+		return
+	}
+	fmt.Println(packages)
+}

cli/cmd/demo/preact/app/App.tsx

@@ -0,0 +1,28 @@
+import { PreactLogo } from "~/components/Logo.tsx";
+
+export function App() {
+  return (
+    <>
+      <div class="center-box absolute bg">
+        <PreactLogo />
+      </div>
+      <div class="center-box relative">
+        <h1 style={{ color: "#673AB8" }}>esm.sh</h1>
+        <p class="desc">
+          The <strong>no-build</strong> cdn for modern web development.
+        </p>
+        <div class="links">
+          <a href="https://esm.sh" target="_blank" title="Website">
+            <img src="./assets/globe.svg" alt="Website" />
+          </a>
+          <a href="https://bsky.app/profile/esm.sh" target="_blank" title="Bluesky">
+            <img src="./assets/bluesky.svg" alt="Bluesky" />
+          </a>
+          <a href="https://github.com/esm-dev/esm.sh" target="_blank" title="Github">
+            <img src="./assets/github.svg" alt="Github" />
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}

cli/cmd/demo/preact/app/app.css

@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 500;
+}
+
+p {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.center-box {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.desc {
+  color: #aaa;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.links a {
+  opacity: 0.36;
+  transition: opacity 0.3s;
+}
+
+.links a:hover {
+  opacity: 1;
+}
+
+.links a img {
+  width: 24px;
+  height: 24px;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.bg {
+  opacity: 0.15;
+}

cli/cmd/demo/preact/app/components/Logo.tsx

@@ -0,0 +1,10 @@
+export function PreactLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="114" height="114" viewBox="0 0 32 32">
+      <path fill="#673ab8" d="m16 2l12.12 7v14L16 30L3.88 23V9z" />
+      <ellipse cx="16" cy="16" fill="none" stroke="#fff" rx="10.72" ry="4.1" transform="rotate(-37.5 16.007 15.996)" />
+      <ellipse cx="16" cy="16" fill="none" stroke="#fff" rx="4.1" ry="10.72" transform="rotate(-52.5 15.998 15.994)" />
+      <circle cx="16" cy="16" r="1.86" fill="#fff" />
+    </svg>
+  );
+}

cli/cmd/demo/preact/app/main.tsx

@@ -0,0 +1,5 @@
+import { render } from "preact";
+import { App } from "~/App.tsx";
+import "~/app.css";
+
+render(<App />, document.getElementById("root")!);

cli/cmd/demo/preact/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Preact App - esm.sh</title>
+  <link rel="icon" href="./assets/favicon.svg">
+  <script type="importmap">
+    {
+      "imports": {
+        "~/": "./app/",
+        "preact": "https://esm.sh/[email protected]"
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="https://esm.sh/run" main="./app/main.tsx"></script>
+</body>
+</html>

cli/cmd/demo/react/app/App.tsx

@@ -0,0 +1,28 @@
+import { ReactLogo } from "~/components/Logo.tsx";
+
+export function App() {
+  return (
+    <>
+      <div className="center-box absolute bg">
+        <ReactLogo />
+      </div>
+      <div className="center-box relative">
+        <h1 style={{ color: "#61DAFB" }}>esm.sh</h1>
+        <p className="desc">
+          The <strong>no-build</strong> cdn for modern web development.
+        </p>
+        <div className="links">
+          <a href="https://esm.sh" target="_blank" title="Website">
+            <img src="./assets/globe.svg" alt="Website" />
+          </a>
+          <a href="https://bsky.app/profile/esm.sh" target="_blank" title="Bluesky">
+            <img src="./assets/bluesky.svg" alt="Bluesky" />
+          </a>
+          <a href="https://github.com/esm-dev/esm.sh" target="_blank" title="Github">
+            <img src="./assets/github.svg" alt="Github" />
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}

cli/cmd/demo/react/app/app.css

@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 500;
+}
+
+p {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.center-box {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.desc {
+  color: #aaa;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.links a {
+  opacity: 0.36;
+  transition: opacity 0.3s;
+}
+
+.links a:hover {
+  opacity: 1;
+}
+
+.links a img {
+  width: 24px;
+  height: 24px;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.bg {
+  opacity: 0.15;
+}

cli/cmd/demo/react/app/components/Logo.tsx

@@ -0,0 +1,10 @@
+export function ReactLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="114" height="114" viewBox="0 0 128 128">
+      <g fill="#61DAFB">
+        <circle cx="64" cy="64" r="11.4" />
+        <path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3c.6-2.4 1.1-4.8 1.5-7.1c2.1-13.2-.2-22.5-6.6-26.1c-1.9-1.1-4-1.6-6.4-1.6c-7 0-15.9 5.2-24.9 13.9c-9-8.7-17.9-13.9-24.9-13.9c-2.4 0-4.5.5-6.4 1.6c-6.4 3.7-8.7 13-6.6 26.1c.4 2.3.9 4.7 1.5 7.1c-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3c-.6 2.4-1.1 4.8-1.5 7.1c-2.1 13.2.2 22.5 6.6 26.1c1.9 1.1 4 1.6 6.4 1.6c7.1 0 16-5.2 24.9-13.9c9 8.7 17.9 13.9 24.9 13.9c2.4 0 4.5-.5 6.4-1.6c6.4-3.7 8.7-13 6.6-26.1c-.4-2.3-.9-4.7-1.5-7.1c2.4-.7 4.7-1.4 6.9-2.3c12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8M92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3c-.3 2.1-.8 4.3-1.4 6.6c-5.2-1.2-10.7-2-16.5-2.5c-3.4-4.8-6.9-9.1-10.4-13c7.4-7.3 14.9-12.3 21-12.3c1.3 0 2.5.3 3.5.9M81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6c-3.7.3-7.4.4-11.2.4c-3.9 0-7.6-.1-11.2-.4q-3.3-4.8-6-9.6c-1.9-3.3-3.7-6.7-5.3-10c1.6-3.3 3.4-6.7 5.3-10c1.8-3.2 3.9-6.4 6.1-9.6c3.7-.3 7.4-.4 11.2-.4c3.9 0 7.6.1 11.2.4q3.3 4.8 6 9.6c1.9 3.3 3.7 6.7 5.3 10c-1.7 3.3-3.4 6.6-5.3 10m8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3c-3.4.8-7 1.4-10.8 1.9c1.2-1.9 2.5-3.9 3.6-6c1.2-2.1 2.3-4.2 3.4-6.2M64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3c2.3.1 4.6.2 6.9.2s4.6-.1 6.9-.2c-2.2 2.9-4.5 5.7-6.9 8.3m-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9c1.1-3.3 2.3-6.8 3.8-10.3c1.1 2 2.2 4.1 3.4 6.1c1.2 2.2 2.4 4.1 3.6 6.1m-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3c3.4-.8 7-1.4 10.8-1.9c-1.2 1.9-2.5 3.9-3.6 6c-1.2 2.1-2.3 4.2-3.4 6.2M64 30.2c2.4 2.6 4.7 5.4 6.9 8.3c-2.3-.1-4.6-.2-6.9-.2s-4.6.1-6.9.2c2.2-2.9 4.5-5.7 6.9-8.3m22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9c-1.1 3.3-2.3 6.8-3.8 10.3c-1.1-2.1-2.2-4.2-3.4-6.2M31.7 35c-1.7-10.5-.3-17.9 3.8-20.3c1-.6 2.2-.9 3.5-.9c6 0 13.5 4.9 21 12.3c-3.5 3.8-7 8.2-10.4 13c-5.8.5-11.3 1.4-16.5 2.5c-.6-2.3-1-4.5-1.4-6.6M7 64c0-4.7 5.7-9.7 15.7-13.4c2-.8 4.2-1.5 6.4-2.1c1.6 5 3.6 10.3 6 15.6c-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64m28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3c.3-2.1.8-4.3 1.4-6.6c5.2 1.2 10.7 2 16.5 2.5c3.4 4.8 6.9 9.1 10.4 13c-7.4 7.3-14.9 12.3-21 12.3c-1.3 0-2.5-.3-3.5-.9M96.3 93c1.7 10.5.3 17.9-3.8 20.3c-1 .6-2.2.9-3.5.9c-6 0-13.5-4.9-21-12.3c3.5-3.8 7-8.2 10.4-13c5.8-.5 11.3-1.4 16.5-2.5c.6 2.3 1 4.5 1.4 6.6m9-15.6c-2 .8-4.2 1.5-6.4 2.1c-1.6-5-3.6-10.3-6-15.6c2.4-5.3 4.5-10.5 6-15.5c13.8 4 22.1 10 22.1 15.6c0 4.7-5.8 9.7-15.7 13.4" />
+      </g>
+    </svg>
+  );
+}