mirror of https://github.com/apache/superset.git
feat: Introduce a library for embedded iframe <-> host communication (#18652)
* improved logging * switchboard, and window size * lint * tsconfig * fix path * fix release script * tests, debug mode, and error handling * moar debug mode * package lock * formatting * comment * wording * appease the coverage gods * Async assertions must be awaited or returned
This commit is contained in:
parent
40ab26d4f1
commit
225015fd5a
|
@ -22,7 +22,7 @@
|
||||||
"module": "lib/index.js",
|
"module": "lib/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"types": "dist/index.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tsc & babel src --out-dir lib --extensions '.ts,.tsx' & webpack --mode production",
|
"build": "tsc ; babel src --out-dir lib --extensions '.ts,.tsx' ; webpack --mode production",
|
||||||
"ci:release": "node ./release-if-necessary.js",
|
"ci:release": "node ./release-if-necessary.js",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -21,8 +21,16 @@ const { execSync } = require('child_process');
|
||||||
const axios = require('axios');
|
const axios = require('axios');
|
||||||
const { name, version } = require('./package.json');
|
const { name, version } = require('./package.json');
|
||||||
|
|
||||||
|
function log(...args) {
|
||||||
|
console.log('[embedded-sdk-release]', ...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
function logError(...args) {
|
||||||
|
console.error('[embedded-sdk-release]', ...args);
|
||||||
|
}
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
console.log(`checking if ${name}@${version} needs releasing`);
|
log(`checking if ${name}@${version} needs releasing`);
|
||||||
|
|
||||||
const packageUrl = `https://registry.npmjs.org/${name}/${version}`;
|
const packageUrl = `https://registry.npmjs.org/${name}/${version}`;
|
||||||
// npm commands output a bunch of garbage in the edge cases,
|
// npm commands output a bunch of garbage in the edge cases,
|
||||||
|
@ -33,14 +41,21 @@ const { name, version } = require('./package.json');
|
||||||
});
|
});
|
||||||
|
|
||||||
if (status === 200) {
|
if (status === 200) {
|
||||||
console.log('version already exists on npm, exiting');
|
log('version already exists on npm, exiting');
|
||||||
} else if (status === 404) {
|
} else if (status === 404) {
|
||||||
console.log('release required, building');
|
log('release required, building');
|
||||||
execSync('npm run build');
|
try {
|
||||||
execSync('npm publish --access public');
|
execSync('npm run build', { stdio: 'pipe' });
|
||||||
console.log(`published ${version} to npm`);
|
log('build successful, publishing')
|
||||||
|
execSync('npm publish --access public', { stdio: 'pipe' });
|
||||||
|
log(`published ${version} to npm`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(String(err.stdout));
|
||||||
|
logError('Encountered an error, details should be above');
|
||||||
|
process.exitCode = 1;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error(`ERROR: Received unexpected http status code ${status} from GET ${packageUrl}
|
logError(`ERROR: Received unexpected http status code ${status} from GET ${packageUrl}
|
||||||
The embedded sdk release script might need to be fixed, or maybe you just need to try again later.`);
|
The embedded sdk release script might need to be fixed, or maybe you just need to try again later.`);
|
||||||
process.exitCode = 1;
|
process.exitCode = 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,9 @@
|
||||||
|
|
||||||
import { IFRAME_COMMS_MESSAGE_TYPE } from './const';
|
import { IFRAME_COMMS_MESSAGE_TYPE } from './const';
|
||||||
|
|
||||||
|
// We can swap this out for the actual switchboard package once it gets published
|
||||||
|
import { Switchboard } from '../../superset-frontend/packages/superset-ui-switchboard/src/switchboard';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The function to fetch a guest token from your Host App's backend server.
|
* The function to fetch a guest token from your Host App's backend server.
|
||||||
* The Host App backend must supply an API endpoint
|
* The Host App backend must supply an API endpoint
|
||||||
|
@ -35,6 +38,17 @@ export type EmbedDashboardParams = {
|
||||||
mountPoint: HTMLElement
|
mountPoint: HTMLElement
|
||||||
/** A function to fetch a guest token from the Host App's backend server */
|
/** A function to fetch a guest token from the Host App's backend server */
|
||||||
fetchGuestToken: GuestTokenFetchFn
|
fetchGuestToken: GuestTokenFetchFn
|
||||||
|
/** Are we in debug mode? */
|
||||||
|
debug?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Size = {
|
||||||
|
width: number, height: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type EmbeddedDashboard = {
|
||||||
|
getScrollSize: () => Promise<Size>
|
||||||
|
unmount: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -44,15 +58,18 @@ export async function embedDashboard({
|
||||||
id,
|
id,
|
||||||
supersetDomain,
|
supersetDomain,
|
||||||
mountPoint,
|
mountPoint,
|
||||||
fetchGuestToken
|
fetchGuestToken,
|
||||||
}: EmbedDashboardParams) {
|
debug = false
|
||||||
|
}: EmbedDashboardParams): Promise<EmbeddedDashboard> {
|
||||||
function log(...info: unknown[]) {
|
function log(...info: unknown[]) {
|
||||||
console.debug(`[superset-embedded-sdk][dashboard ${id}]`, ...info);
|
if (debug) {
|
||||||
|
console.debug(`[superset-embedded-sdk][dashboard ${id}]`, ...info);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
log('embedding');
|
log('embedding');
|
||||||
|
|
||||||
async function mountIframe(): Promise<MessagePort> {
|
async function mountIframe(): Promise<Switchboard> {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
const iframe = document.createElement('iframe');
|
const iframe = document.createElement('iframe');
|
||||||
|
|
||||||
|
@ -83,7 +100,7 @@ export async function embedDashboard({
|
||||||
log('sent message channel to the iframe');
|
log('sent message channel to the iframe');
|
||||||
|
|
||||||
// return our port from the promise
|
// return our port from the promise
|
||||||
resolve(ourPort);
|
resolve(new Switchboard({ port: ourPort, name: 'superset-embedded-sdk', debug }));
|
||||||
});
|
});
|
||||||
|
|
||||||
iframe.src = `${supersetDomain}/dashboard/${id}/embedded`;
|
iframe.src = `${supersetDomain}/dashboard/${id}/embedded`;
|
||||||
|
@ -94,10 +111,10 @@ export async function embedDashboard({
|
||||||
|
|
||||||
const [guestToken, ourPort] = await Promise.all([
|
const [guestToken, ourPort] = await Promise.all([
|
||||||
fetchGuestToken(),
|
fetchGuestToken(),
|
||||||
mountIframe()
|
mountIframe(),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
ourPort.postMessage({ guestToken });
|
ourPort.emit('guestToken', { guestToken });
|
||||||
log('sent guest token');
|
log('sent guest token');
|
||||||
|
|
||||||
function unmount() {
|
function unmount() {
|
||||||
|
@ -105,7 +122,10 @@ export async function embedDashboard({
|
||||||
mountPoint.replaceChildren();
|
mountPoint.replaceChildren();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getScrollSize = () => ourPort.get<Size>('getScrollSize');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
unmount
|
getScrollSize,
|
||||||
|
unmount,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,7 @@ module.exports = {
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.ts$/,
|
test: /\.[tj]s$/,
|
||||||
// babel-loader is faster than ts-loader because it ignores types.
|
// babel-loader is faster than ts-loader because it ignores types.
|
||||||
// We do type checking in a separate process, so that's fine.
|
// We do type checking in a separate process, so that's fine.
|
||||||
use: 'babel-loader',
|
use: 'babel-loader',
|
||||||
|
@ -44,6 +44,6 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.ts'],
|
extensions: ['.ts', '.js'],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -48,6 +48,7 @@
|
||||||
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
|
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
|
||||||
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
|
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
|
||||||
"@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy",
|
"@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy",
|
||||||
|
"@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
|
||||||
"@vx/responsive": "^0.0.195",
|
"@vx/responsive": "^0.0.195",
|
||||||
"abortcontroller-polyfill": "^1.1.9",
|
"abortcontroller-polyfill": "^1.1.9",
|
||||||
"antd": "^4.9.4",
|
"antd": "^4.9.4",
|
||||||
|
@ -21330,6 +21331,10 @@
|
||||||
"resolved": "plugins/preset-chart-xy",
|
"resolved": "plugins/preset-chart-xy",
|
||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@superset-ui/switchboard": {
|
||||||
|
"resolved": "packages/superset-ui-switchboard",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
|
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
|
||||||
"version": "5.4.0",
|
"version": "5.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
|
||||||
|
@ -59180,6 +59185,11 @@
|
||||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"packages/superset-ui-switchboard": {
|
||||||
|
"name": "@superset-ui/switchboard",
|
||||||
|
"version": "0.18.25",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
},
|
||||||
"plugins/legacy-plugin-chart-calendar": {
|
"plugins/legacy-plugin-chart-calendar": {
|
||||||
"name": "@superset-ui/legacy-plugin-chart-calendar",
|
"name": "@superset-ui/legacy-plugin-chart-calendar",
|
||||||
"version": "0.18.25",
|
"version": "0.18.25",
|
||||||
|
@ -76685,6 +76695,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@superset-ui/switchboard": {
|
||||||
|
"version": "file:packages/superset-ui-switchboard"
|
||||||
|
},
|
||||||
"@svgr/babel-plugin-add-jsx-attribute": {
|
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||||
"version": "5.4.0",
|
"version": "5.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
|
||||||
|
|
|
@ -108,6 +108,7 @@
|
||||||
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
|
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
|
||||||
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
|
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
|
||||||
"@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy",
|
"@superset-ui/preset-chart-xy": "file:./plugins/preset-chart-xy",
|
||||||
|
"@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
|
||||||
"@vx/responsive": "^0.0.195",
|
"@vx/responsive": "^0.0.195",
|
||||||
"abortcontroller-polyfill": "^1.1.9",
|
"abortcontroller-polyfill": "^1.1.9",
|
||||||
"antd": "^4.9.4",
|
"antd": "^4.9.4",
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"name": "@superset-ui/switchboard",
|
||||||
|
"version": "0.18.25",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "@superset-ui/switchboard",
|
||||||
|
"version": "0.18.25",
|
||||||
|
"license": "Apache-2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"name": "@superset-ui/switchboard",
|
||||||
|
"version": "0.18.25",
|
||||||
|
"description": "Switchboard is a library to make it easier to communicate across browser windows using the MessageChannel API",
|
||||||
|
"sideEffects": false,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"module": "esm/index.js",
|
||||||
|
"files": [
|
||||||
|
"esm",
|
||||||
|
"lib"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/apache/superset.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"switchboard",
|
||||||
|
"iframe",
|
||||||
|
"communication",
|
||||||
|
"messagechannel",
|
||||||
|
"messageport",
|
||||||
|
"postmessage"
|
||||||
|
],
|
||||||
|
"author": "Superset",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/apache/superset/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/apache/superset#readme",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,20 @@
|
||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export * from './switchboard';
|
|
@ -0,0 +1,310 @@
|
||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Switchboard } from './switchboard';
|
||||||
|
|
||||||
|
type EventHandler = (event: MessageEvent) => void;
|
||||||
|
|
||||||
|
// A note on these fakes:
|
||||||
|
//
|
||||||
|
// jsdom doesn't supply a MessageChannel or a MessagePort,
|
||||||
|
// so we have to build our own unless we want to unit test in-browser.
|
||||||
|
// Might want to open a PR in jsdom: https://github.com/jsdom/jsdom/issues/2448
|
||||||
|
|
||||||
|
/** Matches the MessagePort api as closely as necessary (it's a small api) */
|
||||||
|
class FakeMessagePort {
|
||||||
|
otherPort?: FakeMessagePort;
|
||||||
|
|
||||||
|
isStarted = false;
|
||||||
|
|
||||||
|
queue: MessageEvent[] = [];
|
||||||
|
|
||||||
|
listeners: Set<EventHandler> = new Set();
|
||||||
|
|
||||||
|
dispatchEvent(event: MessageEvent) {
|
||||||
|
if (this.isStarted) {
|
||||||
|
this.listeners.forEach(listener => {
|
||||||
|
try {
|
||||||
|
listener(event);
|
||||||
|
} catch (err) {
|
||||||
|
if (typeof this.onmessageerror === 'function') {
|
||||||
|
this.onmessageerror(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.queue.push(event);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
addEventListener(eventType: 'message', handler: EventHandler) {
|
||||||
|
this.listeners.add(handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeEventListener(eventType: 'message', handler: EventHandler) {
|
||||||
|
this.listeners.delete(handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
postMessage(data: any) {
|
||||||
|
this.otherPort!.dispatchEvent({ data } as MessageEvent);
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
if (this.isStarted) return;
|
||||||
|
this.isStarted = true;
|
||||||
|
this.queue.forEach(event => {
|
||||||
|
this.dispatchEvent(event);
|
||||||
|
});
|
||||||
|
this.queue = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.isStarted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onmessage: EventHandler | null = null; // not implemented, requires some kinda proxy thingy to mock correctly
|
||||||
|
|
||||||
|
onmessageerror: ((err: any) => void) | null = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Matches the MessageChannel api as closely as necessary (an even smaller api than MessagePort) */
|
||||||
|
class FakeMessageChannel {
|
||||||
|
port1: MessagePort;
|
||||||
|
|
||||||
|
port2: MessagePort;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
const port1 = new FakeMessagePort();
|
||||||
|
const port2 = new FakeMessagePort();
|
||||||
|
port1.otherPort = port2;
|
||||||
|
port2.otherPort = port1;
|
||||||
|
this.port1 = port1;
|
||||||
|
this.port2 = port2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('comms', () => {
|
||||||
|
let originalConsoleDebug: any = null;
|
||||||
|
let originalConsoleError: any = null;
|
||||||
|
|
||||||
|
beforeAll(() => {
|
||||||
|
global.MessageChannel = FakeMessageChannel; // yolo
|
||||||
|
originalConsoleDebug = console.debug;
|
||||||
|
originalConsoleError = console.error;
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
console.debug = jest.fn(); // silencio bruno
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
console.debug = originalConsoleDebug;
|
||||||
|
console.error = originalConsoleError;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('constructs with defaults', () => {
|
||||||
|
const sb = new Switchboard({ port: new MessageChannel().port1 });
|
||||||
|
expect(sb).not.toBeNull();
|
||||||
|
expect(sb).toHaveProperty('name');
|
||||||
|
expect(sb).toHaveProperty('debugMode');
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('emit', () => {
|
||||||
|
it('triggers the method', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
const handler = jest.fn();
|
||||||
|
|
||||||
|
theirs.defineMethod('someEvent', handler);
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
ours.emit('someEvent', 42);
|
||||||
|
|
||||||
|
expect(handler).toHaveBeenCalledWith(42);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles a missing method', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.start();
|
||||||
|
channel.port2.onmessageerror = jest.fn();
|
||||||
|
ours.emit('fakemethod');
|
||||||
|
await new Promise(setImmediate);
|
||||||
|
expect(channel.port2.onmessageerror).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('get', () => {
|
||||||
|
it('returns the value', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.defineMethod('theirMethod', ({ x }: { x: number }) =>
|
||||||
|
Promise.resolve(x + 42),
|
||||||
|
);
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
const value = await ours.get('theirMethod', { x: 1 });
|
||||||
|
|
||||||
|
expect(value).toEqual(43);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('removes the listener after', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.defineMethod('theirMethod', () => Promise.resolve(420));
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
expect((channel.port1 as FakeMessagePort).listeners).toHaveProperty(
|
||||||
|
'size',
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
const promise = ours.get('theirMethod');
|
||||||
|
expect((channel.port1 as FakeMessagePort).listeners).toHaveProperty(
|
||||||
|
'size',
|
||||||
|
2,
|
||||||
|
);
|
||||||
|
await promise;
|
||||||
|
expect((channel.port1 as FakeMessagePort).listeners).toHaveProperty(
|
||||||
|
'size',
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can handle one way concurrency', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.defineMethod('theirMethod', () => Promise.resolve(42));
|
||||||
|
theirs.defineMethod(
|
||||||
|
'theirMethod2',
|
||||||
|
() => new Promise(resolve => setImmediate(() => resolve(420))),
|
||||||
|
);
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
const [value1, value2] = await Promise.all([
|
||||||
|
ours.get('theirMethod'),
|
||||||
|
ours.get('theirMethod2'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
expect(value1).toEqual(42);
|
||||||
|
expect(value2).toEqual(420);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('can handle two way concurrency', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.defineMethod('theirMethod', () => Promise.resolve(42));
|
||||||
|
ours.defineMethod(
|
||||||
|
'ourMethod',
|
||||||
|
() => new Promise(resolve => setImmediate(() => resolve(420))),
|
||||||
|
);
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
const [value1, value2] = await Promise.all([
|
||||||
|
ours.get('theirMethod'),
|
||||||
|
theirs.get('ourMethod'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
expect(value1).toEqual(42);
|
||||||
|
expect(value2).toEqual(420);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles when the method is not defined', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.start();
|
||||||
|
await expect(ours.get('fakemethod')).rejects.toThrow(
|
||||||
|
'[theirs] Method "fakemethod" is not defined',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles when the method throws', async () => {
|
||||||
|
const channel = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: channel.port1, name: 'ours' });
|
||||||
|
const theirs = new Switchboard({ port: channel.port2, name: 'theirs' });
|
||||||
|
theirs.defineMethod('failing', () => {
|
||||||
|
throw new Error('i dont feel like writing a clever message here');
|
||||||
|
});
|
||||||
|
theirs.start();
|
||||||
|
|
||||||
|
console.error = jest.fn(); // will be restored by the afterEach
|
||||||
|
await expect(ours.get('failing')).rejects.toThrow(
|
||||||
|
'[theirs] Method "failing" threw an error',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles receiving an unexpected non-reply, non-error response', async () => {
|
||||||
|
const { port1, port2 } = new MessageChannel();
|
||||||
|
const ours = new Switchboard({ port: port1, name: 'ours' });
|
||||||
|
// This test is required for 100% coverage. But there's no way to set up these conditions
|
||||||
|
// within the switchboard interface, so we gotta hack together the ports directly.
|
||||||
|
port2.addEventListener('message', event => {
|
||||||
|
const { messageId } = event.data;
|
||||||
|
port1.dispatchEvent({ data: { messageId } } as MessageEvent);
|
||||||
|
});
|
||||||
|
port2.start();
|
||||||
|
|
||||||
|
await expect(ours.get('someMethod')).rejects.toThrowError(
|
||||||
|
'Unexpected response message',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('logs in debug mode', async () => {
|
||||||
|
const { port1, port2 } = new MessageChannel();
|
||||||
|
const ours = new Switchboard({
|
||||||
|
port: port1,
|
||||||
|
name: 'ours',
|
||||||
|
debug: true,
|
||||||
|
});
|
||||||
|
const theirs = new Switchboard({
|
||||||
|
port: port2,
|
||||||
|
name: 'theirs',
|
||||||
|
debug: true,
|
||||||
|
});
|
||||||
|
theirs.defineMethod('blah', () => {});
|
||||||
|
theirs.start();
|
||||||
|
await ours.emit('blah');
|
||||||
|
expect(console.debug).toHaveBeenCalledTimes(1);
|
||||||
|
expect((console.debug as any).mock.calls[0][0]).toBe('[theirs]');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not log outside debug mode', async () => {
|
||||||
|
const { port1, port2 } = new MessageChannel();
|
||||||
|
const ours = new Switchboard({
|
||||||
|
port: port1,
|
||||||
|
name: 'ours',
|
||||||
|
});
|
||||||
|
const theirs = new Switchboard({
|
||||||
|
port: port2,
|
||||||
|
name: 'theirs',
|
||||||
|
});
|
||||||
|
theirs.defineMethod('blah', () => {});
|
||||||
|
theirs.start();
|
||||||
|
await ours.emit('blah');
|
||||||
|
expect(console.debug).toHaveBeenCalledTimes(0);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,244 @@
|
||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type Params = {
|
||||||
|
port: MessagePort;
|
||||||
|
name?: string;
|
||||||
|
debug?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A utility for communications between an iframe and its parent, used by the Superset embedded SDK.
|
||||||
|
* This builds useful patterns on top of the basic functionality offered by MessageChannel.
|
||||||
|
*
|
||||||
|
* Both windows instantiate a Switchboard, passing in their MessagePorts.
|
||||||
|
* Calling methods on the switchboard causes messages to be sent through the channel.
|
||||||
|
*/
|
||||||
|
export class Switchboard {
|
||||||
|
port: MessagePort;
|
||||||
|
|
||||||
|
name: string;
|
||||||
|
|
||||||
|
methods: Record<string, Method<any, unknown>> = {};
|
||||||
|
|
||||||
|
// used to make unique ids
|
||||||
|
incrementor = 1;
|
||||||
|
|
||||||
|
debugMode: boolean;
|
||||||
|
|
||||||
|
constructor({ port, name = 'switchboard', debug = false }: Params) {
|
||||||
|
this.port = port;
|
||||||
|
this.name = name;
|
||||||
|
this.debugMode = debug;
|
||||||
|
|
||||||
|
port.addEventListener('message', async event => {
|
||||||
|
this.log('message received', event);
|
||||||
|
const message = event.data;
|
||||||
|
if (isGet(message)) {
|
||||||
|
// find the method, call it, and reply with the result
|
||||||
|
this.port.postMessage(await this.getMethodResult(message));
|
||||||
|
} else if (isEmit(message)) {
|
||||||
|
const { method, args } = message;
|
||||||
|
// Find the method and call it, but no result necessary.
|
||||||
|
// Should this multicast to a set of listeners?
|
||||||
|
// Maybe, but that requires writing a bunch more code
|
||||||
|
// and I haven't found a need for it yet.
|
||||||
|
const executor = this.methods[method];
|
||||||
|
if (executor) {
|
||||||
|
executor(args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private async getMethodResult({
|
||||||
|
messageId,
|
||||||
|
method,
|
||||||
|
args,
|
||||||
|
}: GetMessage): Promise<ReplyMessage | ErrorMessage> {
|
||||||
|
const executor = this.methods[method];
|
||||||
|
if (executor == null) {
|
||||||
|
return <ErrorMessage>{
|
||||||
|
switchboardAction: Actions.ERROR,
|
||||||
|
messageId,
|
||||||
|
error: `[${this.name}] Method "${method}" is not defined`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const result = await executor(args);
|
||||||
|
return <ReplyMessage>{
|
||||||
|
switchboardAction: Actions.REPLY,
|
||||||
|
messageId,
|
||||||
|
result,
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
this.logError(err);
|
||||||
|
return <ErrorMessage>{
|
||||||
|
switchboardAction: Actions.ERROR,
|
||||||
|
messageId,
|
||||||
|
error: `[${this.name}] Method "${method}" threw an error`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines a method that can be "called" from the other side by sending an event.
|
||||||
|
*/
|
||||||
|
defineMethod<A = any, R = any>(methodName: string, executor: Method<A, R>) {
|
||||||
|
this.methods[methodName] = executor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calls a method registered on the other side, and returns the result.
|
||||||
|
*
|
||||||
|
* How this is accomplished:
|
||||||
|
* This switchboard sends a "get" message over the channel describing which method to call with which arguments.
|
||||||
|
* The other side's switchboard finds a method with that name, and calls it with the arguments.
|
||||||
|
* It then packages up the returned value into a "reply" message, sending it back to us across the channel.
|
||||||
|
* This switchboard has attached a listener on the channel, which will resolve with the result when a reply is detected.
|
||||||
|
*
|
||||||
|
* Instead of an arguments list, arguments are supplied as a map.
|
||||||
|
*
|
||||||
|
* @param method the name of the method to call
|
||||||
|
* @param args arguments that will be supplied. Must be serializable, no functions or other nonense.
|
||||||
|
* @returns whatever is returned from the method
|
||||||
|
*/
|
||||||
|
get<T = unknown>(method: string, args: unknown = undefined): Promise<T> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// In order to "call a method" on the other side of the port,
|
||||||
|
// we will send a message with a unique id
|
||||||
|
const messageId = this.getNewMessageId();
|
||||||
|
// attach a new listener to our port, and remove it when we get a response
|
||||||
|
const listener = (event: MessageEvent) => {
|
||||||
|
const message = event.data;
|
||||||
|
if (message.messageId !== messageId) return;
|
||||||
|
this.port.removeEventListener('message', listener);
|
||||||
|
if (isReply(message)) {
|
||||||
|
resolve(message.result);
|
||||||
|
} else {
|
||||||
|
const errStr = isError(message)
|
||||||
|
? message.error
|
||||||
|
: 'Unexpected response message';
|
||||||
|
reject(new Error(errStr));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.port.addEventListener('message', listener);
|
||||||
|
this.port.start();
|
||||||
|
const message: GetMessage = {
|
||||||
|
switchboardAction: Actions.GET,
|
||||||
|
method,
|
||||||
|
messageId,
|
||||||
|
args,
|
||||||
|
};
|
||||||
|
this.port.postMessage(message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emit calls a method on the other side just like get does.
|
||||||
|
* But emit doesn't wait for a response, it just sends and forgets.
|
||||||
|
*
|
||||||
|
* @param method
|
||||||
|
* @param args
|
||||||
|
*/
|
||||||
|
emit(method: string, args: unknown = undefined) {
|
||||||
|
const message: EmitMessage = {
|
||||||
|
switchboardAction: Actions.EMIT,
|
||||||
|
method,
|
||||||
|
args,
|
||||||
|
};
|
||||||
|
this.port.postMessage(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
this.port.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
private log(...args: unknown[]) {
|
||||||
|
if (this.debugMode) {
|
||||||
|
console.debug(`[${this.name}]`, ...args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private logError(...args: unknown[]) {
|
||||||
|
console.error(`[${this.name}]`, ...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getNewMessageId() {
|
||||||
|
// eslint-disable-next-line no-plusplus
|
||||||
|
return `m_${this.name}_${this.incrementor++}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type Method<A extends {}, R> = (args: A) => R | Promise<R>;
|
||||||
|
|
||||||
|
// Each message we send on the channel specifies an action we want the other side to cooperate with.
|
||||||
|
enum Actions {
|
||||||
|
GET = 'get',
|
||||||
|
REPLY = 'reply',
|
||||||
|
EMIT = 'emit',
|
||||||
|
ERROR = 'error',
|
||||||
|
}
|
||||||
|
|
||||||
|
// helper types/functions for making sure wires don't get crossed
|
||||||
|
|
||||||
|
interface Message {
|
||||||
|
switchboardAction: Actions;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GetMessage<T = any> extends Message {
|
||||||
|
switchboardAction: Actions.GET;
|
||||||
|
method: string;
|
||||||
|
messageId: string;
|
||||||
|
args: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isGet(message: Message): message is GetMessage {
|
||||||
|
return message.switchboardAction === Actions.GET;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReplyMessage<T = any> extends Message {
|
||||||
|
switchboardAction: Actions.REPLY;
|
||||||
|
messageId: string;
|
||||||
|
result: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isReply(message: Message): message is ReplyMessage {
|
||||||
|
return message.switchboardAction === Actions.REPLY;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EmitMessage<T = any> extends Message {
|
||||||
|
switchboardAction: Actions.EMIT;
|
||||||
|
method: string;
|
||||||
|
args: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmit(message: Message): message is EmitMessage {
|
||||||
|
return message.switchboardAction === Actions.EMIT;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ErrorMessage extends Message {
|
||||||
|
switchboardAction: Actions.ERROR;
|
||||||
|
messageId: string;
|
||||||
|
error: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isError(message: Message): message is ErrorMessage {
|
||||||
|
return message.switchboardAction === Actions.ERROR;
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"declarationDir": "lib",
|
||||||
|
"outDir": "lib",
|
||||||
|
"rootDir": "src"
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"lib",
|
||||||
|
"src/**/*.test.ts"
|
||||||
|
],
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"src/**/*",
|
||||||
|
"types/**/*",
|
||||||
|
"../../types/**/*"
|
||||||
|
],
|
||||||
|
"references": []
|
||||||
|
}
|
|
@ -19,12 +19,21 @@
|
||||||
import React, { lazy, Suspense } from 'react';
|
import React, { lazy, Suspense } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter as Router, Route } from 'react-router-dom';
|
import { BrowserRouter as Router, Route } from 'react-router-dom';
|
||||||
|
import { Switchboard } from '@superset-ui/switchboard';
|
||||||
import { bootstrapData } from 'src/preamble';
|
import { bootstrapData } from 'src/preamble';
|
||||||
import setupClient from 'src/setup/setupClient';
|
import setupClient from 'src/setup/setupClient';
|
||||||
import { RootContextProviders } from 'src/views/RootContextProviders';
|
import { RootContextProviders } from 'src/views/RootContextProviders';
|
||||||
import ErrorBoundary from 'src/components/ErrorBoundary';
|
import ErrorBoundary from 'src/components/ErrorBoundary';
|
||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
|
|
||||||
|
const debugMode = process.env.WEBPACK_MODE === 'development';
|
||||||
|
|
||||||
|
function log(...info: unknown[]) {
|
||||||
|
if (debugMode) {
|
||||||
|
console.debug(`[superset]`, ...info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const LazyDashboardPage = lazy(
|
const LazyDashboardPage = lazy(
|
||||||
() =>
|
() =>
|
||||||
import(
|
import(
|
||||||
|
@ -98,20 +107,31 @@ window.addEventListener('message', function (event) {
|
||||||
try {
|
try {
|
||||||
validateMessageEvent(event);
|
validateMessageEvent(event);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.info('[superset] ignoring message', err, event);
|
log('ignoring message', err, event);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.info('[superset] received message', event);
|
const port = event.ports?.[0];
|
||||||
const hostAppPort = event.ports?.[0];
|
if (event.data.handshake === 'port transfer' && port) {
|
||||||
if (hostAppPort) {
|
log('message port received', event);
|
||||||
hostAppPort.onmessage = function receiveMessage(event) {
|
|
||||||
console.info('[superset] received message event', event.data);
|
const switchboard = new Switchboard({
|
||||||
if (event.data.guestToken) {
|
port,
|
||||||
start(event.data.guestToken);
|
name: 'superset',
|
||||||
}
|
debug: debugMode,
|
||||||
};
|
});
|
||||||
|
|
||||||
|
switchboard.defineMethod('guestToken', ({ guestToken }) => {
|
||||||
|
start(guestToken);
|
||||||
|
});
|
||||||
|
|
||||||
|
switchboard.defineMethod('getScrollSize', () => ({
|
||||||
|
width: document.body.scrollWidth,
|
||||||
|
height: document.body.scrollHeight,
|
||||||
|
}));
|
||||||
|
|
||||||
|
switchboard.start();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
console.info('[superset] embed page is ready to receive messages');
|
log('embed page is ready to receive messages');
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
],
|
],
|
||||||
"@superset-ui/plugin-chart-*": ["./plugins/plugin-chart-*/src"],
|
"@superset-ui/plugin-chart-*": ["./plugins/plugin-chart-*/src"],
|
||||||
"@superset-ui/preset-chart-*": ["./plugins/preset-chart-*/src"],
|
"@superset-ui/preset-chart-*": ["./plugins/preset-chart-*/src"],
|
||||||
|
"@superset-ui/switchboard": ["./packages/superset-ui-switchboard/src"]
|
||||||
},
|
},
|
||||||
"types": [
|
"types": [
|
||||||
"@emotion/react/types/css-prop",
|
"@emotion/react/types/css-prop",
|
||||||
|
|
Loading…
Reference in New Issue