@telperion/messenger 7.6.1

package/docs/images/core-architecture.svg

@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <defs>
+    <style>
+      .title { font: bold 24px sans-serif; fill: #2c3e50; }
+      .subtitle { font: 16px sans-serif; fill: #7f8c8d; }
+      .label { font: 14px sans-serif; fill: #34495e; }
+      .decorator { font: bold 12px monospace; fill: #e74c3c; }
+      .box { fill: #3498db; stroke: #2980b9; stroke-width: 2; }
+      .box-alt { fill: #2ecc71; stroke: #27ae60; stroke-width: 2; }
+      .box-core { fill: #9b59b6; stroke: #8e44ad; stroke-width: 2; }
+      .arrow { stroke: #34495e; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
+      .arrow-bi { stroke: #e67e22; stroke-width: 2; fill: none; marker-end: url(#arrowhead-bi); marker-start: url(#arrowhead-bi-start); }
+      text { text-anchor: middle; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#34495e" />
+    </marker>
+    <marker id="arrowhead-bi" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#e67e22" />
+    </marker>
+    <marker id="arrowhead-bi-start" markerWidth="10" markerHeight="10" refX="1" refY="3" orient="auto">
+      <polygon points="10 0, 0 3, 10 6" fill="#e67e22" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="400" y="30" class="title">Messenger Core Architecture</text>
+  <text x="400" y="55" class="subtitle">Base abstractions for all messaging modules</text>
+
+  <!-- MessageClient Box -->
+  <rect x="50" y="100" width="200" height="120" rx="5" class="box"/>
+  <text x="150" y="130" class="label" style="fill: white; font-weight: bold;">MessageClient</text>
+  <text x="150" y="155" class="decorator">@Request('path')</text>
+  <text x="150" y="180" class="label" style="fill: white; font-size: 12px;">Sends requests</text>
+  <text x="150" y="200" class="label" style="fill: white; font-size: 12px;">Receives responses</text>
+
+  <!-- MessageHost Box -->
+  <rect x="550" y="100" width="200" height="120" rx="5" class="box-alt"/>
+  <text x="650" y="130" class="label" style="fill: white; font-weight: bold;">MessageHost</text>
+  <text x="650" y="155" class="decorator">@Listen('path')</text>
+  <text x="650" y="180" class="label" style="fill: white; font-size: 12px;">Listens for requests</text>
+  <text x="650" y="200" class="label" style="fill: white; font-size: 12px;">Sends responses</text>
+
+  <!-- Arrow between Client and Host -->
+  <path d="M 250 160 L 550 160" class="arrow"/>
+  <text x="400" y="150" class="label" style="font-size: 12px;">Request/Response</text>
+
+  <!-- MessageService Box -->
+  <rect x="300" y="270" width="200" height="100" rx="5" class="box-core"/>
+  <text x="400" y="300" class="label" style="fill: white; font-weight: bold;">MessageService</text>
+  <text x="400" y="325" class="label" style="fill: white; font-size: 12px;">= MessageClient</text>
+  <text x="400" y="345" class="label" style="fill: white; font-size: 12px;">+ MessageHost</text>
+  <text x="400" y="365" class="label" style="fill: white; font-size: 11px; font-style: italic;">(Bidirectional)</text>
+
+  <!-- Arrows from Client and Host to Service -->
+  <path d="M 150 220 L 350 270" class="arrow" style="stroke-dasharray: 5,5;"/>
+  <path d="M 650 220 L 450 270" class="arrow" style="stroke-dasharray: 5,5;"/>
+
+</svg>

package/docs/images/iframe-communication.svg

@@ -0,0 +1,74 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500">
+  <defs>
+    <style>
+      .title { font: bold 24px sans-serif; fill: #2c3e50; }
+      .subtitle { font: 16px sans-serif; fill: #7f8c8d; }
+      .label { font: 14px sans-serif; fill: #34495e; }
+      .code { font: 12px monospace; fill: #2c3e50; }
+      .window { fill: #ecf0f1; stroke: #95a5a6; stroke-width: 3; }
+      .titlebar { fill: #bdc3c7; }
+      .iframe-box { fill: #fff; stroke: #3498db; stroke-width: 2; }
+      .client { fill: #3498db; stroke: #2980b9; stroke-width: 2; }
+      .host { fill: #2ecc71; stroke: #27ae60; stroke-width: 2; }
+      .arrow { stroke: #e74c3c; stroke-width: 2.5; fill: none; marker-end: url(#arrowhead); }
+      .arrow-back { stroke: #9b59b6; stroke-width: 2.5; fill: none; marker-end: url(#arrowhead-back); }
+      text { text-anchor: middle; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#e74c3c" />
+    </marker>
+    <marker id="arrowhead-back" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#9b59b6" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="450" y="35" class="title">Iframe Communication</text>
+  <text x="450" y="60" class="subtitle">Parent window ↔ Child iframe messaging</text>
+
+  <!-- Parent Window -->
+  <rect x="50" y="100" width="350" height="350" rx="8" class="window"/>
+  <rect x="50" y="100" width="350" height="30" rx="8" class="titlebar"/>
+  <text x="225" y="122" class="label" style="fill: #34495e; font-weight: bold;">Parent Window</text>
+
+  <!-- Parent Host -->
+  <rect x="80" y="160" width="290" height="80" rx="5" class="host"/>
+  <text x="225" y="185" class="label" style="fill: white; font-weight: bold;">IframeMessageHost</text>
+  <text x="225" y="210" class="code" style="fill: white;">@Listen('greeting')</text>
+  <text x="225" y="230" class="label" style="fill: white; font-size: 11px;">Responds to iframe requests</text>
+
+  <!-- Iframe inside Parent -->
+  <rect x="90" y="270" width="270" height="160" rx="5" class="iframe-box"/>
+  <rect x="90" y="270" width="270" height="25" rx="5" class="titlebar"/>
+  <text x="225" y="288" class="label" style="font-size: 12px; font-weight: bold;">Child Iframe</text>
+
+  <!-- Iframe Client -->
+  <rect x="110" y="320" width="230" height="90" rx="5" class="client"/>
+  <text x="225" y="345" class="label" style="fill: white; font-weight: bold;">IframeMessageClient</text>
+  <text x="225" y="370" class="code" style="fill: white;">@Request('greeting')</text>
+  <text x="225" y="395" class="label" style="fill: white; font-size: 11px;">Sends requests to parent</text>
+
+  <!-- Communication Arrows -->
+  <path d="M 340 360 Q 420 300 420 200" class="arrow"/>
+  <text x="460" y="280" class="label" style="fill: #e74c3c; font-weight: bold;">Request</text>
+
+  <path d="M 400 200 Q 400 280 320 340" class="arrow-back"/>
+  <text x="360" y="260" class="label" style="fill: #9b59b6; font-weight: bold;">Response</text>
+
+  <!-- Right side: Code Examples -->
+  <rect x="500" y="100" width="350" height="160" rx="5" style="fill: #2c3e50; stroke: #34495e; stroke-width: 2;"/>
+  <text x="675" y="130" class="label" style="fill: white; font-weight: bold;">Iframe (Client)</text>
+  <text x="520" y="160" class="code" style="fill: #f39c12; text-anchor: start;">const client = new</text>
+  <text x="520" y="180" class="code" style="fill: #f39c12; text-anchor: start;">  IframeMessageClient();</text>
+  <text x="520" y="210" class="code" style="fill: #3498db; text-anchor: start;">client.sayHello('John')</text>
+  <text x="520" y="230" class="code" style="fill: #3498db; text-anchor: start;">  .subscribe(response =>)</text>
+  <text x="520" y="250" class="code" style="fill: #2ecc71; text-anchor: start;">  console.log(response));</text>
+
+  <rect x="500" y="280" width="350" height="160" rx="5" style="fill: #2c3e50; stroke: #34495e; stroke-width: 2;"/>
+  <text x="675" y="310" class="label" style="fill: white; font-weight: bold;">Parent (Host)</text>
+  <text x="520" y="340" class="code" style="fill: #f39c12; text-anchor: start;">const host = new</text>
+  <text x="520" y="360" class="code" style="fill: #f39c12; text-anchor: start;">  IframeMessageHost();</text>
+  <text x="520" y="390" class="code" style="fill: #2ecc71; text-anchor: start;">@Listen('greeting')</text>
+  <text x="520" y="410" class="code" style="fill: #3498db; text-anchor: start;">return of(`Hello ${data}!`);</text>
+
+</svg>

package/docs/images/worker-communication.svg

@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500">
+  <defs>
+    <style>
+      .title { font: bold 24px sans-serif; fill: #2c3e50; }
+      .subtitle { font: 16px sans-serif; fill: #7f8c8d; }
+      .label { font: 14px sans-serif; fill: #34495e; }
+      .code { font: 12px monospace; fill: #2c3e50; }
+      .thread { fill: #ecf0f1; stroke: #95a5a6; stroke-width: 3; }
+      .service { fill: #9b59b6; stroke: #8e44ad; stroke-width: 2; }
+      .arrow { stroke: #e74c3c; stroke-width: 3; fill: none; marker-end: url(#arrowhead); }
+      .arrow-back { stroke: #2ecc71; stroke-width: 3; fill: none; marker-end: url(#arrowhead-back); }
+      text { text-anchor: middle; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#e74c3c" />
+    </marker>
+    <marker id="arrowhead-back" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#2ecc71" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="450" y="35" class="title">Web Worker Communication</text>
+  <text x="450" y="60" class="subtitle">Bidirectional messaging between main thread and worker</text>
+
+  <!-- Main Thread -->
+  <rect x="50" y="100" width="350" height="350" rx="8" class="thread"/>
+  <text x="225" y="130" class="label" style="font-weight: bold; font-size: 18px;">Main Thread</text>
+
+  <!-- Main Service -->
+  <rect x="80" y="160" width="290" height="110" rx="5" class="service"/>
+  <text x="225" y="190" class="label" style="fill: white; font-weight: bold;">WorkerMessageService</text>
+  <text x="225" y="215" class="code" style="fill: #f39c12;">@Request('processData')</text>
+  <text x="225" y="235" class="label" style="fill: white; font-size: 11px;">Send to worker</text>
+  <text x="225" y="255" class="code" style="fill: #2ecc71;">@Listen('progress')</text>
+
+  <!-- Worker initialization -->
+  <rect x="80" y="300" width="290" height="120" rx="5" style="fill: #34495e;"/>
+  <text x="225" y="330" class="label" style="fill: white; font-weight: bold;">Worker Initialization</text>
+  <text x="100" y="360" class="code" style="fill: #3498db; text-anchor: start;">const worker = new</text>
+  <text x="100" y="380" class="code" style="fill: #3498db; text-anchor: start;">  Worker('./worker.js');</text>
+  <text x="100" y="405" class="code" style="fill: #f39c12; text-anchor: start;">new MainThread(worker);</text>
+
+  <!-- Worker Thread -->
+  <rect x="500" y="100" width="350" height="350" rx="8" class="thread"/>
+  <text x="675" y="130" class="label" style="font-weight: bold; font-size: 18px;">Worker Thread</text>
+
+  <!-- Worker Service -->
+  <rect x="530" y="160" width="290" height="110" rx="5" class="service"/>
+  <text x="675" y="190" class="label" style="fill: white; font-weight: bold;">WorkerMessageService</text>
+  <text x="675" y="215" class="code" style="fill: #2ecc71;">@Listen('processData')</text>
+  <text x="675" y="235" class="label" style="fill: white; font-size: 11px;">Process requests</text>
+  <text x="675" y="255" class="code" style="fill: #f39c12;">@Request('progress')</text>
+
+  <!-- Worker context -->
+  <rect x="530" y="300" width="290" height="120" rx="5" style="fill: #34495e;"/>
+  <text x="675" y="330" class="label" style="fill: white; font-weight: bold;">Self Context</text>
+  <text x="550" y="360" class="code" style="fill: #2ecc71; text-anchor: start;">// Inside worker.js</text>
+  <text x="550" y="380" class="code" style="fill: #3498db; text-anchor: start;">const service = new</text>
+  <text x="550" y="400" class="code" style="fill: #3498db; text-anchor: start;">  WorkerThread(); // auto self</text>
+
+  <!-- Communication Arrows -->
+  <!-- Request arrow -->
+  <path d="M 370 200 L 530 200" class="arrow"/>
+  <text x="450" y="190" class="label" style="fill: #e74c3c; font-weight: bold;">postMessage(request)</text>
+
+  <!-- Response arrow -->
+  <path d="M 530 240 L 370 240" class="arrow-back"/>
+  <text x="450" y="260" class="label" style="fill: #2ecc71; font-weight: bold;">postMessage(response)</text>
+
+  <!-- Progress update arrow -->
+  <path d="M 530 350 L 370 350" class="arrow"/>
+  <text x="450" y="340" class="label" style="fill: #e74c3c; font-weight: bold; font-size: 12px;">progress updates</text>
+
+</svg>

package/iframe/channel-path-splitter.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHANNEL_PATH_SPLITTER = void 0;
+exports.CHANNEL_PATH_SPLITTER = '__messenger_channel_splitter__';

package/iframe/channel-path-splitter.d.ts

@@ -0,0 +1 @@
+export declare const CHANNEL_PATH_SPLITTER = "__messenger_channel_splitter__";

package/iframe/channel-path-splitter.js

@@ -0,0 +1,3 @@
+export const CHANNEL_PATH_SPLITTER = '__messenger_channel_splitter__';
+
+//# sourceMappingURL=channel-path-splitter.js.map

package/iframe/channel-path-splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/channel-path-splitter.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,gCAAgC,CAAC","file":"channel-path-splitter.js","sourcesContent":["export const CHANNEL_PATH_SPLITTER = '__messenger_channel_splitter__';\n"]}

package/iframe/default-channel-name.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CHANNEL_NAME = void 0;
+exports.DEFAULT_CHANNEL_NAME = 'MessengerIframeChannelDefault';

package/iframe/default-channel-name.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CHANNEL_NAME = "MessengerIframeChannelDefault";

package/iframe/default-channel-name.js

@@ -0,0 +1,3 @@
+export const DEFAULT_CHANNEL_NAME = 'MessengerIframeChannelDefault';
+
+//# sourceMappingURL=default-channel-name.js.map

package/iframe/default-channel-name.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/default-channel-name.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,+BAA+B,CAAC","file":"default-channel-name.js","sourcesContent":["export const DEFAULT_CHANNEL_NAME = 'MessengerIframeChannelDefault';\n"]}

package/iframe/iframe.type.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/iframe/iframe.type.d.ts

@@ -0,0 +1 @@
+export type IFrame = HTMLIFrameElement | (() => HTMLIFrameElement);

package/iframe/iframe.type.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=iframe.type.js.map

package/iframe/iframe.type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/iframe.type.ts"],"names":[],"mappings":"","file":"iframe.type.js","sourcesContent":["export type IFrame = HTMLIFrameElement | (() => HTMLIFrameElement);"]}

package/iframe/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeMessageService = exports.IframeMessageHost = exports.IframeMessageClient = exports.Listen = exports.Request = void 0;
+var request_decorator_1 = require("../request.decorator");
+Object.defineProperty(exports, "Request", { enumerable: true, get: function () { return request_decorator_1.Request; } });
+var listen_decorator_1 = require("../listen.decorator");
+Object.defineProperty(exports, "Listen", { enumerable: true, get: function () { return listen_decorator_1.Listen; } });
+var message_client_1 = require("./message-client");
+Object.defineProperty(exports, "IframeMessageClient", { enumerable: true, get: function () { return message_client_1.IframeMessageClient; } });
+var message_host_1 = require("./message-host");
+Object.defineProperty(exports, "IframeMessageHost", { enumerable: true, get: function () { return message_host_1.IframeMessageHost; } });
+var message_service_1 = require("./message-service");
+Object.defineProperty(exports, "IframeMessageService", { enumerable: true, get: function () { return message_service_1.IframeMessageService; } });

package/iframe/index.d.ts

@@ -0,0 +1,6 @@
+export { Request } from '../request.decorator';
+export { Listen } from '../listen.decorator';
+export { IframeMessageClient } from './message-client';
+export { IframeMessageHost } from './message-host';
+export { IframeMessageService } from './message-service';
+export { UpcomingMessage } from './upcoming-message';

package/iframe/index.js

@@ -0,0 +1,7 @@
+export { Request } from '../request.decorator';
+export { Listen } from '../listen.decorator';
+export { IframeMessageClient } from './message-client';
+export { IframeMessageHost } from './message-host';
+export { IframeMessageService } from './message-service';
+
+//# sourceMappingURL=index.js.map

package/iframe/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC","file":"index.js","sourcesContent":["export { Request } from '../request.decorator';\nexport { Listen } from '../listen.decorator';\nexport { IframeMessageClient } from './message-client';\nexport { IframeMessageHost } from './message-host';\nexport { IframeMessageService } from './message-service';\nexport { UpcomingMessage } from './upcoming-message';\n"]}

package/iframe/message-client.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeMessageClient = void 0;
+const js_utils_1 = require("@telperion/js-utils");
+const rxjs_1 = require("rxjs");
+const message_client_1 = require("../message-client");
+const selectors_1 = require("../selectors");
+const channel_path_splitter_1 = require("./channel-path-splitter");
+const default_channel_name_1 = require("./default-channel-name");
+class IframeMessageClient extends message_client_1.MessageClient {
+    channelName;
+    [selectors_1.RESPONSES$] = new rxjs_1.Subject();
+    #_targetFrame;
+    get #targetFrame() {
+        return typeof this.#_targetFrame === 'function'
+            ? this.#_targetFrame() ?? null
+            : this.#_targetFrame ?? null;
+    }
+    constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
+        super();
+        this.channelName = channelName;
+        this.#_targetFrame = targetFrame;
+        window.addEventListener('message', ({ data, source }) => {
+            const target = this.#targetFrame;
+            if (target && source !== target.contentWindow)
+                return;
+            if (!data
+                || typeof data !== 'object'
+                || typeof data.id === 'undefined'
+                || typeof data.completed === 'undefined') {
+                return;
+            }
+            this[selectors_1.RESPONSES$].next(data);
+        });
+    }
+    [selectors_1.SEND](message) {
+        message = { ...message, path: `${this.channelName}${channel_path_splitter_1.CHANNEL_PATH_SPLITTER}${message.path}` };
+        const target = this.#targetFrame;
+        if (target) {
+            target.contentWindow.postMessage(message, '*');
+        }
+        else {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    [selectors_1.GET_NEW_ID]() {
+        return (0, js_utils_1.uniqueId)('messenger-iframe-message');
+    }
+}
+exports.IframeMessageClient = IframeMessageClient;

package/iframe/message-client.d.ts

@@ -0,0 +1,14 @@
+import { Subject } from 'rxjs';
+import { MessageClient } from '../message-client';
+import { MessageResponse } from '../message-response.type';
+import { Message } from '../message.interface';
+import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
+import { IFrame } from './iframe.type';
+export declare class IframeMessageClient extends MessageClient {
+    #private;
+    private channelName;
+    [RESPONSES$]: Subject<MessageResponse>;
+    constructor(channelName?: string, targetFrame?: IFrame);
+    [SEND]<T>(message: Message<T>): void;
+    protected [GET_NEW_ID](): string;
+}

package/iframe/message-client.js

@@ -0,0 +1,48 @@
+import { uniqueId } from '@telperion/js-utils';
+import { Subject } from 'rxjs';
+import { MessageClient } from '../message-client';
+import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
+import { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';
+import { DEFAULT_CHANNEL_NAME } from './default-channel-name';
+export class IframeMessageClient extends MessageClient {
+    channelName;
+    [RESPONSES$] = new Subject();
+    #_targetFrame;
+    get #targetFrame() {
+        return typeof this.#_targetFrame === 'function'
+            ? this.#_targetFrame() ?? null
+            : this.#_targetFrame ?? null;
+    }
+    constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
+        super();
+        this.channelName = channelName;
+        this.#_targetFrame = targetFrame;
+        window.addEventListener('message', ({ data, source }) => {
+            const target = this.#targetFrame;
+            if (target && source !== target.contentWindow)
+                return;
+            if (!data
+                || typeof data !== 'object'
+                || typeof data.id === 'undefined'
+                || typeof data.completed === 'undefined') {
+                return;
+            }
+            this[RESPONSES$].next(data);
+        });
+    }
+    [SEND](message) {
+        message = { ...message, path: `${this.channelName}${CHANNEL_PATH_SPLITTER}${message.path}` };
+        const target = this.#targetFrame;
+        if (target) {
+            target.contentWindow.postMessage(message, '*');
+        }
+        else {
+            window.parent.postMessage(message, '*');
+        }
+    }
+    [GET_NEW_ID]() {
+        return uniqueId('messenger-iframe-message');
+    }
+}
+
+//# sourceMappingURL=message-client.js.map

package/iframe/message-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,OAAO,mBAAoB,SAAQ,aAAa;IAW1C;IAVH,CAAC,UAAU,CAAC,GAAG,IAAI,OAAO,EAAmB,CAAC;IACrD,aAAa,CAAqB;IAElC,IAAI,YAAY;QACd,OAAO,OAAO,IAAI,CAAC,aAAa,KAAK,UAAU;YAC7C,CAAC,CAAE,IAAI,CAAC,aAAyC,EAAE,IAAI,IAAI;YAC3D,CAAC,CAAC,IAAI,CAAC,aAAkC,IAAI,IAAI,CAAC;IACtD,CAAC;IAED,YACU,cAAc,oBAAoB,EAC1C,WAAoB;QAEpB,KAAK,EAAE,CAAC;QAHA,gBAAW,GAAX,WAAW,CAAuB;QAK1C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC;QAEjC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAA2C,EAAE,EAAE;YAC/F,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;YAEjC,IAAI,MAAM,IAAI,MAAM,KAAK,MAAM,CAAC,aAAa;gBAAE,OAAO;YAEtD,IAAI,CAAC,IAAI;mBACJ,OAAO,IAAI,KAAK,QAAQ;mBACxB,OAAO,IAAI,CAAC,EAAE,KAAK,WAAW;mBAC9B,OAAO,IAAI,CAAC,SAAS,KAAK,WAAW,EACxC,CAAC;gBACD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,CAAC,IAAI,CAAC,CAAI,OAAmB;QAClC,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,GAAG,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;QAE7F,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;QAEjC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,aAAc,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAES,CAAC,UAAU,CAAC;QACpB,OAAO,QAAQ,CAAC,0BAA0B,CAAW,CAAC;IACxD,CAAC;CACF","file":"message-client.js","sourcesContent":["import { uniqueId } from '@telperion/js-utils';\nimport { Subject } from 'rxjs';\nimport { MessageClient } from '../message-client';\nimport { MessageResponse, SuccessfulMessageResponse } from '../message-response.type';\nimport { Message } from '../message.interface';\nimport { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';\nimport { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';\nimport { DEFAULT_CHANNEL_NAME } from './default-channel-name';\nimport { IFrame } from './iframe.type';\n\nexport class IframeMessageClient extends MessageClient {\n  public [RESPONSES$] = new Subject<MessageResponse>();\n  #_targetFrame: IFrame | undefined;\n\n  get #targetFrame(): null | HTMLIFrameElement {\n    return typeof this.#_targetFrame === 'function'\n      ? (this.#_targetFrame as () => HTMLIFrameElement)() ?? null\n      : this.#_targetFrame as HTMLIFrameElement ?? null;\n  }\n\n  constructor(\n    private channelName = DEFAULT_CHANNEL_NAME,\n    targetFrame?: IFrame\n  ) {\n    super();\n\n    this.#_targetFrame = targetFrame;\n\n    window.addEventListener('message', ({ data, source }: MessageEvent<SuccessfulMessageResponse>) => {\n      const target = this.#targetFrame;\n\n      if (target && source !== target.contentWindow) return;\n\n      if (!data\n        || typeof data !== 'object'\n        || typeof data.id === 'undefined'\n        || typeof data.completed === 'undefined'\n      ) {\n        return;\n      }\n\n      this[RESPONSES$].next(data);\n    });\n  }\n\n  public [SEND]<T>(message: Message<T>) {\n    message = { ...message, path: `${this.channelName}${CHANNEL_PATH_SPLITTER}${message.path}` };\n\n    const target = this.#targetFrame;\n\n    if (target) {\n      target.contentWindow!.postMessage(message, '*');\n    } else {\n      window.parent.postMessage(message, '*');\n    }\n  }\n\n  protected [GET_NEW_ID](): string {\n    return uniqueId('messenger-iframe-message') as string;\n  }\n}\n"]}

package/iframe/message-host.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeMessageHost = void 0;
+const js_utils_1 = require("@telperion/js-utils");
+const rxjs_1 = require("rxjs");
+const message_host_1 = require("../message-host");
+const channel_path_splitter_1 = require("./channel-path-splitter");
+const default_channel_name_1 = require("./default-channel-name");
+const source_id_splitter_1 = require("./source-id-splitter");
+const selectors_1 = require("../selectors");
+class IframeMessageHost extends message_host_1.MessageHost {
+    channelName;
+    #requests = new rxjs_1.Subject();
+    #sources = [];
+    #_targetFrame;
+    get #targetFrame() {
+        return typeof this.#_targetFrame === 'function'
+            ? this.#_targetFrame() || null
+            : this.#_targetFrame || null;
+    }
+    constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
+        super();
+        this.channelName = channelName;
+        this.#_targetFrame = targetFrame;
+        window.addEventListener('message', this.#handler);
+        this[selectors_1.LISTEN](this.#requests);
+    }
+    terminate() {
+        window.removeEventListener('message', this.#handler);
+    }
+    [selectors_1.RESPONSE](message) {
+        const [sourceId, messageId] = message.id.split(source_id_splitter_1.SOURCE_ID_SPLITTER);
+        const [, source] = this.#sources.find(([sId]) => sId === sourceId);
+        message = {
+            ...message,
+            id: messageId,
+        };
+        source.postMessage(message);
+    }
+    #handler = ({ data, source }) => {
+        if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {
+            return;
+        }
+        const targetFrame = this.#targetFrame;
+        if (targetFrame && targetFrame.contentWindow !== source) {
+            return;
+        }
+        const [channel, path] = data.path.split(channel_path_splitter_1.CHANNEL_PATH_SPLITTER);
+        if (channel !== this.channelName) {
+            return;
+        }
+        if (!this.#sources.some(([, s]) => s === source)) {
+            this.#sources.push([(0, js_utils_1.uniqueId)('messenger-iframe-source'), source]);
+        }
+        const [sourceId] = this.#sources.find(([, s]) => s === source);
+        this.#requests.next({
+            body: targetFrame ? data.body : { data: data.body, sender: source },
+            id: `${sourceId}${source_id_splitter_1.SOURCE_ID_SPLITTER}${data.id}`,
+            path,
+        });
+    };
+}
+exports.IframeMessageHost = IframeMessageHost;

package/iframe/message-host.d.ts

@@ -0,0 +1,11 @@
+import { MessageHost } from '../message-host';
+import { SuccessfulMessageResponse } from '../message-response.type';
+import { IFrame } from './iframe.type';
+import { RESPONSE } from '../selectors';
+export declare class IframeMessageHost extends MessageHost {
+    #private;
+    private channelName;
+    constructor(channelName?: string, targetFrame?: IFrame);
+    terminate(): void;
+    protected [RESPONSE](message: SuccessfulMessageResponse): void;
+}

package/iframe/message-host.js

@@ -0,0 +1,61 @@
+import { uniqueId } from '@telperion/js-utils';
+import { Subject } from 'rxjs';
+import { MessageHost } from '../message-host';
+import { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';
+import { DEFAULT_CHANNEL_NAME } from './default-channel-name';
+import { SOURCE_ID_SPLITTER } from './source-id-splitter';
+import { LISTEN, RESPONSE } from '../selectors';
+export class IframeMessageHost extends MessageHost {
+    channelName;
+    #requests = new Subject();
+    #sources = [];
+    #_targetFrame;
+    get #targetFrame() {
+        return typeof this.#_targetFrame === 'function'
+            ? this.#_targetFrame() || null
+            : this.#_targetFrame || null;
+    }
+    constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
+        super();
+        this.channelName = channelName;
+        this.#_targetFrame = targetFrame;
+        window.addEventListener('message', this.#handler);
+        this[LISTEN](this.#requests);
+    }
+    terminate() {
+        window.removeEventListener('message', this.#handler);
+    }
+    [RESPONSE](message) {
+        const [sourceId, messageId] = message.id.split(SOURCE_ID_SPLITTER);
+        const [, source] = this.#sources.find(([sId]) => sId === sourceId);
+        message = {
+            ...message,
+            id: messageId,
+        };
+        source.postMessage(message);
+    }
+    #handler = ({ data, source }) => {
+        if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {
+            return;
+        }
+        const targetFrame = this.#targetFrame;
+        if (targetFrame && targetFrame.contentWindow !== source) {
+            return;
+        }
+        const [channel, path] = data.path.split(CHANNEL_PATH_SPLITTER);
+        if (channel !== this.channelName) {
+            return;
+        }
+        if (!this.#sources.some(([, s]) => s === source)) {
+            this.#sources.push([uniqueId('messenger-iframe-source'), source]);
+        }
+        const [sourceId] = this.#sources.find(([, s]) => s === source);
+        this.#requests.next({
+            body: targetFrame ? data.body : { data: data.body, sender: source },
+            id: `${sourceId}${SOURCE_ID_SPLITTER}${data.id}`,
+            path,
+        });
+    };
+}
+
+//# sourceMappingURL=message-host.js.map

package/iframe/message-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-host.ts"],"names":[],"mappings":"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","file":"message-host.js","sourcesContent":["import { uniqueId } from '@telperion/js-utils';\nimport { Subject } from 'rxjs';\nimport { MessageHost } from '../message-host';\nimport { SuccessfulMessageResponse } from '../message-response.type';\nimport { Message } from '../message.interface';\nimport { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';\nimport { DEFAULT_CHANNEL_NAME } from './default-channel-name';\nimport { SOURCE_ID_SPLITTER } from './source-id-splitter';\nimport { IFrame } from './iframe.type';\nimport { LISTEN, RESPONSE } from '../selectors';\n\nexport class IframeMessageHost extends MessageHost {\n  #requests = new Subject<Message>();\n  #sources: Array<[string, MessageEventSource]> = [];\n  #_targetFrame: IFrame | undefined;\n\n  get #targetFrame(): null | HTMLIFrameElement {\n    return typeof this.#_targetFrame === 'function'\n      ? (this.#_targetFrame as () => HTMLIFrameElement)() || null\n      : this.#_targetFrame as HTMLIFrameElement || null;\n  }\n\n  constructor(\n    private channelName = DEFAULT_CHANNEL_NAME,\n    targetFrame?: IFrame\n  ) {\n    super();\n\n    this.#_targetFrame = targetFrame;\n\n    window.addEventListener('message', this.#handler);\n\n    this[LISTEN](this.#requests);\n  }\n\n  public terminate(): void {\n    window.removeEventListener('message', this.#handler);\n  }\n\n  protected [RESPONSE](message: SuccessfulMessageResponse): void {\n    const [sourceId, messageId] = message.id.split(SOURCE_ID_SPLITTER);\n    const [, source] = this.#sources.find(([sId]) => sId === sourceId)!;\n\n    message = {\n      ...message,\n      id: messageId,\n    };\n\n    (source as any).postMessage(message);\n  }\n\n  #handler = ({ data, source }: MessageEvent<Message>) => {\n    if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {\n      return;\n    }\n\n    const targetFrame = this.#targetFrame;\n\n    if (targetFrame && targetFrame.contentWindow !== source) {\n      return;\n    }\n\n    const [channel, path] = data.path.split(CHANNEL_PATH_SPLITTER);\n\n    if (channel !== this.channelName) {\n      return;\n    }\n\n    if (!this.#sources.some(([, s]) => s === source)) {\n      this.#sources.push([uniqueId('messenger-iframe-source') as string, source!]);\n    }\n\n    const [sourceId] = this.#sources.find(([, s]) => s === source)!;\n    this.#requests.next({\n      body: targetFrame ? data.body : { data: data.body, sender: source },\n      id: `${sourceId}${SOURCE_ID_SPLITTER}${data.id}`,\n      path,\n    });\n  };\n}\n"]}

package/iframe/message-service.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IframeMessageService = void 0;
+const mixin_1 = require("@telperion/js-utils/class/mixin");
+const message_client_1 = require("./message-client");
+const message_host_1 = require("./message-host");
+const default_channel_name_1 = require("./default-channel-name");
+class IframeMessageService extends (0, mixin_1.mixin)(message_host_1.IframeMessageHost, message_client_1.IframeMessageClient) {
+    constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
+        super([channelName, targetFrame], [channelName, targetFrame]);
+    }
+}
+exports.IframeMessageService = IframeMessageService;

package/iframe/message-service.d.ts

@@ -0,0 +1,9 @@
+import { IframeMessageClient } from "./message-client";
+import { IFrame } from "./iframe.type";
+declare const IframeMessageService_base: new (args_0: [channelName?: string | undefined, targetFrame?: IFrame | undefined], args_1: [channelName?: string | undefined, targetFrame?: IFrame | undefined]) => {
+    terminate: () => void;
+} & IframeMessageClient;
+export declare class IframeMessageService extends IframeMessageService_base {
+    constructor(channelName?: string, targetFrame?: IFrame);
+}
+export {};

package/iframe/message-service.js

@@ -0,0 +1,11 @@
+import { mixin } from "@telperion/js-utils/class/mixin";
+import { IframeMessageClient } from "./message-client";
+import { IframeMessageHost } from "./message-host";
+import { DEFAULT_CHANNEL_NAME } from "./default-channel-name";
+export class IframeMessageService extends mixin(IframeMessageHost, IframeMessageClient) {
+    constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
+        super([channelName, targetFrame], [channelName, targetFrame]);
+    }
+}
+
+//# sourceMappingURL=message-service.js.map

package/iframe/message-service.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,iBAAiB,EAAE,mBAAmB,CAAC;IACrF,YACE,WAAW,GAAG,oBAAoB,EAClC,WAAoB;QAEpB,KAAK,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAChE,CAAC;CACF","file":"message-service.js","sourcesContent":["import { mixin } from \"@telperion/js-utils/class/mixin\";\nimport { IframeMessageClient } from \"./message-client\";\nimport { IframeMessageHost } from \"./message-host\";\nimport { DEFAULT_CHANNEL_NAME } from \"./default-channel-name\";\nimport { IFrame } from \"./iframe.type\";\n\nexport class IframeMessageService extends mixin(IframeMessageHost, IframeMessageClient) {\n  constructor(\n    channelName = DEFAULT_CHANNEL_NAME,\n    targetFrame?: IFrame\n  ) {\n    super([channelName, targetFrame], [channelName, targetFrame]);\n  }\n}\n"]}