@statewalker/webrun-http-browser 0.1.0 → 0.2.1

package/src/{data-channels.js → core/data-channels.js}

@@ -51,7 +51,7 @@ export function handleStreams(communicationPort, handler) {
  *  * `sendAll(it : AsyncIterator) : Promise<any>` - sends all values defined by the given
  *     AsyncIterator to the peer
  */
-export function newChannel(port) {
+function newChannel(port) {
   let listeners = [];
   let iterators = [];
 
@@ -60,7 +60,10 @@ export function newChannel(port) {
       await listener(data);
     }
   };
-  const channel = newInvokationChannel(port, notifyAll);
+  const channel = newInvokationChannel({
+    port,
+    handler: notifyAll,
+  });
 
   const start = () => channel.start();
 
@@ -98,15 +101,20 @@ export function newChannel(port) {
   };
 }
 
-export function newInvokationChannel(port, handler = () => {
-  throw new Error("Handler not implemented");
+export 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;
@@ -143,17 +151,25 @@ export 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 };

package/src/core/index.js

@@ -0,0 +1,4 @@
+export * from "./data-calls.js";
+export * from "./data-channels.js";
+export * from "./data-send-recieve.js";
+export * from "./errors.js";

package/src/http/HttpError.js

@@ -0,0 +1,59 @@
+export class HttpError extends Error {
+  constructor(options) {
+    super(options.message);
+    this.status = options.status;
+    this.statusText = options.statusText;
+  }
+  getResponseOptions(options = {}) {
+    return Object.assign(this.toJson(), options);
+  }
+  toJson() {
+    return {
+      status: this.status,
+      statusText: this.statusText,
+      message: this.message,
+    };
+  }
+
+  static fromError(error) {
+    if (!(error instanceof HttpError)) {
+      error = new HttpError(Object.assign({
+        status: 500,
+        statusText: "Bad Request",
+        reason: error.message,
+      }));
+    }
+    return error;
+  }
+
+  static errorResourceNotFound(options = {}) {
+    return new HttpError({
+      status: 404,
+      statusText: "Error 404: Resource not found",
+      ...options,
+    });
+  }
+  static errorForbidden(options = {}) {
+    return new HttpError({
+      status: 403,
+      statusText: "Error 403: Forbidden",
+      ...options,
+    });
+  }
+
+  static errorResourceGone(options = {}) {
+    return new HttpError({
+      status: 410,
+      statusText: "Error 410: Resource Gone",
+      ...options,
+    });
+  }
+
+  static errorInternalError(options) {
+    return new HttpError({
+      ...options,
+      status: 500,
+      statusText: "Error 500: Internal error",
+    });
+  }
+}

package/src/{http-send-recieve.js → http/http-send-recieve.js}

@@ -1,4 +1,4 @@
-import { handleStreams, sendStream } from "./data-channels.js";
+import { handleStreams, sendStream } from "../core/data-channels.js";
 import { newHttpClientStub, newHttpServerStub } from "./http-stubs.js";
 
 async function* httpToIterator(params) {

package/src/http/index.js

@@ -0,0 +1,3 @@
+export * from "./http-send-recieve.js";
+export * from "./http-stubs.js";
+export * from "./readable-streams.js";

package/src/index.js

@@ -1,12 +1,7 @@
-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";
+export * from "./core/index.js"
+export * from "./http/index.js";
+// export * from "./sw/index.js";
+export * from "./relay/index.js";
 
 import { newRegistry } from "@statewalker/utils";
 export { newRegistry };

package/src/relay/index-sw.js

@@ -0,0 +1,216 @@
+import { newRegistry } from "@statewalker/utils";
+import { get, set } from "idb-keyval";
+import { callChannel, handleChannelCalls } from "../core/data-calls.js";
+import { sendHttpRequest } from "../http/http-send-recieve.js";
+import { splitServiceUrl } from "./splitServiceUrl.js";
+import { HttpError } from "../http/HttpError.js";
+
+export function startRelayServiceWorker(self) {
+  const [register, clear] = newRegistry();
+
+  if (typeof self.skipWaiting === "function") {
+    console.log("self.skipWaiting() is supported.");
+    self.addEventListener("install", (e) => {
+      // See https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-global-scope-skipwaiting
+      e.waitUntil(self.skipWaiting());
+    });
+  } else {
+    console.log("self.skipWaiting() is not supported.");
+  }
+
+  if (self.clients && (typeof self.clients.claim === "function")) {
+    console.log("self.clients.claim() is supported.");
+    self.addEventListener("activate", (e) => {
+      // See https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#clients-claim-method
+      e.waitUntil(self.clients.claim());
+    });
+  } else {
+    console.log("self.clients.claim() is not supported.");
+  }
+
+  const clientsRegistry = newClientsRegistry({
+    self,
+    get,
+    set,
+  });
+
+  // This listener handles the following message types:
+  // * registration: registers new clients as service providers
+  // * handles service calls rounting:
+  //   - it gets the clientKey defined in the call
+  //   - it uses the serviceKey to get the service-specifc channel
+  //   - it creates a new message channel and sent its ports to peers
+
+  register(handleChannelCalls(self, "REGISTER", async (event, data) => {
+    return await clientsRegistry.addClient(data.key, event.source);
+  }));
+  register(handleChannelCalls(self, "UNREGISTER", async (event, data) => {
+    return await clientsRegistry.removeClient(data.key);
+  }));
+
+  // Transfers all parameters (and ports) to the target client.
+  register(handleChannelCalls(self, "CONNECT", async (event, data, port) => {
+    const { key } = data;
+    const client = await clientsRegistry.getClient(key);
+    if (!client) {
+      throw new Error(`Target client was not found. Target key: "${key}".`);
+    }
+    return await callChannel(client, "CONNECT", data, port);
+  }));
+
+  const fetchListener = (event) => {
+    const request = event.request;
+    const params = splitServiceUrl(request.url);
+    const { key } = params;
+    if (key) {
+      const handler = async () => {
+        try {
+          const channel = new MessageChannel();
+          const client = await clientsRegistry.getClient(key);
+          if (!client) {
+            throw HttpError.errorResourceGone(params);
+          }
+          const data = {
+            type: "http",
+            key,
+          };
+          if (!await callChannel(client, "CONNECT", data, channel.port2)) {
+            throw HttpError.errorForbidden(params);
+          }
+          return await sendHttpRequest(channel.port1, request);
+        } catch (error) {
+          error = HttpError.fromError(error);
+          const options = error.getResponseOptions(params);
+          return new Response(JSON.stringify(options), {
+            ...options,
+            headers: {
+              "Content-Type": "text/javascript",
+            },
+          });
+        }
+      };
+      event.respondWith(handler());
+    }
+  };
+  self.addEventListener("fetch", fetchListener);
+  register(() => self.removeEventListener("fetch", fetchListener));
+
+  return clear;
+}
+
+// --------------------------------------------
+// errors.js
+
+// --------------------------------------------
+
+function newClientsRegistry({
+  self,
+  key = "clientsIds",
+  get,
+  set,
+}) {
+  let _index;
+  async function loadClientsIndex() {
+    if (!_index) {
+      const entries = (await get(key)) || [];
+      _index = Object.fromEntries(entries);
+    }
+    return _index;
+  }
+  async function storeClientsIndex() {
+    const index = await loadClientsIndex();
+    const entries = Object.entries(index);
+    await set(key, entries);
+    return index;
+  }
+
+  async function addClient(clientKey, client) {
+    const index = await loadClientsIndex();
+    const clientId = client.id;
+    let result = false;
+    if (!(clientId in index)) {
+      index[clientKey] = clientId;
+      await storeClientsIndex();
+      result = true;
+    }
+    return result;
+  }
+
+  async function removeClient(clientKey) {
+    const index = await loadClientsIndex();
+    let result = false;
+    if (clientKey in index) {
+      delete index[clientKey];
+      await storeClientsIndex();
+      result = true;
+    }
+    return result;
+  }
+
+  async function getClient(clientKey) {
+    const index = await loadClientsIndex();
+    const clientId = index[clientKey];
+    const client = await self.clients.get(clientId);
+    if (!client) {
+      delete index[clientKey];
+      await storeClientsIndex();
+    }
+    return client;
+  }
+
+  return {
+    getClient,
+    addClient,
+    removeClient,
+  };
+}
+// ----------------------------------------------------
+// Content of the "idb-keyval" package
+// import { get, set } from "idb-keyval";
+
+// 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);
+//   });
+// }

package/{public-relay/relay-lib.js → src/relay/index.js}

@@ -1,10 +1,10 @@
+import { newRegistry } from "@statewalker/utils";
+import { callChannel, handleChannelCalls } from "../core/data-calls.js";
 import {
-  callChannel,
-  handleChannelCalls,
   handleHttpRequests,
-  newRegistry,
   sendHttpRequest,
-} from "../dist/index.js";
+} from "../http/http-send-recieve.js";
+export * from "./splitServiceUrl.js";
 
 export function newServiceWorkerPort() {
   // Bind the service worker to
@@ -18,13 +18,14 @@ export function newServiceWorkerPort() {
   return channel.port2;
 }
 
-export async function initServiceWorker(swUrl) {
+export async function initServiceWorker1({ swUrl, scopeUrl, type }) {
   const {
     installing,
     waiting,
     active,
   } = await navigator.serviceWorker.register(swUrl, {
-    type: "module",
+    // type: "module",
+    scope: scopeUrl,
   });
   (installing || waiting || active).addEventListener("statechange", (e) => {
     console.log("state", e.target.state);
@@ -59,6 +60,50 @@ export async function initServiceWorker(swUrl) {
   });
 }
 
+export 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;
+      }
+    });
+  }
+
+  // ------------------------------
+  // 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();
+        };
+      }
+    });
+  }
+}
+
 export async function initHttpService(handler, {
   key,
   port,
@@ -85,9 +130,38 @@ export async function callHttpService(request, {
   return result;
 }
 
+export 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);
+      };
+
+      externalPort.onmessage = (event) => {
+        serviceWorkerPort.postMessage(event.data, event.ports);
+      };
+    }
+  };
+}
+
 export async function newRemoteRelayChannel({
-  baseUrl = new URL("./", import.meta.url),
-  url = new URL("./relay.html", baseUrl),
+  baseUrl = new URL("../public-relay/", import.meta.url),
+  url = new URL("relay.html", baseUrl),
   container = document.body,
 } = {}) {
   const messageChannel = new MessageChannel();

package/src/relay/splitServiceUrl.js

@@ -0,0 +1,24 @@
+export 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,
+  };
+}

package/src/{http-sw-dispatcher.js → sw/http-sw-dispatcher.js}

@@ -1,4 +1,4 @@
-import { handleHttpRequests, sendHttpRequest } from "./http-send-recieve.js";
+import { handleHttpRequests, sendHttpRequest } from "../http/http-send-recieve.js";
 import { SwPortDispatcher, SwPortHandler } from "./sw-dispatcher.js";
 
 export class SwHttpAdapter extends SwPortHandler {

package/src/{sw-dispatcher.js → sw/sw-dispatcher.js}

@@ -1,6 +1,6 @@
 import { newRegistry } from "@statewalker/utils";
-import { callChannel, handleChannelCalls } from "./data-calls.js";
 import { get, set } from "idb-keyval";
+import { callChannel, handleChannelCalls } from "../core/data-calls.js";
 
 export class SwPortHandler {
   constructor(options) {

package/public/abc.txt

@@ -1 +0,0 @@
-qlsdjflqsjdfl

package/public/index-service-worker.js

@@ -1 +0,0 @@
-importScripts("../dist/index-sw-umd.js")