Serve sketch preview from subdomain

.env.example

@@ -22,6 +22,9 @@ ML5_LIBRARY_PASS=helloml5
 MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
+PREVIEW_PORT=8002
+EDITOR_URL=http://localhost:8000
+PREVIEW_URL=http://localhost:8002
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production

client/index.integration.test.jsx

@@ -139,7 +139,7 @@ describe('index.jsx integration', () => {
     expect(
       screen.getByRole('heading', { name: /preview/i })
     ).toBeInTheDocument();
-    const preview = screen.getByRole('main', { name: /sketch output/i });
+    const preview = screen.getByTitle(/sketch preview/i);
     expect(preview).toBeInTheDocument();
   });
 
@@ -152,24 +152,27 @@ describe('index.jsx integration', () => {
     expect(screen.getByText('Sketch Files')).toBeInTheDocument();
   });
 
-  it('clicking on play updates the preview iframe with a srcdoc, stop clears it', () => {
-    const playButton = screen.getByRole('button', {
-      name: /play only visual sketch/i
-    });
-    const preview = screen.getByRole('main', { name: /sketch output/i });
-    expect(preview.getAttribute('srcdoc')).toBeFalsy();
-    act(() => {
-      fireEvent.click(playButton);
-    });
-
-    expect(preview.getAttribute('srcdoc')).toBeTruthy();
-
-    const stopButton = screen.getByRole('button', {
-      name: /stop sketch/i
-    });
-    act(() => {
-      fireEvent.click(stopButton);
-    });
-    expect(preview.getAttribute('srcdoc')).toMatch(/(^|")\s*($|")/);
-  });
+  // this test doesn't make sense anymore :/
+  // how to fix it? could check if sketch gets sent to iframe
+  // via postmessage or something
+  // it('clicking on play updates the preview iframe with a srcdoc, stop clears it', () => {
+  //   const playButton = screen.getByRole('button', {
+  //     name: /play only visual sketch/i
+  //   });
+  //   const preview = screen.getByRole('main', { name: /sketch preview/i });
+  //   expect(preview.getAttribute('srcdoc')).toBeFalsy();
+  //   act(() => {
+  //     fireEvent.click(playButton);
+  //   });
+
+  //   expect(preview.getAttribute('srcdoc')).toBeTruthy();
+
+  //   const stopButton = screen.getByRole('button', {
+  //     name: /stop sketch/i
+  //   });
+  //   act(() => {
+  //     fireEvent.click(stopButton);
+  //   });
+  //   expect(preview.getAttribute('srcdoc')).toMatch(/(^|")\s*($|")/);
+  // });
 });

client/modules/IDE/actions/ide.js

@@ -1,5 +1,6 @@
 import * as ActionTypes from '../../../constants';
 import { clearConsole } from './console';
+import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
 
 export function startVisualSketch() {
   return {
@@ -248,9 +249,23 @@ export function showRuntimeErrorWarning() {
 }
 
 export function startSketch() {
-  return (dispatch) => {
+  return (dispatch, getState) => {
     dispatch(clearConsole());
-    dispatch(startSketchAndRefresh());
+    dispatch(startVisualSketch());
+    dispatch(showRuntimeErrorWarning());
+    const state = getState();
+    dispatchMessage({
+      type: MessageTypes.SKETCH,
+      payload: {
+        files: state.files,
+        basePath: window.location.pathname,
+        gridOutput: state.preferences.gridOutput,
+        textOutput: state.preferences.textOutput
+      }
+    });
+    dispatchMessage({
+      type: MessageTypes.START
+    });
   };
 }
 
@@ -264,6 +279,9 @@ export function startAccessibleSketch() {
 
 export function stopSketch() {
   return (dispatch) => {
+    dispatchMessage({
+      type: MessageTypes.STOP
+    });
     dispatch(stopAccessibleOutput());
     dispatch(stopVisualSketch());
   };

client/modules/IDE/actions/preferences.js

@@ -159,24 +159,6 @@ export function setGridOutput(value) {
   };
 }
 
-export function setSoundOutput(value) {
-  return (dispatch, getState) => {
-    dispatch({
-      type: ActionTypes.SET_SOUND_OUTPUT,
-      value
-    });
-    const state = getState();
-    if (state.user.authenticated) {
-      const formParams = {
-        preferences: {
-          soundOutput: value
-        }
-      };
-      updatePreferences(formParams, dispatch);
-    }
-  };
-}
-
 export function setTheme(value) {
   // return {
   //   type: ActionTypes.SET_THEME,
@@ -225,7 +207,6 @@ export function setAllAccessibleOutput(value) {
   return (dispatch) => {
     dispatch(setTextOutput(value));
     dispatch(setGridOutput(value));
-    dispatch(setSoundOutput(value));
   };
 }
 

client/modules/IDE/actions/project.js

@@ -54,7 +54,7 @@ export function setNewProject(project) {
 export function getProject(id, username) {
   return (dispatch, getState) => {
     dispatch(justOpenedProject());
-    apiClient
+    return apiClient
       .get(`/${username}/projects/${id}`)
       .then((response) => {
         dispatch(setProject(response.data));

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 { dispatch } 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
@@ -19,7 +19,8 @@ class ConsoleInput extends React.Component {
   }
 
   componentDidMount() {
-    this._cm = CodeMirror(this.codemirrorContainer, { // eslint-disable-line
+    this._cm = CodeMirror(this.codemirrorContainer, {
+      // eslint-disable-line
       theme: `p5-${this.props.theme}`,
       scrollbarStyle: null,
       keymap: 'sublime',
@@ -39,9 +40,12 @@ class ConsoleInput extends React.Component {
           { log: Encode({ method: 'command', data: [value] }) }
         ];
         const consoleEvent = [{ method: 'command', data: [value] }];
-        dispatch({
-          source: 'console',
-          messages
+        dispatchMessage({
+          type: MessageTypes.EXECUTE,
+          payload: {
+            source: 'console',
+            messages
+          }
         });
         this.props.dispatchConsoleEvent(consoleEvent);
         cm.setValue('');

client/modules/IDE/components/Editor.jsx

@@ -7,6 +7,7 @@ import babelParser from 'prettier/parser-babel';
 import htmlParser from 'prettier/parser-html';
 import cssParser from 'prettier/parser-postcss';
 import { withTranslation } from 'react-i18next';
+import StackTrace from 'stacktrace-js';
 import 'codemirror/mode/css/css';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint';
@@ -115,7 +116,6 @@ class Editor extends React.Component {
       styleSelectedText: true,
       lint: {
         onUpdateLinting: (annotations) => {
-          this.props.hideRuntimeErrorWarning();
           this.updateLintingMessageAccessibility(annotations);
         },
         options: {
@@ -159,10 +159,11 @@ class Editor extends React.Component {
       'change',
       debounce(() => {
         this.props.setUnsavedChanges(true);
+        this.props.hideRuntimeErrorWarning();
         this.props.updateFileContent(this.props.file.id, this._cm.getValue());
         if (this.props.autorefresh && this.props.isPlaying) {
           this.props.clearConsole();
-          this.props.startRefreshSketch();
+          this.props.startSketch();
         }
       }, 1000)
     );
@@ -246,41 +247,45 @@ class Editor extends React.Component {
       );
     }
 
-    if (prevProps.consoleEvents !== this.props.consoleEvents) {
-      this.props.showRuntimeErrorWarning();
-    }
-    for (let i = 0; i < this._cm.lineCount(); i += 1) {
-      this._cm.removeLineClass(i, 'background', 'line-runtime-error');
-    }
     if (this.props.runtimeErrorWarningVisible) {
-      this.props.consoleEvents.forEach((consoleEvent) => {
-        if (consoleEvent.method === 'error') {
-          if (
-            consoleEvent.data &&
-            consoleEvent.data[0] &&
-            consoleEvent.data[0].indexOf &&
-            consoleEvent.data[0].indexOf(')') > -1
-          ) {
-            const n = consoleEvent.data[0].replace(')', '').split(' ');
-            const lineNumber = parseInt(n[n.length - 1], 10) - 1;
-            const { source } = consoleEvent;
-            const fileName = this.props.file.name;
-            const errorFromJavaScriptFile = `${source}.js` === fileName;
-            const errorFromIndexHTML =
-              source === fileName && fileName === 'index.html';
-            if (
-              !Number.isNaN(lineNumber) &&
-              (errorFromJavaScriptFile || errorFromIndexHTML)
-            ) {
+      if (this.props.consoleEvents.length !== prevProps.consoleEvents.length) {
+        this.props.consoleEvents.forEach((consoleEvent) => {
+          if (consoleEvent.method === 'error') {
+            // It doesn't work if you create a new Error, but this works
+            // LOL
+            const errorObj = { stack: consoleEvent.data[0].toString() };
+            StackTrace.fromError(errorObj).then((stackLines) => {
+              this.props.expandConsole();
+              const line = stackLines.find(
+                (l) => l.fileName && l.fileName.startsWith('/')
+              );
+              if (!line) return;
+              const fileNameArray = line.fileName.split('/');
+              const fileName = fileNameArray.slice(-1)[0];
+              const filePath = fileNameArray.slice(0, -1).join('/');
+              const fileWithError = this.props.files.find(
+                (f) => f.name === fileName && f.filePath === filePath
+              );
+              this.props.setSelectedFile(fileWithError.id);
               this._cm.addLineClass(
-                lineNumber,
+                line.lineNumber - 1,
                 'background',
                 'line-runtime-error'
               );
-            }
+            });
           }
+        });
+      } else {
+        for (let i = 0; i < this._cm.lineCount(); i += 1) {
+          this._cm.removeLineClass(i, 'background', 'line-runtime-error');
         }
-      });
+      }
+    }
+
+    if (this.props.file.id !== prevProps.file.id) {
+      for (let i = 0; i < this._cm.lineCount(); i += 1) {
+        this._cm.removeLineClass(i, 'background', 'line-runtime-error');
+      }
     }
   }
 
@@ -440,7 +445,7 @@ Editor.propTypes = {
       method: PropTypes.string.isRequired,
       args: PropTypes.arrayOf(PropTypes.string)
     })
-  ),
+  ).isRequired,
   updateLintMessage: PropTypes.func.isRequired,
   clearLintMessage: PropTypes.func.isRequired,
   updateFileContent: PropTypes.func.isRequired,
@@ -453,7 +458,7 @@ Editor.propTypes = {
     url: PropTypes.string
   }).isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
-  startRefreshSketch: PropTypes.func.isRequired,
+  startSketch: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   isPlaying: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
@@ -471,15 +476,13 @@ Editor.propTypes = {
   expandSidebar: PropTypes.func.isRequired,
   isUserOwner: PropTypes.bool.isRequired,
   clearConsole: PropTypes.func.isRequired,
-  showRuntimeErrorWarning: PropTypes.func.isRequired,
+  // showRuntimeErrorWarning: PropTypes.func.isRequired,
   hideRuntimeErrorWarning: PropTypes.func.isRequired,
   runtimeErrorWarningVisible: PropTypes.bool.isRequired,
   provideController: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
-};
-
-Editor.defaultProps = {
-  consoleEvents: []
+  t: PropTypes.func.isRequired,
+  setSelectedFile: PropTypes.func.isRequired,
+  expandConsole: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -496,7 +499,7 @@ function mapStateToProps(state) {
     user: state.user,
     project: state.project,
     toast: state.toast,
-    console: state.console,
+    consoleEvents: state.console,
 
     ...state.preferences,
     ...state.ide,

client/modules/IDE/components/Preferences/index.jsx

@@ -437,23 +437,6 @@ class Preferences extends React.Component {
                 >
                   {this.props.t('Preferences.TableText')}
                 </label>
-                <input
-                  type="checkbox"
-                  onChange={(event) => {
-                    this.props.setSoundOutput(event.target.checked);
-                  }}
-                  aria-label={this.props.t('Preferences.SoundOutputARIA')}
-                  name="sound output"
-                  id="sound-output-on"
-                  value="On"
-                  checked={this.props.soundOutput}
-                />
-                <label
-                  htmlFor="sound-output-on"
-                  className="preference__option preference__canvas"
-                >
-                  {this.props.t('Preferences.Sound')}
-                </label>
               </div>
             </div>
           </TabPanel>
@@ -474,10 +457,8 @@ Preferences.propTypes = {
   setLinewrap: PropTypes.func.isRequired,
   textOutput: PropTypes.bool.isRequired,
   gridOutput: PropTypes.bool.isRequired,
-  soundOutput: PropTypes.bool.isRequired,
   setTextOutput: PropTypes.func.isRequired,
   setGridOutput: PropTypes.func.isRequired,
-  setSoundOutput: PropTypes.func.isRequired,
   lintWarning: PropTypes.bool.isRequired,
   setLintWarning: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,