@dxos/client 2.33.9-dev.9dc01397 → 2.33.9-dev.a2586ac4

package/src/packlets/proxy/index.ts

@@ -7,8 +7,8 @@ export * from './devtools';
 export * from './echo-proxy';
 export * from './halo-proxy';
 export * from './invitation-proxy';
-export * from './messages';
 export * from './party-proxy';
 export * from './serializer';
 export * from './service-proxy';
+export * from './singleton-port';
 export * from './version';

package/src/packlets/proxy/singleton-port.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import debug from 'debug';
+
+import { RpcPort } from '@dxos/rpc';
+import { isNode } from '@dxos/util';
+
+import { SingletonMessage } from '../proto';
+
+const log = debug('dxos:client:singleton-port');
+
+const waitForClient = () => {
+  return new Promise<void>(resolve => {
+    const messageHandler = (event: MessageEvent<SingletonMessage>) => {
+      if (event.data?.type === SingletonMessage.Type.CLIENT_READY) {
+        window.removeEventListener('message', messageHandler);
+        resolve();
+      }
+    };
+
+    window.addEventListener('message', messageHandler);
+  });
+};
+
+export const createSingletonPort = async (singletonSource: string): Promise<RpcPort> => {
+  if (isNode()) {
+    throw new Error('Connecting to singleton client is not available in Node environment.');
+  }
+
+  const singleton = document.createElement('iframe') as HTMLIFrameElement;
+  singleton.id = 'dxos-client-singleton';
+  singleton.src = singletonSource;
+  singleton.setAttribute('style', 'display: none;');
+  document.body.appendChild(singleton);
+
+  await waitForClient();
+
+  return {
+    send: async message => singleton.contentWindow?.postMessage({
+      type: SingletonMessage.Type.WINDOW_MESSAGE,
+      data: Array.from(message)
+    }, '*'),
+    subscribe: callback => {
+      const handler = (event: MessageEvent<SingletonMessage>) => {
+        const message = event.data;
+        if (message?.type !== SingletonMessage.Type.WINDOW_MESSAGE) {
+          return;
+        }
+
+        log('Received message from singleton client:', message);
+        callback(new Uint8Array(message.data!));
+      };
+
+      window.addEventListener('message', handler);
+      return () => window.removeEventListener('message', handler);
+    }
+  };
+};

package/src/singleton/main.ts

@@ -0,0 +1,170 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import debug from 'debug';
+
+import { sleep } from '@dxos/async';
+import { Config, Defaults, Dynamics } from '@dxos/config';
+import { createBundledRpcServer, RpcPort } from '@dxos/rpc';
+
+import { Client } from '../client';
+import { clientServiceBundle } from '../packlets/api';
+import { SingletonMessage } from '../packlets/proto';
+import { ProxyPort } from './proxy-port';
+
+const log = debug('dxos:client:singleton');
+
+const RECONNECT_BACKOFF = 500;
+const activeProxies = new Map<number, (msg: Uint8Array) => void>();
+
+/**
+ * Creates RpcPort for communicating with parent window.
+ */
+const createWindowPort = (): RpcPort => ({
+  send: async message => window.parent.postMessage({
+    type: SingletonMessage.Type.WINDOW_MESSAGE,
+    data: Array.from(message)
+  }, '*'),
+  subscribe: callback => {
+    const handler = (event: MessageEvent<SingletonMessage>) => {
+      const message = event.data;
+      if (message?.type !== SingletonMessage.Type.WINDOW_MESSAGE) {
+        return;
+      }
+
+      callback(new Uint8Array(message.data!));
+    };
+
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  }
+});
+
+/**
+ * Creates RpcPort for communicating with other windows via SharedWorker.
+ */
+const createServiceWorkerPort = (sendPort: ProxyPort, sourceId: number): RpcPort => ({
+  send: async message => sendPort.postMessage({
+    type: SingletonMessage.Type.CLIENT_MESSAGE,
+    clientMessage: {
+      sourceId,
+      data: message
+    }
+  }),
+  subscribe: callback => {
+    // Maintain set of proxies and reuse main port message event handler.
+    activeProxies.set(sourceId, callback);
+    return () => activeProxies.delete(sourceId);
+  }
+});
+
+if (typeof SharedWorker !== 'undefined') {
+  void (async () => {
+    let client: Client;
+    let windowClientProxyHandler: ((event: MessageEvent<SingletonMessage>) => void) | null = null;
+
+    const worker = new SharedWorker('./shared-worker.js');
+    worker.port.start();
+    const port = new ProxyPort(worker.port);
+
+    window.addEventListener('beforeunload', () => {
+      port.postMessage({ type: SingletonMessage.Type.PORT_CLOSING });
+    });
+
+    port.onmessage = async event => {
+      const message = event.data;
+      log('Recieved message from shared worker', message);
+      switch (message?.type) {
+        case SingletonMessage.Type.RECONNECT: {
+          const { attempt } = message.reconnect!;
+          await sleep(attempt * RECONNECT_BACKOFF);
+          port.postMessage(message);
+          break;
+        }
+
+        case SingletonMessage.Type.SETUP_CLIENT: {
+          const config = new Config(await Dynamics(), Defaults());
+          client = new Client(config);
+          await client.initialize();
+
+          if (windowClientProxyHandler) {
+            window.removeEventListener('message', windowClientProxyHandler);
+            windowClientProxyHandler = null;
+          }
+          const server = createBundledRpcServer({
+            services: clientServiceBundle,
+            handlers: client.services,
+            port: createWindowPort()
+          });
+
+          port.postMessage({ type: SingletonMessage.Type.CLIENT_READY });
+          window.parent.postMessage({ type: SingletonMessage.Type.CLIENT_READY }, '*');
+          await server.open();
+          break;
+        }
+
+        case SingletonMessage.Type.SETUP_PORT: {
+          const { sourceId } = message.setupPort!;
+          const server = createBundledRpcServer({
+            services: clientServiceBundle,
+            handlers: client.services,
+            port: createServiceWorkerPort(port, sourceId)
+          });
+          port.postMessage({
+            type: SingletonMessage.Type.PORT_READY,
+            portReady: {
+              sourceId
+            }
+          });
+          await server.open();
+          break;
+        }
+
+        case SingletonMessage.Type.PORT_READY: {
+          const { sourceId } = message.portReady!;
+          windowClientProxyHandler = (event: MessageEvent<SingletonMessage>) => {
+            const message = event.data;
+            if (message?.type !== SingletonMessage.Type.WINDOW_MESSAGE) {
+              return;
+            }
+
+            port.postMessage({
+              type: SingletonMessage.Type.PROXY_MESSAGE,
+              proxyMessage: {
+                sourceId,
+                data: message.data!
+              }
+            });
+          };
+
+          window.addEventListener('message', windowClientProxyHandler);
+          window.parent.postMessage({ type: SingletonMessage.Type.CLIENT_READY }, '*');
+          break;
+        }
+
+        case SingletonMessage.Type.PROXY_MESSAGE: {
+          const { sourceId, data } = message.proxyMessage!;
+          activeProxies.get(sourceId)?.(new Uint8Array(data));
+          break;
+        }
+
+        case SingletonMessage.Type.CLIENT_MESSAGE: {
+          const { data } = message.clientMessage!;
+          window.parent.postMessage({
+            type: SingletonMessage.Type.WINDOW_MESSAGE,
+            data
+          }, '*');
+          break;
+        }
+
+        case SingletonMessage.Type.RESEND: {
+          port.postMessage(message);
+          break;
+        }
+      }
+    };
+  })();
+} else {
+  throw new Error('DXOS Client singleton requires a browser with support for shared workers.');
+}

package/src/singleton/proxy-port.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { MaybePromise } from '@dxos/util';
+
+import { SingletonMessage } from '../packlets/proto';
+
+export class ProxyPort {
+  constructor (private readonly port: MessagePort) {}
+
+  get onmessage () {
+    return this.port.onmessage;
+  }
+
+  set onmessage (handler: ((event: MessageEvent<SingletonMessage>) => MaybePromise<void>) | null) {
+    this.port.onmessage = handler;
+  }
+
+  postMessage (message: SingletonMessage) {
+    this.port.postMessage(message);
+  }
+}

package/src/singleton/shared-worker.ts

@@ -0,0 +1,147 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import debug from 'debug';
+
+import { SingletonMessage } from '../packlets/proto';
+import { ProxyPort } from './proxy-port';
+
+const log = debug('dxos:client:shared-worker');
+const error = log.extend('error');
+
+let nextId = 1;
+const communicationPorts = new Map<number, ProxyPort>();
+let clientId: number | null = null;
+
+const getClientPort = () => {
+  const port = communicationPorts.get(clientId!);
+  if (!port) {
+    throw new Error('clientId defined and port not found');
+  }
+
+  return port;
+};
+
+onconnect = event => {
+  const sourceId = nextId;
+  nextId++;
+
+  const handlePortMessage = async (event: MessageEvent<SingletonMessage>) => {
+    const message = event.data;
+    log(`Recieved message from source ${sourceId}`, message);
+
+    switch (message?.type) {
+      case SingletonMessage.Type.RECONNECT: {
+        const { attempt } = message.reconnect!;
+        if (attempt >= 5) {
+          error(`Failed to connect to client for source ${sourceId}`);
+          break;
+        }
+
+        if (!clientId) {
+          port.postMessage({
+            type: SingletonMessage.Type.RECONNECT,
+            reconnect: {
+              attempt: attempt + 1
+            }
+          });
+          break;
+        }
+
+        getClientPort().postMessage({
+          type: SingletonMessage.Type.SETUP_PORT,
+          setupPort: {
+            sourceId
+          }
+        });
+        break;
+      }
+
+      case SingletonMessage.Type.CLIENT_READY: {
+        clientId = sourceId;
+        [...communicationPorts.keys()].forEach(id => {
+          if (id !== sourceId) {
+            getClientPort().postMessage({
+              type: SingletonMessage.Type.SETUP_PORT,
+              setupPort: {
+                sourceId: id
+              }
+            });
+          }
+        });
+        break;
+      }
+
+      case SingletonMessage.Type.PORT_READY: {
+        const { sourceId } = message.portReady!;
+        const forwardPort = communicationPorts.get(sourceId);
+        forwardPort?.postMessage(message);
+        break;
+      }
+
+      case SingletonMessage.Type.PORT_CLOSING: {
+        communicationPorts.delete(sourceId);
+
+        if (sourceId === clientId) {
+          clientId = null;
+          const [port] = [...communicationPorts.values()];
+          port?.postMessage({ type: SingletonMessage.Type.SETUP_CLIENT });
+        }
+
+        break;
+      }
+
+      case SingletonMessage.Type.PROXY_MESSAGE: {
+        if (!clientId) {
+          port.postMessage({
+            type: SingletonMessage.Type.RESEND,
+            resend: {
+              message
+            }
+          });
+          break;
+        }
+
+        const clientPort = communicationPorts.get(clientId);
+        clientPort?.postMessage({
+          type: SingletonMessage.Type.PROXY_MESSAGE,
+          proxyMessage: {
+            sourceId,
+            data: message.proxyMessage!.data
+          }
+        });
+        break;
+      }
+
+      case SingletonMessage.Type.CLIENT_MESSAGE: {
+        const { sourceId } = message.clientMessage!;
+        const forwardPort = communicationPorts.get(sourceId);
+        forwardPort?.postMessage(message);
+        break;
+      }
+    }
+  };
+
+  const port = new ProxyPort(event.ports[0]);
+  port.onmessage = handlePortMessage;
+  communicationPorts.set(sourceId, port);
+
+  if (communicationPorts.size === 1) {
+    port.postMessage({ type: SingletonMessage.Type.SETUP_CLIENT });
+  } else if (!clientId) {
+    port.postMessage({
+      type: SingletonMessage.Type.RECONNECT,
+      reconnect: {
+        attempt: 1
+      }
+    });
+  } else {
+    getClientPort().postMessage({
+      type: SingletonMessage.Type.SETUP_PORT,
+      setupPort: {
+        sourceId
+      }
+    });
+  }
+};

package/src/singleton/singleton.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { useAsyncEffect } from '@dxos/react-async';
+
+import { Client } from '../packlets/proxy';
+
+export default {
+  title: 'client/singleton'
+};
+
+export const Primary = () => {
+  const [client, setClient] = useState<Client>();
+
+  useAsyncEffect(async () => {
+    const client = new Client();
+    await client.initialize();
+    setClient(client);
+  }, []);
+
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <pre>
+      {JSON.stringify({
+        initialized: client.initialized,
+        ...(client.initialized ? client.info : {})
+      })}
+    </pre>
+  );
+};

package/dist/src/packlets/proxy/messages.d.ts

@@ -1,3 +0,0 @@
-import { RpcPort } from '@dxos/rpc';
-export declare const createWindowMessagePort: () => RpcPort;
-//# sourceMappingURL=messages.d.ts.map

package/dist/src/packlets/proxy/messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../../src/packlets/proxy/messages.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,eAAO,MAAM,uBAAuB,QAAO,OAqB1C,CAAC"}

package/dist/src/packlets/proxy/messages.js

@@ -1,30 +0,0 @@
-"use strict";
-//
-// Copyright 2021 DXOS.org
-//
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createWindowMessagePort = void 0;
-const util_1 = require("@dxos/util");
-const createWindowMessagePort = () => {
-    if ((0, util_1.isNode)()) {
-        throw new Error('Connecting to wallet extension is not available in Node environment.');
-    }
-    return {
-        send: async (message) => window.postMessage({
-            payloadFromAppToContentScript: Array.from(message)
-        }, '*'),
-        subscribe: (callback) => {
-            const listener = (event) => {
-                var _a;
-                const payload = (_a = event === null || event === void 0 ? void 0 : event.data) === null || _a === void 0 ? void 0 : _a.payloadFromContentScriptToApp;
-                if (payload) {
-                    callback(new Uint8Array(payload));
-                }
-            };
-            window.addEventListener('message', listener);
-            return () => window.removeEventListener('message', listener);
-        }
-    };
-};
-exports.createWindowMessagePort = createWindowMessagePort;
-//# sourceMappingURL=messages.js.map

package/dist/src/packlets/proxy/messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/packlets/proxy/messages.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAGF,qCAAoC;AAE7B,MAAM,uBAAuB,GAAG,GAAY,EAAE;IACnD,IAAI,IAAA,aAAM,GAAE,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;IAED,OAAO;QACL,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC;YAC1C,6BAA6B,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;SACnD,EAAE,GAAG,CAAC;QAEP,SAAS,EAAE,CAAC,QAAQ,EAAE,EAAE;YACtB,MAAM,QAAQ,GAAkB,CAAC,KAAK,EAAE,EAAE;;gBACxC,MAAM,OAAO,GAAG,MAAC,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,IAAI,0CAAE,6BAA6B,CAAC;gBACpE,IAAI,OAAO,EAAE;oBACX,QAAQ,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;iBACnC;YACH,CAAC,CAAC;YACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;YAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC/D,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,uBAAuB,2BAqBlC"}

package/src/packlets/proxy/messages.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2021 DXOS.org
-//
-
-import { RpcPort } from '@dxos/rpc';
-import { isNode } from '@dxos/util';
-
-export const createWindowMessagePort = (): RpcPort => {
-  if (isNode()) {
-    throw new Error('Connecting to wallet extension is not available in Node environment.');
-  }
-
-  return {
-    send: async (message) => window.postMessage({
-      payloadFromAppToContentScript: Array.from(message)
-    }, '*'),
-
-    subscribe: (callback) => {
-      const listener: EventListener = (event) => {
-        const payload = (event as any)?.data?.payloadFromContentScriptToApp;
-        if (payload) {
-          callback(new Uint8Array(payload));
-        }
-      };
-      window.addEventListener('message', listener);
-      return () => window.removeEventListener('message', listener);
-    }
-  };
-};