@statewalker/webrun-http-browser 0.1.0

package/dist/index.min.js

@@ -0,0 +1,2 @@
+// @statewalker/webrun-http-browser v0.1.0 https://github.com/statewalker/statewalker-webrun-http-browser Copyright 2023 Mikhail Kotelnikov
+function e(e){return Object.assign({message:e,stack:e.stack},e)}function t(e){return"string"==typeof e&&(e={message:e}),Object.assign(new Error(e.message),e)}async function n(e,n,s,...r){return new Promise(((a,o)=>{const i=new MessageChannel;i.port1.onmessage=e=>{const{result:n,error:s}=e.data;s?o(t(s)):a(n)},e.postMessage({type:n,params:s},[i.port2,...r])}))}function s(t,n,s){const r=async t=>{if(!t.data||t.data.type!==n)return;const[r,...a]=t.ports;let o={};try{const e=t.data.params;o.result=await s(t,e,...a)}catch(t){o.error=e(t)}r.postMessage(o)};t.addEventListener("message",r);try{t.start&&t.start()}catch(e){}return()=>t.removeEventListener("message",r)}function r(e=console.error){let t=0;const n={},s=s=>{const r=t++;return n[r]=Object.assign((function(t){try{return delete n[r],!t&&s&&s()}catch(t){e(t)}}),{action:s})},r=e=>Object.values(n).forEach((t=>t.action===e&&t(!0))),a=()=>Object.values(n).forEach((e=>e()));return Object.assign([s,a,r],{register:s,clear:a,unregister:r})}async function*a(e){yield*async function*(e,t=[]){let n,s,r=async(e,n,r)=>{const a={error:e,value:n,done:r};return a.promise=new Promise((e=>a.notify=e)),await t.push(a),s&&s(),s=null,a.promise};const a=e=>r(void 0,e,!1),o=()=>r(void 0,void 0,!0),i=e=>r(e,void 0,!0),c=e(Object.assign([a,o,i],{next:a,complete:o,error:i}));let l;try{for(;;)if(l=await t.shift(),l)try{if(l.error)throw l.error;if(l.done)break;yield l.value}finally{l.notify(!0)}else await(n=s?n:new Promise((e=>s=e)))}finally{for(s&&s(),r=()=>!1,"function"==typeof c&&await c();l=await t.shift();)l.notify(!1)}}((t=>e((async({done:e=!0,value:n,error:s}={})=>{s?await t.error(s):e?await t.complete():await t.next(n)}))))}async function o(e,t){let n;try{for await(let n of t)await e({done:!1,value:n})}catch(e){n=e}finally{await e({done:!0,error:n})}}async function*i(e,t,n={}){const s=new MessageChannel;e.postMessage({type:"START_CALL",params:n},[s.port2]);const r=l(s.port1);try{await r.start(),r.sendAll(t),yield*r.recieveAll()}finally{await r.close()}}function c(e,t){const n=async e=>{const{type:n,params:s}=e.data||{};if("START_CALL"!==n)return;const r=l(e.ports[0]);try{await r.start();const e=r.recieveAll(),n=await t(e,s);await r.sendAll(n)}finally{await r.close()}};e.addEventListener("message",n);try{e.start&&e.start()}catch(e){}return()=>e.removeEventListener("message",n)}function l(e){let t=[],n=[];const s=async e=>{for(let n of t)await n(e)},r=u(e,s);return{start:()=>r.start(),close:async()=>{await s({done:!0}),[...n].forEach((e=>e.return&&e.return())),await r.close()},recieveAll:async function*(){yield*a((e=>(t.push(e),()=>t=t.filter((t=>t!==e)))))},sendAll:async function(e){await o(r.invoke,async function*(){try{n.push(e),yield*e}finally{n=n.filter((t=>t!==e))}}())}}}function u(n,s=(()=>{throw new Error("Handler not implemented")})){const r="REQUEST",a="RESPONSE",o="message",i={};let c=0;const l=async o=>{const c=o.data||{},{type:l,callId:u}=c;if(l===r)try{const{request:e}=c;let t=await s(e,...o.ports||[]);const[r,...i]=Array.isArray(t)?t:void 0!==t?[t]:[];n.postMessage({type:a,callId:u,response:r},i)}catch(t){n.postMessage({type:a,callId:u,error:e(t)})}else if(l===a){const{callId:e,response:n,error:s}=c,r=i[e];delete i[e],r&&(s?r.reject(t(s)):r.resolve(n))}};return{start:async()=>{n.addEventListener(o,l),await n.start()},close:async()=>{n.removeEventListener(o,l),await n.close()},invoke:async function(e={},...t){const s=++c;return new Promise(((a,o)=>{try{i[s]={resolve:a,reject:o},n.postMessage({type:r,callId:s,request:e},t)}catch(t){o(t),delete e[s]}}))}}}function d(e){return new ReadableStream({type:"bytes",async pull(t){let n=!1;try{for(;;){const n=await e.next();if(!n||n.done)break;t.enqueue(await n.value)}}catch(e){n=!0,t.error(e)}finally{!n&&t.close()}}})}async function*h(e){const t=await e.getReader();let n,s;for(;({done:n,value:s}=await t.read())&&!n;)yield await s}function f(e){return async t=>{t=await t;const n=["url","method","mode","credentials","cache","redirect","referrer","referrerPolicy","integrity","keepalive"].reduce(((e,n)=>{const s=t[n];return void 0!==s&&(e[n]=s),e}),{}),s=t.body?h(t.body):[],r=await e({options:n,content:s});let a=null,o={};if(r){o=r.options;const e=r.content;"HEAD"!==n.method&&"OPTIONS"!==n.method?a=d(e):e&&e.return&&e.return()}else o={status:404,statusText:"Error 404: Not Found"};return new Response(a,o)}}function y(e){return async t=>{const{options:n,content:s}=await t;let r;const{url:a,mode:o}=n;delete n.mode,delete n.url,"GET"!==n.method&&"HEAD"!==n.method&&"OPTIONS"!==n.method?(r=d(s),n.duplex="half"):s&&s.return&&s.return();const i=new Request(a,{...n,body:r}),c=await e(i);return{options:{status:c.status,statusText:c.statusText,headers:Object.fromEntries([...c.headers])},content:await h(await c.body)}}}async function*p(e){const{options:t,content:n}=await e,s=new TextEncoder;yield s.encode(JSON.stringify(t)),yield*n}async function w(e){e=await e;const{done:t,value:n}=await e.next();let s={};if(!t&&n){const e=(new TextDecoder).decode(n);s=JSON.parse(e)}return{options:s,content:e}}function g(e,t){const n=y(t);return c(e,(e=>p(n(w(e)))))}async function v(e,t){const n=f((async t=>await w(i(e,p(t)))));return await n(t)}function m(e){return new Promise(((t,n)=>{e.oncomplete=e.onsuccess=()=>t(e.result),e.onabort=e.onerror=()=>n(e.error)}))}let _;function I(){return _||(_=function(e,t){const n=indexedDB.open(e);n.onupgradeneeded=()=>n.result.createObjectStore(t);const s=m(n);return(e,n)=>s.then((s=>n(s.transaction(t,e).objectStore(t))))}("keyval-store","keyval")),_}class C{constructor(e){if(this.options=e,!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 e=this.options.serviceWorkerUrl?new URL(this.options.serviceWorkerUrl):new URL("./index-sw.js",this.rootUrl);this._serviceWorkerUrl=e+""}return this._serviceWorkerUrl}async _newCommunicationChannel(){const e=new MessageChannel;return[e.port1,e.port2]}async _setCommunicationPort(e){await this.options.bindPort(e)}async _updateCommunicationChannel(){if(!this._serviceWorker)return;const[e,t]=await this._newCommunicationChannel();await this._setCommunicationPort(e),await n(this._serviceWorker,"UPDATE_COMMUNICATION_PORT",this._getRegistrationInfo(),t)}_getRegistrationInfo(){return{key:this.key}}async start(){return this._registrationPromise=this._registrationPromise||(async()=>{const[e,t]=r();this._cleanupRegistrations=t,e((()=>this._cleanupRegistrations=null));const n=await navigator.serviceWorker.register(this.serviceWorkerUrl,{scope:this.scope});e((()=>n.unregister())),e(s(navigator.serviceWorker,"UPDATE_COMMUNICATION_PORT",(async(e,t,n)=>(console.log("[UPDATE_COMMUNICATION_PORT]",n),this._setCommunicationPort(n),this._getRegistrationInfo())))),this._serviceWorker=await async function(){return await new Promise((e=>{const t=navigator.serviceWorker;if(t.controller)e(t.controller);else{const n=()=>{e(t.controller),t.removeEventListener("controllerchange",n),t.oncontrollerchange=null};t.addEventListener("controllerchange",n),t.oncontrollerchange=n}}))}(),await async function(e){const t=()=>"activated"===e.state;await new Promise((async n=>{t()?n():e.onstatechange=()=>{t()&&(e.onstatechange=null,n())}}))}(this._serviceWorker),await this._updateCommunicationChannel()})()}async stop(){this._cleanupRegistrations&&this._cleanupRegistrations();const e=await navigator.serviceWorker.getRegistrations();for(let t of e)try{await t.unregister()}catch(e){console.log("Service Worker registration failed: ",e)}}}class k{constructor({self:e,log:t}){this.self=e,this.log=t,this.handlersIndex=new Map}get scope(){return new URL("./",import.meta.url)+""}async loadChannelInfo(e){let t;await this._checkActivation();for(let n of this.handlersIndex.values()){if(n.key!==e)continue;const s=n.clientId;if(!await self.clients.get(s))throw this.handlersIndex.delete(s),Object.assign(new Error("Error 410: Resource Gone"),{status:410});t=n;break}return t}start(){this._cleanup=s(this.self,"UPDATE_COMMUNICATION_PORT",(async(e,t,n)=>{const s=e.source.id;return this.log("[UPDATE_COMMUNICATION_PORT]",s,t),await this._updateChannelInfo({...t,port:n,clientId:s}),{...t}})),this.self.onmessage=()=>{},this.self.addEventListener("install",(e=>{this.log("Skip waiting on install.",e),this.self.skipWaiting()})),this.self.addEventListener("activate",(async e=>{this.log("Claim control over all clients.",e,clients,this.self.clients),e.waitUntil((async()=>{await this.self.clients.claim(),await this._checkActivation()})())}))}async stop(){this._cleanup&&(await this._cleanup(),this._cleanup=void 0)}async _checkActivation(){return this._activationPromise=this._activationPromise||this._activate()}async _activate(){this.log("[checkActivation]");let e=await this._loadClientIds();for(let[t,s]of e.entries()){const e=new MessageChannel,r=e.port1,a=await n(s,"UPDATE_COMMUNICATION_PORT",{},e.port2);await this._updateChannelInfo({...a,port:r,clientId:t})}}async _updateChannelInfo(e){this.log("[updateClientInfo]",e),this.handlersIndex.set(e.clientId,e),await this._updateClientIds([])}async _loadClientIds(){const e=new Set(await function(e,t=I()){return t("readonly",(t=>m(t.get(e))))}("clientIds")||[]);return await this._updateClientIds(e)}async _updateClientIds(e){e=new Set(e);for(let t of this.handlersIndex.keys())e.add(t);const t=new Map;for(let n of e){const e=await this.self.clients.get(n);e?t.set(n,e):this.handlersIndex.delete(n)}return await function(e,t,n=I()){return n("readwrite",(n=>(n.put(t,e),m(n.transaction))))}("clientIds",[...t.keys()].sort()),t}}class E extends C{constructor(e){super(e),this._handlers=new Map}async _setCommunicationPort(e){this._cleanupRequestChannel&&this._cleanupRequestChannel(),this._cleanupRequestChannel=g(e,this._handleHttpRequest.bind(this))}async _handleHttpRequest(e){const t=e.url;let n;for(let e of this._handlers.entries()){const[s]=e;if(0===t.indexOf(s)){n=e[1];break}}return n?n(e):new Response(null,{status:404,statusMessage:"Error 404: Not found"})}async register(e,t){e="./"+(e||"").replace(/^[\.\/]+/,"");const n=this.rootUrl,s=new URL(e,n)+"";return this._handlers.set(s,t),{baseUrl:s,prefix:e,async remove(){this._handlers.delete(s)}}}}class O extends k{constructor(e){super(e)}start(){super.start(),this.self.addEventListener("fetch",this._handleFetchEvent.bind(this))}_handleFetchEvent(e){e.respondWith((async()=>{const t=e.request;try{const e=t.url,n=this.scope;let s;if(0===e.indexOf(n)){const t=e.substring(n.length).replace(/^\/?([^\/]+).*$/,"$1");s=await this.loadChannelInfo(t)}if(s&&s.port)return await v(s.port,t);{const n=new Request(e,{method:t.method,headers:t.headers,body:t.body,referrer:t.referrer,referrerPolicy:t.referrerPolicy,credentials:t.credentials,cache:t.cache,redirect:t.redirect,integrity:t.integrity});return await fetch(n)}}catch(e){return console.error(e),new Response(null,{status:500,statusText:"Error 500: Internal error"})}})())}}function R({self:e,log:t}){const n=new O({self:e,log:t});return n.start(),()=>{n.stop()}}export{E as SwHttpAdapter,O as SwHttpDispatcher,k as SwPortDispatcher,C as SwPortHandler,n as callChannel,t as deserializeError,h as fromReadableStream,s as handleChannelCalls,g as handleHttpRequests,c as handleStreams,l as newChannel,f as newHttpClientStub,y as newHttpServerStub,u as newInvokationChannel,r as newRegistry,a as recieveData,o as sendData,v as sendHttpRequest,i as sendStream,e as serializeError,R as startHttpDispatcher,d as toReadableStream};

package/index.js

@@ -0,0 +1 @@
+export * from './src/index.js';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@statewalker/webrun-http-browser",
+  "version": "0.1.0",
+  "description": "Service-worker-based HTTP server simulation for browsers",
+  "keywords": [],
+  "homepage": "https://github.com/statewalker/statewalker-webrun-http-browser",
+  "author": {
+    "name": "Mikhail Kotelnikov",
+    "email": "mikhail.kotelnikov@gmail.com"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist/**/package.json",
+    "dist/**/*.js",
+    "public",
+    "public-relay",
+    "src/**/*.js",
+    "index.js"
+  ],
+  "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"
+  },
+  "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"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/abc.txt

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

package/public/index-service-worker.js

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

package/public/index.html

@@ -0,0 +1,132 @@
+<!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 newHttpAdapter from "./index.js";
+    import { v4 as uuidv4 } from "https://unpkg.com/uuid@9.0.0/dist/esm-browser/index.js";
+
+    document.addEventListener("DOMContentLoaded", main);
+    // Promise.resolve().then(main).catch(console.error);
+
+    async function main() {
+
+      const key = uuidv4();
+      const prefix = `/${key}/`; // "/sw-http/"
+      const httpAdapter= newHttpAdapter({ key });
+      await httpAdapter.start();
+
+      function showMessage(message) {
+        const elm = document.body.querySelector("#messages");
+        elm.innerHTML = message;
+      }
+      showMessage("No messages yet... :(")
+
+      window.addEventListener("message", receiveMessage, false);
+      function receiveMessage(event) {
+        // const [port] = event.ports || [];
+        if (event.ports) {
+          event.ports[0]?.postMessage("Message back from the IFrame");
+          console.log('EVENT WITH PORTS:', event, event.ports);
+        }
+        showMessage(`Message from "${event.origin}". Data:"${JSON.stringify(event.data)}" !`)
+      }
+
+      const registration = await httpAdapter.register(prefix, async (request) => {
+        const requestUrl = new URL(request.url);
+        const elm = document.querySelector("#counter");
+        elm.innerHTML = `URL: ${requestUrl}<br />Last Request Time: ${Date.now()}`;
+
+        const { pathname } = requestUrl;
+        if (request.method === 'GET' && pathname.match(/\.js$/)) {
+          const code = `export default function sayHello() { return 'Hello, there ${Date.now()}!'; }`
+          return new Response(code, {
+            headers: {
+              "Content-Type": "text/javascript",
+              "X-Foo-Bar": "baz"
+            }
+          })
+        } else if (request.method === 'POST') {
+          const body = await request.text();
+          console.log('[client] Body:', body);
+          const obj = {
+            url: request.url + '',
+            method: request.method,
+            message: body.toUpperCase(),
+            headers: Object.fromEntries([...request.headers])
+          }
+          return new Response(JSON.stringify(obj, null, 2), {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Foo-Bar": "baz"
+            }
+          })
+        }
+
+        return new Response("Hello, world " + Date.now(), {
+          headers: {
+            "Content-Type": "text/plain",
+            "X-Foo-Bar": "baz"
+          }
+        })
+
+      })
+
+      const { baseUrl } = registration;
+
+      const btn = document.querySelector("#button");
+      const panel = document.querySelector("#panel");
+      const info = document.querySelector("#info").innerText = baseUrl;
+
+      btn.addEventListener("click", async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const fetchUrl = new URL("./data-calls.js", baseUrl) + '';
+        console.log('Fetch URL:', fetchUrl);
+        const res = await fetch(fetchUrl, {
+          // method: 'POST',
+          // body: "Hello, there!",
+          // headers: {
+          //   "Content-Type": "text/plain"
+          // }
+        });
+        const content = await res.text();
+        panel.innerText = content;
+      })
+      await new Promise(r => setTimeout(r, 2000));
+
+      // (async function () {
+      //   try {
+      //     const scriptUrl = new URL("./xyz/sayHello.js", baseUrl) + '';
+      //     console.log('>TF', scriptUrl);
+      //     await new Promise(r => setTimeout(r, 2000));
+      //     const { default: sayHello } = await import(scriptUrl);
+      //     console.log(sayHello);
+      //     console.log(sayHello())
+      //   } catch (error) {
+      //     console.error(error);
+      //   }
+      // })();
+
+
+    }
+
+  </script>
+
+</body>
+
+</html>

package/public/index.js

@@ -0,0 +1,9 @@
+import { SwHttpAdapter } from "../dist/index.js";
+
+export default function (options) {
+  return new SwHttpAdapter({
+    serviceWorkerUrl: new URL("./index-service-worker.js", import.meta.url) +
+      "",
+    ...options,
+  });
+}

package/public-relay/heartbeat.js

@@ -0,0 +1,30 @@
+import * as workerTimer from "https://unpkg.com/worker-timers@7.0.74/build/es2019/module.js?module";
+
+export function startHeartbit({
+  timeout = 10 * 1000,
+  url = "./ping", // 10 seconds
+}) {
+  return callPeriodically(async () => {
+    const res = await fetch(url);
+  }, timeout);
+}
+
+async function callPeriodically(action, timeout) {
+  let timerId, stopped = false;
+  async function run() {
+    try {
+      await action();
+    } catch (err) {
+      console.error(err);
+    }
+    timerId = (!stopped) ? workerTimer.setTimeout(run, timeout) : 0;
+  }
+  run();
+  return () => {
+    stopped = true;
+    if (timerId) {
+      workerTimer.clearTimeout(timerId);
+      timerId = 0;
+    }
+  };
+}

package/public-relay/relay-lib.js

@@ -0,0 +1,188 @@
+import {
+  callChannel,
+  handleChannelCalls,
+  handleHttpRequests,
+  newRegistry,
+  sendHttpRequest,
+} from "../dist/index.js";
+
+export 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;
+}
+
+export async function initServiceWorker(swUrl) {
+  const {
+    installing,
+    waiting,
+    active,
+  } = await navigator.serviceWorker.register(swUrl, {
+    type: "module",
+  });
+  (installing || waiting || active).addEventListener("statechange", (e) => {
+    console.log("state", e.target.state);
+  });
+
+  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;
+    }
+  });
+  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);
+      };
+    }
+  });
+}
+
+export async function initHttpService(handler, {
+  key,
+  port,
+}) {
+  return await registerConnectionsHandler({
+    key,
+    communicationPort: port,
+    handler: async (event, data, callPort) => {
+      handleHttpRequests(callPort, handler);
+      return true;
+    },
+  });
+}
+
+export async function callHttpService(request, {
+  key,
+  port,
+}) {
+  const callPort = await initializeConnection({
+    key,
+    communicationPort: port,
+  });
+  const result = await sendHttpRequest(callPort, request);
+  return result;
+}
+
+export 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],
+    );
+  });
+  return {
+    port: messageChannel.port2,
+    close: () => {
+      container.parentElement && container.parentElement.removeChild(container);
+      messageChannel.port1.close();
+      messageChannel.port2.close();
+    },
+  };
+
+  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 {
+      iframe,
+      promise: new Promise((resolve, reject) => {
+        try {
+          iframe.onerror = reject;
+          iframe.onload = () => resolve(iframe);
+        } catch (error) {
+          reject(error);
+        }
+      }),
+    };
+  }
+}
+// -------------------------------------------------------
+
+export 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;
+}
+
+export 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;
+}