@statewalker/webrun-http-browser 0.1.0

package/src/http-stubs.js

@@ -0,0 +1,126 @@
+import { fromReadableStream, toReadableStream } from "./readable-streams.js";
+
+/**
+ * This method returns an HTTP handlers transforming
+ * HTTP Request instances to binary representations and
+ * sending them to a transport layer.
+ * Results of these transport ivokations are deserialized
+ * as meaningful Response instances and returned back to the caller.
+ *
+ * The specified `send` method is used to dispatch serialized
+ * requests to return the serialized remote results.
+ * This transport method accepts and returns objects with
+ * the same structure:
+ * * `options` - contains serialized request or response parameters
+ * * `content` - an async iterator over binary blocks for
+ *    the request or response
+ *
+ * @param {*} send transport function accepting serialized requests
+ * and returning back serialized responses
+ * @returns an async handler accepting standard
+ *   HTTP `Request` instances and returning `Response` instances
+ */
+export function newHttpClientStub(send) {
+  return async (request) => {
+    request = await request;
+    const fields = [
+      "url",
+      "method",
+      "mode",
+      "credentials",
+      "cache",
+      "redirect",
+      "referrer",
+      "referrerPolicy",
+      "integrity",
+      "keepalive",
+    ];
+    // request = await request.clone();
+    const requestOptions = fields.reduce((options, key) => {
+      const val = request[key];
+      if (val !== undefined) options[key] = val;
+      return options;
+    }, {});
+    const requestContent = (request.body)
+      ? fromReadableStream(request.body)
+      : [];
+    const result = await send({
+      options: requestOptions,
+      content: requestContent,
+    });
+    let responseBody = null;
+    let responseOptions = {};
+    if (!result) {
+      responseOptions = {
+        status: 404,
+        statusText: "Error 404: Not Found",
+      };
+    } else {
+      responseOptions = result.options;
+      const responseContent = result.content;
+      if (
+        requestOptions.method !== "HEAD" &&
+        requestOptions.method !== "OPTIONS"
+      ) {
+        responseBody = toReadableStream(responseContent);
+      } else if (responseContent && responseContent.return) {
+        responseContent.return();
+      }
+    }
+    return new Response(responseBody, responseOptions);
+  };
+}
+
+/**
+ * This method returns the server-side call handler transforming
+ * serialized requests to HTTP Request instances, delegating
+ * their handing to the given `handler` method. This handler
+ * should handle the HTTP request and return a valid Response instance.
+ * The resulting instance is serialized as an object with the same
+ * structure as the initial serialized request:
+ * - `options` - contains serialized request or response parameters
+ * - `content` - an async iterator over binary blocks for
+ *    the request or response
+ * @param {*} handler this handler method accepts standard HTTP Request
+ * and returns back an HTTP Response instance
+ * @returns a method deserializing HTTP requests and returning back
+ * serialized HTTP responses
+ */
+export function newHttpServerStub(handler) {
+  return async (params) => {
+    const {
+      options: requestOptions,
+      content: requestContent,
+    } = await params;
+    let requestBody = undefined;
+    const { url, mode } = requestOptions;
+    delete requestOptions.mode;
+    delete requestOptions.url;
+    if (
+      requestOptions.method !== "GET" &&
+      requestOptions.method !== "HEAD" &&
+      requestOptions.method !== "OPTIONS"
+    ) {
+      requestBody = toReadableStream(requestContent);
+      requestOptions.duplex = "half";
+    } else if (requestContent && requestContent.return) {
+      requestContent.return();
+    }
+    const request = new Request(url, {
+      ...requestOptions,
+      // duplex: 'full',
+      body: requestBody,
+    });
+    const response = await handler(request);
+    const responseOptions = {
+      status: response.status,
+      statusText: response.statusText,
+      headers: Object.fromEntries([...response.headers]),
+    };
+    const responseContent = await fromReadableStream(await response.body);
+    return {
+      options: responseOptions,
+      content: responseContent,
+    };
+  };
+}

package/src/http-sw-dispatcher.js

@@ -0,0 +1,128 @@
+import { handleHttpRequests, sendHttpRequest } from "./http-send-recieve.js";
+import { SwPortDispatcher, SwPortHandler } from "./sw-dispatcher.js";
+
+export class SwHttpAdapter extends SwPortHandler {
+  constructor(options) {
+    super(options);
+    this._handlers = new Map();
+  }
+
+  async _setCommunicationPort(port) {
+    if (this._cleanupRequestChannel) {
+      this._cleanupRequestChannel();
+    }
+    this._cleanupRequestChannel = handleHttpRequests(
+      port,
+      this._handleHttpRequest.bind(this),
+    );
+  }
+
+  async _handleHttpRequest(request) {
+    const requestUrl = request.url;
+    let handler;
+    for (let entry of this._handlers.entries()) {
+      const [urlPrefix] = entry;
+      if (requestUrl.indexOf(urlPrefix) === 0) {
+        handler = entry[1];
+        break;
+      }
+    }
+    return !handler
+      ? new Response(null, {
+        status: 404,
+        statusMessage: "Error 404: Not found",
+      })
+      : handler(request);
+  }
+
+  /**
+   * Registers the given request handler.
+   * @param {string} prefix unique base URL prefix used to register the specified handler
+   * @param {*} handler the request handler
+   * @return {string} full URL of the resulting endpoint
+   */
+  async register(prefix, handler) {
+    prefix = "./" + (prefix || "").replace(/^[\.\/]+/, "");
+    const rootUrl = this.rootUrl;
+    const baseUrl = new URL(prefix, rootUrl) + "";
+    this._handlers.set(baseUrl, handler);
+    return {
+      baseUrl,
+      prefix,
+      async remove() {
+        this._handlers.delete(baseUrl);
+      },
+    };
+  }
+}
+
+export class SwHttpDispatcher extends SwPortDispatcher {
+  constructor(options) {
+    super(options);
+  }
+
+  start() {
+    super.start();
+    this.self.addEventListener("fetch", this._handleFetchEvent.bind(this));
+  }
+
+  _handleFetchEvent(event) {
+    event.respondWith((async () => {
+      const request = event.request;
+      try {
+        const requestUrl = request.url;
+        const rootUrl = this.scope;
+        let channelInfo;
+        if (requestUrl.indexOf(rootUrl) === 0) {
+          const key = requestUrl
+            .substring(rootUrl.length)
+            .replace(/^\/?([^\/]+).*$/, "$1");
+          // console.log(`* rootUrl="${rootUrl}" requestUrl="${requestUrl}" key="${key}"`);
+          channelInfo = await this.loadChannelInfo(key);
+        }
+        if (channelInfo && channelInfo.port) {
+          return await sendHttpRequest(channelInfo.port, request);
+        } else {
+          const newRequest = new Request(requestUrl, {
+            method: request.method,
+            headers: request.headers,
+            body: request.body,
+            referrer: request.referrer,
+            referrerPolicy: request.referrerPolicy,
+            // mode: request.mode,
+            credentials: request.credentials,
+            cache: request.cache,
+            redirect: request.redirect,
+            integrity: request.integrity,
+          });
+          return await fetch(newRequest);
+        }
+
+        // const requestUrl = request.url;
+        // let url = requestUrl.replace(
+        //   /^.*\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}(.*)$/,
+        //   "$1",
+        // );
+        // if (url !== requestUrl) {
+        //   url = new URL(
+        //     "/packages/webrun-http-browser/src" + url,
+        //     self.location.href,
+        //   );
+        // }
+      } catch (error) {
+        console.error(error);
+        return new Response(null, {
+          status: 500,
+          statusText: "Error 500: Internal error",
+        });
+      }
+    })());
+  }
+}
+export function startHttpDispatcher({ self, log }) {
+  const dispatcher = new SwHttpDispatcher({ self, log });
+  dispatcher.start();
+  return () => {
+    dispatcher.stop();
+  };
+}

package/src/index.js

@@ -0,0 +1,12 @@
+export * from "./data-calls.js";
+export * from "./data-channels.js";
+export * from "./data-send-recieve.js";
+export * from "./errors.js";
+export * from "./http-send-recieve.js";
+export * from "./http-stubs.js";
+export * from "./http-sw-dispatcher.js";
+export * from "./readable-streams.js";
+export * from "./sw-dispatcher.js";
+
+import { newRegistry } from "@statewalker/utils";
+export { newRegistry };

package/src/readable-streams.js

@@ -0,0 +1,33 @@
+export function toReadableStream(it) {
+  return new ReadableStream({
+    type: "bytes",
+    async pull(controller) {
+      let handled = false;
+      try {
+        while (true) {
+          const slot = await it.next();
+          if (!slot || slot.done) {
+            break;
+          }
+          controller.enqueue(await slot.value);
+        }
+      } catch (error) {
+        handled = true;
+        controller.error(error);
+      } finally {
+        !handled && controller.close();
+      }
+    },
+  });
+}
+
+export async function* fromReadableStream(stream) {
+  const reader = await stream.getReader();
+  let done, value;
+  while (({ done, value } = await reader.read())) {
+    if (done) {
+      break;
+    }
+    yield await value;
+  }
+}

package/src/sw-dispatcher.js

@@ -0,0 +1,264 @@
+import { newRegistry } from "@statewalker/utils";
+import { callChannel, handleChannelCalls } from "./data-calls.js";
+import { get, set } from "idb-keyval";
+
+export class SwPortHandler {
+  constructor(options) {
+    this.options = options;
+    if (!this.key) throw new Error("Key is not defined.");
+    if (!this.scope) throw new Error("Scope is not defined");
+  }
+
+  get key() {
+    return this.options.key;
+  }
+
+  get scope() {
+    return this.options.scope || new URL("./", this.serviceWorkerUrl).pathname;
+  }
+
+  get rootUrl() {
+    return new URL(this.scope, import.meta.url);
+  }
+
+  get serviceWorkerUrl() {
+    if (!this._serviceWorkerUrl) {
+      let url = this.options.serviceWorkerUrl
+        ? new URL(this.options.serviceWorkerUrl)
+        : new URL("./index-sw.js", this.rootUrl);
+      this._serviceWorkerUrl = url + "";
+    }
+    return this._serviceWorkerUrl;
+  }
+
+  async _newCommunicationChannel() {
+    const messageChannel = new MessageChannel();
+    return [messageChannel.port1, messageChannel.port2];
+  }
+
+  async _setCommunicationPort(port) {
+    await this.options.bindPort(port);
+  }
+
+  async _updateCommunicationChannel() {
+    // console.log("[_updateCommunicationChannel]", this._serviceWorker);
+    if (!this._serviceWorker) return;
+    const [port1, port2] = await this._newCommunicationChannel();
+    await this._setCommunicationPort(port1);
+    await callChannel(
+      this._serviceWorker,
+      "UPDATE_COMMUNICATION_PORT",
+      this._getRegistrationInfo(),
+      port2,
+    );
+  }
+
+  _getRegistrationInfo() {
+    return { key: this.key };
+  }
+
+  /**
+   * Starts the server.
+   */
+  async start() {
+    return this._registrationPromise = this._registrationPromise ||
+      (async () => {
+        const [register, cleanup] = newRegistry();
+        this._cleanupRegistrations = cleanup;
+        register(() => this._cleanupRegistrations = null);
+        const registration = await navigator.serviceWorker.register(
+          this.serviceWorkerUrl,
+          {
+            // type: "module",
+            scope: this.scope,
+          },
+        );
+        register(() => registration.unregister());
+
+        // (example: when the service worker is the same but it is waked up/activated after an idle period)
+        register(
+          handleChannelCalls(
+            navigator.serviceWorker,
+            "UPDATE_COMMUNICATION_PORT",
+            async (event, params, port) => {
+              console.log("[UPDATE_COMMUNICATION_PORT]", port);
+              this._setCommunicationPort(port);
+              return this._getRegistrationInfo();
+            },
+          ),
+        );
+
+        this._serviceWorker = await getServiceWorkerController();
+        await awaitServiceWorkerActivation(this._serviceWorker);
+        await this._updateCommunicationChannel();
+
+        async function getServiceWorkerController() {
+          return await new Promise((resolve) => {
+            // Resolve right away if this page is already controlled.
+            const serviceWorker = navigator.serviceWorker;
+            if (serviceWorker.controller) {
+              resolve(serviceWorker.controller);
+            } else {
+              const onChange = () => {
+                resolve(serviceWorker.controller);
+                serviceWorker.removeEventListener("controllerchange", onChange);
+                serviceWorker.oncontrollerchange = null;
+              };
+              serviceWorker.addEventListener("controllerchange", onChange);
+              serviceWorker.oncontrollerchange = onChange;
+            }
+          });
+        }
+
+        // ------------------------------
+        // Await until the service is ready
+        async function awaitServiceWorkerActivation(worker) {
+          const isActivated = () => worker.state === "activated";
+          await new Promise(async (resolve) => {
+            if (isActivated()) resolve();
+            else {
+              worker.onstatechange = () => {
+                if (!isActivated()) return;
+                worker.onstatechange = null;
+                resolve();
+              };
+            }
+          });
+        }
+      })();
+  }
+
+  /**
+   * Stops the server and removes associated handlers.
+   */
+  async stop() {
+    if (this._cleanupRegistrations) this._cleanupRegistrations();
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    for (let registration of registrations) {
+      try {
+        await registration.unregister();
+      } catch (error) {
+        console.log("Service Worker registration failed: ", error);
+      }
+    }
+  }
+}
+
+export class SwPortDispatcher {
+  constructor({ self, log }) {
+    this.self = self;
+    this.log = log;
+    // Contains mapping between path prefixes and clientIds
+    this.handlersIndex = new Map();
+  }
+
+  get scope() {
+    return new URL("./", import.meta.url) + "";
+  }
+
+  async loadChannelInfo(key) {
+    await this._checkActivation();
+    let result;
+    for (let channelInfo of this.handlersIndex.values()) {
+      if (channelInfo.key !== key) continue;
+      const clientId = channelInfo.clientId;
+      const client = await self.clients.get(clientId);
+      if (!client) {
+        // Client gone. Remove the corresponding handlers from the index.
+        this.handlersIndex.delete(clientId);
+        throw Object.assign(new Error("Error 410: Resource Gone"), {
+          status: 410,
+        });
+      }
+      result = channelInfo;
+      break;
+    }
+    return result;
+  }
+
+  start() {
+    this._cleanup = handleChannelCalls(
+      this.self,
+      "UPDATE_COMMUNICATION_PORT",
+      async (event, channelInfo, port) => {
+        const clientId = event.source.id;
+        this.log("[UPDATE_COMMUNICATION_PORT]", clientId, channelInfo);
+        await this._updateChannelInfo({ ...channelInfo, port, clientId });
+        return { ...channelInfo };
+      },
+    );
+    this.self.onmessage = () => {};
+
+    this.self.addEventListener("install", (event) => {
+      this.log("Skip waiting on install.", event);
+      this.self.skipWaiting();
+    });
+
+    this.self.addEventListener("activate", async (event) => {
+      this.log(
+        "Claim control over all clients.",
+        event,
+        clients,
+        this.self.clients,
+      );
+      event.waitUntil((async () => {
+        await this.self.clients.claim();
+        await this._checkActivation();
+      })());
+    });
+  }
+
+  async stop() {
+    if (this._cleanup) {
+      await this._cleanup();
+      this._cleanup = undefined;
+    }
+  }
+
+  async _checkActivation() {
+    return this._activationPromise = this._activationPromise ||
+      this._activate();
+  }
+
+  async _activate() {
+    this.log("[checkActivation]");
+    let clientsIndex = await this._loadClientIds();
+    for (let [clientId, client] of clientsIndex.entries()) {
+      const messageChannel = new MessageChannel();
+      const port = messageChannel.port1;
+      const channelInfo = await callChannel(
+        client,
+        "UPDATE_COMMUNICATION_PORT",
+        {},
+        messageChannel.port2,
+      );
+      await this._updateChannelInfo({ ...channelInfo, port, clientId });
+    }
+  }
+
+  async _updateChannelInfo(channelInfo) {
+    this.log("[updateClientInfo]", channelInfo);
+    this.handlersIndex.set(channelInfo.clientId, channelInfo);
+    await this._updateClientIds([]);
+  }
+
+  async _loadClientIds() {
+    const clientIds = new Set((await get("clientIds")) || []);
+    return await this._updateClientIds(clientIds);
+  }
+
+  async _updateClientIds(clientIds) {
+    clientIds = new Set(clientIds);
+    for (let clientId of this.handlersIndex.keys()) {
+      clientIds.add(clientId);
+    }
+    const index = new Map();
+    for (let clientId of clientIds) {
+      const client = await this.self.clients.get(clientId);
+      if (client) index.set(clientId, client);
+      else this.handlersIndex.delete(clientId);
+    }
+    await set("clientIds", [...index.keys()].sort());
+    return index;
+  }
+}