wip

esm-dev · Jan 3, 2024 · c6699d9 · c6699d9
1 parent 4f333dd
commit c6699d9
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 28 deletions.
diff --git a/packages/esm-cli/README.md b/packages/esm-cli/README.md
@@ -8,30 +8,17 @@ The CLI/API for serving `esm.sh/hot` applications.
 
 ## Using the CLI tool
 
-To use the CLI tool, you need to install it globally on your
-machine:
+The CLI starts a server using the current working directory as the root path of the esm.sh/hot application.
 
 ```bash
-npm i -g esm.sh
-```
-
-or using `npx` to run it directly:
-
-```bash
-npx esm.sh
-```
-
-The CLI will start a esm.sh/hot server using the current working directory as the root path.
-
-```bash
-$ esm.sh
+$ npx esm.sh
 Listening on http://localhost:3000
 ```
 
-or you can specify the root path:
+you can specify the root path as well:
 
 ```bash
-$ esm.sh my-app
+$ npx esm.sh my-app
 ```
 
 ## Using the API

diff --git a/packages/esm-cli/src/index.mjs b/packages/esm-cli/src/index.mjs
@@ -11,6 +11,8 @@ import {
  readTextFromStream,
 } from "./util.mjs";
 
+const HOT_URL = "https://esm.sh/v135/hot";
+
 /**
  * Creates a fetch handler for serving hot applications.
  * @param {import("../types").ServeOptions} options
@@ -282,7 +284,7 @@ export const serveHot = (options) => {
  case "/favicon.ico":
  return new Response("Not found", { status: 404 });
  case "/sw.js": {
- const hotUrl = new URL("https://esm.sh/v135/hot");
+ const hotUrl = new URL(HOT_URL);
  const plugins = url.searchParams.get("hot-plugins");
  if (plugins) {
  hotUrl.searchParams.set("plugins", plugins);

diff --git a/packages/esm-cli/templates/react/with-unocss/App.jsx b/packages/esm-cli/templates/react/with-unocss/App.jsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 
 const externalLinks = [
- ["Get started", "https://esm.sh/hot/docs/get-started"],
- ["Docs", "https://esm.sh/hot/docs"],
+ ["Docs", "https://esm.sh/docs#hot"],
+ ["Templates", "https://esm.sh/new"],
  ["Github", "https://github.com/esm-dev/esm.sh"],
 ];
 
@@ -92,7 +92,7 @@ export default function App() {
  <nav className="fixed bottom-4 flex items-center gap-6 mt-4">
  {externalLinks.map(([text, href]) => (
  <a
- className="flex items-center gap-0.5 leading-none op-40 hover:op-100 transition-top duration-300 relative top-0 hover:top--0.5"
+ className="flex items-center gap-0.5 py-2 leading-none op-40 hover:op-100 transition-top duration-300 relative top-0 hover:top--0.5"
  target="_blank"
  href={href}
  key={href}
@@ -103,12 +103,14 @@ export default function App() {
  width="24"
  height="24"
  viewBox="0 0 24 24"
+ fill="none"
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
+ d="M7 7h10m0 0v10m0-10L7 17"
  stroke="currentColor"
  strokeWidth="2"
- d="M7 7h10m0 0v10m0-10L7 17"
+ strokeLinecap="round"
  />
  </svg>
  </a>
@@ -120,19 +122,19 @@ export default function App() {
  }}
  >
  <svg
- className="w-4.5 h-4.5 op-40 group-hover:op-100"
+ className="w-4.5 h-4.5 op-40 group-hover:op-100 transition-opacity duration-300"
  width="24"
  height="24"
  viewBox="0 0 24 24"
+ fill="none"
  xmlns="http://www.w3.org/2000/svg"
  >
  <path
- fill="none"
+ d="M14.828 14.828a4 4 0 1 0-5.656-5.656a4 4 0 0 0 5.656 5.656m-8.485 2.829l-1.414 1.414M6.343 6.343L4.929 4.929m12.728 1.414l1.414-1.414m-1.414 12.728l1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2"
  stroke="currentColor"
+ strokeWidth="2"
  strokeLinecap="round"
  strokeLinejoin="round"
- strokeWidth="2"
- d="M14.828 14.828a4 4 0 1 0-5.656-5.656a4 4 0 0 0 5.656 5.656m-8.485 2.829l-1.414 1.414M6.343 6.343L4.929 4.929m12.728 1.414l1.414-1.414m-1.414 12.728l1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2"
  />
  </svg>
  </button>

diff --git a/packages/esm-cli/templates/react/with-unocss/index.html b/packages/esm-cli/templates/react/with-unocss/index.html
@@ -21,8 +21,8 @@
 <body>
  <react-root src="./App.jsx"></react-root>
  <script type="module">
- import hot from "http://localhost:8080/v135/hot?plugins=react"
- hot.fire()
+ import hot from "http://localhost:8080/v135/hot?plugins=react";
+ hot.fire();
  </script>
 </body>
 

diff --git a/packages/esm-cli/templates/vanilla/index.html b/packages/esm-cli/templates/vanilla/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>esm.sh/hot</title>
+ <script type="importmap">
+ {
+ "imports": {
+ "lit": "https://esm.sh/[email protected]"
+ }
+ }
+ </script>
+
+ <script type="contentmap">
+ {
+ "contents": {
+ "val:*": {
+ "url": "https://api.val.town/v1/run/ije.${*}",
+ "authorization": "Bearer ${ENV.valtown}",
+ "select": "*",
+ "cacheTtl": 60
+ }
+ }
+ }
+ </script>
+</head>
+
+<body>
+ <use-content from="val:myInfo" with="url" >loading...</use-content>
+ <use-content from="val:myInfo" with="html" >loading...</use-content>
+
+ <script type="module">
+ import hot from "http://localhost:8080/v135/hot"
+ hot.fire()
+ </script>
+</body>
+
+</html>