@webqit/port-plus 0.1.0 → 0.1.5

package/package.json

@@ -14,7 +14,7 @@
   ],
   "homepage": "https://port-plus.netlify.app/",
   "icon": "https://webqit.io/icon.svg",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/MessageChannelPlus.js

@@ -1,16 +1,11 @@
-import { MessagePortPlus, _meta } from './MessagePortPlus.js';
+import { MessagePortPlus } from './MessagePortPlus.js';
 
 export class MessageChannelPlus extends MessageChannel {
 
     constructor({ autoStart = true, postAwaitsOpen = false } = {}) {
         super();
         [this.port1, this.port2].forEach((port, i) => {
-            const portPlusMeta = _meta(port);
-
-            portPlusMeta.set('options', { autoStart, postAwaitsOpen });
-            // Must come before upgradeInPlace()
-
-            MessagePortPlus.upgradeInPlace(port);
+            MessagePortPlus.upgradeInPlace(port, { autoStart, postAwaitsOpen });
         });
     }
 }

package/src/MessageEventPlus.js

@@ -1,7 +1,7 @@
 import { _isTypeObject } from '@webqit/util/js/index.js';
-import { MessagePortPlus, applyMutations } from './MessagePortPlus.js';
+import { MessagePortPlus, applyMutations, _options } from './MessagePortPlus.js';
 
-export class MessageEventPlus extends Event {
+export class MessageEventPlus extends MessageEvent {
 
     #originalTarget;
     get originalTarget() { return this.#originalTarget; }
@@ -50,7 +50,8 @@ export class MessageEventPlus extends Event {
         this.#honourDoneMutationFlags = honourDoneMutationFlags;
 
         this.#ports = ports;
-        this.#ports.forEach((port) => MessagePortPlus.upgradeInPlace(port));
+        const options = this.#originalTarget && _options(this.#originalTarget) || {};
+        this.#ports.forEach((port) => MessagePortPlus.upgradeInPlace(port, { autoStart: options.autoStart, postAwaitsOpen: options.postAwaitsOpen }));
 
         if (_isTypeObject(this.#data) && this.#live) {
             if (typeof eventID !== 'string') {

package/src/MessagePortPlus.js

@@ -2,6 +2,7 @@ import { _wq as $wq } from '@webqit/util/js/index.js';
 import { _isObject, _isTypeObject } from '@webqit/util/js/index.js';
 import { MessageEventPlus } from './MessageEventPlus.js';
 import Observer from '@webqit/observer';
+import { WebSocketPort } from './WebSocketPort.js';
 
 export const _wq = (target, ...args) => $wq(target, 'port+', ...args);
 export const _options = (target) => $wq(target, 'port+', 'meta').get('options') || {};
@@ -13,7 +14,7 @@ const portPlusMethods = [
     'postMessage',
     'postRequest',
     'dispatchEvent',
-    'forwardPort',
+    'relay',
     'start',
     'readyStateChange',
     'removeEventListener',
@@ -46,7 +47,7 @@ export class MessagePortPlus extends MessagePortPlusMixin(EventTarget) {
 export function MessagePortPlusMixin(superClass) {
     return class extends superClass {
 
-        static upgradeInPlace(port) {
+        static upgradeInPlace(port, options = {}) {
             if (port instanceof MessagePortPlus) {
                 return port;
             }
@@ -69,6 +70,9 @@ export function MessagePortPlusMixin(superClass) {
                 Object.defineProperty(port, prop, { ...plus, configurable: true });
             }
 
+            const portPlusMeta = _wq(port, 'meta');
+            portPlusMeta.set('options', options);
+
             this.upgradeEvents(port);
         }
 
@@ -354,12 +358,15 @@ export function MessagePortPlusMixin(superClass) {
 
             // Format payload if not yet in the ['.wq'] format
             let _relayedFrom;
-            if (!_isObject(message?.['.wq'])) {
-                const { portOptions, wqOptions: { relayedFrom, ...wqOptions } } = preProcessPostMessage.call(this, message, transferOrOptions);
+            const { portOptions, wqOptions: { relayedFrom, ...wqOptions } } = preProcessPostMessage.call(this, message, transferOrOptions);
+            if (wqOptions.type !== 'message'
+                || wqOptions.live
+                || wqOptions.bubbles
+                || portOptions.transfer?.length && (this instanceof BroadcastChannel || this instanceof WebSocketPort)) {
                 message = { message, ['.wq']: wqOptions };
-                transferOrOptions = portOptions;
-                _relayedFrom = relayedFrom;
             }
+            transferOrOptions = portOptions;
+            _relayedFrom = relayedFrom;
 
             // Exec
             const post = () => {
@@ -413,25 +420,45 @@ export function MessagePortPlusMixin(superClass) {
 
         // Forwarding
 
-        forwardPort(eventTypes, targetPort, { resolveData = null, bidirectional = false, namespace1 = null, namespace2 = null } = {}) {
-            if (!(this instanceof MessagePortPlus) || !(targetPort instanceof MessagePortPlus)) {
-                throw new Error('Both ports must be instance of MessagePortPlus.');
+        relay({ to: targetPort, from: sourcePort, types = '*', channel = null, resolveMessage = null, bidirectional = false } = {}) {
+            if (targetPort && sourcePort) {
+                throw new Error('Only one of "to" and "from" may be specified');
+            }
+
+            if (sourcePort) {
+                targetPort = this;
+            } else sourcePort = this;
+
+            if (targetPort === sourcePort) {
+                throw new Error('Source and target ports cannot be the same');
             }
-            if (typeof eventTypes !== 'function' && !(eventTypes = [].concat(eventTypes)).length) {
+
+            if (!(sourcePort instanceof MessagePortPlus) || !(targetPort instanceof MessagePortPlus)) {
+                throw new Error('Both source and target ports must be instance of MessagePortPlus.');
+            }
+
+            if (typeof types !== 'function' && !(types = [].concat(types)).length) {
                 throw new Error('Event types must be specified.');
             }
 
-            const downstreamRegistry = getDownstreamRegistry.call(this);
-            const registration = { targetPort, eventTypes, options: { resolveData, namespace1, namespace2 } };
+            if (typeof channel === 'string') {
+                channel = { from: channel };
+            } else if (_isObject(channel)) {
+                if (Object.keys(channel).filter((k) => !['from', 'to'].includes(k)).length) {
+                    throw new Error('Channel must be a string or an object of "from"/"to" members');
+                }
+            } else if (channel) {
+                throw new Error('Invalid channel parameter');
+            }
+
+            const downstreamRegistry = getDownstreamRegistry.call(sourcePort);
+            const registration = { targetPort, types, channel, resolveMessage };
             downstreamRegistry.add(registration);
 
             let cleanup2;
             if (bidirectional) {
-                cleanup2 = this.forwardPort.call(
-                    targetPort,
-                    typeof eventTypes === 'function' ? eventTypes : eventTypes.filter((s) => s !== 'close'),
-                    this,
-                    { resolveData, bidirectional: false, namespace1: namespace2, namespace2: namespace1 }
+                cleanup2 = targetPort.relay(
+                    { to: sourcePort, types, channel: channel && { to: channel.from, from: channel.to }, resolveMessage, bidirectional: false }
                 );
             }
 
@@ -441,6 +468,40 @@ export function MessagePortPlusMixin(superClass) {
             };
         }
 
+        channel(channelSpec, resolveMessage = null) {
+            const channel = new MessageChannel;
+
+            MessagePortPlus.upgradeInPlace(channel.port1, { autoStart: this.options.autoStart, postAwaitsOpen: this.options.postAwaitsOpen });
+            MessagePortPlus.upgradeInPlace(channel.port2, { autoStart: this.options.autoStart, postAwaitsOpen: this.options.postAwaitsOpen });
+
+            const garbageCollection = getGarbageCollection.call(this);
+            garbageCollection.add(this.relay({ channel: channelSpec, to: channel.port1, bidirectional: true, resolveMessage }));
+
+            channel.port1.start();
+            this.readyStateChange('close').then(() => {
+                channel.port1.close();
+            });
+
+            return channel.port2;
+        }
+
+        projectMutations({ from, to, ...options }) {
+            if (!from || !to
+                || typeof from === 'string' && typeof to === 'string'
+                || _isTypeObject(from) && _isTypeObject(to)) {
+                throw new Error('Invalid "from"/"to" parameters');
+            }
+            if (typeof from === 'string') {
+                if (!_isTypeObject(to)) throw new Error('Invalid "to" parameter. Object/array expected');
+                return applyMutations.call(this, to, from, options);
+            }
+            if (typeof to === 'string') {
+                if (!_isTypeObject(from)) throw new Error('Invalid "from" parameter. Object/array expected');
+                return publishMutations.call(this, from, to, options);
+            }
+            throw new Error('Invalid "from"/"to" parameters');
+        }
+
         // Lifecycle
 
         get readyState() {
@@ -571,17 +632,8 @@ export function MessagePortPlusMockPortsMixin(superClass) {
             Object.defineProperty(event, 'ports', { value: [], configurable: true });
 
             for (let i = 0; i < numPorts; i++) {
-                const channel = new MessageChannel;
-                channel.port1.start();
-
-                MessagePortPlus.upgradeInPlace(channel.port1);
-                garbageCollection.add(portPlus.forwardPort('*', channel.port1, { bidirectional: true, namespace1: `${event.data['.wq'].eventID}:${i}` }));
-                event.ports.push(channel.port2);
-
-                portPlus.readyStateChange('close').then(() => {
-                    channel.port1.close();
-                    channel.port2.close();
-                });
+                const port = portPlus.channel(`${event.data['.wq'].eventID}:${i}`);
+                event.ports.push(port);
             }
 
             return event;
@@ -598,7 +650,16 @@ export function MessagePortPlusMockPortsMixin(superClass) {
 
                 for (let i = 0; i < numPorts; i++) {
                     MessagePortPlus.upgradeInPlace(messagePorts[i]);
-                    garbageCollection.add(this.forwardPort('*', messagePorts[i], { bidirectional: true, namespace1: `${payload['.wq'].eventID}:${i}` }));
+
+                    garbageCollection.add(this.relay({ channel: `${payload['.wq'].eventID}:${i}`, to: messagePorts[i], bidirectional: true }));
+
+                    messagePorts[i].start();
+                    messagePorts[i].readyStateChange('close').then(() => {
+                        // Send a disconnect ping to port2
+                        const { wqOptions } = preProcessPostMessage.call(this);
+                        const pingData = { ['.wq']: wqOptions, ping: 'disconnect' };
+                        this.postMessage(pingData, { type: `${payload['.wq'].eventID}:${i}:message` });
+                    });
                 }
 
                 payload['.wq'].numPorts = numPorts; // IMPORTANT: numPorts must be set before ports are added
@@ -629,27 +690,27 @@ export function propagateEvent(event) {
         const { type, eventID, data, live, bubbles, ports } = event;
 
         const called = new WeakSet;
-        for (const { targetPort, eventTypes, options } of downstreamRegistry) {
+        for (const { targetPort, types, channel, resolveMessage } of downstreamRegistry) {
             if (called.has(targetPort)) continue;
 
             let $type = type;
-            if (options.namespace1) {
-                [, $type] = (new RegExp(`^${options.namespace1.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}:([^:]+)$`)).exec(type) || [];
+            if (channel.from) {
+                [, $type] = (new RegExp(`^${channel.from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}:([^:]+)$`)).exec(type) || [];
                 if (!$type) continue;
             }
 
-            const matches = typeof eventTypes === 'function'
-                ? eventTypes($type, this, targetPort, options)
-                : [].concat(eventTypes).find((t) => {
+            const matches = typeof types === 'function'
+                ? types($type, this, targetPort, channel)
+                : [].concat(types).find((t) => {
                     return t === $type || t === '*';
                 });
 
             if (!matches) continue;
             called.add(targetPort);
 
-            targetPort.postMessage(options.resolveData ? options.resolveData(data, this, targetPort, options) : data, {
+            targetPort.postMessage(resolveMessage ? resolveMessage(data, this, targetPort, channel) : data, {
                 transfer: ports,
-                type: options.namespace2 ? `${options.namespace2}:${$type}` : $type,
+                type: channel.to ? `${channel.to}:${$type}` : $type,
                 eventID,
                 bubbles,
                 live,
@@ -682,7 +743,7 @@ export function getReadyStateInternals() {
     const portPlusMeta = _meta(this);
     if (!portPlusMeta.has('readystate_registry')) {
         const $ref = (o) => {
-            o.promise = new Promise((resolve) => o.resolve = resolve);
+            o.promise = new Promise((res, rej) => (o.resolve = res, o.reject = rej));
             return o;
         };
         portPlusMeta.set('readystate_registry', {

package/src/RelayPort.js

@@ -1,39 +1,49 @@
+import { _isObject } from '@webqit/util/js/index.js';
 import { StarPort } from './StarPort.js';
 
 export class RelayPort extends StarPort {
 
-    #namespace;
-    get namespace() { return this.#namespace; }
+    #channelSpec;
+    get channelSpec() { return this.#channelSpec; }
 
-    constructor(namespace = null) {
+    constructor(channel = null) {
         super();
-        this.#namespace = namespace;
+        if (typeof channel === 'string') {
+            channel = { from: channel, to: channel };
+        } else if (_isObject(channel)) {
+            if (Object.keys(channel).filter((k) => !['from', 'to'].includes(k)).length) {
+                throw new Error('Channel must be a string or an object of "from"/"to" members');
+            }
+        } else if (channel) {
+            throw new Error('Invalid channel parameter');
+        }
+        this.#channelSpec = channel;
     }
 
-    addPort(portPlus, { resolveData = null } = {}) {
-        const $resolveData = (data, ...args) => {
-            if (resolveData) return resolveData(data, ...args);
+    addPort(portPlus, { resolveMessage = null } = {}) {
+        const $resolveMessage = (data, ...args) => {
+            if (resolveMessage) return resolveMessage(data, ...args);
             return data;
         };
 
         // Add port and forward its messages back to this relay instance
         const unadd = super.addPort(portPlus, { enableBubbling: false });
-        const unforward = portPlus.forwardPort('*', this, { bidirectional: false, resolveData: $resolveData, namespace1: this.namespace, namespace2: this.namespace });
+        const unforward = portPlus.relay({ channel: this.#channelSpec, to: this, bidirectional: false/* IMPORTANT */, resolveMessage: $resolveMessage });
 
-        const messageType_ping = this.namespace
-            && `${this.namespace}:message`
+        const messageType_ping = this.#channelSpec.from
+            && `${this.#channelSpec.from}:message`
             || 'message';
 
         // PING: joins
         this.postMessage(
-            $resolveData({ event: 'joins' }, portPlus, this),
+            $resolveMessage({ event: 'joins' }, portPlus, this),
             { type: messageType_ping, relayedFrom: portPlus }
         );
 
         const leaves = () => {
             // PING: leaves
             this.postMessage(
-                $resolveData({ event: 'leaves' }, portPlus, this),
+                $resolveMessage({ event: 'leaves' }, portPlus, this),
                 { type: messageType_ping, relayedFrom: portPlus }
             );
         };

package/src/index.browser.js

@@ -1,2 +1,4 @@
 import * as PortPlus from './index.js';
-Object.assign(globalThis, PortPlus);
+
+if (!globalThis.webqit) globalThis.webqit = {}
+Object.assign(globalThis.webqit, PortPlus);

package/src/index.js

@@ -4,4 +4,5 @@ export { MessageEventPlus } from './MessageEventPlus.js';
 export { MessagePortPlus } from './MessagePortPlus.js';
 export { RelayPort } from './RelayPort.js';
 export { StarPort } from './StarPort.js';
-export { WebSocketPort } from './WebSocketPort.js';
+export { WebSocketPort } from './WebSocketPort.js';
+export { default as Observer } from '@webqit/observer';

package/test/basic.test.js

@@ -1,8 +1,8 @@
-import { MessagePortPlus, MessageChannelPlus, WebSocketPort, BroadcastChannelPlus } from '../src/index.js';
+import { MessagePortPlus, MessageChannelPlus, BroadcastChannelPlus, Observer } from '../src/index.js';
 
 const t = new MessagePortPlus;
 
-let m, q = 3;
+let m, q = 4;
 
 if (q === 1) {
     m = new MessageChannel;
@@ -30,9 +30,26 @@ m.port1.addEventListener('close', () => console.log('close1'));
 m.port2.addEventListener('open', () => console.log('open2'));
 m.port2.addEventListener('close', () => console.log('close2'));
 
-m.port1.addEventListener('message', (e) => console.log('message', e.data));
-m.port2.postMessage('hello');
+m.port1.addEventListener('message', (e) => {
+    console.log('message', e.data);
+    console.log('numPorts', e.ports.length);
+    e.ports[0]?.addEventListener('message', (e) => {
+        console.log('Port message', e.data, 'isLive', e.live, );
+        Observer.observe(e.data, (mm) => {
+            console.log('-------mutations', e.data);
+        });
+    });
+    e.ports[0]?.addEventListener('close', (e) => console.log('Port close'));
+});
+
+const p = new MessageChannelPlus;
+m.port2.postMessage('hello', [p.port1]);
+const pMessage = { greeting: 'Hi' };
+p.port2.postMessage(pMessage, { live: true });
+Observer.set(pMessage, '_K', '_V');
+
+await new Promise((r) => setTimeout(r, 3000));
+p.port2.close();
 
 await new Promise((r) => setTimeout(r, 3000));
-//m.port1.close();
 m.port2.close();