diff --git a/dist/other/jupyterlite/JupyterLiteSession.d.ts b/dist/other/jupyterlite/JupyterLiteSession.d.ts index 24f7af8..216fffa 100644 --- a/dist/other/jupyterlite/JupyterLiteSession.d.ts +++ b/dist/other/jupyterlite/JupyterLiteSession.d.ts @@ -3,7 +3,7 @@ import MessageHandler from "./MessageHandler"; interface JupyterLiteSessionProps { originURL: string; defaultNotebookPath?: string; - frameId: string; + iframeId: string; messageHandler?: MessageHandler; } declare class JupyterLiteSession extends React.Component { diff --git a/dist/other/jupyterlite/JupyterLiteSession.js b/dist/other/jupyterlite/JupyterLiteSession.js index dd80388..aca1a16 100644 --- a/dist/other/jupyterlite/JupyterLiteSession.js +++ b/dist/other/jupyterlite/JupyterLiteSession.js @@ -3,26 +3,26 @@ const defaultProps = { // eslint-disable-next-line react/default-props-match-prop-types originURL: "https://jupyterlite.mat3ra.com", // eslint-disable-next-line react/default-props-match-prop-types - frameId: "jupyter-lite-iframe", + iframeId: "jupyter-lite-iframe", }; class JupyterLiteSession extends React.Component { constructor(props = defaultProps) { super(props); } componentDidMount() { - const { messageHandler, originURL, frameId } = this.props; - messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.init(originURL, frameId); + const { messageHandler, originURL, iframeId } = this.props; + messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.init(originURL, iframeId); } componentWillUnmount() { const { messageHandler } = this.props; messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.destroy(); } render() { - const { defaultNotebookPath, originURL, frameId } = this.props; + const { defaultNotebookPath, originURL, iframeId } = this.props; const src = defaultNotebookPath ? `${originURL}/lab/tree?path=${defaultNotebookPath}` : `${originURL}/lab`; - return (React.createElement("iframe", { name: "jupyterlite", title: "JupyterLite", id: frameId, src: src, sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals allow-top-navigation-by-user-activation allow-downloads", width: "100%", height: "100%" })); + return (React.createElement("iframe", { name: "jupyterlite", title: "JupyterLite", id: iframeId, src: src, sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals allow-top-navigation-by-user-activation allow-downloads", width: "100%", height: "100%" })); } } // eslint-disable-next-line react/static-property-placement diff --git a/dist/other/jupyterlite/MessageHandler.d.ts b/dist/other/jupyterlite/MessageHandler.d.ts index ce31ab2..4b29bc5 100644 --- a/dist/other/jupyterlite/MessageHandler.d.ts +++ b/dist/other/jupyterlite/MessageHandler.d.ts @@ -1,12 +1,14 @@ -type HandlerFunction = (...args: any[]) => void | any; +import { IframeMessageSchema } from "@mat3ra/esse/lib/js/types"; +type HandlerFunction = (...args: IframeMessageSchema["payload"][]) => void | any; declare class MessageHandler { private handlers; - private originURL; - private frameId; - init(originURL: string, frameId: string): void; + private iframeOriginURL; + private hostOriginURL; + private iframeId; + init(iframeOriginURL: string, iframeId: string): void; destroy(): void; - addHandlers(action: string, handlers: HandlerFunction[]): void; + addHandlers(action: IframeMessageSchema["action"], handlers: HandlerFunction[]): void; private receiveMessage; - sendData(data: any, variableName?: string): void; + sendData(data: JSON): void; } export default MessageHandler; diff --git a/dist/other/jupyterlite/MessageHandler.js b/dist/other/jupyterlite/MessageHandler.js index 791bffd..f636956 100644 --- a/dist/other/jupyterlite/MessageHandler.js +++ b/dist/other/jupyterlite/MessageHandler.js @@ -1,33 +1,36 @@ class MessageHandler { constructor() { - this.handlers = {}; - this.originURL = "*"; - this.frameId = ""; + this.handlers = { "get-data": [], "set-data": [], info: [] }; + this.iframeOriginURL = "*"; + this.hostOriginURL = "*"; + this.iframeId = ""; this.receiveMessage = (event) => { - if (this.originURL !== "*" && event.origin !== this.originURL) { + if (this.iframeOriginURL !== "*" && + event.origin !== this.iframeOriginURL && + event.origin !== this.hostOriginURL) { return; } if (event.data.type === "from-iframe-to-host") { - const { action } = event.data.payload; - // TODO: make action required in ESSE + const { action, payload } = event.data; // @ts-ignore if (this.handlers[action]) { // @ts-ignore this.handlers["set-data"].forEach((handler) => { - handler(event.data.payload.data, event.data.payload.variableName); + handler(payload); }); this.handlers["get-data"].forEach((handler) => { - const data = handler(event.data.payload.variableName); - this.sendData(data, event.data.payload.variableName); + const data = handler(); + this.sendData(data); }); } } }; } - init(originURL, frameId) { + init(iframeOriginURL, iframeId) { window.addEventListener("message", this.receiveMessage); - this.originURL = originURL; - this.frameId = frameId; + this.iframeOriginURL = iframeOriginURL; + this.hostOriginURL = window.location.origin; + this.iframeId = iframeId; } destroy() { window.removeEventListener("message", this.receiveMessage); @@ -38,19 +41,16 @@ class MessageHandler { } this.handlers[action].push(...handlers); } - sendData(data, variableName = "data") { + sendData(data) { const message = { type: "from-host-to-iframe", - payload: { - action: "set-data", - data, - variableName, - }, + action: "set-data", + payload: data, }; - const iframe = document.getElementById(this.frameId); + const iframe = document.getElementById(this.iframeId); if (iframe) { // @ts-ignore - iframe.contentWindow.postMessage(message, this.originURL); + iframe.contentWindow.postMessage(message, this.iframeOriginURL); } } }