@schoolpalm/message-bridge 0.1.0 → 1.1.0
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/package.json +21 -4
- package/TODO.md +0 -13
- package/dist/__tests__/bridge.test.d.ts +0 -6
- package/dist/__tests__/bridge.test.d.ts.map +0 -1
- package/dist/__tests__/bridge.test.js +0 -84
- package/dist/__tests__/bridge.test.js.map +0 -1
- package/src/__tests__/bridge.test.ts +0 -100
- package/src/bridgeBase.ts +0 -93
- package/src/hostBridge.ts +0 -63
- package/src/index.ts +0 -20
- package/src/messageTypes.ts +0 -40
- package/src/moduleBridge.ts +0 -79
- package/src/payloadSchemas.ts +0 -115
- package/tsconfig.json +0 -18
- package/vitest.config.ts +0 -8
package/package.json
CHANGED
|
@@ -1,17 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schoolpalm/message-bridge",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "TypeScript SDK for message-based communication between SchoolPalm host and vendor modules.",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"main": "dist/index.js",
|
|
6
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md",
|
|
19
|
+
"LICENSE",
|
|
20
|
+
"AUTHORS"
|
|
21
|
+
],
|
|
22
|
+
|
|
7
23
|
"scripts": {
|
|
8
24
|
"build": "tsc",
|
|
9
25
|
"watch": "tsc -w",
|
|
10
26
|
"lint": "eslint 'src/**/*.{ts,tsx}' --fix",
|
|
11
27
|
"prepublishOnly": "npm run build",
|
|
12
|
-
|
|
13
|
-
|
|
28
|
+
"test": "vitest",
|
|
29
|
+
"test:watch": "vitest --watch"
|
|
14
30
|
},
|
|
31
|
+
|
|
15
32
|
"keywords": [
|
|
16
33
|
"schoolpalm",
|
|
17
34
|
"vue",
|
|
@@ -19,11 +36,11 @@
|
|
|
19
36
|
"module",
|
|
20
37
|
"iframe",
|
|
21
38
|
"postMessage",
|
|
22
|
-
"Unnovate Brains",
|
|
23
39
|
"typescript"
|
|
24
40
|
],
|
|
25
41
|
"author": "Hassan Mugabo",
|
|
26
42
|
"license": "MIT",
|
|
43
|
+
|
|
27
44
|
"devDependencies": {
|
|
28
45
|
"@types/jsdom": "^27.0.0",
|
|
29
46
|
"@typescript-eslint/eslint-plugin": "^6.5.1",
|
package/TODO.md
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
# TODO: Project Documentation and Enhancement
|
|
2
|
-
|
|
3
|
-
## Tasks
|
|
4
|
-
- [x] Enhance README.md with detailed documentation
|
|
5
|
-
- [x] Add doc comments to src/index.ts
|
|
6
|
-
- [x] Add doc comments to src/bridgeBase.ts
|
|
7
|
-
- [x] Add doc comments to src/hostBridge.ts
|
|
8
|
-
- [x] Add doc comments to src/moduleBridge.ts
|
|
9
|
-
- [x] Add doc comments to src/messageTypes.ts
|
|
10
|
-
- [x] Add doc comments to src/payloadSchemas.ts
|
|
11
|
-
- [x] Add doc comments to src/__tests__/bridge.test.ts
|
|
12
|
-
- [x] Create AUTHORS file for npm package
|
|
13
|
-
- [x] Verify LICENSE and package.json setup
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bridge.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/bridge.test.ts"],"names":[],"mappings":"AAAA;;;GAGG"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Test suite for the MessageBridge SDK.
|
|
3
|
-
* @module @schoolpalm/message-bridge/__tests__/bridge.test
|
|
4
|
-
*/
|
|
5
|
-
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
|
6
|
-
import { HostBridge, ModuleBridge, MessageType } from '../index';
|
|
7
|
-
/**
|
|
8
|
-
* Test suite for the MessageBridge SDK.
|
|
9
|
-
*
|
|
10
|
-
* This suite tests the core functionality of both HostBridge and ModuleBridge
|
|
11
|
-
* classes, including message sending, receiving, and event handling.
|
|
12
|
-
*/
|
|
13
|
-
describe('MessageBridge SDK', () => {
|
|
14
|
-
let iframeMock;
|
|
15
|
-
beforeEach(() => {
|
|
16
|
-
// Simulate an iframe with contentWindow
|
|
17
|
-
iframeMock = {
|
|
18
|
-
contentWindow: {
|
|
19
|
-
postMessage: vi.fn()
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
// Mock parent window for ModuleBridge
|
|
23
|
-
vi.stubGlobal('parent', {
|
|
24
|
-
postMessage: vi.fn()
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
|
-
// -----------------------
|
|
28
|
-
// HostBridge Tests
|
|
29
|
-
// -----------------------
|
|
30
|
-
/**
|
|
31
|
-
* Test that HostBridge sends module-start messages correctly.
|
|
32
|
-
*/
|
|
33
|
-
it('HostBridge sends module-start correctly', () => {
|
|
34
|
-
const hostBridge = new HostBridge(iframeMock);
|
|
35
|
-
hostBridge.sendModuleStart({ route: '/users', context: {}, timestamp: Date.now() });
|
|
36
|
-
expect(iframeMock.contentWindow.postMessage).toHaveBeenCalledTimes(1);
|
|
37
|
-
const callArg = iframeMock.contentWindow.postMessage.mock.calls[0][0];
|
|
38
|
-
expect(callArg.type).toBe(MessageType.MODULE_START);
|
|
39
|
-
expect(callArg.payload.route).toBe('/users');
|
|
40
|
-
});
|
|
41
|
-
/**
|
|
42
|
-
* Test that HostBridge can register listeners and receive messages.
|
|
43
|
-
*/
|
|
44
|
-
it('HostBridge can register and receive messages', () => {
|
|
45
|
-
const hostBridge = new HostBridge(iframeMock);
|
|
46
|
-
const callback = vi.fn();
|
|
47
|
-
hostBridge.on(MessageType.UI_UPDATE, callback);
|
|
48
|
-
// Simulate incoming postMessage from iframe
|
|
49
|
-
const event = new MessageEvent('message', {
|
|
50
|
-
data: {
|
|
51
|
-
type: MessageType.UI_UPDATE,
|
|
52
|
-
payload: { title: 'Test', breadcrumb: ['Home'] }
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
window.dispatchEvent(event);
|
|
56
|
-
expect(callback).toHaveBeenCalledTimes(1);
|
|
57
|
-
expect(callback.mock.calls[0][0].title).toBe('Test');
|
|
58
|
-
});
|
|
59
|
-
// -----------------------
|
|
60
|
-
// ModuleBridge Tests
|
|
61
|
-
// -----------------------
|
|
62
|
-
/**
|
|
63
|
-
* Test that ModuleBridge sends handshake messages correctly.
|
|
64
|
-
*/
|
|
65
|
-
it('ModuleBridge sends handshake correctly', () => {
|
|
66
|
-
const moduleBridge = new ModuleBridge();
|
|
67
|
-
moduleBridge.sendHandshake({ version: '0.1.0', timestamp: Date.now() });
|
|
68
|
-
expect(window.parent.postMessage).toHaveBeenCalledTimes(1);
|
|
69
|
-
const callArg = window.parent.postMessage.mock.calls[0][0];
|
|
70
|
-
expect(callArg.type).toBe(MessageType.HANDSHAKE_READY);
|
|
71
|
-
expect(callArg.payload.version).toBe('0.1.0');
|
|
72
|
-
});
|
|
73
|
-
/**
|
|
74
|
-
* Test that ModuleBridge sends UI update messages.
|
|
75
|
-
*/
|
|
76
|
-
it('ModuleBridge sends UI update', () => {
|
|
77
|
-
const moduleBridge = new ModuleBridge();
|
|
78
|
-
moduleBridge.sendUIUpdate({ title: 'Users', breadcrumb: ['Home', 'Users'] });
|
|
79
|
-
const callArg = window.parent.postMessage.mock.calls[0][0];
|
|
80
|
-
expect(callArg.type).toBe(MessageType.UI_UPDATE);
|
|
81
|
-
expect(callArg.payload.breadcrumb.length).toBe(2);
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
//# sourceMappingURL=bridge.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bridge.test.js","sourceRoot":"","sources":["../../src/__tests__/bridge.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Test suite for the MessageBridge SDK.
|
|
3
|
-
* @module @schoolpalm/message-bridge/__tests__/bridge.test
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
|
7
|
-
import { HostBridge, ModuleBridge, MessageType } from '../index';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Test suite for the MessageBridge SDK.
|
|
11
|
-
*
|
|
12
|
-
* This suite tests the core functionality of both HostBridge and ModuleBridge
|
|
13
|
-
* classes, including message sending, receiving, and event handling.
|
|
14
|
-
*/
|
|
15
|
-
describe('MessageBridge SDK', () => {
|
|
16
|
-
let iframeMock: any;
|
|
17
|
-
|
|
18
|
-
beforeEach(() => {
|
|
19
|
-
// Simulate an iframe with contentWindow
|
|
20
|
-
iframeMock = {
|
|
21
|
-
contentWindow: {
|
|
22
|
-
postMessage: vi.fn()
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
// Mock parent window for ModuleBridge
|
|
27
|
-
vi.stubGlobal('parent', {
|
|
28
|
-
postMessage: vi.fn()
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
// -----------------------
|
|
33
|
-
// HostBridge Tests
|
|
34
|
-
// -----------------------
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Test that HostBridge sends module-start messages correctly.
|
|
38
|
-
*/
|
|
39
|
-
it('HostBridge sends module-start correctly', () => {
|
|
40
|
-
const hostBridge = new HostBridge(iframeMock);
|
|
41
|
-
hostBridge.sendModuleStart({ route: '/users', context: {}, timestamp: Date.now() });
|
|
42
|
-
|
|
43
|
-
expect(iframeMock.contentWindow.postMessage).toHaveBeenCalledTimes(1);
|
|
44
|
-
const callArg = iframeMock.contentWindow.postMessage.mock.calls[0][0];
|
|
45
|
-
expect(callArg.type).toBe(MessageType.MODULE_START);
|
|
46
|
-
expect(callArg.payload.route).toBe('/users');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Test that HostBridge can register listeners and receive messages.
|
|
51
|
-
*/
|
|
52
|
-
it('HostBridge can register and receive messages', () => {
|
|
53
|
-
const hostBridge = new HostBridge(iframeMock);
|
|
54
|
-
|
|
55
|
-
const callback = vi.fn();
|
|
56
|
-
hostBridge.on(MessageType.UI_UPDATE, callback);
|
|
57
|
-
|
|
58
|
-
// Simulate incoming postMessage from iframe
|
|
59
|
-
const event = new MessageEvent('message', {
|
|
60
|
-
data: {
|
|
61
|
-
type: MessageType.UI_UPDATE,
|
|
62
|
-
payload: { title: 'Test', breadcrumb: ['Home'] }
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
window.dispatchEvent(event);
|
|
67
|
-
|
|
68
|
-
expect(callback).toHaveBeenCalledTimes(1);
|
|
69
|
-
expect(callback.mock.calls[0][0].title).toBe('Test');
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
// -----------------------
|
|
73
|
-
// ModuleBridge Tests
|
|
74
|
-
// -----------------------
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Test that ModuleBridge sends handshake messages correctly.
|
|
78
|
-
*/
|
|
79
|
-
it('ModuleBridge sends handshake correctly', () => {
|
|
80
|
-
const moduleBridge = new ModuleBridge();
|
|
81
|
-
moduleBridge.sendHandshake({ version: '0.1.0', timestamp: Date.now() });
|
|
82
|
-
|
|
83
|
-
expect(window.parent.postMessage).toHaveBeenCalledTimes(1);
|
|
84
|
-
const callArg = (window.parent.postMessage as any).mock.calls[0][0];
|
|
85
|
-
expect(callArg.type).toBe(MessageType.HANDSHAKE_READY);
|
|
86
|
-
expect(callArg.payload.version).toBe('0.1.0');
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* Test that ModuleBridge sends UI update messages.
|
|
91
|
-
*/
|
|
92
|
-
it('ModuleBridge sends UI update', () => {
|
|
93
|
-
const moduleBridge = new ModuleBridge();
|
|
94
|
-
moduleBridge.sendUIUpdate({ title: 'Users', breadcrumb: ['Home', 'Users'] });
|
|
95
|
-
|
|
96
|
-
const callArg = (window.parent.postMessage as any).mock.calls[0][0];
|
|
97
|
-
expect(callArg.type).toBe(MessageType.UI_UPDATE);
|
|
98
|
-
expect(callArg.payload.breadcrumb.length).toBe(2);
|
|
99
|
-
});
|
|
100
|
-
});
|
package/src/bridgeBase.ts
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Base bridge class for message-based communication.
|
|
3
|
-
* @module @schoolpalm/message-bridge/bridgeBase
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// src/bridgeBase.ts
|
|
7
|
-
import { MessageType } from './messageTypes';
|
|
8
|
-
import { MessagePayload } from './payloadSchemas';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Type definition for message handler functions.
|
|
12
|
-
* @template T - The type of message payload this handler accepts.
|
|
13
|
-
*/
|
|
14
|
-
type MessageHandler<T extends MessagePayload> = (payload: T) => void;
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Base class for Host and Module bridges.
|
|
18
|
-
*
|
|
19
|
-
* This abstract base class provides the core functionality for message-based
|
|
20
|
-
* communication between windows using the postMessage API. It handles sending
|
|
21
|
-
* messages, registering listeners, and managing event listeners.
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```typescript
|
|
25
|
-
* class CustomBridge extends BridgeBase {
|
|
26
|
-
* constructor(targetWindow: Window) {
|
|
27
|
-
* super(targetWindow, 'https://example.com');
|
|
28
|
-
* }
|
|
29
|
-
*
|
|
30
|
-
* // Add custom methods here
|
|
31
|
-
* }
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
export class BridgeBase {
|
|
35
|
-
/** The target window to send messages to. */
|
|
36
|
-
protected targetWindow: Window;
|
|
37
|
-
/** The origin to restrict messages to. */
|
|
38
|
-
protected targetOrigin: string;
|
|
39
|
-
/** Map of message type to array of handler functions. */
|
|
40
|
-
private listeners: Map<MessageType, MessageHandler<any>[]> = new Map();
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Creates a new BridgeBase instance.
|
|
44
|
-
* @param targetWindow - The window to send messages to.
|
|
45
|
-
* @param targetOrigin - The origin to restrict messages to (default: '*').
|
|
46
|
-
*/
|
|
47
|
-
constructor(targetWindow: Window, targetOrigin: string = '*') {
|
|
48
|
-
this.targetWindow = targetWindow;
|
|
49
|
-
this.targetOrigin = targetOrigin;
|
|
50
|
-
window.addEventListener('message', this._handleMessage.bind(this));
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Sends a message to the target window.
|
|
55
|
-
* @template T - The type of the message payload.
|
|
56
|
-
* @param type - The message type to send.
|
|
57
|
-
* @param payload - The payload data to send.
|
|
58
|
-
*/
|
|
59
|
-
send<T extends MessagePayload>(type: MessageType, payload: T) {
|
|
60
|
-
this.targetWindow.postMessage({ type, payload }, this.targetOrigin);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Registers a listener for a specific message type.
|
|
65
|
-
* @template T - The type of the message payload.
|
|
66
|
-
* @param type - The message type to listen for.
|
|
67
|
-
* @param callback - The function to call when a message of this type is received.
|
|
68
|
-
*/
|
|
69
|
-
on<T extends MessagePayload>(type: MessageType, callback: MessageHandler<T>) {
|
|
70
|
-
if (!this.listeners.has(type)) this.listeners.set(type, []);
|
|
71
|
-
this.listeners.get(type)?.push(callback);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Internal message handler for incoming postMessage events.
|
|
76
|
-
* @private
|
|
77
|
-
* @param event - The message event received.
|
|
78
|
-
*/
|
|
79
|
-
private _handleMessage(event: MessageEvent) {
|
|
80
|
-
const { type, payload } = event.data || {};
|
|
81
|
-
if (!type || !this.listeners.has(type)) return;
|
|
82
|
-
this.listeners.get(type)?.forEach(cb => cb(payload));
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Cleans up event listeners and resources.
|
|
87
|
-
* Call this method when the bridge is no longer needed.
|
|
88
|
-
*/
|
|
89
|
-
destroy() {
|
|
90
|
-
window.removeEventListener('message', this._handleMessage.bind(this));
|
|
91
|
-
this.listeners.clear();
|
|
92
|
-
}
|
|
93
|
-
}
|
package/src/hostBridge.ts
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Host-side bridge for communication with embedded modules.
|
|
3
|
-
* @module @schoolpalm/message-bridge/hostBridge
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// src/hostBridge.ts
|
|
7
|
-
import { BridgeBase } from './bridgeBase';
|
|
8
|
-
import { MessageType } from './messageTypes';
|
|
9
|
-
import { ModuleStartPayload } from './payloadSchemas';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Host-side bridge for communication with embedded modules.
|
|
13
|
-
*
|
|
14
|
-
* This class extends BridgeBase to provide host-specific functionality for
|
|
15
|
-
* communicating with modules embedded in iframes. It handles initialization
|
|
16
|
-
* and termination of modules.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```typescript
|
|
20
|
-
* const iframe = document.getElementById('module-iframe') as HTMLIFrameElement;
|
|
21
|
-
* const hostBridge = new HostBridge(iframe, 'https://module.example.com');
|
|
22
|
-
*
|
|
23
|
-
* // Start a module
|
|
24
|
-
* hostBridge.sendModuleStart({
|
|
25
|
-
* route: '/dashboard',
|
|
26
|
-
* context: { userId: 123 },
|
|
27
|
-
* timestamp: Date.now()
|
|
28
|
-
* });
|
|
29
|
-
*
|
|
30
|
-
* // Listen for UI updates from the module
|
|
31
|
-
* hostBridge.on(MessageType.UI_UPDATE, (payload) => {
|
|
32
|
-
* console.log('UI Update:', payload);
|
|
33
|
-
* });
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
|
-
export class HostBridge extends BridgeBase {
|
|
37
|
-
/**
|
|
38
|
-
* Creates a new HostBridge instance.
|
|
39
|
-
* @param iframe - The iframe element containing the module.
|
|
40
|
-
* @param targetOrigin - The origin to restrict messages to (default: '*').
|
|
41
|
-
*/
|
|
42
|
-
constructor(iframe: HTMLIFrameElement, targetOrigin: string = '*') {
|
|
43
|
-
super(iframe.contentWindow!, targetOrigin);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Sends a module-start message to the embedded module.
|
|
48
|
-
* This initializes the module with the provided route and context.
|
|
49
|
-
* @param payload - The module start payload containing route, context, and timestamp.
|
|
50
|
-
*/
|
|
51
|
-
sendModuleStart(payload: ModuleStartPayload) {
|
|
52
|
-
this.send(MessageType.MODULE_START, payload);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Sends a module-exit message to the embedded module.
|
|
57
|
-
* This signals the module to clean up and terminate.
|
|
58
|
-
* @param reason - Optional reason for the module exit.
|
|
59
|
-
*/
|
|
60
|
-
sendModuleExit(reason?: string) {
|
|
61
|
-
this.send(MessageType.MODULE_EXIT, { reason });
|
|
62
|
-
}
|
|
63
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @packageDocumentation
|
|
3
|
-
* @module @schoolpalm/message-bridge
|
|
4
|
-
*
|
|
5
|
-
* TypeScript SDK for message-based communication between SchoolPalm host and vendor modules.
|
|
6
|
-
*
|
|
7
|
-
* This module exports the main classes and types for establishing communication
|
|
8
|
-
* between a host application and embedded modules using the postMessage API.
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```typescript
|
|
12
|
-
* import { HostBridge, ModuleBridge, MessageType } from '@schoolpalm/message-bridge';
|
|
13
|
-
* ```
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
export { BridgeBase } from './bridgeBase';
|
|
17
|
-
export { HostBridge } from './hostBridge';
|
|
18
|
-
export { ModuleBridge } from './moduleBridge';
|
|
19
|
-
export { MessageType } from './messageTypes';
|
|
20
|
-
export * from './payloadSchemas';
|
package/src/messageTypes.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Message type definitions for bridge communication.
|
|
3
|
-
* @module @schoolpalm/message-bridge/messageTypes
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// src/messageTypes.ts
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Enumeration of all allowed message types for Host ↔ Module communication.
|
|
10
|
-
*
|
|
11
|
-
* These message types define the protocol for communication between the host
|
|
12
|
-
* application and embedded modules. Each type indicates the direction and
|
|
13
|
-
* purpose of the message.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```typescript
|
|
17
|
-
* import { MessageType } from '@schoolpalm/message-bridge';
|
|
18
|
-
*
|
|
19
|
-
* // Listen for UI updates from modules
|
|
20
|
-
* bridge.on(MessageType.UI_UPDATE, (payload) => {
|
|
21
|
-
* console.log('UI updated:', payload);
|
|
22
|
-
* });
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
export enum MessageType {
|
|
26
|
-
/** Module → Host: Indicates the module is ready for communication. */
|
|
27
|
-
HANDSHAKE_READY = 'handshake:ready',
|
|
28
|
-
/** Host → Module: Signals the module to start with provided context. */
|
|
29
|
-
MODULE_START = 'module:start',
|
|
30
|
-
/** Module → Host: Updates the host UI (title, breadcrumb, theme). */
|
|
31
|
-
UI_UPDATE = 'ui:update',
|
|
32
|
-
/** Module → Host: Requests data from the host. */
|
|
33
|
-
DATA_REQUEST = 'data:request',
|
|
34
|
-
/** Host → Module: Responds to a data request. */
|
|
35
|
-
DATA_RESPONSE = 'data:response',
|
|
36
|
-
/** Module → Host: Reports an error to the host. */
|
|
37
|
-
ERROR = 'error',
|
|
38
|
-
/** Host → Module: Signals the module to exit and clean up. */
|
|
39
|
-
MODULE_EXIT = 'module:exit'
|
|
40
|
-
}
|
package/src/moduleBridge.ts
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Module-side bridge for communication with the host application.
|
|
3
|
-
* @module @schoolpalm/message-bridge/moduleBridge
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// src/moduleBridge.ts
|
|
7
|
-
import { BridgeBase } from './bridgeBase';
|
|
8
|
-
import { MessageType } from './messageTypes';
|
|
9
|
-
import {
|
|
10
|
-
HandshakeReadyPayload,
|
|
11
|
-
UIUpdatePayload,
|
|
12
|
-
ErrorPayload
|
|
13
|
-
} from './payloadSchemas';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Module-side bridge for communication with the host application.
|
|
17
|
-
*
|
|
18
|
-
* This class extends BridgeBase to provide module-specific functionality for
|
|
19
|
-
* communicating with the parent host application. It handles handshake,
|
|
20
|
-
* UI updates, and error reporting from the embedded module.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```typescript
|
|
24
|
-
* const moduleBridge = new ModuleBridge('https://host.example.com');
|
|
25
|
-
*
|
|
26
|
-
* // Send handshake when module is ready
|
|
27
|
-
* moduleBridge.sendHandshake({
|
|
28
|
-
* version: '1.0.0',
|
|
29
|
-
* timestamp: Date.now()
|
|
30
|
-
* });
|
|
31
|
-
*
|
|
32
|
-
* // Update UI in the host
|
|
33
|
-
* moduleBridge.sendUIUpdate({
|
|
34
|
-
* title: 'Dashboard',
|
|
35
|
-
* breadcrumb: ['Home', 'Dashboard'],
|
|
36
|
-
* theme: 'dark'
|
|
37
|
-
* });
|
|
38
|
-
*
|
|
39
|
-
* // Listen for module start from host
|
|
40
|
-
* moduleBridge.on(MessageType.MODULE_START, (payload) => {
|
|
41
|
-
* console.log('Module started:', payload.route);
|
|
42
|
-
* });
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
export class ModuleBridge extends BridgeBase {
|
|
46
|
-
/**
|
|
47
|
-
* Creates a new ModuleBridge instance.
|
|
48
|
-
* @param targetOrigin - The origin to restrict messages to (default: '*').
|
|
49
|
-
*/
|
|
50
|
-
constructor(targetOrigin: string = '*') {
|
|
51
|
-
super(window.parent, targetOrigin);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Notifies the host application that the module is ready.
|
|
56
|
-
* This should be called after the module has initialized.
|
|
57
|
-
* @param payload - The handshake payload containing version and timestamp.
|
|
58
|
-
*/
|
|
59
|
-
sendHandshake(payload: HandshakeReadyPayload) {
|
|
60
|
-
this.send(MessageType.HANDSHAKE_READY, payload);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Notifies the host application of UI updates.
|
|
65
|
-
* This includes changes to title, breadcrumb, and theme.
|
|
66
|
-
* @param payload - The UI update payload.
|
|
67
|
-
*/
|
|
68
|
-
sendUIUpdate(payload: UIUpdatePayload) {
|
|
69
|
-
this.send(MessageType.UI_UPDATE, payload);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Notifies the host application of an error.
|
|
74
|
-
* @param payload - The error payload containing error details.
|
|
75
|
-
*/
|
|
76
|
-
sendError(payload: ErrorPayload) {
|
|
77
|
-
this.send(MessageType.ERROR, payload);
|
|
78
|
-
}
|
|
79
|
-
}
|
package/src/payloadSchemas.ts
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Payload schema definitions for message-based communication.
|
|
3
|
-
* @module @schoolpalm/message-bridge/payloadSchemas
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// src/payloadSchemas.ts
|
|
7
|
-
import { MessageType } from './messageTypes';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Payload interfaces for each message type in the bridge communication protocol.
|
|
11
|
-
*
|
|
12
|
-
* These interfaces define the structure of data exchanged between host applications
|
|
13
|
-
* and embedded modules. Each payload corresponds to a specific message type and
|
|
14
|
-
* contains the necessary information for that communication scenario.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Payload for handshake ready message.
|
|
19
|
-
* Sent by modules to indicate they are ready for communication.
|
|
20
|
-
*/
|
|
21
|
-
export interface HandshakeReadyPayload {
|
|
22
|
-
/** Version of the module or SDK */
|
|
23
|
-
version: string;
|
|
24
|
-
/** Timestamp when the handshake was initiated */
|
|
25
|
-
timestamp: number;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Payload for module start message.
|
|
30
|
-
* Sent by host to initialize a module with context.
|
|
31
|
-
*/
|
|
32
|
-
export interface ModuleStartPayload {
|
|
33
|
-
/** Route or path to navigate to in the module */
|
|
34
|
-
route: string;
|
|
35
|
-
/** Context data passed to the module (user info, permissions, etc.) */
|
|
36
|
-
context: Record<string, any>;
|
|
37
|
-
/** Timestamp when the module start was requested */
|
|
38
|
-
timestamp: number;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Payload for UI update message.
|
|
43
|
-
* Sent by modules to update the host application's UI.
|
|
44
|
-
*/
|
|
45
|
-
export interface UIUpdatePayload {
|
|
46
|
-
/** Title to display in the host UI */
|
|
47
|
-
title: string;
|
|
48
|
-
/** Breadcrumb navigation path */
|
|
49
|
-
breadcrumb: string[];
|
|
50
|
-
/** Optional theme to apply to the host UI */
|
|
51
|
-
theme?: string;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Payload for data request message.
|
|
56
|
-
* Sent by modules to request data from the host.
|
|
57
|
-
*/
|
|
58
|
-
export interface DataRequestPayload {
|
|
59
|
-
/** Unique identifier for tracking the request */
|
|
60
|
-
requestId: string;
|
|
61
|
-
/** Action or endpoint to request data from */
|
|
62
|
-
action: string;
|
|
63
|
-
/** Optional payload data for the request */
|
|
64
|
-
payload?: Record<string, any>;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Payload for data response message.
|
|
69
|
-
* Sent by host in response to data requests.
|
|
70
|
-
*/
|
|
71
|
-
export interface DataResponsePayload {
|
|
72
|
-
/** Unique identifier matching the original request */
|
|
73
|
-
requestId: string;
|
|
74
|
-
/** Status of the response */
|
|
75
|
-
status: 'success' | 'error';
|
|
76
|
-
/** Response data (present on success) */
|
|
77
|
-
payload?: any;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Payload for error message.
|
|
82
|
-
* Sent by modules to report errors to the host.
|
|
83
|
-
*/
|
|
84
|
-
export interface ErrorPayload {
|
|
85
|
-
/** Error code for categorization */
|
|
86
|
-
code: string;
|
|
87
|
-
/** Human-readable error message */
|
|
88
|
-
message: string;
|
|
89
|
-
/** Optional additional error details */
|
|
90
|
-
details?: any;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/**
|
|
94
|
-
* Payload for module exit message.
|
|
95
|
-
* Sent by host to signal module termination.
|
|
96
|
-
*/
|
|
97
|
-
export interface ModuleExitPayload {
|
|
98
|
-
/** Optional reason for the module exit */
|
|
99
|
-
reason?: string;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* Union type representing all possible message payloads.
|
|
104
|
-
*
|
|
105
|
-
* This type is used internally for type safety when handling messages
|
|
106
|
-
* of any type in the bridge classes.
|
|
107
|
-
*/
|
|
108
|
-
export type MessagePayload =
|
|
109
|
-
| HandshakeReadyPayload
|
|
110
|
-
| ModuleStartPayload
|
|
111
|
-
| UIUpdatePayload
|
|
112
|
-
| DataRequestPayload
|
|
113
|
-
| DataResponsePayload
|
|
114
|
-
| ErrorPayload
|
|
115
|
-
| ModuleExitPayload;
|
package/tsconfig.json
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"module": "ESNext",
|
|
5
|
-
"moduleResolution": "node",
|
|
6
|
-
"outDir": "dist",
|
|
7
|
-
"rootDir": "src",
|
|
8
|
-
"declaration": true,
|
|
9
|
-
"declarationMap": true,
|
|
10
|
-
"sourceMap": true,
|
|
11
|
-
"strict": true,
|
|
12
|
-
"esModuleInterop": true,
|
|
13
|
-
"skipLibCheck": true,
|
|
14
|
-
"forceConsistentCasingInFileNames": true
|
|
15
|
-
},
|
|
16
|
-
"include": ["src/**/*"],
|
|
17
|
-
"exclude": ["node_modules", "dist"]
|
|
18
|
-
}
|