@statewalker/webrun-http-browser 0.1.0

package/public-relay/relay-sw.js

@@ -0,0 +1,343 @@
+import {
+  // serializeError, deserializeError,
+  callChannel,
+  handleChannelCalls,
+  newRegistry,
+  sendHttpRequest,
+} from "../dist/index.js";
+import { registerConnectionsHandler } from "./relay-lib.js";
+
+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 baseUrl = new URL("./", import.meta.url) + "";
+const clientsRegistry = newClientsRegistry(self);
+
+// 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
+
+const [register, clear] = newRegistry();
+
+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);
+}));
+
+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
+  };
+}
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  const params = splitServiceUrl(request.url);
+  const { key } = params;
+  if (key) {
+    event.respondWith((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",
+          },
+        });
+      }
+    })());
+  }
+});
+// self.onmessage = (event) => {
+//   console.log("SW MESSAGE:", event, event.ports);
+//   const [port] = event.ports || [];
+//   if (port) {
+//     port.onmessage = (ev) => {
+//       // const data = ev.data || {};
+//       console.log("Reply from the other side of the moon", ev);
+//       // port.postMessage({
+//       //   message: "Reply from the other side",
+//       //   ...data
+//       // })
+//     };
+//     port.postMessage({ message: "Message from the Service Worker HELL!" });
+//   }
+// };
+
+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",
+    });
+  }
+}
+
+// self.addEventListener("fetch", (event) => {
+//   console.log("fetching resource", event);
+//   const request = event.request;
+//   const requestUrl = request.url;
+//   if (requestUrl.match(/\/ping$/)) {
+//     event.respondWith((async () => {
+//       return new Response("pong", { status: 200 });
+//     })());
+//   } else if (requestUrl.indexOf(baseUrl) === 0) {
+//     const clientKey = requestUrl
+//       .substring(baseUrl.length)
+//       .replace(/^\/?([^\/]+).*$/, "$1");
+//     if (clientKey) {
+//       event.respondWith((async () => {
+//         try {
+//           const client = await clientsRegistry.getClient(clientKey);
+//           if (!client) { throw HttpError.errorResourceGone(); }
+//           const port = portsRegistry.getClientPort(client, "http");
+
+//           return new Response("pong", { status: 200 });
+//         } catch (error) {
+//           if (!(error instanceof HttpError)) {
+//             error = HttpError.errorInternalError(error);
+//           }
+//           console.error(error);
+//           return new Response(null, error.getResponseOptions());
+//         }
+//       })());
+//     }
+//   }
+//   // const response = new Response(
+//   //   `<p>This is a response that comes from your service worker! ${Date.now()}</p>`,
+//   //   {
+//   //     headers: { "Content-Type": "text/html" },
+//   //   },
+//   // );
+//   // event.respondWith(response);
+// });
+
+// --------------------------------------------
+// errors.js
+
+// --------------------------------------------
+
+function newClientsRegistry(self) {
+  const KEY = "clientsIds";
+
+  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.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+  <script type="module">
+    import { newServiceWorkerPort, initServiceWorker } from "./relay-lib.js";
+
+    const swUrl = new URL("./relay-sw.js", import.meta.url) + "";
+
+    let externalPort;
+    window.onmessage = async (ev) => {
+      if (ev.data.type === "CONNECT") {
+        const newExternalPort = (ev.ports || [])[0];
+        if (externalPort) {
+          newExternalPort.close();
+          return;
+        }
+        externalPort = newExternalPort;
+        await initServiceWorker(swUrl);
+        const serviceWorkerPort = newServiceWorkerPort();
+        serviceWorkerPort.onmessage = (event) => {
+          externalPort.postMessage(event.data, event.ports);
+        };
+
+        externalPort.onmessage = (event) => {
+          serviceWorkerPort.postMessage(event.data, event.ports);
+        };
+      }
+    };
+  </script>
+</body>
+
+</html>

package/src/data-calls.js

@@ -0,0 +1,36 @@
+import { deserializeError, serializeError } from "./errors.js";
+
+export async function callChannel(mainChannel, callType, params, ...transfers) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = (ev) => {
+      const { result, error } = ev.data;
+      if (error) reject(deserializeError(error));
+      else resolve(result);
+    };
+    mainChannel.postMessage({ type: callType, params }, [
+      channel.port2,
+      ...transfers,
+    ]);
+  });
+}
+
+export function handleChannelCalls(mainChannel, callType, handler) {
+  const messageListener = async (event) => {
+    if (!event.data || event.data.type !== callType) return;
+    const [port, ...transfers] = event.ports;
+    let response = {};
+    try {
+      const params = event.data.params;
+      response.result = await handler(event, params, ...transfers);
+    } catch (error) {
+      response.error = serializeError(error);
+    }
+    port.postMessage(response);
+  };
+  mainChannel.addEventListener("message", messageListener);
+  try {
+    mainChannel.start && mainChannel.start();
+  } catch (e) {}
+  return () => mainChannel.removeEventListener("message", messageListener);
+}

package/src/data-channels.js

@@ -0,0 +1,176 @@
+import { deserializeError, serializeError } from "./errors.js";
+import { recieveData, sendData } from "./data-send-recieve.js";
+
+export async function* sendStream(communicationPort, input, params = {}) {
+  const messageChannel = new MessageChannel();
+  communicationPort.postMessage({ type: "START_CALL", params }, [
+    messageChannel.port2,
+  ]);
+
+  const channel = newChannel(messageChannel.port1);
+  try {
+    await channel.start();
+    channel.sendAll(input);
+    yield* channel.recieveAll();
+  } finally {
+    await channel.close();
+  }
+}
+
+export function handleStreams(communicationPort, handler) {
+  const listener = async (event) => {
+    const { type, params } = event.data || {};
+    if (type !== "START_CALL") return;
+    const port = event.ports[0];
+    const channel = newChannel(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);
+  try {
+    communicationPort.start && communicationPort.start();
+  } catch (e) {}
+  return () => communicationPort.removeEventListener("message", listener);
+}
+
+/**
+ * This method creates and returns methods allowing to send and recieve data over the specified port.
+ * The main characteristics of the returned methods is that they properly manage backpressure - sender
+ * iterators are waiting to send the next value until the previous one is consumed on the other side.
+ * @param {*} port
+ * @returns an object with the following methods:
+ *  * `start` - starts the connection over the specified port
+ *  * `close`- stops all iterators and closes the port
+ *  * `recieveAll() : AsyncIterator` - returns an AsyncIterator over all values send by the peer
+ *  * `sendAll(it : AsyncIterator) : Promise<any>` - sends all values defined by the given
+ *     AsyncIterator to the peer
+ */
+export function newChannel(port) {
+  let listeners = [];
+  let iterators = [];
+
+  const notifyAll = async (data) => {
+    for (let listener of listeners) {
+      await listener(data);
+    }
+  };
+  const channel = newInvokationChannel(port, notifyAll);
+
+  const start = () => channel.start();
+
+  const close = async () => {
+    await notifyAll({ done: true });
+    [...iterators].forEach((it) => it.return && it.return());
+    await channel.close();
+  };
+
+  async function* recieveAll() {
+    yield* recieveData((listener) => {
+      listeners.push(listener);
+      return () => listeners = listeners.filter((l) => l !== listener);
+    });
+  }
+
+  async function sendAll(it) {
+    await sendData(
+      channel.invoke,
+      (async function* () {
+        try {
+          iterators.push(it);
+          yield* it;
+        } finally {
+          iterators = iterators.filter((i) => i !== it);
+        }
+      })(),
+    );
+  }
+  return {
+    start,
+    close,
+    recieveAll,
+    sendAll,
+  };
+}
+
+export function newInvokationChannel(port, handler = () => {
+  throw new Error("Handler not implemented");
+}) {
+  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;
+    if (type === MESSAGE_TYPE_REQUEST) {
+      try {
+        const { request } = data;
+        let result = await handler(request, ...(event.ports || []));
+        const [response, ...transfers] = Array.isArray(result)
+          ? result
+          : result !== undefined
+          ? [result]
+          : [];
+        port.postMessage(
+          { type: MESSAGE_TYPE_RESPONSE, callId, response },
+          transfers,
+        );
+      } catch (error) {
+        port.postMessage({
+          type: MESSAGE_TYPE_RESPONSE,
+          callId,
+          error: serializeError(error),
+        });
+      }
+    } else if (type === MESSAGE_TYPE_RESPONSE) {
+      const { callId, response, error } = data;
+      const request = requests[callId];
+      delete requests[callId];
+      if (request) {
+        error
+          ? request.reject(deserializeError(error))
+          : request.resolve(response);
+      }
+    }
+  };
+
+  const start = async () => {
+    port.addEventListener(EVENT_MESSAGE, listener);
+    await port.start();
+  };
+
+  const close = async () => {
+    port.removeEventListener(EVENT_MESSAGE, listener);
+    await port.close();
+  };
+
+  const invoke = async function (request = {}, ...transfers) {
+    const callId = ++requestCounter;
+    return new Promise((resolve, reject) => {
+      try {
+        requests[callId] = { resolve, reject };
+        port.postMessage(
+          { type: MESSAGE_TYPE_REQUEST, callId, request },
+          transfers,
+        );
+      } catch (error) {
+        reject(error);
+        delete request[callId];
+      }
+    });
+  };
+
+  return {
+    start,
+    close,
+    invoke,
+  };
+}

package/src/data-send-recieve.js

@@ -0,0 +1,28 @@
+import { iterate } from "@statewalker/utils";
+
+export async function* recieveData(onMessage) {
+  yield* iterate((iterator) => {
+    return onMessage(async ({ done = true, value, error } = {}) => {
+      if (error) {
+        await iterator.error(error);
+      } else if (done) {
+        await iterator.complete();
+      } else {
+        await iterator.next(value);
+      }
+    });
+  });
+}
+
+export async function sendData(send, it) {
+  let error;
+  try {
+    for await (let value of it) {
+      await send({ done: false, value });
+    }
+  } catch (err) {
+    error = err;
+  } finally {
+    await send({ done: true, error });
+  }
+}

package/src/errors.js

@@ -0,0 +1,13 @@
+export function serializeError(error) {
+  return Object.assign({
+    message: error,
+    stack: error.stack,
+  }, error);
+}
+
+export function deserializeError(error) {
+  if (typeof error === "string") {
+    error = { message: error };
+  }
+  return Object.assign(new Error(error.message), error);
+}

package/src/http-send-recieve.js

@@ -0,0 +1,40 @@
+import { handleStreams, sendStream } from "./data-channels.js";
+import { newHttpClientStub, newHttpServerStub } from "./http-stubs.js";
+
+async function* httpToIterator(params) {
+  const { options, content } = await params;
+  const encoder = new TextEncoder();
+  yield encoder.encode(JSON.stringify(options));
+  yield* content;
+}
+
+async function httpFromIterator(it) {
+  it = await it;
+  const { done, value } = await it.next();
+  let options = {};
+  if (!done && value) {
+    const decoder = new TextDecoder();
+    const str = decoder.decode(value);
+    options = JSON.parse(str);
+  }
+  return {
+    options,
+    content: it,
+  };
+}
+
+export function handleHttpRequests(communicationPort, handler) {
+  const serverStub = newHttpServerStub(handler);
+  return handleStreams(communicationPort, (it) => {
+    return httpToIterator(serverStub(httpFromIterator(it)));
+  });
+}
+
+export async function sendHttpRequest(communicationPort, request) {
+  const clientStub = newHttpClientStub(async (req) => {
+    return await httpFromIterator(
+      sendStream(communicationPort, httpToIterator(req)),
+    );
+  });
+  return await clientStub(request);
+}