Progress

Author: Ives van Hoorne

.eslintrc

@@ -26,8 +26,5 @@
     "no-underscore-dangle": "off",
     "no-nested-ternary": "warn",
     "react/require-default-props": "off"
-  },
-  "settings": {
-    "import/resolver": "webpack"
   }
 }

package.json

@@ -39,7 +39,8 @@
     "packages/app",
     "packages/common",
     "packages/codesandbox-api",
-    "packages/codesandbox-playground"
+    "packages/sandpack",
+    "packages/react-sandpack"
   ],
   "devDependencies": {
     "all-contributors-cli": "^4.3.0",

packages/app/src/app/components/Preview/DevTools/Problems/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { listen, actions } from 'codesandbox-api';
-import { dispatch } from 'app/components/Preview';
+import { listen, dispatch, actions } from 'codesandbox-api';
 import Tooltip from 'common/components/Tooltip';
 import FileIcon from 'react-icons/lib/md/insert-drive-file';
 
@@ -66,7 +65,7 @@ class Problems extends React.PureComponent<*, State> {
   };
 
   openFile = (path: string) => {
-    dispatch(this.props.sandboxId, actions.editor.openModule(path));
+    dispatch(actions.editor.openModule(path));
   };
 
   render() {

packages/app/src/app/components/Preview/DevTools/Tests/index.js

@@ -1,8 +1,7 @@
 // @flow
 /* eslint-disable no-param-reassign */
 import React from 'react';
-import { actions, listen } from 'codesandbox-api';
-import { dispatch } from 'app/components/Preview';
+import { actions, dispatch, listen } from 'codesandbox-api';
 import SplitPane from 'react-split-pane';
 
 import immer from 'immer';
@@ -325,7 +324,7 @@ class Tests extends React.Component<Props, State> {
   };
 
   toggleWatching = () => {
-    dispatch(this.props.sandboxId, {
+    dispatch({
       type: 'set-test-watching',
       watching: !this.state.watching,
     });
@@ -334,7 +333,7 @@ class Tests extends React.Component<Props, State> {
 
   runAllTests = () => {
     this.setState({ files: {} }, () => {
-      dispatch(this.props.sandboxId, {
+      dispatch({
         type: 'run-all-tests',
       });
     });
@@ -346,7 +345,7 @@ class Tests extends React.Component<Props, State> {
         state.files[file.fileName].tests = {};
       }),
       () => {
-        dispatch(this.props.sandboxId, {
+        dispatch({
           type: 'run-tests',
           path: file.fileName,
         });
@@ -355,7 +354,7 @@ class Tests extends React.Component<Props, State> {
   };
 
   openFile = (path: string) => {
-    dispatch(this.props.sandboxId, actions.editor.openModule(path));
+    dispatch(actions.editor.openModule(path));
   };
 
   render() {

packages/app/src/app/components/Preview/index.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import type { Sandbox, Module, Preferences } from 'common/types';
-import { listen, notifyListeners } from 'codesandbox-api';
+import { listen, dispatch, registerFrame } from 'codesandbox-api';
 import { debounce } from 'lodash';
 
 import { frameUrl } from 'common/utils/url-generator';
@@ -12,29 +12,8 @@ import { generateFileFromSandbox } from 'common/templates/configuration/package-
 import Navigator from './Navigator';
 import { Container, StyledFrame } from './elements';
 
-let frames = [];
-
-function sendMessage(sandboxId: string, message: Object) {
-  const rawMessage = JSON.parse(JSON.stringify(message));
-  frames.forEach(frame => {
-    frame.postMessage(
-      { ...rawMessage, codesandbox: true },
-      frameUrl(sandboxId)
-    );
-  });
-}
-
-export function dispatch(sandboxId: string, message: Object = {}) {
-  const finalMessage = {
-    ...message,
-    codesandbox: true,
-  };
-  sendMessage(sandboxId, finalMessage);
-  notifyListeners(finalMessage, window);
-}
-
-export function evaluateInSandbox(sandboxId: string, command: string) {
-  dispatch(sandboxId, { type: 'evaluate', command });
+export function evaluateInSandbox(command: string) {
+  dispatch({ type: 'evaluate', command });
 }
 
 type Props = {
@@ -137,11 +116,9 @@ class BasePreview extends React.Component<Props, State> {
   };
 
   handleMessage = (data: Object, source: any) => {
-    if (source) {
-      if (data.type === 'initialized') {
-        if (frames.indexOf(source) === -1) {
-          frames.push(source);
-        }
+    if (data && data.codesandbox) {
+      if (data.type === 'initialized' && source) {
+        registerFrame(source);
 
         if (!this.state.frameInitialized && this.props.onInitialized) {
           this.disposeInitializer = this.props.onInitialized(this);
@@ -206,7 +183,7 @@ class BasePreview extends React.Component<Props, State> {
 
     if (settings.clearConsoleEnabled) {
       console.clear(); // eslint-disable-line no-console
-      dispatch(sandbox.id, { type: 'clear-console' });
+      dispatch({ type: 'clear-console' });
     }
 
     // Do it here so we can see the dependency fetching screen if needed
@@ -215,10 +192,7 @@ class BasePreview extends React.Component<Props, State> {
       this.handleRefresh();
     } else {
       if (!this.props.isInProjectView) {
-        evaluateInSandbox(
-          this.props.sandbox.id,
-          `history.pushState({}, null, '/')`
-        );
+        evaluateInSandbox(`history.pushState({}, null, '/')`);
       }
 
       const modulesObject = {};
@@ -241,7 +215,7 @@ class BasePreview extends React.Component<Props, State> {
         };
       }
 
-      sendMessage(sandbox.id, {
+      dispatch({
         type: 'compile',
         version: 3,
         entry: this.getRenderedModule(),
@@ -293,7 +267,7 @@ class BasePreview extends React.Component<Props, State> {
   };
 
   handleBack = () => {
-    sendMessage(this.props.sandbox.id, {
+    dispatch({
       type: 'urlback',
     });
 
@@ -305,7 +279,7 @@ class BasePreview extends React.Component<Props, State> {
   };
 
   handleForward = () => {
-    sendMessage(this.props.sandbox.id, {
+    dispatch({
       type: 'urlforward',
     });
 

packages/codesandbox-api/src/dispatcher/index.ts

@@ -1,6 +1,8 @@
 // import * as debug from 'debug';
 import host from './host';
 
+const bundlers: Window[] = [];
+
 // Whether the tab has a connection with the editor
 export const isStandalone =
   typeof window === 'undefined' || (!window.opener && window.parent === window);
@@ -17,6 +19,7 @@ export function dispatch(message: Object) {
 
   const newMessage = { ...message, codesandbox: true };
   notifyListeners(newMessage);
+  notifyFrames(newMessage);
 
   if (isStandalone) return;
 
@@ -53,10 +56,36 @@ export function notifyListeners(data: Object, source?: MessageEvent['source']) {
   });
 }
 
+function notifyFrames(message: Object) {
+  const rawMessage = JSON.parse(JSON.stringify(message));
+  bundlers.forEach(frame => {
+    if (frame) {
+      frame.postMessage({ ...rawMessage, codesandbox: true }, '*');
+    }
+  });
+}
+
 // We now start listening so we can let our listeners know
 window.addEventListener('message', (e: MessageEvent) => {
   const { data } = e;
-  if (data.codesandbox) {
+
+  if (
+    data.codesandbox &&
+    (e.origin.endsWith('.codesandbox.io') ||
+      e.origin.endsWith('/codesandbox.io') ||
+      process.env.NODE_ENV !== 'production')
+  ) {
     notifyListeners(data, e.source);
   }
 });
+
+/**
+ * Register an window as a output the `dispatch` function can send messages to.
+ *
+ * @param frame
+ */
+export function registerFrame(frame: Window) {
+  if (bundlers.indexOf(frame) === -1) {
+    bundlers.push(frame);
+  }
+}