@statewalker/webrun-http-browser 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-// @statewalker/webrun-http-browser v0.1.0 https://github.com/statewalker/statewalker-webrun-http-browser Copyright 2023 Mikhail Kotelnikov
+// @statewalker/webrun-http-browser v0.2.0 https://github.com/statewalker/statewalker-webrun-http-browser Copyright 2023 Mikhail Kotelnikov
 function serializeError(error) {
   return Object.assign({
     message: error,
@@ -199,7 +199,10 @@ function newChannel(port) {
       await listener(data);
     }
   };
-  const channel = newInvokationChannel(port, notifyAll);
+  const channel = newInvokationChannel({
+    port,
+    handler: notifyAll,
+  });
 
   const start = () => channel.start();
 
@@ -237,15 +240,20 @@ function newChannel(port) {
   };
 }
 
-function newInvokationChannel(port, handler = () => {
-  throw new Error("Handler not implemented");
+function newInvokationChannel({
+  port,
+  handler = () => {
+    throw new Error("Handler not implemented");
+  },
+  onError = console.error,
+  newCallId = () =>
+    newInvokationChannel.__counter = (newInvokationChannel.__counter || 0) + 1,
 }) {
   const MESSAGE_TYPE_REQUEST = "REQUEST";
   const MESSAGE_TYPE_RESPONSE = "RESPONSE";
   const EVENT_MESSAGE = "message";
 
   const requests = {};
-  let requestCounter = 0;
   const listener = async (event) => {
     const data = event.data || {};
     const { type, callId } = data;
@@ -282,17 +290,25 @@ function newInvokationChannel(port, handler = () => {
   };
 
   const start = async () => {
-    port.addEventListener(EVENT_MESSAGE, listener);
-    await port.start();
+    try {
+      port.addEventListener(EVENT_MESSAGE, listener);
+      port.start && await port.start();
+    } catch (e) {
+      onError(e);
+    }
   };
 
   const close = async () => {
-    port.removeEventListener(EVENT_MESSAGE, listener);
-    await port.close();
+    try {
+      port.removeEventListener(EVENT_MESSAGE, listener);
+      port.close && await port.close();
+    } catch (e) {
+      onError(e);
+    }
   };
 
   const invoke = async function (request = {}, ...transfers) {
-    const callId = ++requestCounter;
+    const callId = newCallId();
     return new Promise((resolve, reject) => {
       try {
         requests[callId] = { resolve, reject };
@@ -511,435 +527,284 @@ async function sendHttpRequest(communicationPort, request) {
   return await clientStub(request);
 }
 
-function promisifyRequest(request) {
-    return new Promise((resolve, reject) => {
-        // @ts-ignore - file size hacks
-        request.oncomplete = request.onsuccess = () => resolve(request.result);
-        // @ts-ignore - file size hacks
-        request.onabort = request.onerror = () => reject(request.error);
-    });
-}
-function createStore(dbName, storeName) {
-    const request = indexedDB.open(dbName);
-    request.onupgradeneeded = () => request.result.createObjectStore(storeName);
-    const dbp = promisifyRequest(request);
-    return (txMode, callback) => dbp.then((db) => callback(db.transaction(storeName, txMode).objectStore(storeName)));
-}
-let defaultGetStoreFunc;
-function defaultGetStore() {
-    if (!defaultGetStoreFunc) {
-        defaultGetStoreFunc = createStore('keyval-store', 'keyval');
-    }
-    return defaultGetStoreFunc;
-}
-/**
- * Get a value by its key.
- *
- * @param key
- * @param customStore Method to get a custom store. Use with caution (see the docs).
- */
-function get(key, customStore = defaultGetStore()) {
-    return customStore('readonly', (store) => promisifyRequest(store.get(key)));
-}
-/**
- * Set a value with a key.
- *
- * @param key
- * @param value
- * @param customStore Method to get a custom store. Use with caution (see the docs).
- */
-function set(key, value, customStore = defaultGetStore()) {
-    return customStore('readwrite', (store) => {
-        store.put(value, key);
-        return promisifyRequest(store.transaction);
-    });
-}
-
-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;
+function splitServiceUrl(url, separator = "~") {
+  let key = "";
+  let path = "";
+  let str = url + "";
+  const idx = str.indexOf(separator);
+  let baseUrl = "";
+  if (idx >= 0) {
+    baseUrl = str.substring(0, idx + separator.length);
+    str.substring(idx + separator.length)
+      .replace(/^([^\/]+)/, (match, $1) => {
+        baseUrl += match;
+        if (baseUrl.length < str.length) baseUrl += "/";
+        key = $1;
+        path = str.substring(baseUrl.length);
+        return "";
+      });
   }
+  return {
+    url,
+    key,
+    baseUrl,
+    path,
+  };
+}
 
-  get scope() {
-    return this.options.scope || new URL("./", this.serviceWorkerUrl).pathname;
-  }
+function newServiceWorkerPort() {
+  // Bind the service worker to
+  const channel = new MessageChannel();
+  channel.port1.onmessage = (event) => {
+    navigator.serviceWorker.controller.postMessage(event.data, event.ports);
+  };
+  navigator.serviceWorker.addEventListener("message", (event) => {
+    channel.port1.postMessage(event.data, event.ports);
+  });
+  return channel.port2;
+}
 
-  get rootUrl() {
-    return new URL(this.scope, import.meta.url);
-  }
+async function initServiceWorker1({ swUrl, scopeUrl, type }) {
+  const {
+    installing,
+    waiting,
+    active,
+  } = await navigator.serviceWorker.register(swUrl, {
+    // type: "module",
+    scope: scopeUrl,
+  });
+  (installing || waiting || active).addEventListener("statechange", (e) => {
+    console.log("state", e.target.state);
+  });
 
-  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 + "";
+  const serviceWorker = navigator.serviceWorker;
+  await new Promise((resolve) => {
+    // Resolve right away if this page is already controlled.
+    if (serviceWorker.controller) {
+      resolve();
+    } else {
+      const onChange = () => {
+        resolve();
+        serviceWorker.removeEventListener("controllerchange", onChange);
+        serviceWorker.oncontrollerchange = null;
+      };
+      serviceWorker.addEventListener("controllerchange", onChange);
+      serviceWorker.oncontrollerchange = onChange;
     }
-    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);
-      }
+  });
+  const worker = serviceWorker.controller;
+  const isActivated = () => worker.state === "activated";
+  return await new Promise(async (resolve) => {
+    if (isActivated()) resolve(worker);
+    else {
+      worker.onstatechange = () => {
+        if (!isActivated()) return;
+        worker.onstatechange = null;
+        resolve(worker);
+      };
     }
-  }
+  });
 }
 
-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,
-        });
+async function initServiceWorker({ swUrl, scopeUrl, type }) {
+  await navigator.serviceWorker.register(swUrl, {
+    type,
+    scope: scopeUrl,
+  });
+  const worker = await getServiceWorkerController();
+  await awaitServiceWorkerActivation(worker);
+  return worker;
+
+  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;
       }
-      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();
+  // ------------------------------
+  // 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();
+        };
+      }
+    });
   }
+}
 
-  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 function initHttpService(handler, {
+  key,
+  port,
+}) {
+  return await registerConnectionsHandler({
+    key,
+    communicationPort: port,
+    handler: async (event, data, callPort) => {
+      handleHttpRequests(callPort, handler);
+      return true;
+    },
+  });
+}
 
-  async _updateChannelInfo(channelInfo) {
-    this.log("[updateClientInfo]", channelInfo);
-    this.handlersIndex.set(channelInfo.clientId, channelInfo);
-    await this._updateClientIds([]);
-  }
+async function callHttpService(request, {
+  key,
+  port,
+}) {
+  const callPort = await initializeConnection({
+    key,
+    communicationPort: port,
+  });
+  const result = await sendHttpRequest(callPort, request);
+  return result;
+}
 
-  async _loadClientIds() {
-    const clientIds = new Set((await get("clientIds")) || []);
-    return await this._updateClientIds(clientIds);
-  }
+function getRelayWindowMessageHandler({
+  swUrl = new URL("./index-sw.js", import.meta.url) + "",
+  scopeUrl = new URL("../", import.meta.url) + "",
+} = {}) {
+  let externalPort;
+  return async (ev) => {
+    if (ev.data.type === "CONNECT") {
+      const newExternalPort = (ev.ports || [])[0];
+      if (externalPort) {
+        newExternalPort.close();
+        return;
+      }
+      externalPort = newExternalPort;
+      await initServiceWorker({
+        swUrl,
+        scopeUrl,
+      });
+      const serviceWorkerPort = newServiceWorkerPort();
+      serviceWorkerPort.onmessage = (event) => {
+        externalPort.postMessage(event.data, event.ports);
+      };
 
-  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);
+      externalPort.onmessage = (event) => {
+        serviceWorkerPort.postMessage(event.data, event.ports);
+      };
     }
-    await set("clientIds", [...index.keys()].sort());
-    return index;
-  }
+  };
 }
 
-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 function newRemoteRelayChannel({
+  baseUrl = new URL("./", import.meta.url),
+  url = new URL("./relay.html", baseUrl),
+  container = document.body,
+} = {}) {
+  const messageChannel = new MessageChannel();
+  const { iframe, promise } = await newIFrame(url);
+  Object.assign(iframe.style, {
+    // height: "100px"
+    position: "fixed",
+    width: "1px",
+    height: "1px",
+    top: "-1000",
+    left: "-1000",
+    display: "block",
+    opacity: "0",
+    border: "none",
+    outline: "none",
+  });
+  container.appendChild(iframe);
+  promise.then(() => {
+    iframe.contentWindow.postMessage(
+      {
+        type: "CONNECT",
+      },
+      "*",
+      [messageChannel.port1],
     );
-  }
-
-  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);
-  }
+  });
+  return {
+    port: messageChannel.port2,
+    close: () => {
+      container.parentElement && container.parentElement.removeChild(container);
+      messageChannel.port1.close();
+      messageChannel.port2.close();
+    },
+  };
 
-  /**
-   * 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);
+  async function newIFrame(url) {
+    const iframe = document.createElement("iframe");
+    iframe.src = url;
+    Object.assign(iframe.style, {
+      padding: 0,
+      margin: 0,
+      border: "none",
+      outline: "none",
+      width: "100%",
+      height: "100%",
+    });
     return {
-      baseUrl,
-      prefix,
-      async remove() {
-        this._handlers.delete(baseUrl);
-      },
+      iframe,
+      promise: new Promise((resolve, reject) => {
+        try {
+          iframe.onerror = reject;
+          iframe.onload = () => resolve(iframe);
+        } catch (error) {
+          reject(error);
+        }
+      }),
     };
   }
 }
+// -------------------------------------------------------
 
-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",
-        });
-      }
-    })());
-  }
+async function initializeConnection({
+  key,
+  communicationPort,
+  ...options
+}) {
+  const channel = new MessageChannel();
+  const accepted = await callChannel(
+    communicationPort,
+    "CONNECT",
+    { key, ...options },
+    channel.port2,
+  );
+  if (!accepted) {
+    channel.port1.close();
+    channel.port2.close();
+    return null;
+  }
+  return channel.port1;
 }
-function startHttpDispatcher({ self, log }) {
-  const dispatcher = new SwHttpDispatcher({ self, log });
-  dispatcher.start();
-  return () => {
-    dispatcher.stop();
-  };
+
+async function registerConnectionsHandler({
+  key,
+  handler,
+  communicationPort,
+}) {
+  const [register, cleanup] = newRegistry();
+  await callChannel(communicationPort, "REGISTER", { key });
+  register(() => callChannel(communicationPort, "UNREGISTER", { key }));
+  register(
+    handleChannelCalls(
+      communicationPort,
+      "CONNECT",
+      handler,
+    ),
+  );
+  return cleanup;
 }
 
-export { SwHttpAdapter, SwHttpDispatcher, SwPortDispatcher, SwPortHandler, callChannel, deserializeError, fromReadableStream, handleChannelCalls, handleHttpRequests, handleStreams, newChannel, newHttpClientStub, newHttpServerStub, newInvokationChannel, newRegistry, recieveData, sendData, sendHttpRequest, sendStream, serializeError, startHttpDispatcher, toReadableStream };
+export { callChannel, callHttpService, deserializeError, fromReadableStream, getRelayWindowMessageHandler, handleChannelCalls, handleHttpRequests, handleStreams, initHttpService, initServiceWorker, initServiceWorker1, initializeConnection, newHttpClientStub, newHttpServerStub, newInvokationChannel, newRegistry, newRemoteRelayChannel, newServiceWorkerPort, recieveData, registerConnectionsHandler, sendData, sendHttpRequest, sendStream, serializeError, splitServiceUrl, toReadableStream };