reflected 0.0.0 → 0.0.2

package/src/main/sender.js

@@ -0,0 +1,38 @@
+import withResolvers from '@webreflection/utils/with-resolvers';
+import i32 from 'weak-id/i32';
+
+import SHARED_CHANNEL from '../channel.js';
+
+const { isArray } = Array;
+
+const onsend = value => value;
+
+export default class Sender extends Worker {
+  #next;
+  #requests;
+  constructor(scriptURL, options) {
+    super(scriptURL, options);
+    this.#next = i32();
+    this.#requests = new Map;
+    if (!options.onsend) options.onsend = onsend;
+    super.addEventListener('message', async event => {
+      const { data } = event;
+      if (isArray(data) && data[0] === SHARED_CHANNEL) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        const [id, payload] = data[1];
+        const resolve = this.#requests.get(id);
+        this.#requests.delete(id);
+        resolve(await options.onsend(payload));
+      }
+    });
+  }
+
+  send(payload, ...rest) {
+    const id = this.#next();
+    const { promise, resolve } = withResolvers();
+    this.#requests.set(id, resolve);
+    super.postMessage([SHARED_CHANNEL, [id, payload]], ...rest);
+    return promise;
+  }
+}

package/src/main/shared.js

@@ -1,36 +1,94 @@
-import withResolvers from '/node_modules/@webreflection/utils/src/with-resolvers.js';
+import withResolvers from '@webreflection/utils/with-resolvers';
 
 const { notify, store } = Atomics;
-const { isView } = ArrayBuffer;
 
-const minByteLength = Int32Array.BYTES_PER_ELEMENT * 2;
+export const minByteLength = Int32Array.BYTES_PER_ELEMENT * 2;
 
-export const SAB = ({ minByteLength = 1032, maxByteLength = 8200 }) =>
-  new SharedArrayBuffer(minByteLength, { maxByteLength });
+export const SAB = ({
+  initByteLength = 1024,
+  maxByteLength = (1024 * 8)
+}) =>
+  new SharedArrayBuffer(
+    minByteLength + initByteLength,
+    { maxByteLength: minByteLength + maxByteLength }
+  );
+
+/**
+ * @typedef {Object} ServiceWorkerOptions see https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#options
+ * @property {string} [url] will use the `serviceWorker` value if that is a `string`, otherwise it refers to where the service worker file is located.
+ * @property {'classic' | 'module'} [type]
+ * @property {'all' | 'imports' | 'none'} [updateViaCache]
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {(payload: unknown) => Int32Array | Promise<Int32Array>} onsync invoked when the worker expect a response as `Int32Array` to populate the SharedArrayBuffer with.
+ * @property {(payload: unknown) => unknown | Promise<unknown>} [onsend] invoked when the worker replies to a `worker.send(data)` call.
+ * @property {number} [initByteLength=1024] defines the initial byte length of the SharedArrayBuffer.
+ * @property {number} [maxByteLength=8192] defines the maximum byte length (growth) of the SharedArrayBuffer.
+ * @property {string | ServiceWorkerOptions} [serviceWorker] defines the service worker to use as fallback if SharedArrayBuffer is not supported. If not defined, the `async` fallback will be used so that no `sync` operations from the worker will be possible.
+ */
+
+/**
+ * Initialize the worker channel communication and resolves with the worker instance.
+ * @template T
+ * @param {T} Worker
+ * @returns
+ */
+export const bootstrap = Worker => {
+  /**
+   * @param {string} scriptURL
+   * @param {Options} options
+   * @returns
+   */
+  return (scriptURL, options) => {
+    const { promise, resolve } = withResolvers();
+    // @ts-ignore
+    new Worker(scriptURL, options, resolve);
+    return /** @type {Promise<T>} */(promise);
+  };
+};
 
 export const handler = (sab, options, useAtomics) => {
   const i32a = new Int32Array(sab);
-  return async ({ data }, ...rest) => {
-    let result = await options.ondata(data, ...rest);
-    if (!isView(result)) result = new Int32Array(result);
-    const { byteLength } = result.buffer;
-    const requiredByteLength = byteLength + minByteLength;
+  return async ({ data }) => {
+    const result = await options.onsync(data);
+    const length = result.length;
+    const requiredByteLength = minByteLength + result.buffer.byteLength;
     if (sab.byteLength < requiredByteLength) sab.grow(requiredByteLength);
     i32a.set(result, 2);
     if (useAtomics) {
-      store(i32a, 1, result.length);
+      store(i32a, 1, length);
       store(i32a, 0, 1);
       notify(i32a, 0);
     }
+    else {
+      i32a[1] = length;
+      i32a[0] = 1;
+    }
   };
 };
 
-export const post = (sab, options) => [sab, { ...options, ondata: void 0 }];
+const isOK = value => {
+  switch (typeof value) {
+    case 'symbol':
+    case 'function':
+      return false;
+  }
+  return true;
+};
 
-export const url = (scriptURL, reflected) => {
+export const post = (sab, options) => {
+  const opts = {};
+  for (const key in options) {
+    const value = options[key];
+    if (isOK(key) && isOK(value)) opts[key] = value;
+  }
+  return [sab, opts];
+};
+
+export const url = (scriptURL, reflected, options) => {
   const url = new URL(scriptURL, location.href);
   url.searchParams.set('reflected', reflected);
-  return url;
+  return [url, { ...options, type: 'module' }];
 };
-
-export { withResolvers };

package/src/main/xhr.js

@@ -0,0 +1,101 @@
+import withResolvers from '@webreflection/utils/with-resolvers';
+import { Worker as AsyncWorker } from './async.js';
+
+import SHARED_CHANNEL from '../channel.js';
+import SAB from './sab.js';
+import Sender from './sender.js';
+
+import { handler, post, url } from './shared.js';
+import { randomUUID } from '../shared.js';
+
+const CHANNEL = 'xhr';
+
+const channels = new Map;
+
+const sharedBC = new BroadcastChannel(SHARED_CHANNEL);
+sharedBC.addEventListener('message', async ({ data: [op, details] }) => {
+  if (op === 'request') {
+    const [uid, [id, channel]] = details;
+    const responses = channels.get(channel);
+    if (responses) {
+      sharedBC.postMessage(['response', [uid, await responses.get(id)]]);
+      responses.delete(id);
+    }
+  }
+});
+
+const { promise: sw, resolve } = withResolvers();
+let init = true;
+
+const activate = (swc, options) => {
+  let w, c = true, { url } = options;
+  swc.getRegistration(url)
+    .then(r => (r ?? swc.register(url, options)))
+    .then(function ready(r) {
+      const { controller } = swc;
+      c = c && !!controller;
+      w = (r.installing || r.waiting || r.active);
+      if (!w) return activate(swc, options);
+      if (w.state === 'activated') {
+        if (c) {
+          // allow ServiceWorker swap on different URL
+          if (controller.scriptURL === url)
+            return resolve();
+          r.unregister();
+        }
+        location.reload();
+      }
+      else {
+        w.addEventListener('statechange', () => ready(r), { once: true });
+      }
+    });
+};
+
+class Worker extends Sender {
+  #channel;
+  constructor(scriptURL, options, resolve) {
+    if (init) {
+      init = false;
+      let { serviceWorker } = options;
+      if (!serviceWorker) {
+        // @ts-ignore
+        return new AsyncWorker(scriptURL, options, resolve);
+      }
+      if (typeof serviceWorker === 'string') serviceWorker = { url: serviceWorker };
+      serviceWorker.url = new URL(serviceWorker.url, location.href).href;
+      activate(navigator.serviceWorker, serviceWorker);
+    }
+    const channel = randomUUID();
+    const bc = new BroadcastChannel(channel);
+    const sab = SAB(options);
+    const responses = new Map;
+    const i32a = new Int32Array(sab);
+    const handle = handler(sab, options, false);
+    channels.set(channel, responses);
+    bc.addEventListener('message', async ({ data: [id, payload] }) => {
+      const { promise, resolve } = withResolvers();
+      responses.set(id, promise);
+      await handle({ data: payload });
+      resolve(i32a.slice(0, 2 + i32a[1]));
+    });
+    super(...url(scriptURL, CHANNEL, options));
+    super.addEventListener('message', () => resolve(this), { once: true });
+    super.postMessage(post(sab, options).concat(channel));
+    this.#channel = channel;
+  }
+
+  terminate() {
+    channels.delete(this.#channel);
+    super.terminate();
+  }
+
+  get channel() {
+    return CHANNEL;
+  }
+};
+
+export default (scriptURL, options) => {
+  const { promise, resolve } = withResolvers();
+  const worker = new Worker(scriptURL, options, resolve);
+  return worker instanceof AsyncWorker ? promise : sw.then(() => promise);
+};

package/src/message.js

@@ -0,0 +1,8 @@
+import main from './main/message.js';
+import worker from './worker/message.js';
+
+export { channel } from './worker/message.js';
+
+export default (
+  'importScripts' in globalThis ? worker : main
+);

package/src/service/listeners.js

@@ -0,0 +1,37 @@
+import CHANNEL from '../channel.js';
+
+import nextResolver from 'next-resolver';
+
+const [next, resolve] = nextResolver();
+
+const { protocol, host, pathname } = location;
+const url = `${protocol}//${host}${pathname}`;
+
+const bc = new BroadcastChannel(CHANNEL);
+bc.addEventListener('message', ({ data: [op, details] }) => {
+  if (op === 'response') {
+    const [uid, payload] = details;
+    resolve(uid, `[${payload.join(',')}]`);
+  }
+});
+
+const respond = async details => {
+  const [uid, promise] = next();
+  bc.postMessage(['request', [uid, details]]);
+  return new Response(await promise);
+};
+
+// @ts-ignore
+export const activate = event => event.waitUntil(clients.claim());
+
+export const fetch = async event => {
+  const { request: r } = event;
+  if (r.method === 'POST' && r.url.startsWith(url)) {
+    event.stopImmediatePropagation();
+    event.respondWith(r.json().then(respond));
+    event.preventDefault();
+  }
+};
+
+// @ts-ignore
+export const install = () => skipWaiting();

package/src/service/worker.js

@@ -0,0 +1,5 @@
+import { activate, fetch, install } from './listeners.js';
+
+addEventListener('activate', activate);
+addEventListener('fetch', fetch);
+addEventListener('install', install);

package/src/shared.js

@@ -0,0 +1,10 @@
+let hasRandomUUID = true;
+try {
+  crypto.randomUUID();
+} catch (_) {
+  hasRandomUUID = false;
+}
+
+export const randomUUID = hasRandomUUID ?
+  (() => crypto.randomUUID() ):
+  (() => (Date.now() + Math.random()).toString(36));

package/src/worker/async.js

@@ -0,0 +1,38 @@
+import withResolvers from '@webreflection/utils/with-resolvers';
+import i32 from 'weak-id/i32';
+
+import sender from './sender.js';
+
+const { promise, resolve } = withResolvers();
+
+addEventListener(
+  'message',
+  ({ data: [sab, main, channel] }) => resolve([sab, main, channel]),
+  { once: true }
+);
+
+export const channel = 'async';
+
+const handle = (channel, i32a, options) => {
+  const bc = new BroadcastChannel(channel);
+  const next = i32();
+  const map = new Map;
+  bc.addEventListener('message', ({ data: [id, payload] }) => {
+    i32a.set(payload, 0);
+    map.get(id)(options.onsync(i32a.subarray(2, 2 + i32a[1])));
+    map.delete(id);
+  });
+  return (payload, ...rest) => {
+    const { promise, resolve } = withResolvers();
+    const id = next();
+    map.set(id, resolve);
+    // @ts-ignore
+    bc.postMessage([id, payload], ...rest);
+    return promise;
+  };
+};
+
+export default options => promise.then(([sab, main, channel]) => {
+  postMessage(1);
+  return handle(channel, new Int32Array(sab), sender({ ...main, ...options }));
+});

package/src/worker/{firefox.js → broadcast.js}

@@ -1,7 +1,10 @@
-import { handler, withResolvers } from './shared.js';
+import withResolvers from '@webreflection/utils/with-resolvers';
+import { handler } from './shared.js';
 
 const { promise, resolve } = withResolvers();
 
+export const channel = 'broadcast';
+
 export default handler(
   promise,
   ({ data: [sab, main, channel] }) => resolve([sab, main, new BroadcastChannel(channel)]),

package/src/worker/{chrome.js → message.js}

@@ -1,7 +1,10 @@
-import { handler, withResolvers } from './shared.js';
+import withResolvers from '@webreflection/utils/with-resolvers';
+import { handler } from './shared.js';
 
 const { promise, resolve } = withResolvers();
 
+export const channel = 'message';
+
 export default handler(
   promise,
   ({ data: [sab, main], ports: [channel] }) => resolve([sab, main, channel])

package/src/worker/sender.js

@@ -0,0 +1,16 @@
+import SHARED_CHANNEL from '../channel.js';
+
+const { isArray } = Array;
+
+export default options => {
+  addEventListener('message', async event => {
+    const { data } = event;
+    if (isArray(data) && data[0] === SHARED_CHANNEL) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      const [id, payload] = data[1];
+      postMessage([SHARED_CHANNEL, [id, await options.onsend(payload)]]);
+    }
+  });
+  return options;
+};

package/src/worker/shared.js

@@ -1,22 +1,43 @@
-import withResolvers from '/node_modules/@webreflection/utils/src/with-resolvers.js';
+import sender from './sender.js';
 
 const { load, store, wait } = Atomics;
 
-const handle = (channel, i32a, options) => (data, ...rest) => {
-  channel.postMessage(data, ...rest);
+/**
+ * @typedef {Object} Options
+ * @property {(payload: Int32Array) => unknown} onsync transforms the resulting `Int32Array` from *main* thread into a value usable within the worker.
+ * @property {(payload: unknown) => unknown |Promise<unknown>} onsend invoked to define what to return to the *main* thread when it calls `worker.send(payload)`.
+ */
+
+/**
+ * @param {MessageChannel | BroadcastChannel} channel
+ * @param {Int32Array} i32a
+ * @param {Options} options 
+ * @returns {(payload: unknown, ...rest: unknown[]) => unknown}
+ */
+const handle = (channel, i32a, options) => (payload, ...rest) => {
+  // @ts-ignore
+  channel.postMessage(payload, ...rest);
   wait(i32a, 0, 0);
   store(i32a, 0, 0);
-  return options.ondata(i32a.subarray(2, 2 + load(i32a, 1)), ...rest);
+  return options.onsync(i32a.subarray(2, 2 + load(i32a, 1)));
 };
 
+/**
+ * 
+ * @param {Promise<[SharedArrayBuffer, Options, MessageChannel | BroadcastChannel]>} promise
+ * @param {(event:MessageEvent) => void} listener
+ * @returns
+ */
 export const handler = (promise, listener) => {
   addEventListener('message', listener, { once: true });
+  /**
+   * @param {Options} options
+   * @returns
+   */
   return options => promise.then(
     ([sab, main, channel]) => {
       postMessage(1);
-      return handle(channel, new Int32Array(sab), { ...main, ...options });
+      return handle(channel, new Int32Array(sab), sender({ ...main, ...options }));
     }
   );
 };
-
-export { withResolvers };

package/src/worker/xhr.js

@@ -0,0 +1,38 @@
+import withResolvers from '@webreflection/utils/with-resolvers';
+import i32 from 'weak-id/i32';
+
+import sender from './sender.js';
+
+const { parse, stringify } = JSON;
+
+const { promise, resolve } = withResolvers();
+
+addEventListener(
+  'message',
+  ({ data: [sab, main, channel] }) => resolve([sab, main, channel]),
+  { once: true }
+);
+
+export const channel = 'xhr';
+
+const handle = (channel, i32a, options) => {
+  const bc = new BroadcastChannel(channel);
+  const next = i32();
+  const { serviceWorker } = options;
+  return (payload, ...rest) => {
+    const id = next();
+    // @ts-ignore
+    bc.postMessage([id, payload], ...rest);
+    const xhr = new XMLHttpRequest;
+    xhr.open('POST', serviceWorker, false);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.send(stringify([id, channel]));
+    i32a.set(parse(xhr.responseText), 0);
+    return options.onsync(i32a.subarray(2, 2 + i32a[1]));
+  };
+};
+
+export default options => promise.then(([sab, main, channel]) => {
+  postMessage(1);
+  return handle(channel, new Int32Array(sab), sender({ ...main, ...options }));
+});

package/src/xhr.js

@@ -0,0 +1,8 @@
+import main from './main/xhr.js';
+import worker from './worker/xhr.js';
+
+export { channel } from './worker/xhr.js';
+
+export default (
+  'importScripts' in globalThis ? worker : main
+);

package/test/README/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>body{font-family:sans-serif}</style>
+  <title>reflected README</title>
+  <script src="./mini-coi.js"></script>
+  <script type="module" src="./index.js"></script>
+</head>
+</html>

package/test/README/index.js

@@ -0,0 +1,54 @@
+import reflect, { channel } from '../../dist/index.js';
+
+function test_sum(...args) {
+  let i = 0;
+  while (args.length)
+    i += args.pop();
+  return i;
+}
+
+// ℹ️ must await the initialization
+const worker = await reflect(
+  // Worker scriptURL
+  './worker.js',
+  // Worker options + required utilities / helpers
+  // ℹ️ type is enforced to be 'module' due top-level await
+  {
+    // invoked when the worker asks to synchronize a call
+    // and it mmust return an Int32Array reference to populate
+    // the SharedArrayBuffer and notify/unlock the worker
+    // ℹ️ works even if synchronous but it's resolved asynchronously
+    // ⚠️ the worker is not responsive until this returns so
+    //     be sure you handle errors gracefully to still provide
+    //     a result the worker can consume out of the shared buffer!
+    async onsync(payload) {
+      const { invoke, args } = payload;
+
+      if (invoke === 'test_sum') {
+        // just demoing this can be async too
+        const value = await test_sum(...args);
+        return new Int32Array([value]);
+      }
+
+      // errors should still be Int32Array but
+      // it is trivial to return no result
+      return new Int32Array(0);
+    },
+
+    // optional: the initial SharedArrayBuffer length
+    initByteLength: 1024,
+
+    // optional: the max possible SharedArrayBuffer growth
+    maxByteLength: 8192,
+
+    // optional: the service worker as fallback
+    //   * if it's a string, it's used to register it
+    //   * if it's an object, it's used to initialize it
+    //     but it must contain a `url` field to register it
+    // ℹ️ if already registered it will not try to register it
+    serviceWorker: undefined,
+  }
+);
+
+document.body.append(channel, ' ');
+document.body.append(JSON.stringify(await worker.send({ any: 'payload' })));

package/test/README/mini-coi.js

@@ -0,0 +1,28 @@
+/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
+/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
+(({ document: d, navigator: { serviceWorker: s } }) => {
+  if (d) {
+    const { currentScript: c } = d;
+    s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
+      r.addEventListener('updatefound', () => location.reload());
+      if (r.active && !s.controller) location.reload();
+    });
+  }
+  else {
+    addEventListener('install', () => skipWaiting());
+    addEventListener('activate', e => e.waitUntil(clients.claim()));
+    addEventListener('fetch', e => {
+      const { request: r } = e;
+      if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
+      e.respondWith(fetch(r).then(r => {
+        const { body, status, statusText } = r;
+        if (!status || status > 399) return r;
+        const h = new Headers(r.headers);
+        h.set('Cross-Origin-Opener-Policy', 'same-origin');
+        h.set('Cross-Origin-Embedder-Policy', 'require-corp');
+        h.set('Cross-Origin-Resource-Policy', 'cross-origin');
+        return new Response(status == 204 ? null : body, { status, statusText, headers: h });
+      }));
+    });
+  }
+})(self);

package/test/README/worker.js

@@ -0,0 +1,26 @@
+import reflect, { channel } from '../../dist/index.js';
+
+// ℹ️ must await the initialization
+const reflected = await reflect({
+  // receives the returned data from the main thread.
+  // use this helper to transform such data into something
+  // that the worker can use/understand after invoke
+  // ℹ️ must be synchronous and it's invoked synchronously
+  onsync(response) {
+    return response.length ? response[0] : undefined;
+  },
+
+  async onsend(payload) {
+    return payload;
+  },
+});
+
+// retrive the result of `test_sum(1, 2, 3)`
+// directly from the main thread.
+// only the async channel variant would need to await
+const value = reflected({
+  invoke: 'test_sum',
+  args: [1, 2, 3]
+});
+
+console.log({ channel, value });

package/test/index.html

@@ -3,16 +3,15 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <style>body{font-family:sans-serif}</style>
+  <title>reflected</title>
+  <!-- <script src="mini-coi.js"></script> -->
   <script type="module">
-    import reflected from '../src/index.js';
-    const ref = await reflected('./worker.js', {
-      ondata: async (data, ...rest) => {
-        console.log('main', data, rest);
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        return new Int32Array([6, 7, 8, 9, 10]);
-      }
-    });
+    document.body.prepend(navigator.userAgent);
+    import('./index.js');
   </script>
 </head>
+<body>
+  <pre id="log"></pre>
+</body>
 </html>