update: use handlers

Exabyte-io · Mar 14, 2024 · cc6e802 · cc6e802
1 parent 618f517
commit cc6e802
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 48 deletions.
diff --git a/dist/other/jupyterlite/JupyterLiteSession.d.ts b/dist/other/jupyterlite/JupyterLiteSession.d.ts
@@ -4,14 +4,21 @@ interface JupyterLiteSessionProps {
     originURL: string;
     defaultNotebookPath?: string;
     frameId: string;
-    receiveData?: (data: any) => void;
+    handlers: {
+        type: string;
+        filter: {
+            keys: string[];
+        };
+        extraParameters: any[];
+        handler: (data: any) => void;
+    }[];
 }
 declare class JupyterLiteSession extends React.Component<JupyterLiteSessionProps> {
     static defaultProps: Partial<JupyterLiteSessionProps>;
     componentDidMount(): void;
     componentWillUnmount(): void;
     receiveMessage: (event: MessageEvent<JupyterliteMessageSchema>) => void;
-    sendData: (data: Record<string, unknown>[], variableName: string) => void;
+    sendMessage: (data: never, variableName: string) => void;
     render(): React.JSX.Element;
 }
 export default JupyterLiteSession;
diff --git a/dist/other/jupyterlite/JupyterLiteSession.js b/dist/other/jupyterlite/JupyterLiteSession.js
@@ -5,17 +5,23 @@ class JupyterLiteSession extends React.Component {
         this.receiveMessage = (event) => {
             if (event.origin !== new URL(this.props.originURL).origin)
                 return;
-            if (event.data) {
-                if (event.data.type === "from-iframe-to-host") {
-                    if (this.props.receiveData)
-                        this.props.receiveData(event.data);
+            const message = event.data;
+            const applicableHandlers = this.props.handlers.filter(handlerConfig => handlerConfig.filter.keys.every(key => message.payload.hasOwnProperty(key)));
+            applicableHandlers.forEach(handlerConfig => {
+                const result = handlerConfig.handler(message.payload);
+                // TODO: solve ts-ignores
+                // If the handler returns a payload for sending message, use it
+                // @ts-ignore
+                if (result && 'variableName' in result) {
+                    // @ts-ignore
+                    this.sendMessage(result.data, result.variableName);
                 }
-            }
+            });
         };
-        this.sendData = (data, variableName) => {
+        this.sendMessage = (data, variableName) => {
             const message = {
                 type: "from-host-to-iframe",
-                payload: { data: data, variableName: variableName },
+                payload: { data, variableName },
             };
             const iframe = document.getElementById(this.props.frameId);
             if (iframe && iframe.contentWindow) {
@@ -33,10 +39,11 @@ class JupyterLiteSession extends React.Component {
         window.removeEventListener("message", this.receiveMessage, false);
     }
     render() {
-        const src = this.props.defaultNotebookPath
-            ? `${this.props.originURL}/lab/tree?path=${this.props.defaultNotebookPath}`
-            : `${this.props.originURL}/lab`;
-        return (React.createElement("iframe", { name: "jupyterlite", title: "JupyterLite", id: this.props.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%" }));
+        const { defaultNotebookPath, originURL, frameId } = 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%" }));
     }
 }
 JupyterLiteSession.defaultProps = {

diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     },
     "devDependencies": {
         "@exabyte-io/code.js": "^2024.2.20-0",
-        "@mat3ra/esse": "https://github.com/Exabyte-io/esse.git#bdf3516f2f7caef4567f1a4253925979273f69ed",
+        "@mat3ra/esse": "https://github.com/Exabyte-io/esse.git#711c301b2464600a13831816e16ca861de1ea6a0",
         "@exabyte-io/eslint-config": "^2023.8.29-1",
         "@mui/icons-material": "^5.11.9",
         "@mui/lab": "^5.0.0-alpha.120",

diff --git a/src/other/jupyterlite/JupyterLiteSession.tsx b/src/other/jupyterlite/JupyterLiteSession.tsx
@@ -5,7 +5,14 @@ interface JupyterLiteSessionProps {
     originURL: string;
     defaultNotebookPath?: string;
     frameId: string;
-    onMessage?: (message: JupyterliteMessageSchema) => void;
+    handlers: {
+        type: string; // from-iframe-to-host
+        filter: {
+            keys: string[]; // ["data"] or ["requestData", "variableName"]
+        };
+        extraParameters: any[];
+        handler: (data: any) => void;
+    }[];
 }
 
 class JupyterLiteSession extends React.Component<JupyterLiteSessionProps> {
@@ -24,43 +31,58 @@ class JupyterLiteSession extends React.Component<JupyterLiteSessionProps> {
 
     receiveMessage = (event: MessageEvent<JupyterliteMessageSchema>) => {
         if (event.origin !== new URL(this.props.originURL).origin) return;
-        if (event.data) {
-            if (event.data.type === "from-iframe-to-host") {
-                if (this.props.onMessage) this.props.onMessage(event.data);
+        const message = event.data;
+
+        const applicableHandlers = this.props.handlers.filter(handlerConfig =>
+            handlerConfig.filter.keys.every(key => message.payload.hasOwnProperty(key))
+        );
+
+        applicableHandlers.forEach(handlerConfig => {
+            const result = handlerConfig.handler(message.payload);
+
+            // TODO: solve ts-ignores
+            // If the handler returns a payload for sending message, use it
+            // @ts-ignore
+            if (result && 'variableName' in result) {
+                // @ts-ignore
+                this.sendMessage(result.data, result.variableName);
             }
-        }
+        });
     };
 
-    sendData = (data: never, variableName: string) => {
-        const message: JupyterliteMessageSchema = {
-            type: "from-host-to-iframe",
-            payload: {data: data, variableName: variableName},
+    sendMessage = (data: never, variableName: string) => {
+            const message: JupyterliteMessageSchema = {
+                type: "from-host-to-iframe",
+                payload: {data, variableName},
+            };
+            const iframe = document.getElementById(this.props.frameId) as HTMLIFrameElement | null;
+            if (iframe && iframe.contentWindow) {
+                iframe.contentWindow.postMessage(message, this.props.originURL);
+            } else {
+                console.error("JupyterLite iframe not found");
+            }
         };
-        const iframe = document.getElementById(this.props.frameId) as HTMLIFrameElement | null;
-        if (iframe && iframe.contentWindow) {
-            iframe.contentWindow.postMessage(message, this.props.originURL);
-        } else {
-            console.error("JupyterLite iframe not found");
-        }
-    };
 
-    render() {
-        const {defaultNotebookPath, originURL, frameId} = this.props;
-        const src = defaultNotebookPath
-            ? `${originURL}/lab/tree?path=${defaultNotebookPath}`
-            : `${originURL}/lab`;
-        return (
-            <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%"
-            />
-        );
+        render()
+        {
+            const {defaultNotebookPath, originURL, frameId} = this.props;
+            const src = defaultNotebookPath
+                ? `${originURL}/lab/tree?path=${defaultNotebookPath}`
+                : `${originURL}/lab`;
+            return (
+                <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%"
+                />
+            );
+        }
     }
-}
 
-export default JupyterLiteSession;
+    export
+    default
+    JupyterLiteSession;