Fix x script (esm-dev#954)

Makefile

@@ -1,5 +1,5 @@
-cli/run:
-	@DEBUG=1 go run cli/cmd/main.go run cli/cmd/demo/${app}
+cli/serv:
+	@DEBUG=1 go run cli/cmd/main.go serve cli/cmd/demo/${app}
 
 serv: config.json
 	@rm -rf .esmd/storage

cli/cmd/main.go

@@ -13,9 +13,9 @@ const helpMessage = "\033[30mesm.sh - The no-build CDN for modern web developmen
 Usage: esm.sh [command] [options]
 
 Commands:
-  add   Add NPM packages to the "importmap" script
-  init  Create a new esm.sh web app
-  run   Serve an esm.sh web app
+  add    Add NPM packages to the "importmap" script
+  init   Create a new esm.sh web app
+  serve  Serve an esm.sh web app
 `
 
 //go:embed internal
@@ -29,8 +29,8 @@ func main() {
 			cli.Init(&efs)
 		case "add":
 			cli.Add()
-		case "run":
-			cli.Run(&efs)
+		case "serve":
+			cli.Serve(&efs)
 		default:
 			fmt.Print(helpMessage)
 		}

cli/server.go → cli/serve.go

@@ -6,8 +6,10 @@ import (
 	"encoding/hex"
 	"encoding/json"
 	"errors"
+	"flag"
 	"fmt"
 	"io"
+	"net"
 	"net/http"
 	"net/url"
 	"os"
@@ -25,6 +27,40 @@ import (
 	"golang.org/x/net/html"
 )
 
+func Serve(efs *embed.FS) (err error) {
+	port := flag.Int("port", 3000, "port to serve on")
+	rootDir, _ := parseCommandFlag()
+
+	if rootDir == "" {
+		rootDir, err = os.Getwd()
+	} else {
+		rootDir, err = filepath.Abs(rootDir)
+		if err == nil {
+			var fi os.FileInfo
+			fi, err = os.Stat(rootDir)
+			if err == nil && !fi.IsDir() {
+				err = fmt.Errorf("stat %s: not a directory", rootDir)
+			}
+		}
+	}
+	if err != nil {
+		os.Stderr.WriteString(term.Red(err.Error()))
+		return err
+	}
+
+	serv := &http.Server{
+		Addr:    fmt.Sprintf(":%d", *port),
+		Handler: &DevServer{efs: efs, rootDir: rootDir},
+	}
+	ln, err := net.Listen("tcp", serv.Addr)
+	if err != nil {
+		os.Stderr.WriteString(term.Red(err.Error()))
+		return err
+	}
+	fmt.Printf(term.Green("Server is ready on http://localhost:%d\n"), *port)
+	return serv.Serve(ln)
+}
+
 type DevServer struct {
 	efs       *embed.FS
 	loader    *LoaderWorker

server/embed/x.ts

@@ -1,32 +1,31 @@
 /*! 🚀 esm.sh/x - ts/jsx/vue/svelte just works™️ in browser. */
 
 ((document) => {
-  const $ = document.querySelector;
+  const $: typeof document.querySelector = (s: string) => document.querySelector(s);
   const currentScript = document.currentScript as HTMLScriptElement | null;
   const modUrl = currentScript?.src || import.meta.url;
-  const { hostname, href, pathname } = location;
+  const { hostname, href, pathname, origin } = location;
 
   // import the `main` module from esm.sh if it's provided.
-  // e.g. <script type="module" src="https://esm.sh/run" main="/main.tsx"></script>
-  const el = currentScript ?? $<HTMLScriptElement>("script[type=module][src='" + modUrl + "'][main]");
+  // e.g. <script type="module" src="https://esm.sh/x" main="/main.tsx"></script>
+  const el = currentScript ?? $<HTMLScriptElement>("script[type=module][main][src='" + modUrl + "']");
   if (el) {
     const main = el.getAttribute("main");
     if (main) {
       if (hostname === "localhost" || hostname === "127.0.0.1" || /^192\.168\.\d+\.\d+$/.test(hostname)) {
-        alert("Please serve your app with `esm.sh run` for local development.");
+        alert("Please serve your app with `esm.sh serve` for local development.");
         return;
       }
       const mainUrl = new URL(main, href);
       const q = mainUrl.searchParams;
       const v = $<HTMLMetaElement>("meta[name=version]")?.content;
-      mainUrl.search = "";
       if ($("script[type=importmap]")) {
         q.set("im", btoa(pathname).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""));
       }
       if (v) {
         q.set("v", v);
       }
-      import(new URL(modUrl).origin + "/" + mainUrl);
+      import(mainUrl.origin === origin ? new URL(modUrl).origin + "/" + mainUrl : "" + mainUrl);
     }
   }
 })(document);