Fix ConsoleInput to work with EmbedFrame

Author: catarak

client/modules/IDE/components/ConsoleInput.jsx

@@ -4,7 +4,7 @@ import CodeMirror from 'codemirror';
 import { Encode } from 'console-feed';
 
 import RightArrowIcon from '../../../images/right-arrow.svg';
-import { dispatchMessage } from '../../../utils/dispatcher';
+import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
 
 // heavily inspired by
 // https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx
@@ -41,8 +41,11 @@ class ConsoleInput extends React.Component {
         ];
         const consoleEvent = [{ method: 'command', data: [value] }];
         dispatchMessage({
-          source: 'console',
-          messages
+          type: MessageTypes.EXECUTE,
+          payload: {
+            source: 'console',
+            messages
+          }
         });
         this.props.dispatchConsoleEvent(consoleEvent);
         cm.setValue('');

client/modules/Preview/EmbedFrame.jsx

@@ -17,6 +17,7 @@ import {
   NOT_EXTERNAL_LINK_REGEX
 } from '../../../server/utils/fileUtils';
 import { startTag, getAllScriptOffsets } from '../../utils/consoleUtils';
+import { registerFrame } from '../../utils/dispatcher';
 
 const Frame = styled.iframe`
   min-height: 100%;
@@ -233,6 +234,16 @@ function EmbedFrame({ files, isPlaying }) {
   const iframe = useRef();
   const htmlFile = useMemo(() => getHtmlFile(files), [files]);
 
+  useEffect(() => {
+    const unsubscribe = registerFrame(
+      iframe.current.contentWindow,
+      window.origin
+    );
+    return () => {
+      unsubscribe();
+    };
+  });
+
   function renderSketch() {
     const doc = iframe.current;
     if (isPlaying) {

client/modules/Preview/previewIndex.jsx

@@ -38,6 +38,9 @@ const App = () => {
       case MessageTypes.REGISTER:
         dispatchMessage({ type: MessageTypes.REGISTER });
         break;
+      case MessageTypes.EXECUTE:
+        dispatchMessage(payload);
+        break;
       default:
         break;
     }

client/utils/dispatcher.js

@@ -1,44 +1,48 @@
 // Inspired by
 // https://github.com/codesandbox/codesandbox-client/blob/master/packages/codesandbox-api/src/dispatcher/index.ts
 
-let frame = null;
+const frames = {};
+let frameIndex = 1;
 let listener = null;
-// const { origin } = window;
-let origin = null;
 
 export const MessageTypes = {
   START: 'START',
   STOP: 'STOP',
   FILES: 'FILES',
-  REGISTER: 'REGISTER'
+  REGISTER: 'REGISTER',
+  EXECUTE: 'EXECUTE'
 };
 
-// could instead register multiple frames here
 export function registerFrame(newFrame, newOrigin) {
-  frame = newFrame;
-  origin = newOrigin;
+  const frameId = frameIndex;
+  frameIndex += 1;
+  frames[frameId] = { frame: newFrame, origin: newOrigin };
   return () => {
-    frame = null;
-    origin = null;
+    delete frames[frameId];
   };
 }
 
 function notifyListener(message) {
   if (listener) listener(message);
 }
 
-function notifyFrame(message) {
+function notifyFrames(message) {
   const rawMessage = JSON.parse(JSON.stringify(message));
-  if (frame && frame.postMessage) {
-    frame.postMessage(rawMessage, origin);
-  }
+  Object.keys(frames).forEach((frameId) => {
+    const { frame, origin } = frames[frameId];
+    if (frame && frame.postMessage) {
+      frame.postMessage(rawMessage, origin);
+    }
+  });
 }
 
 export function dispatchMessage(message) {
   if (!message) return;
 
+  // maybe one day i will understand why in the codesandbox
+  // code they leave notifyListeners in here?
   // notifyListener(message);
-  notifyFrame(message);
+  notifyFrames(message);
 }
 
 /**