@statewalker/webrun-http-browser 0.3.3 → 0.3.4

package/demo/demo-3.html

@@ -1,167 +0,0 @@
-<!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>
-  <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 = siteUrl;
-      container.appendChild(a);
-    }
-
-    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/:url", async (c) => {
-        const { url } = c.req.param();
-        const r = await fetch(url);
-        const result = await r.text();
-        return c.text(result);
-        // c.text(`Hello ${url}! Current timestamp: ${Date.now()}`);
-      });
-
-      // Static files
-      router.get("/*", newStaticFilesDispatcher({
-        "/index.css": `
-          html, body {
-            padding: 0;
-            margin: 0;
-          }
-          h1 {
-            color : navy;
-          }
-        `,
-
-
-        "/index.js": `
-        document.addEventListener("DOMContentLoaded", () => {
-          const input = document.querySelector("#url");
-          input.addEventListener("input", (ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            updateUrl();
-          })
-          updateUrl();
-          async function updateUrl() {
-            const url = input.value;
-            const res = await fetch("./api/" + encodeURIComponent(url));
-            const text = await res.text();
-            const view = document.querySelector("#messages");
-            view.innerText = text;
-          }          
-        })
-        `,
-        "/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>Hello In-Browser Dynamic Site</h1>
-  <div>
-    Please enter remote service URL:
-    <input type="text" id="url" value="https://dummyjson.com/products">
-  </div>
-  <p>Message from the server:</p>
-  <div id="messages">
-  </div>
-  <script type="module" src="./index.js"><\/script>
-</body>
-</html>
-`
-      }))
-
-      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);
-        }
-      };
-    }
-  </script>
-</body>
-
-</html>