@statewalker/webrun-http-browser 0.3.3 → 0.3.4

package/package.json

@@ -1,56 +1,69 @@
 {
   "name": "@statewalker/webrun-http-browser",
-  "version": "0.3.3",
-  "description": "Service-worker-based HTTP server simulation for browsers",
-  "keywords": [],
-  "homepage": "https://github.com/statewalker/statewalker-webrun-http-browser",
+  "version": "0.3.4",
+  "private": false,
+  "type": "module",
+  "description": "ServiceWorker-based HTTP server for browsers, with relay and same-origin dispatch modes",
+  "homepage": "https://github.com/statewalker/webrun-wire",
   "author": {
     "name": "Mikhail Kotelnikov",
     "email": "mikhail.kotelnikov@gmail.com"
   },
   "license": "MIT",
-  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:statewalker/webrun-wire.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./sw": {
+      "types": "./dist/sw.d.ts",
+      "import": "./dist/sw.js"
+    },
+    "./relay-sw": {
+      "default": "./dist/relay-sw.js"
+    },
+    "./sw-worker": {
+      "default": "./dist/sw-worker.js"
+    }
+  },
   "files": [
-    "dist/**/package.json",
-    "dist/**/*.js",
+    "dist",
+    "src",
     "public",
     "public-relay",
-    "src/**/*.js",
-    "demo",
-    "index.js"
+    "demo"
   ],
-  "module": "src/index.js",
-  "main": "src/index.js",
-  "jsdelivr": "dist/index.js",
-  "unpkg": "dist/index.js",
-  "exports": {
-    "umd": "./dist/index-umd.min.js",
-    "default": "./src/index.js"
-  },
   "dependencies": {
-    "@statewalker/utils": "^0.4.2",
-    "idb-keyval": "^6.2.0"
+    "idb-keyval": "^6.3.0",
+    "@statewalker/webrun-streams": "0.1.1",
+    "@statewalker/webrun-http-streams": "0.2.1"
   },
   "devDependencies": {
-    "@statewalker/rollup": "^0.1.6",
-    "eslint": "^8",
-    "expect.js": "^0.3",
-    "mocha": "^10",
-    "rollup": "^3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:statewalker/statewalker-webrun-http-browser.git"
-  },
-  "scripts": {
-    "eslint": "eslint src",
-    "rollup": "rollup -c",
-    "watch": "rollup -c --watch",
-    "test": "mocha -R spec ./test/index.js",
-    "prepublishOnly": "rm -rf dist && yarn test && yarn rollup"
+    "@types/node": "^26.2.0",
+    "http-server": "^14.1.1",
+    "rimraf": "^6.1.3",
+    "rolldown": "^1.2.4",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
   },
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && rolldown -c && tsc --emitDeclarationOnly --declaration",
+    "test": "vitest run",
+    "lint": "biome check src tests",
+    "serve": "http-server -p 5173 -c-1 -s .",
+    "example:same-origin": "pnpm run build && http-server -p 5173 -c-1 -o /public/index.html .",
+    "example:relay-site": "pnpm run build && http-server -p 5173 -c-1 -o /demo/demo-1.html .",
+    "example:relay-files": "pnpm run build && http-server -p 5173 -c-1 -o /demo/demo-2.html ."
   }
-}
+}

package/public/index.html

@@ -1,100 +1,64 @@
 <!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset='utf-8'>
-  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-  <title>Page Title</title>
-  <meta name='viewport' content='width=device-width, initial-scale=1'>
-</head>
-
-<body>
-  <div id="info"></div>
-  <div id="messages" style="display: block; border: 1px solid blue; padding: 0.5em;"></div>
-  <div id="counter"></div>
-
-  <button id="button">Load Data</button>
-  <div id="panel"></div>
-
-  <script type="module">
-    import { v4 as uuidv4 } from "https://unpkg.com/uuid@9.0.0/dist/esm-browser/index.js";
-    import * as relayLib from "../dist/index.js";
-    import { callPeriodically } from "../public-relay/heartbeat.js";
-
-    document.addEventListener("DOMContentLoaded", main);
-    // Promise.resolve().then(main).catch(console.error);
-
-    async function main() {
-
-      const key = uuidv4();
-      const [register, cleanup] = relayLib.newRegistry();
-
-      const options = {
-        // url: new URL(`../public-relay/relay.html?${Math.random()}`, import.meta.url),
-        // container: document.body,
-      };
-      const serviceKey = "abc";
-
-      // ---------------------------
-      // Server-side part 
-      const serverPort = await relayLib.newRemoteRelayChannel(options);
-      register(serverPort.close);
-
-      const serviceHandler = async (request) => {
-        const info = relayLib.splitServiceUrl(request.url);
-
-        const result = {
-          message: "Hello Wonderful World!",
-          ...info
-        }
-        return new Response(JSON.stringify(result, null, 2), {
-          headers: {
-            "Content-Type": "application/json"
-          }
-        })
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>webrun-http-browser — same-origin demo</title>
+    <style>
+      body { font-family: system-ui, sans-serif; margin: 2rem; max-width: 48rem; }
+      h1 { margin-top: 0; }
+      pre { background: #f4f4f5; padding: 0.5rem 1rem; border-radius: 0.25rem; overflow: auto; }
+      .log { border: 1px solid #e5e5e5; padding: 0.5rem 1rem; min-height: 4rem; }
+      .log p { margin: 0.25rem 0; font-family: monospace; }
+    </style>
+  </head>
+  <body>
+    <h1>Same-origin ServiceWorker HTTP demo</h1>
+    <p>
+      This page registers a ServiceWorker at <code>./sw-worker.js</code> and
+      mounts a tiny in-browser HTTP handler under <code>./api/</code>. The SW
+      then intercepts same-origin <code>fetch()</code> calls matching that
+      prefix and routes them to the handler — no remote server involved.
+    </p>
+    <div class="log" id="log"></div>
+
+    <script type="module">
+      import { createLocalAdapter } from "./index.js";
+
+      const log = (msg) => {
+        const p = document.createElement("p");
+        p.textContent = msg;
+        document.querySelector("#log").appendChild(p);
       };
-      register(await relayLib.initHttpService(serviceHandler, {
-        key: serviceKey,
-        port: serverPort.port
-      }))
-
-      // ---------------------------
-      // Call the defined endpoint. 
-
-      // We can not use the "fech" method - to be able
-      // to use it this page should be served from the same root URL
-      // as the service worker managing pages. 
-      // To deal with this constraint we use the connection
-      // port allowing to perform direct calls using
-      // the explicit service key on the client.
-      const clientPort = await relayLib.newRemoteRelayChannel(options);
-      register(clientPort.close);
-
-      const request = new Request(`http://www.foo.bar/titi/toto`);
-      const response = await relayLib.callHttpService(request, {
-        key: serviceKey,
-        port: clientPort.port
-      });
-      const json = await response.json();
-      console.log('* Response:', json);
-
-
-      // // ---------------------------
-      // // Start hearbeting calls - to avoid removal of the underlying ServiceWorker
-      // // const url = new URL(`../public-relay/~.ping`, import.meta.url);
-      // register(callPeriodically(async () => {
-      //   const response = await relayLib.callHttpService(new Request("~sys/ping/"), {
-      //     key: serviceKey,
-      //     port: clientPort.port
-      //   })
-      //   const result = await response.json();
-      //   console.log(result);
-      // }, 10000))
-
-    }
-
-  </script>
-
-</body>
 
-</html>
+      // The adapter key is also the first URL segment the SW routes to this page;
+      // registered handler prefixes must live under `<key>/…`.
+      const KEY = "demo";
+      const adapter = createLocalAdapter({ key: KEY });
+      try {
+        await adapter.start();
+        log("ServiceWorker activated.");
+
+        const { baseUrl } = await adapter.register(`${KEY}/api/`, async (request) => {
+          const url = new URL(request.url);
+          return new Response(
+            JSON.stringify({
+              message: "Hello from the in-browser HTTP handler!",
+              at: url.pathname,
+              time: new Date().toISOString(),
+            }),
+            { headers: { "Content-Type": "application/json" } },
+          );
+        });
+        log(`Handler registered at ${baseUrl}`);
+
+        const res = await fetch(`${baseUrl}anything`);
+        const body = await res.json();
+        log(`GET ${baseUrl}anything → ${JSON.stringify(body)}`);
+      } catch (error) {
+        log(`Error: ${error.message}`);
+        console.error(error);
+      }
+    </script>
+  </body>
+</html>

package/public/index.js

@@ -1,9 +1,12 @@
-import { SwHttpAdapter } from "../dist/index.js";
+import { SwHttpAdapter } from "../dist/sw.js";
 
-export default function (options) {
+/**
+ * Factory for a same-origin `SwHttpAdapter` rooted at this directory.
+ * Apps pass the `key` they want to expose and any per-handler options.
+ */
+export function createLocalAdapter(options) {
   return new SwHttpAdapter({
-    serviceWorkerUrl: new URL("./index-service-worker.js", import.meta.url) +
-      "",
+    serviceWorkerUrl: `${new URL("./sw-worker.js", import.meta.url)}`,
     ...options,
   });
 }

package/public/sw-worker.js

@@ -0,0 +1,4 @@
+// Same-origin HTTP dispatcher ServiceWorker.
+// Must be served from the same directory as the app pages so its scope
+// (`./`) covers them.
+importScripts("../dist/sw-worker.js");

package/public-relay/heartbeat.js

@@ -5,19 +5,20 @@ export function startHeartbit({
   url = "./ping", // 10 seconds
 }) {
   return callPeriodically(async () => {
-    const res = await fetch(url);
+    const _res = await fetch(url);
   }, timeout);
 }
 
 export async function callPeriodically(action, timeout) {
-  let timerId, stopped = false;
+  let timerId,
+    stopped = false;
   async function run() {
     try {
       await action();
     } catch (err) {
       console.error(err);
     }
-    timerId = (!stopped) ? workerTimer.setTimeout(run, timeout) : 0;
+    timerId = !stopped ? workerTimer.setTimeout(run, timeout) : 0;
   }
   run();
   return () => {

package/public-relay/relay-sw.js

@@ -1,6 +1,4 @@
-// It is important to include the Service Worker in this file:
-// the service worker controls all resources starting from the 
-// base URL of the running script.
-// By including the script directly (without this file) you change 
-// the base URL of the controlled resources, and it is not what you want!
-importScripts("../dist/index-sw.js");
+// The relay ServiceWorker.
+// It MUST be served from this directory so its scope (`./`) covers
+// relay.html and any in-browser `fetch()` calls the apps route through it.
+importScripts("../dist/relay-sw.js");

package/public-relay/relay.html

@@ -1,12 +1,17 @@
 <!DOCTYPE html>
-<html>
-<body>
-  <script type="module">
-    import { getRelayWindowMessageHandler } from "../dist/index.js";
-    window.onmessage = getRelayWindowMessageHandler({
-      swUrl : new URL("./relay-sw.js", import.meta.url) + "",
-      scopeUrl : new URL("./", import.meta.url) + "",
-    });
-  </script>
-</body>
-</html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>webrun-http-browser relay</title>
+  </head>
+  <body>
+    <script type="module">
+      import { getRelayWindowMessageHandler } from "../dist/index.js";
+
+      window.onmessage = getRelayWindowMessageHandler({
+        swUrl: `${new URL("./relay-sw.js", import.meta.url)}`,
+        scopeUrl: `${new URL("./", import.meta.url)}`,
+      });
+    </script>
+  </body>
+</html>

package/src/core/data-calls.ts

@@ -0,0 +1,46 @@
+import { deserializeError, serializeError } from "@statewalker/webrun-streams";
+import type { MessageSink, MessageSource } from "./message-target.js";
+
+export type ChannelCallHandler = (
+  event: MessageEvent,
+  params: unknown,
+  ...transfers: MessagePort[]
+) => unknown;
+
+export function callChannel<T = unknown>(
+  target: MessageSink,
+  callType: string,
+  params: unknown,
+  ...transfers: Transferable[]
+): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = (ev: MessageEvent) => {
+      const { result, error } = ev.data as { result?: T; error?: unknown };
+      if (error) reject(deserializeError(error as never));
+      else resolve(result as T);
+    };
+    target.postMessage({ type: callType, params }, [channel.port2, ...transfers]);
+  });
+}
+
+export function handleChannelCalls(
+  target: MessageSource,
+  callType: string,
+  handler: ChannelCallHandler,
+): () => void {
+  const listener = async (event: MessageEvent) => {
+    if (!event.data || event.data.type !== callType) return;
+    const [port, ...transfers] = event.ports ?? [];
+    const response: { result?: unknown; error?: unknown } = {};
+    try {
+      response.result = await handler(event, event.data.params, ...transfers);
+    } catch (error) {
+      response.error = serializeError(error);
+    }
+    port?.postMessage(response);
+  };
+  target.addEventListener("message", listener);
+  target.start?.();
+  return () => target.removeEventListener("message", listener);
+}

package/src/core/data-channels.ts

@@ -0,0 +1,224 @@
+import {
+  deserializeError,
+  recieveIterator,
+  type SerializedError,
+  sendIterator,
+  serializeError,
+} from "@statewalker/webrun-streams";
+import type { MessageTarget } from "./message-target.js";
+
+const MESSAGE_TYPE_REQUEST = "REQUEST";
+const MESSAGE_TYPE_RESPONSE = "RESPONSE";
+
+type InvocationMessage =
+  | { type: typeof MESSAGE_TYPE_REQUEST; callId: number; request: unknown }
+  | {
+      type: typeof MESSAGE_TYPE_RESPONSE;
+      callId: number;
+      response?: unknown;
+      error?: SerializedError;
+    };
+
+type PendingRequest = {
+  resolve: (value: unknown) => void;
+  reject: (reason: unknown) => void;
+};
+
+let __invocationCounter = 0;
+
+export interface InvocationChannel {
+  start(): Promise<void>;
+  close(): Promise<void>;
+  invoke<T = unknown>(request?: unknown, ...transfers: Transferable[]): Promise<T>;
+}
+
+export interface NewInvocationChannelOptions {
+  port: MessageTarget;
+  handler?: (request: unknown, ...ports: MessagePort[]) => unknown;
+  onError?: (error: unknown) => void;
+  newCallId?: () => number;
+}
+
+export function newInvokationChannel({
+  port,
+  handler = () => {
+    throw new Error("Handler not implemented");
+  },
+  onError = console.error,
+  newCallId = () => ++__invocationCounter,
+}: NewInvocationChannelOptions): InvocationChannel {
+  const requests: Record<number, PendingRequest> = {};
+
+  const listener = async (event: MessageEvent) => {
+    const data = (event.data ?? {}) as InvocationMessage;
+    if (data.type === MESSAGE_TYPE_REQUEST) {
+      try {
+        const result = await handler(data.request, ...(event.ports as MessagePort[]));
+        const [response, ...transfers] = Array.isArray(result)
+          ? (result as unknown[])
+          : result !== undefined
+            ? [result]
+            : [];
+        port.postMessage(
+          { type: MESSAGE_TYPE_RESPONSE, callId: data.callId, response },
+          transfers as Transferable[],
+        );
+      } catch (error) {
+        port.postMessage({
+          type: MESSAGE_TYPE_RESPONSE,
+          callId: data.callId,
+          error: serializeError(error),
+        });
+      }
+    } else if (data.type === MESSAGE_TYPE_RESPONSE) {
+      const pending = requests[data.callId];
+      delete requests[data.callId];
+      if (!pending) return;
+      if (data.error) pending.reject(deserializeError(data.error));
+      else pending.resolve(data.response);
+    }
+  };
+
+  const start = async () => {
+    try {
+      port.addEventListener("message", listener);
+      await port.start?.();
+    } catch (e) {
+      onError(e);
+    }
+  };
+
+  const close = async () => {
+    try {
+      port.removeEventListener("message", listener);
+      await port.close?.();
+    } catch (e) {
+      onError(e);
+    }
+  };
+
+  const invoke = <T>(request: unknown = {}, ...transfers: Transferable[]): Promise<T> => {
+    const callId = newCallId();
+    return new Promise<T>((resolve, reject) => {
+      try {
+        requests[callId] = {
+          resolve: resolve as (value: unknown) => void,
+          reject,
+        };
+        port.postMessage({ type: MESSAGE_TYPE_REQUEST, callId, request }, transfers);
+      } catch (error) {
+        delete requests[callId];
+        reject(error);
+      }
+    });
+  };
+
+  return { start, close, invoke };
+}
+
+export async function* sendStream<T>(
+  communicationPort: MessageTarget,
+  input: AsyncIterable<T>,
+  params: Record<string, unknown> = {},
+): AsyncGenerator<T, void, unknown> {
+  const messageChannel = new MessageChannel();
+  communicationPort.postMessage({ type: "START_CALL", params }, [messageChannel.port2]);
+
+  const channel = newStreamChannel<T>(messageChannel.port1);
+  try {
+    await channel.start();
+    void channel.sendAll(input);
+    yield* channel.recieveAll();
+  } finally {
+    await channel.close();
+  }
+}
+
+export type StreamHandler<T> = (
+  input: AsyncIterable<T>,
+  params: Record<string, unknown>,
+) => AsyncIterable<T> | Promise<AsyncIterable<T>>;
+
+export function handleStreams<T>(
+  communicationPort: MessageTarget,
+  handler: StreamHandler<T>,
+): () => void {
+  const listener = async (event: MessageEvent) => {
+    const { type, params } = (event.data ?? {}) as {
+      type?: string;
+      params?: Record<string, unknown>;
+    };
+    if (type !== "START_CALL") return;
+    const port = event.ports[0];
+    const channel = newStreamChannel<T>(port);
+    try {
+      await channel.start();
+      const input = channel.recieveAll();
+      const response = await handler(input, params ?? {});
+      await channel.sendAll(response);
+    } finally {
+      await channel.close();
+    }
+  };
+  communicationPort.addEventListener("message", listener);
+  communicationPort.start?.();
+  return () => communicationPort.removeEventListener("message", listener);
+}
+
+interface StreamChannel<T> {
+  start(): Promise<void>;
+  close(): Promise<void>;
+  recieveAll(): AsyncGenerator<T, void, unknown>;
+  sendAll(it: AsyncIterable<T>): Promise<void>;
+}
+
+function newStreamChannel<T>(port: MessageTarget): StreamChannel<T> {
+  type DataListener = (msg: { done?: boolean; value?: T; error?: unknown }) => Promise<boolean>;
+  let listeners: DataListener[] = [];
+  let iterators: AsyncIterable<T>[] = [];
+
+  const notifyAll = async (data: { done?: boolean; value?: T; error?: unknown }) => {
+    for (const listener of listeners) await listener(data);
+  };
+
+  const channel = newInvokationChannel({
+    port,
+    handler: (data: unknown) => notifyAll(data as { done?: boolean; value?: T; error?: unknown }),
+  });
+
+  const start = () => channel.start();
+
+  const close = async () => {
+    await notifyAll({ done: true });
+    for (const it of [...iterators]) {
+      const iterable = it as AsyncIterable<T> & { return?: () => unknown };
+      await iterable.return?.();
+    }
+    await channel.close();
+  };
+
+  async function* recieveAll(): AsyncGenerator<T, void, unknown> {
+    yield* recieveIterator<T>((deliver) => {
+      listeners.push(deliver as DataListener);
+      return () => {
+        listeners = listeners.filter((l) => l !== deliver);
+      };
+    });
+  }
+
+  async function sendAll(it: AsyncIterable<T>): Promise<void> {
+    await sendIterator<T>(
+      (chunk) => void channel.invoke(chunk),
+      (async function* () {
+        try {
+          iterators.push(it);
+          yield* it;
+        } finally {
+          iterators = iterators.filter((i) => i !== it);
+        }
+      })(),
+    );
+  }
+
+  return { start, close, recieveAll, sendAll };
+}

package/src/core/index.ts

@@ -0,0 +1,9 @@
+// Re-export the stream / iterator / error primitives so existing consumers
+// of `@statewalker/webrun-http-browser` keep working after the
+// `webrun-streams` extraction.
+export * from "@statewalker/webrun-streams";
+
+export * from "./data-calls.js";
+export * from "./data-channels.js";
+export * from "./message-target.js";
+export * from "./registry.js";

package/src/core/message-target.ts

@@ -0,0 +1,18 @@
+export type MessageListener = (event: MessageEvent) => void | Promise<void>;
+
+/** An object we can listen for `"message"` events on. */
+export interface MessageSource {
+  addEventListener(type: "message", listener: MessageListener): void;
+  removeEventListener(type: "message", listener: MessageListener): void;
+  start?(): void | Promise<void>;
+}
+
+/** An object we can post messages to (with optional transferable list). */
+export interface MessageSink {
+  postMessage(message: unknown, transfer?: Transferable[]): void;
+}
+
+/** Full-duplex message target: both sends and receives. */
+export interface MessageTarget extends MessageSource, MessageSink {
+  close?(): void | Promise<void>;
+}