web: Introduce RPC API

.github/workflows/release.yml

@@ -110,7 +110,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
 
       - name: Build CLI
-        run: go build -ldflags="-s -w -X 'github.com/esm-dev/esm.sh/server.VERSION=${{ github.ref_name }}'" -o cli/build/bin/esm.sh-cli-${{ matrix.os }}-${{ matrix.arch }}${{ matrix.ext }} cli/cmd/main.go
+        run: go build -ldflags="-s -w -X 'github.com/esm-dev/esm.sh/server.VERSION=${{ github.ref_name }}'" -o cli/build/bin/esm.sh-cli-${{ matrix.os }}-${{ matrix.arch }}${{ matrix.ext }} cli/esmd/main.go
         env:
           GOOS: ${{ matrix.os }}
           GOARCH: ${{ matrix.arch }}

.github/workflows/test.yml

@@ -30,7 +30,7 @@ jobs:
           deno-version: ${{ matrix.deno-version }}
 
       - name: Run Unit Tests
-        run: go test ./server ./server/storage -v
+        run: go test ./server ./internal/* -v
         env:
           GO_TEST_S3_ENDPOINT: ${{ secrets.GO_TEST_S3_ENDPOINT }}
           GO_TEST_S3_REGION: ${{ secrets.GO_TEST_S3_REGION }}

.gitignore

@@ -1,9 +1,7 @@
 .DS_Store
 .idea/
 .vscode/
-*.log
 config.json
 esmd
 .esmd/
-node_modules/
-dist/
+!server/esmd

CONTRIBUTING.md

@@ -30,10 +30,10 @@ Create a `config.json` file in the project root directory following the example
 
 More server options please check [config.exmaple.jsonc](./config.example.jsonc).
 
-## Running the Server from Source Code
+## Running the Server in Debug Mode
 
 ```bash
-make dev/server
+make debug/server
 ```
 
 Then you can import `React` from "http://localhost:8080/react"

Dockerfile

@@ -7,7 +7,7 @@ RUN apk update && apk add --no-cache git
 RUN git clone --branch $SERVER_VERSION --depth 1 https://github.com/esm-dev/esm.sh /tmp/esm.sh
 
 WORKDIR /tmp/esm.sh
-RUN go build -ldflags="-s -w -X 'github.com/esm-dev/esm.sh/server.VERSION=${SERVER_VERSION}'" -o esmd server/cmd/main.go
+RUN go build -ldflags="-s -w -X 'github.com/esm-dev/esm.sh/server.VERSION=${SERVER_VERSION}'" -o esmd server/esmd/main.go
 # ---
 
 FROM alpine:latest

HOSTING.md

@@ -30,7 +30,7 @@ You can find all the server options in [config.example.jsonc](./config.example.j
 You will need [Go](https://golang.org/dl) 1.22+ to compile and run the server.
 
 ```bash
-go run server/cmd/main.go --config=config.json
+go run server/esmd/main.go --config=config.json
 ```
 
 Then you can import `React` from <http://localhost:8080/react>.

Makefile

@@ -1,23 +1,14 @@
-dev/cli/serve:
-	@go run -tags debug main.go serve cli/demo/${app}
-
-dev/cli/init:
-	@go run -tags debug main.go init
-
-dev/cli/i:
-	@go run -tags debug main.go i ${package}
+debug/cli/dev:
+	@go run -tags debug main.go dev cli/demo/${app}
 
-dev/cli/im/add:
-	@go run -tags debug main.go im add ${package}
-
-dev/cli/im/update:
-	@go run -tags debug main.go im update ${package}
+debug/cli/serve:
+	@go run -tags debug main.go serve cli/demo/${app}
 
-dev/server: config.json
+debug/server: config.json
 	@rm -rf .esmd/log
 	@rm -rf .esmd/storage
 	@rm -rf .esmd/esm.db
-	@go run -tags debug server/cmd/main.go --config=config.json
+	@go run -tags debug server/esmd/main.go --config=config.json
 
 test/server:
 	@./test/bootstrap.ts ${dir}

README.md

@@ -18,7 +18,7 @@ esm.sh allows you to import [JavaScript modules](https://developer.mozilla.org/e
 import * as mod from "https://esm.sh/PKG[@SEMVER][/PATH]";
 ```
 
-With [import maps](https://github.com/WICG/import-maps), you can even use bare import specifiers intead of URLs:
+With [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), you can even use bare import specifiers intead of URLs:
 
 ```html
 <script type="importmap">
@@ -244,7 +244,7 @@ worker.postMessage("The string that is being hashed");
 
 ## Using Import Maps
 
-[**Import Maps**](https://github.com/WICG/import-maps) has been supported by most modern browsers and Deno natively.
+[**Import Maps**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) has been supported by most modern browsers and Deno natively.
 This allows _**bare import specifiers**_, such as `import React from "react"`, to work.
 
 esm.sh introduces the `?external` for specifying external dependencies. By employing this query, esm.sh maintains the import specifier intact, leaving it to the browser/Deno to resolve based on the import map. For example:
@@ -279,7 +279,7 @@ Alternatively, you can **mark all dependencies as external** by adding a `*` pre
 }
 ```
 
-Import maps supports [**trailing slash**](https://github.com/WICG/import-maps#packages-via-trailing-slashes) that can
+Import maps supports [**trailing slash**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap#packages-via-trailing-slashes) that can
 not work with URL search params friendly. To fix this issue, esm.sh provides a special format for import URL that allows
 you to use query params with trailing slash: change the query prefix `?` to `&` and put it after the package version.
 

cli/README.md

@@ -2,6 +2,9 @@
 
 A _nobuild_ tool for modern web development.
 
+> [!WARNING]
+> The `esm.sh` CLI is still in development and may not be stable. Use it at your own risk.
+
 ## Installation
 
 You can install `esm.sh` CLI from source code:
@@ -29,9 +32,9 @@ $ esm.sh --help
 Usage: esm.sh [command] <options>
 
 Commands:
-  i, add [...pakcage]   Alias to 'esm.sh im add'.
-  im, importmap         Manage "importmap" script.
-  init                  Create a new nobuild web app with esm.sh CDN.
-  serve                 Serve a nobuild web app with esm.sh CDN, HMR, transforming TS/Vue/Svelte on the fly.
-  build                 Build a nobuild web app with esm.sh CDN.
+  add, i [...packages]  Alias to 'importmap add'.
+  importmap, im         Manage "importmap" script.
+  init                  Create a new web application.
+  serve                 Serve a web application.
+  dev                   Serve a web app in development mode.
 ```

cli/add.go

@@ -0,0 +1,176 @@
+package cli
+
+import (
+	"bytes"
+	"flag"
+	"fmt"
+	"io"
+	"os"
+
+	"github.com/esm-dev/esm.sh/internal/importmap"
+	"github.com/goccy/go-json"
+	"github.com/ije/gox/term"
+	"golang.org/x/net/html"
+)
+
+const addHelpMessage = "\033[30mesm.sh - A nobuild tool for modern web development.\033[0m" + `
+
+Usage: esm.sh add [...packages] <options>
+
+Examples:
+  esm.sh add react@19.0.0
+  esm.sh add react@19 react-dom@19
+  esm.sh add react react-dom @esm.sh/router
+
+Options:
+  --help                 Show help message
+`
+
+const htmlTemplate = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello, world!</title>
+  <script type="importmap">
+    %s
+  </script>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+`
+
+// Add adds packages to "importmap" script
+func Add() {
+	help := flag.Bool("help", false, "Show help message")
+	arg0, argMore := parseCommandFlag(2)
+
+	if *help {
+		fmt.Print(addHelpMessage)
+		return
+	}
+
+	var packages []string
+	if arg0 != "" {
+		packages = append(packages, arg0)
+		packages = append(packages, argMore...)
+	}
+
+	err := updateImportMap(packages)
+	if err != nil {
+		fmt.Println(term.Red("✖︎"), "Failed to add packages: "+err.Error())
+	}
+}
+
+func updateImportMap(packages []string) (err error) {
+	indexHtml, exists, err := lookupCloestFile("index.html")
+	if err != nil {
+		return
+	}
+
+	if exists {
+		var f *os.File
+		f, err = os.Open(indexHtml)
+		if err != nil {
+			return
+		}
+		tokenizer := html.NewTokenizer(f)
+		buf := bytes.NewBuffer(nil)
+		updated := false
+		for {
+			token := tokenizer.Next()
+			if token == html.ErrorToken && tokenizer.Err() == io.EOF {
+				break
+			}
+			if token == html.EndTagToken {
+				tagName, _ := tokenizer.TagName()
+				if string(tagName) == "head" && !updated {
+					buf.WriteString("  <script type=\"importmap\">\n    ")
+					importMap := importmap.ImportMap{}
+					if !importMap.AddPackages(packages) {
+						return
+					}
+					imJson, _ := importMap.MarshalJSON()
+					buf.Write(imJson)
+					buf.WriteString("\n  </script>\n")
+					buf.Write(tokenizer.Raw())
+					updated = true
+					continue
+				}
+			}
+			if token == html.StartTagToken {
+				tagName, moreAttr := tokenizer.TagName()
+				if string(tagName) == "script" && moreAttr {
+					var typeAttr string
+					for moreAttr {
+						var key, val []byte
+						key, val, moreAttr = tokenizer.TagAttr()
+						if string(key) == "type" {
+							typeAttr = string(val)
+							break
+						}
+					}
+					if typeAttr != "importmap" && !updated {
+						buf.WriteString("<script type=\"importmap\">\n    ")
+						importMap := importmap.ImportMap{}
+						if !importMap.AddPackages(packages) {
+							return
+						}
+						imJson, _ := importMap.MarshalJSON()
+						buf.Write(imJson)
+						buf.WriteString("\n  </script>\n  ")
+						buf.Write(tokenizer.Raw())
+						updated = true
+						continue
+					}
+					if typeAttr == "importmap" && !updated {
+						buf.Write(tokenizer.Raw())
+						token := tokenizer.Next()
+						var importMap importmap.ImportMap
+						if token == html.TextToken {
+							importMapRaw := bytes.TrimSpace(tokenizer.Text())
+							if len(importMapRaw) > 0 {
+								if json.Unmarshal(importMapRaw, &importMap) != nil {
+									err = fmt.Errorf("invalid importmap script")
+									return
+								}
+							}
+						}
+						buf.WriteString("\n    ")
+						if !importMap.AddPackages(packages) {
+							return
+						}
+						imJson, _ := importMap.MarshalJSON()
+						buf.Write(imJson)
+						buf.WriteString("\n  ")
+						if token == html.EndTagToken {
+							buf.Write(tokenizer.Raw())
+						}
+						updated = true
+						continue
+					}
+				}
+			}
+			buf.Write(tokenizer.Raw())
+		}
+		fi, erro := f.Stat()
+		f.Close()
+		if erro != nil {
+			return erro
+		}
+		err = os.WriteFile(indexHtml, buf.Bytes(), fi.Mode())
+	} else {
+		importMap := importmap.ImportMap{}
+		if !importMap.AddPackages(packages) {
+			return
+		}
+		imJson, _ := importMap.MarshalJSON()
+		err = os.WriteFile(indexHtml, fmt.Appendf(nil, htmlTemplate, string(imJson)), 0644)
+		if err == nil {
+			fmt.Println(term.Dim("Created index.html with importmap script."))
+		}
+	}
+	return
+}