@telperion/messenger 7.6.3 → 7.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/iframe/iframe.type.d.ts +4 -1
- package/iframe/iframe.type.js.map +1 -1
- package/iframe/message-client.cjs +36 -24
- package/iframe/message-client.d.ts +6 -7
- package/iframe/message-client.js +35 -23
- package/iframe/message-client.js.map +1 -1
- package/iframe/message-host.cjs +28 -15
- package/iframe/message-host.d.ts +5 -6
- package/iframe/message-host.js +27 -14
- package/iframe/message-host.js.map +1 -1
- package/iframe/message-service.cjs +4 -0
- package/iframe/message-service.d.ts +5 -3
- package/iframe/message-service.js +4 -0
- package/iframe/message-service.js.map +1 -1
- package/package.json +1 -1
package/iframe/iframe.type.d.ts
CHANGED
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type IFrameType = HTMLIFrameElement | undefined;
|
|
2
|
+
export type IFramePromise = Promise<IFrameType>;
|
|
3
|
+
export type IFrameFactory = () => IFrameType | IFramePromise;
|
|
4
|
+
export type IFrameArg = IFrameType | IFramePromise | IFrameFactory;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/iframe.type.ts"],"names":[],"mappings":"","file":"iframe.type.js","sourcesContent":["export type
|
|
1
|
+
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/iframe.type.ts"],"names":[],"mappings":"","file":"iframe.type.js","sourcesContent":["export type IFrameType = HTMLIFrameElement | undefined;\r\nexport type IFramePromise = Promise<IFrameType>;\r\nexport type IFrameFactory = () => IFrameType | IFramePromise;\r\nexport type IFrameArg = IFrameType | IFramePromise | IFrameFactory;\r\n"]}
|
|
@@ -1,43 +1,55 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.IframeMessageClient = void 0;
|
|
4
|
-
const
|
|
4
|
+
const unique_id_1 = require("@telperion/js-utils/unique-id");
|
|
5
|
+
const noop_1 = require("@telperion/js-utils/function/noop");
|
|
6
|
+
const promisify_1 = require("@telperion/js-utils/promise/promisify");
|
|
7
|
+
const timeout_1 = require("@telperion/js-utils/promise/timeout");
|
|
5
8
|
const rxjs_1 = require("rxjs");
|
|
6
9
|
const message_client_1 = require("../message-client");
|
|
7
10
|
const selectors_1 = require("../selectors");
|
|
8
11
|
const channel_path_splitter_1 = require("./channel-path-splitter");
|
|
9
12
|
const default_channel_name_1 = require("./default-channel-name");
|
|
10
|
-
const
|
|
11
|
-
const OPTION_TARGET_FRAME = Symbol('IframeMessageClient Option Target Frame');
|
|
13
|
+
const TARGET = Symbol('IframeMessageClient Target');
|
|
12
14
|
class IframeMessageClient extends message_client_1.MessageClient {
|
|
13
15
|
channelName;
|
|
14
16
|
[selectors_1.RESPONSES$] = new rxjs_1.Subject();
|
|
15
|
-
[
|
|
16
|
-
get [TARGET_FRAME]() {
|
|
17
|
-
return typeof this[OPTION_TARGET_FRAME] === 'function'
|
|
18
|
-
? this[OPTION_TARGET_FRAME]() ?? null
|
|
19
|
-
: this[OPTION_TARGET_FRAME] ?? null;
|
|
20
|
-
}
|
|
17
|
+
[TARGET] = Promise.resolve([undefined, noop_1.noop]);
|
|
21
18
|
constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
22
19
|
super();
|
|
23
20
|
this.channelName = channelName;
|
|
24
|
-
this
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
21
|
+
this.initialize(targetFrame);
|
|
22
|
+
}
|
|
23
|
+
initialize(target) {
|
|
24
|
+
this[TARGET] = Promise.race([
|
|
25
|
+
this[TARGET],
|
|
26
|
+
(0, timeout_1.timeout)(5000, [null, noop_1.noop])
|
|
27
|
+
])
|
|
28
|
+
.then(([_, deinitialize]) => deinitialize())
|
|
29
|
+
.catch(noop_1.noop)
|
|
30
|
+
.then(() => {
|
|
31
|
+
const frame = typeof target === 'function' ? target() : target;
|
|
32
|
+
return (0, promisify_1.promisify)(frame);
|
|
33
|
+
})
|
|
34
|
+
.then((frame) => {
|
|
35
|
+
const listener = ({ data, source }) => {
|
|
36
|
+
if (frame && source !== frame.contentWindow)
|
|
37
|
+
return;
|
|
38
|
+
if (!data
|
|
39
|
+
|| typeof data !== 'object'
|
|
40
|
+
|| typeof data.id === 'undefined'
|
|
41
|
+
|| typeof data.completed === 'undefined') {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
this[selectors_1.RESPONSES$].next(data);
|
|
45
|
+
};
|
|
46
|
+
window.addEventListener('message', listener);
|
|
47
|
+
return [frame, () => window.removeEventListener('message', listener)];
|
|
36
48
|
});
|
|
37
49
|
}
|
|
38
|
-
[selectors_1.SEND](message) {
|
|
50
|
+
async [selectors_1.SEND](message) {
|
|
39
51
|
message = { ...message, path: `${this.channelName}${channel_path_splitter_1.CHANNEL_PATH_SPLITTER}${message.path}` };
|
|
40
|
-
const target = this[
|
|
52
|
+
const [target] = await this[TARGET];
|
|
41
53
|
if (target) {
|
|
42
54
|
target.contentWindow.postMessage(message, '*');
|
|
43
55
|
}
|
|
@@ -46,7 +58,7 @@ class IframeMessageClient extends message_client_1.MessageClient {
|
|
|
46
58
|
}
|
|
47
59
|
}
|
|
48
60
|
[selectors_1.GET_NEW_ID]() {
|
|
49
|
-
return (0,
|
|
61
|
+
return (0, unique_id_1.uniqueId)('messenger-iframe-message');
|
|
50
62
|
}
|
|
51
63
|
}
|
|
52
64
|
exports.IframeMessageClient = IframeMessageClient;
|
|
@@ -3,16 +3,15 @@ import { MessageClient } from '../message-client';
|
|
|
3
3
|
import { MessageResponse } from '../message-response.type';
|
|
4
4
|
import { Message } from '../message.interface';
|
|
5
5
|
import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
|
|
6
|
-
import {
|
|
7
|
-
declare const
|
|
8
|
-
declare const OPTION_TARGET_FRAME: unique symbol;
|
|
6
|
+
import { IFrameArg } from './iframe.type';
|
|
7
|
+
declare const TARGET: unique symbol;
|
|
9
8
|
export declare class IframeMessageClient extends MessageClient {
|
|
10
9
|
private channelName;
|
|
11
10
|
[RESPONSES$]: Subject<MessageResponse>;
|
|
12
|
-
private [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
[SEND]<T>(message: Message<T>): void
|
|
11
|
+
private [TARGET];
|
|
12
|
+
constructor(channelName?: string, targetFrame?: IFrameArg);
|
|
13
|
+
initialize(target: IFrameArg): void;
|
|
14
|
+
[SEND]<T>(message: Message<T>): Promise<void>;
|
|
16
15
|
protected [GET_NEW_ID](): string;
|
|
17
16
|
}
|
|
18
17
|
export {};
|
package/iframe/message-client.js
CHANGED
|
@@ -1,40 +1,52 @@
|
|
|
1
|
-
import { uniqueId } from '@telperion/js-utils';
|
|
1
|
+
import { uniqueId } from '@telperion/js-utils/unique-id';
|
|
2
|
+
import { noop } from '@telperion/js-utils/function/noop';
|
|
3
|
+
import { promisify } from '@telperion/js-utils/promise/promisify';
|
|
4
|
+
import { timeout } from '@telperion/js-utils/promise/timeout';
|
|
2
5
|
import { Subject } from 'rxjs';
|
|
3
6
|
import { MessageClient } from '../message-client';
|
|
4
7
|
import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
|
|
5
8
|
import { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';
|
|
6
9
|
import { DEFAULT_CHANNEL_NAME } from './default-channel-name';
|
|
7
|
-
const
|
|
8
|
-
const OPTION_TARGET_FRAME = Symbol('IframeMessageClient Option Target Frame');
|
|
10
|
+
const TARGET = Symbol('IframeMessageClient Target');
|
|
9
11
|
export class IframeMessageClient extends MessageClient {
|
|
10
12
|
channelName;
|
|
11
13
|
[RESPONSES$] = new Subject();
|
|
12
|
-
[
|
|
13
|
-
get [TARGET_FRAME]() {
|
|
14
|
-
return typeof this[OPTION_TARGET_FRAME] === 'function'
|
|
15
|
-
? this[OPTION_TARGET_FRAME]() ?? null
|
|
16
|
-
: this[OPTION_TARGET_FRAME] ?? null;
|
|
17
|
-
}
|
|
14
|
+
[TARGET] = Promise.resolve([undefined, noop]);
|
|
18
15
|
constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
19
16
|
super();
|
|
20
17
|
this.channelName = channelName;
|
|
21
|
-
this
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
18
|
+
this.initialize(targetFrame);
|
|
19
|
+
}
|
|
20
|
+
initialize(target) {
|
|
21
|
+
this[TARGET] = Promise.race([
|
|
22
|
+
this[TARGET],
|
|
23
|
+
timeout(5000, [null, noop])
|
|
24
|
+
])
|
|
25
|
+
.then(([_, deinitialize]) => deinitialize())
|
|
26
|
+
.catch(noop)
|
|
27
|
+
.then(() => {
|
|
28
|
+
const frame = typeof target === 'function' ? target() : target;
|
|
29
|
+
return promisify(frame);
|
|
30
|
+
})
|
|
31
|
+
.then((frame) => {
|
|
32
|
+
const listener = ({ data, source }) => {
|
|
33
|
+
if (frame && source !== frame.contentWindow)
|
|
34
|
+
return;
|
|
35
|
+
if (!data
|
|
36
|
+
|| typeof data !== 'object'
|
|
37
|
+
|| typeof data.id === 'undefined'
|
|
38
|
+
|| typeof data.completed === 'undefined') {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
this[RESPONSES$].next(data);
|
|
42
|
+
};
|
|
43
|
+
window.addEventListener('message', listener);
|
|
44
|
+
return [frame, () => window.removeEventListener('message', listener)];
|
|
33
45
|
});
|
|
34
46
|
}
|
|
35
|
-
[SEND](message) {
|
|
47
|
+
async [SEND](message) {
|
|
36
48
|
message = { ...message, path: `${this.channelName}${CHANNEL_PATH_SPLITTER}${message.path}` };
|
|
37
|
-
const target = this[
|
|
49
|
+
const [target] = await this[TARGET];
|
|
38
50
|
if (target) {
|
|
39
51
|
target.contentWindow.postMessage(message, '*');
|
|
40
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-client.ts"],"names":[],"mappings":"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","file":"message-client.js","sourcesContent":["import { uniqueId } from '@telperion/js-utils/unique-id';\nimport { noop } from '@telperion/js-utils/function/noop';\nimport { promisify } from '@telperion/js-utils/promise/promisify';\nimport { timeout } from '@telperion/js-utils/promise/timeout';\nimport { Subject } from 'rxjs';\n\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 { IFrameArg, IFrameType } from './iframe.type';\n\nconst TARGET = Symbol('IframeMessageClient Target');\n\nexport class IframeMessageClient extends MessageClient {\n public [RESPONSES$] = new Subject<MessageResponse>();\n private [TARGET] = Promise.resolve([undefined as IFrameType, noop] as const);\n\n constructor(\n private channelName = DEFAULT_CHANNEL_NAME,\n targetFrame?: IFrameArg\n ) {\n super();\n\n this.initialize(targetFrame);\n }\n\n initialize(target: IFrameArg): void {\n this[TARGET] = Promise.race([\n this[TARGET],\n timeout(5000, [null, noop] as const)\n ])\n .then(([_, deinitialize]) => deinitialize())\n .catch(noop)\n .then(() => {\n const frame = typeof target === 'function' ? target() : target;\n return promisify(frame);\n })\n .then((frame) => {\n const listener = ({ data, source }: MessageEvent<SuccessfulMessageResponse>) => {\n if (frame && source !== frame.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 window.addEventListener('message', listener);\n\n return [frame, () => window.removeEventListener('message', listener)];\n })\n }\n\n public async [SEND]<T>(message: Message<T>) {\n message = { ...message, path: `${this.channelName}${CHANNEL_PATH_SPLITTER}${message.path}` };\n\n const [target] = await this[TARGET];\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
CHANGED
|
@@ -1,36 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.IframeMessageHost = void 0;
|
|
4
|
-
const
|
|
4
|
+
const unique_id_1 = require("@telperion/js-utils/unique-id");
|
|
5
|
+
const noop_1 = require("@telperion/js-utils/function/noop");
|
|
6
|
+
const promisify_1 = require("@telperion/js-utils/promise/promisify");
|
|
7
|
+
const timeout_1 = require("@telperion/js-utils/promise/timeout");
|
|
5
8
|
const rxjs_1 = require("rxjs");
|
|
6
9
|
const message_host_1 = require("../message-host");
|
|
7
10
|
const channel_path_splitter_1 = require("./channel-path-splitter");
|
|
8
11
|
const default_channel_name_1 = require("./default-channel-name");
|
|
9
12
|
const source_id_splitter_1 = require("./source-id-splitter");
|
|
10
13
|
const selectors_1 = require("../selectors");
|
|
11
|
-
const OPTIONS_TARGET_FRAME = Symbol('IframeMessageHost Option Target Frame');
|
|
12
|
-
const TARGET_FRAME = Symbol('IframeMessageHost Target Frame');
|
|
13
14
|
const REQUESTS = Symbol('IframeMessageHost Requests');
|
|
14
15
|
const SOURCES = Symbol('IframeMessageHost Sources');
|
|
16
|
+
const HANDLER = Symbol('IframeMessageHost Handler');
|
|
15
17
|
class IframeMessageHost extends message_host_1.MessageHost {
|
|
16
18
|
channelName;
|
|
17
19
|
[REQUESTS] = new rxjs_1.Subject();
|
|
18
20
|
[SOURCES] = [];
|
|
19
|
-
|
|
20
|
-
get [TARGET_FRAME]() {
|
|
21
|
-
return typeof this[OPTIONS_TARGET_FRAME] === 'function'
|
|
22
|
-
? this[OPTIONS_TARGET_FRAME]() ?? null
|
|
23
|
-
: this[OPTIONS_TARGET_FRAME] ?? null;
|
|
24
|
-
}
|
|
21
|
+
#deinitialize = Promise.resolve(noop_1.noop);
|
|
25
22
|
constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
26
23
|
super();
|
|
27
24
|
this.channelName = channelName;
|
|
28
|
-
this
|
|
29
|
-
window.addEventListener('message', this.#handler);
|
|
25
|
+
this.initialize(targetFrame);
|
|
30
26
|
this[selectors_1.LISTEN](this[REQUESTS]);
|
|
31
27
|
}
|
|
28
|
+
initialize(targetFrame) {
|
|
29
|
+
this.#deinitialize = Promise.race([
|
|
30
|
+
this.#deinitialize,
|
|
31
|
+
(0, timeout_1.timeout)(5000, noop_1.noop)
|
|
32
|
+
])
|
|
33
|
+
.then(callback => callback())
|
|
34
|
+
.then(() => {
|
|
35
|
+
const _frame = typeof targetFrame === 'function' ? targetFrame() : targetFrame;
|
|
36
|
+
return (0, promisify_1.promisify)(_frame);
|
|
37
|
+
})
|
|
38
|
+
.then(frame => {
|
|
39
|
+
const handler = this[HANDLER](frame);
|
|
40
|
+
window.addEventListener('message', handler);
|
|
41
|
+
return () => {
|
|
42
|
+
window.removeEventListener('message', handler);
|
|
43
|
+
};
|
|
44
|
+
});
|
|
45
|
+
}
|
|
32
46
|
terminate() {
|
|
33
|
-
|
|
47
|
+
this.#deinitialize.then(callback => callback()).catch(noop_1.noop);
|
|
34
48
|
}
|
|
35
49
|
[selectors_1.RESPONSE](message) {
|
|
36
50
|
const [sourceId, messageId] = message.id.split(source_id_splitter_1.SOURCE_ID_SPLITTER);
|
|
@@ -41,11 +55,10 @@ class IframeMessageHost extends message_host_1.MessageHost {
|
|
|
41
55
|
};
|
|
42
56
|
source.postMessage(message, '*');
|
|
43
57
|
}
|
|
44
|
-
|
|
58
|
+
[HANDLER] = (targetFrame) => ({ data, source }) => {
|
|
45
59
|
if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {
|
|
46
60
|
return;
|
|
47
61
|
}
|
|
48
|
-
const targetFrame = this[TARGET_FRAME];
|
|
49
62
|
if (targetFrame && targetFrame.contentWindow !== source) {
|
|
50
63
|
return;
|
|
51
64
|
}
|
|
@@ -54,7 +67,7 @@ class IframeMessageHost extends message_host_1.MessageHost {
|
|
|
54
67
|
return;
|
|
55
68
|
}
|
|
56
69
|
if (!this[SOURCES].some(([, s]) => s === source)) {
|
|
57
|
-
this[SOURCES].push([(0,
|
|
70
|
+
this[SOURCES].push([(0, unique_id_1.uniqueId)('messenger-iframe-source'), source]);
|
|
58
71
|
}
|
|
59
72
|
const [sourceId] = this[SOURCES].find(([, s]) => s === source);
|
|
60
73
|
this[REQUESTS].next({
|
package/iframe/message-host.d.ts
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { MessageHost } from '../message-host';
|
|
2
2
|
import { SuccessfulMessageResponse } from '../message-response.type';
|
|
3
|
-
import { IFrame } from './iframe.type';
|
|
4
3
|
import { RESPONSE } from '../selectors';
|
|
5
|
-
|
|
6
|
-
declare const TARGET_FRAME: unique symbol;
|
|
4
|
+
import { IFrameArg } from './iframe.type';
|
|
7
5
|
declare const REQUESTS: unique symbol;
|
|
8
6
|
declare const SOURCES: unique symbol;
|
|
7
|
+
declare const HANDLER: unique symbol;
|
|
9
8
|
export declare class IframeMessageHost extends MessageHost {
|
|
10
9
|
#private;
|
|
11
10
|
private channelName;
|
|
12
11
|
private [REQUESTS];
|
|
13
12
|
private [SOURCES];
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
constructor(channelName?: string, targetFrame?: IFrame);
|
|
13
|
+
constructor(channelName?: string, targetFrame?: IFrameArg);
|
|
14
|
+
initialize(targetFrame: IFrameArg): void;
|
|
17
15
|
terminate(): void;
|
|
18
16
|
protected [RESPONSE](message: SuccessfulMessageResponse): void;
|
|
17
|
+
private [HANDLER];
|
|
19
18
|
}
|
|
20
19
|
export {};
|
package/iframe/message-host.js
CHANGED
|
@@ -1,33 +1,47 @@
|
|
|
1
|
-
import { uniqueId } from '@telperion/js-utils';
|
|
1
|
+
import { uniqueId } from '@telperion/js-utils/unique-id';
|
|
2
|
+
import { noop } from '@telperion/js-utils/function/noop';
|
|
3
|
+
import { promisify } from '@telperion/js-utils/promise/promisify';
|
|
4
|
+
import { timeout } from '@telperion/js-utils/promise/timeout';
|
|
2
5
|
import { Subject } from 'rxjs';
|
|
3
6
|
import { MessageHost } from '../message-host';
|
|
4
7
|
import { CHANNEL_PATH_SPLITTER } from './channel-path-splitter';
|
|
5
8
|
import { DEFAULT_CHANNEL_NAME } from './default-channel-name';
|
|
6
9
|
import { SOURCE_ID_SPLITTER } from './source-id-splitter';
|
|
7
10
|
import { LISTEN, RESPONSE } from '../selectors';
|
|
8
|
-
const OPTIONS_TARGET_FRAME = Symbol('IframeMessageHost Option Target Frame');
|
|
9
|
-
const TARGET_FRAME = Symbol('IframeMessageHost Target Frame');
|
|
10
11
|
const REQUESTS = Symbol('IframeMessageHost Requests');
|
|
11
12
|
const SOURCES = Symbol('IframeMessageHost Sources');
|
|
13
|
+
const HANDLER = Symbol('IframeMessageHost Handler');
|
|
12
14
|
export class IframeMessageHost extends MessageHost {
|
|
13
15
|
channelName;
|
|
14
16
|
[REQUESTS] = new Subject();
|
|
15
17
|
[SOURCES] = [];
|
|
16
|
-
|
|
17
|
-
get [TARGET_FRAME]() {
|
|
18
|
-
return typeof this[OPTIONS_TARGET_FRAME] === 'function'
|
|
19
|
-
? this[OPTIONS_TARGET_FRAME]() ?? null
|
|
20
|
-
: this[OPTIONS_TARGET_FRAME] ?? null;
|
|
21
|
-
}
|
|
18
|
+
#deinitialize = Promise.resolve(noop);
|
|
22
19
|
constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
23
20
|
super();
|
|
24
21
|
this.channelName = channelName;
|
|
25
|
-
this
|
|
26
|
-
window.addEventListener('message', this.#handler);
|
|
22
|
+
this.initialize(targetFrame);
|
|
27
23
|
this[LISTEN](this[REQUESTS]);
|
|
28
24
|
}
|
|
25
|
+
initialize(targetFrame) {
|
|
26
|
+
this.#deinitialize = Promise.race([
|
|
27
|
+
this.#deinitialize,
|
|
28
|
+
timeout(5000, noop)
|
|
29
|
+
])
|
|
30
|
+
.then(callback => callback())
|
|
31
|
+
.then(() => {
|
|
32
|
+
const _frame = typeof targetFrame === 'function' ? targetFrame() : targetFrame;
|
|
33
|
+
return promisify(_frame);
|
|
34
|
+
})
|
|
35
|
+
.then(frame => {
|
|
36
|
+
const handler = this[HANDLER](frame);
|
|
37
|
+
window.addEventListener('message', handler);
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener('message', handler);
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
29
43
|
terminate() {
|
|
30
|
-
|
|
44
|
+
this.#deinitialize.then(callback => callback()).catch(noop);
|
|
31
45
|
}
|
|
32
46
|
[RESPONSE](message) {
|
|
33
47
|
const [sourceId, messageId] = message.id.split(SOURCE_ID_SPLITTER);
|
|
@@ -38,11 +52,10 @@ export class IframeMessageHost extends MessageHost {
|
|
|
38
52
|
};
|
|
39
53
|
source.postMessage(message, '*');
|
|
40
54
|
}
|
|
41
|
-
|
|
55
|
+
[HANDLER] = (targetFrame) => ({ data, source }) => {
|
|
42
56
|
if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {
|
|
43
57
|
return;
|
|
44
58
|
}
|
|
45
|
-
const targetFrame = this[TARGET_FRAME];
|
|
46
59
|
if (targetFrame && targetFrame.contentWindow !== source) {
|
|
47
60
|
return;
|
|
48
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../../../libs/messenger/src/iframe/message-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,QAAQ,GAAG,MAAM,CAAC,4BAA4B,CAAC,CAAC;AACtD,MAAM,OAAO,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;AACpD,MAAM,OAAO,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;AAEpD,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAOtC;IANF,CAAC,QAAQ,CAAC,GAAG,IAAI,OAAO,EAAW,CAAC;IACpC,CAAC,OAAO,CAAC,GAAwC,EAAE,CAAC;IAE5D,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEtC,YACU,cAAc,oBAAoB,EAC1C,WAAuB;QAEvB,KAAK,EAAE,CAAC;QAHA,gBAAW,GAAX,WAAW,CAAuB;QAK1C,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAE7B,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,UAAU,CAAC,WAAsB;QAC/B,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;YAChC,IAAI,CAAC,aAAa;YAClB,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;SACpB,CAAC;aACC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;aAC5B,IAAI,CAAC,GAAG,EAAE;YACT,MAAM,MAAM,GAAG,OAAO,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YAC/E,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC;aACD,IAAI,CAAC,KAAK,CAAC,EAAE;YACZ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC;YACrC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAE5C,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACjD,CAAC,CAAA;QACH,CAAC,CAAC,CAAC;IACP,CAAC;IAEM,SAAS;QACd,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAES,CAAC,QAAQ,CAAC,CAAC,OAAkC;QACrD,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;QACnE,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAE,CAAC;QAEpE,OAAO,GAAG;YACR,GAAG,OAAO;YACV,EAAE,EAAE,SAAS;SACd,CAAC;QAED,MAAiB,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAyB,EAAE,EAAE;QAC3F,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,EAAE,KAAK,WAAW,EAAE,CAAC;YACtF,OAAO;QACT,CAAC;QAED,IAAI,WAAW,IAAI,WAAW,CAAC,aAAa,KAAK,MAAM,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAE/D,IAAI,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,yBAAyB,CAAW,EAAE,MAAO,CAAC,CAAC,CAAC;QAC/E,CAAC;QAED,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAE,CAAC;QAChE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE;YACnE,EAAE,EAAE,GAAG,QAAQ,GAAG,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE;YAChD,IAAI;SACL,CAAC,CAAC;IACL,CAAC,CAAC;CACH","file":"message-host.js","sourcesContent":["import { uniqueId } from '@telperion/js-utils/unique-id';\nimport { noop } from '@telperion/js-utils/function/noop';\nimport { promisify } from '@telperion/js-utils/promise/promisify';\nimport { timeout } from '@telperion/js-utils/promise/timeout';\nimport { Subject } from 'rxjs';\n\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 { LISTEN, RESPONSE } from '../selectors';\nimport { IFrameArg, IFrameType } from './iframe.type';\n\nconst REQUESTS = Symbol('IframeMessageHost Requests');\nconst SOURCES = Symbol('IframeMessageHost Sources');\nconst HANDLER = Symbol('IframeMessageHost Handler');\n\nexport class IframeMessageHost extends MessageHost {\n private [REQUESTS] = new Subject<Message>();\n private [SOURCES]: Array<[string, MessageEventSource]> = [];\n\n #deinitialize = Promise.resolve(noop);\n\n constructor(\n private channelName = DEFAULT_CHANNEL_NAME,\n targetFrame?: IFrameArg\n ) {\n super();\n\n this.initialize(targetFrame);\n\n this[LISTEN](this[REQUESTS]);\n }\n\n initialize(targetFrame: IFrameArg): void {\n this.#deinitialize = Promise.race([\n this.#deinitialize,\n timeout(5000, noop)\n ])\n .then(callback => callback())\n .then(() => {\n const _frame = typeof targetFrame === 'function' ? targetFrame() : targetFrame;\n return promisify(_frame);\n })\n .then(frame => {\n const handler = this[HANDLER](frame);\n window.addEventListener('message', handler);\n\n return () => {\n window.removeEventListener('message', handler);\n }\n });\n }\n\n public terminate(): void {\n this.#deinitialize.then(callback => callback()).catch(noop);\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 Window).postMessage(message, '*');\n }\n\n private [HANDLER] = (targetFrame: IFrameType) => ({ data, source }: MessageEvent<Message>) => {\n if (!data || typeof data !== 'object' || !data.path || typeof data.id === 'undefined') {\n return;\n }\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"]}
|
|
@@ -9,5 +9,9 @@ class IframeMessageService extends (0, mixin_1.mixin)(message_host_1.IframeMessa
|
|
|
9
9
|
constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
10
10
|
super([channelName, targetFrame], [channelName, targetFrame]);
|
|
11
11
|
}
|
|
12
|
+
initialize = (target) => {
|
|
13
|
+
message_host_1.IframeMessageHost.prototype.initialize.call(this, target);
|
|
14
|
+
message_client_1.IframeMessageClient.prototype.initialize.call(this, target);
|
|
15
|
+
};
|
|
12
16
|
}
|
|
13
17
|
exports.IframeMessageService = IframeMessageService;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { IframeMessageClient } from "./message-client";
|
|
2
|
-
import {
|
|
3
|
-
declare const IframeMessageService_base: new (args_0: [channelName?: string | undefined, targetFrame?:
|
|
2
|
+
import { IFrameArg } from "./iframe.type";
|
|
3
|
+
declare const IframeMessageService_base: new (args_0: [channelName?: string | undefined, targetFrame?: IFrameArg], args_1: [channelName?: string | undefined, targetFrame?: IFrameArg]) => {
|
|
4
|
+
initialize: (target: IFrameArg) => void;
|
|
4
5
|
terminate: () => void;
|
|
5
6
|
} & IframeMessageClient;
|
|
6
7
|
export declare class IframeMessageService extends IframeMessageService_base {
|
|
7
|
-
constructor(channelName?: string, targetFrame?:
|
|
8
|
+
constructor(channelName?: string, targetFrame?: IFrameArg);
|
|
9
|
+
initialize: (target: IFrameArg) => void;
|
|
8
10
|
}
|
|
9
11
|
export {};
|
|
@@ -6,6 +6,10 @@ export class IframeMessageService extends mixin(IframeMessageHost, IframeMessage
|
|
|
6
6
|
constructor(channelName = DEFAULT_CHANNEL_NAME, targetFrame) {
|
|
7
7
|
super([channelName, targetFrame], [channelName, targetFrame]);
|
|
8
8
|
}
|
|
9
|
+
initialize = (target) => {
|
|
10
|
+
IframeMessageHost.prototype.initialize.call(this, target);
|
|
11
|
+
IframeMessageClient.prototype.initialize.call(this, target);
|
|
12
|
+
};
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
//# sourceMappingURL=message-service.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,WAAuB;QAEvB,KAAK,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAChE,CAAC;IAEe,UAAU,GAAG,CAAC,MAAiB,EAAQ,EAAE;QACvD,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1D,mBAAmB,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC9D,CAAC,CAAC;CACH","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 { IFrameArg } from \"./iframe.type\";\n\nexport class IframeMessageService extends mixin(IframeMessageHost, IframeMessageClient) {\n constructor(\n channelName = DEFAULT_CHANNEL_NAME,\n targetFrame?: IFrameArg\n ) {\n super([channelName, targetFrame], [channelName, targetFrame]);\n }\n\n public override initialize = (target: IFrameArg): void => {\n IframeMessageHost.prototype.initialize.call(this, target);\n IframeMessageClient.prototype.initialize.call(this, target);\n };\n}\n"]}
|