@statewalker/webrun-http-browser 0.3.2 → 0.3.4

package/demo/demo-1.html

@@ -1,199 +1,114 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-
-<body>
-  <h1>Dynamic Site</h1>
-  <p>This demo shows how to launch a dynamic site containing the following parts:</p>
-  <ul>
-    <li><code>/index.html</code> - the main page referencing a CSS and a java script files. Note that the javascript is
-      imported using the standard ESM <code>import</code> notation</li>
-    <li><code>/index.css</code> - styles for the HTML page.</li>
-    <li><code>/index.js</code> - the main application code. This script listens the input box and sent its content to
-      the server-side API.</li>
-    <li><code>/api/:name</code> - dynamic server-side endpoint running responding to GET HTTP requests from the client.
-      This endpoint returns JSON object with a greeting message using the transmitted name with the current time.
-      The name of the user is loaded from the URL.
-
-      <p>Example of the server response:</p>
-      <pre>
-        {
-          "name" : "John",
-          "time" : "11:02:59",
-          "milliseconds" : "785"
-        }
-      </pre>
-    </li>
-  </ul>
-  <div id="view"></div>
-
-  <script type="module">
-    import * as WebRunHttp from "https://unpkg.com/@statewalker/webrun-http-browser@0.3/dist/index.js";
-    import { Hono } from "https://unpkg.com/hono@3.5/dist/index.js";
-    import mime from "https://esm.sh/mime-types";
-
-    Promise.resolve().then(main).catch(console.error);
-    async function main() {
-      // Load a Hono request router:
-      const router = getRouter();
-
-      // Create an HTTP Server with the specified name.
-      // It uses the given Hono router to dispatch requests
-      // between endpoints.
-      const serviceBaseUrl = await startHttpService({
-        serviceKey: "MY_SITE",
-        router
-      })
-      const siteUrl = `${serviceBaseUrl}/`;
-
-      // Now we can visualize the site in an iframe iframe:
-      const container = document.querySelector("#view");
-      const iframe = document.createElement("iframe");
-      iframe.width = "100%";
-      iframe.height = "500px";
-      iframe.src = siteUrl;
-      container.appendChild(iframe);
-
-      // We also append a reference to this site.
-      // It allows to open the site in a separate window:
-      const a = document.createElement("a");
-      a.target = "_blank";
-      a.href = siteUrl;
-      a.innerText = `Open "~MY_SITE/index.html" in a new window.`;
-      container.insertBefore(a, iframe);
-    }
-
-    async function startHttpService({
-      serviceKey,
-      router
-    }) {
-      // Step 1: Start a ServiceWorker and open a MessageChannel used to recieve HTTP requests and send responses:
-      const connection = await WebRunHttp.newRemoteRelayChannel();
-
-      // Step 2: Define an HTTP handler
-      const serviceBaseUrl = `${connection.baseUrl}~${serviceKey}`;
-      const app = new Hono({
-        getPath: (req) => req.url.substring(serviceBaseUrl.length)
-      });
-      // Add the router
-      app.route("/", router);
-      const httpHandler = (request) => app.fetch(request);
-
-      // Step 3: Instantiate a "server" using the communcation channel with the ServiceWorker:
-      const close = await WebRunHttp.initHttpService(httpHandler, {
-        key: serviceKey,  // Service prefix
-        port: connection.port
-      });
-
-      return serviceBaseUrl;
-    }
-
-    function getRouter() {
-      const router = new Hono();
-
-      // Server-side REST API handler:
-      router.get("/api/:name", (c) => {
-        const { name } = c.req.param()
-        const date = new Date();
-        const response = {
-          message: `Hello ${name}!`,
-          time: date.toLocaleTimeString(),
-          milliseconds: date.getMilliseconds()
-        }
-        return c.json(response);
-      });
-
-      // Static files: an object with path names and the corresponding content
-      const files = getStaticFiles();
-      // Register these files with a basic dispatcher
-      // returning the file content to the caller:
-      router.get("/*", newStaticFilesDispatcher(files))
-
-      return router;
-    }
-
-    function newStaticFilesDispatcher(files) {
-      return function showStaticFiles(context) {
-        let { url, path } = context.req;
-        path = path.replace(/#.*$/, "");
-        if (path.match(/\/$/)) {
-          path = path + "index.html";
-        }
-        const result = files[path];
-        if (!result) {
-          return context.notFound();
-        }
-        const mimeType = mime.lookup(path) || "application/octet-stream";
-        context.header("Content-Type", mimeType);
-        context.status(201);
-        if (typeof result === "object") {
-          return context.json(result);
-        } else {
-          return context.body(result);
-        }
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>webrun-http-browser — dynamic site demo (relay)</title>
+    <style>
+      body { font-family: system-ui, sans-serif; margin: 2rem; max-width: 60rem; }
+      iframe { width: 100%; height: 22rem; border: 1px solid #e5e5e5; }
+      code { background: #f4f4f5; padding: 0 0.25rem; border-radius: 0.2rem; }
+    </style>
+  </head>
+  <body>
+    <h1>Dynamic in-browser site (relay mode)</h1>
+    <p>
+      Registers a tiny site under the service key <code>MY_SITE</code> on the
+      relay ServiceWorker, then embeds <code>~MY_SITE/index.html</code> in an
+      iframe. The “server” is a request router running entirely in this tab.
+    </p>
+    <div id="view"></div>
+
+    <script type="module">
+      import { Hono } from "https://esm.sh/hono@4.9.10";
+      import * as WebRunHttp from "../dist/index.js";
+
+      const main = async () => {
+        const SERVICE_KEY = "MY_SITE";
+        const connection = await WebRunHttp.newRemoteRelayChannel();
+        const serviceBaseUrl = `${connection.baseUrl}~${SERVICE_KEY}`;
+
+        const router = getRouter();
+        const app = new Hono({ getPath: (req) => req.url.substring(serviceBaseUrl.length) });
+        app.route("/", router);
+
+        await WebRunHttp.initHttpService((req) => app.fetch(req), {
+          key: SERVICE_KEY,
+          port: connection.port,
+        });
+
+        const siteUrl = `${serviceBaseUrl}/`;
+        const view = document.querySelector("#view");
+        const link = document.createElement("a");
+        link.href = siteUrl;
+        link.target = "_blank";
+        link.textContent = `Open ${siteUrl} in a new tab`;
+        view.appendChild(link);
+
+        const iframe = document.createElement("iframe");
+        iframe.src = siteUrl;
+        view.appendChild(iframe);
       };
-    }
-
-    function getStaticFiles() {
-      return {
-        "/index.css": `
-          html, body {
-            padding: 0;
-            margin: 0;
-          }
-          h1 {
-            color : navy;
-          }
-        `,
 
+      function getRouter() {
+        const router = new Hono();
+        router.get("/api/:name", (c) => {
+          const { name } = c.req.param();
+          const date = new Date();
+          return c.json({
+            message: `Hello ${name}!`,
+            time: date.toLocaleTimeString(),
+            milliseconds: date.getMilliseconds(),
+          });
+        });
+        const files = getStaticFiles();
+        router.get("/*", (c) => {
+          let path = c.req.path.replace(/#.*$/, "");
+          if (path.endsWith("/")) path += "index.html";
+          const body = files[path];
+          if (!body) return c.notFound();
+          const contentType = path.endsWith(".html")
+            ? "text/html"
+            : path.endsWith(".js")
+              ? "text/javascript"
+              : path.endsWith(".css")
+                ? "text/css"
+                : "text/plain";
+          c.header("Content-Type", contentType);
+          return c.body(body);
+        });
+        return router;
+      }
 
-        "/index.js": `
-        document.addEventListener("DOMContentLoaded", () => {
-          const input = document.querySelector("#name");
-          input.addEventListener("input", (ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            updateName();
-          })
-          updateName();
-          async function updateName() {
-            const name = input.value;
-            const res = await fetch("./api/" + encodeURIComponent(name));
-            const { message, time, milliseconds } = await res.json();
-            const view = document.querySelector("#messages");
-            view.innerHTML = "<div>" + message + "</div><div>Current time is " + time + " (and " + milliseconds + " milliseconds).</div>";
-          }          
-        })
-        `,
-        "/index.html": `<!DOCTYPE HTML>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="./index.css" />
-</head>
-<body>
-  <h1>In-Browser Dynamic Site</h1>
-  <div>
-    Please enter your name:
-    <input type="text" id="name" value="John">
-  </div>
-  <p>Message from the server:</p>
-  <div id="messages">
-  </div>
-  <script type="module" src="./index.js"><\/script>
-</body>
-</html>
-`
+      function getStaticFiles() {
+        return {
+          "/index.css": `
+            body { font-family: system-ui, sans-serif; margin: 1rem; }
+            h2 { color: navy; }`,
+          "/index.js": `
+            document.addEventListener("DOMContentLoaded", () => {
+              const input = document.querySelector("#name");
+              const view = document.querySelector("#messages");
+              const update = async () => {
+                const res = await fetch("./api/" + encodeURIComponent(input.value));
+                const { message, time, milliseconds } = await res.json();
+                view.innerHTML = "<div>" + message + "</div>" +
+                  "<div>Current time: " + time + " (" + milliseconds + "ms)</div>";
+              };
+              input.addEventListener("input", update);
+              update();
+            });`,
+          "/index.html": '<!DOCTYPE html><html><head><meta charset="utf-8">' +
+            '<link rel="stylesheet" href="./index.css">' +
+            '</head><body><h2>In-browser dynamic site</h2>' +
+            '<label>Name: <input id="name" value="World"></label>' +
+            '<div id="messages"></div>' +
+            // Split the closing tag so the outer HTML parser doesn't end the script tag early.
+            `<script type="module" src="./index.js"></scr${"ipt>"}</body></html>`,
+        };
       }
-    }
-  </script>
-</body>
 
-</html>
+      main().catch(console.error);
+    </script>
+  </body>
+</html>