Initialize files with path, update console errors to use file path

Author: catarak

client/modules/IDE/actions/ide.js

@@ -252,6 +252,7 @@ export function startSketch() {
   return (dispatch, getState) => {
     dispatch(clearConsole());
     dispatch(startVisualSketch());
+    dispatch(showRuntimeErrorWarning());
     const state = getState();
     dispatchMessage({
       type: MessageTypes.SKETCH,

client/modules/IDE/components/Editor.jsx

@@ -115,7 +115,6 @@ class Editor extends React.Component {
       styleSelectedText: true,
       lint: {
         onUpdateLinting: (annotations) => {
-          this.props.hideRuntimeErrorWarning();
           this.updateLintingMessageAccessibility(annotations);
         },
         options: {
@@ -159,6 +158,7 @@ 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();
@@ -246,12 +246,6 @@ 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') {
@@ -261,26 +255,24 @@ class Editor extends React.Component {
             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)
-            ) {
-              this._cm.addLineClass(
-                lineNumber,
-                'background',
-                'line-runtime-error'
-              );
-            }
+            const sourceAndLoc = consoleEvent.data[0]
+              .split('\n')[1]
+              .split('(')[1]
+              .split(')')[0];
+            const [source, line, column] = sourceAndLoc.split(':');
+            const lineNumber = parseInt(line, 10) - 1;
+            this._cm.addLineClass(
+              lineNumber,
+              'background',
+              'line-runtime-error'
+            );
           }
         }
       });
+    } else {
+      for (let i = 0; i < this._cm.lineCount(); i += 1) {
+        this._cm.removeLineClass(i, 'background', 'line-runtime-error');
+      }
     }
   }
 
@@ -440,7 +432,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,
@@ -471,17 +463,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: []
-};
-
 function mapStateToProps(state) {
   return {
     files: state.files,
@@ -496,7 +484,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/reducers/files.js

@@ -54,23 +54,26 @@ const initialState = () => {
       _id: a,
       isSelectedFile: true,
       fileType: 'file',
-      children: []
+      children: [],
+      filePath: ''
     },
     {
       name: 'index.html',
       content: defaultHTML,
       id: b,
       _id: b,
       fileType: 'file',
-      children: []
+      children: [],
+      filePath: ''
     },
     {
       name: 'style.css',
       content: defaultCSS,
       id: c,
       _id: c,
       fileType: 'file',
-      children: []
+      children: [],
+      filePath: ''
     }
   ];
 };
@@ -141,6 +144,26 @@ function renameFile(state, action) {
   });
 }
 
+function setFilePath(files, fileId, path) {
+  const file = files.find((f) => f.id === fileId);
+  file.filePath = path;
+  const newPath = `${path}${path.length > 0 ? '/' : ''}${file.name}`;
+  if (file.children.length === 0) return;
+  file.children.forEach((childFileId) => {
+    setFilePath(files, childFileId, newPath);
+  });
+}
+
+function setFilePaths(files) {
+  const updatedFiles = [...files];
+  const rootPath = '';
+  const rootFile = files.find((f) => f.name === 'root');
+  rootFile.children.forEach((fileId) => {
+    setFilePath(updatedFiles, fileId, rootPath);
+  });
+  return updatedFiles;
+}
+
 const files = (state, action) => {
   if (state === undefined) {
     state = initialState(); // eslint-disable-line
@@ -162,12 +185,18 @@ const files = (state, action) => {
         return Object.assign({}, file, { blobURL: action.blobURL });
       });
     case ActionTypes.NEW_PROJECT:
-      return [...action.files];
+      return setFilePaths(action.files);
     case ActionTypes.SET_PROJECT:
-      return [...action.files];
+      return setFilePaths(action.files);
     case ActionTypes.RESET_PROJECT:
       return initialState();
     case ActionTypes.CREATE_FILE: {
+      const parentFile = state.find((file) => file.id === action.parentId);
+      const filePath =
+        parentFile.name === 'root'
+          ? ''
+          : `${parentFile.filePath}${parentFile.filePath.length > 0 ? '/' : ''}
+          ${parentFile.name}`;
       const newState = [
         ...updateParent(state, action),
         {
@@ -177,7 +206,8 @@ const files = (state, action) => {
           content: action.content,
           url: action.url,
           children: action.children,
-          fileType: action.fileType || 'file'
+          fileType: action.fileType || 'file',
+          filePath
         }
       ];
       return newState.map((file) => {
@@ -189,6 +219,12 @@ const files = (state, action) => {
     }
     case ActionTypes.UPDATE_FILE_NAME: {
       const newState = renameFile(state, action);
+      const updatedFile = newState.find((file) => file.id === action.id);
+      const childPath = `${updatedFile.filePath}
+      ${updatedFile.filePath.length > 0 ? '/' : ''}${updatedFile.name}`;
+      updatedFile.children.forEach((childId) => {
+        setFilePath(newState, action.id, childPath);
+      });
       return newState.map((file) => {
         if (file.children.includes(action.id)) {
           file.children = sortedChildrenId(newState, file.children);

client/modules/IDE/reducers/ide.js

@@ -22,7 +22,7 @@ const initialState = {
   justOpenedProject: false,
   previousPath: '/',
   errorType: undefined,
-  runtimeErrorWarningVisible: true,
+  runtimeErrorWarningVisible: false,
   parentId: undefined
 };
 

client/modules/Preview/EmbedFrame.jsx

@@ -133,7 +133,9 @@ function resolveScripts(sketchDoc, files) {
           const blobUrl = createBlobUrl(resolvedFile);
           script.setAttribute('src', blobUrl);
           const blobPath = blobUrl.split('/').pop();
-          objectUrls[blobUrl] = resolvedFile.name;
+          objectUrls[blobUrl] = `${resolvedFile.filePath}${
+            resolvedFile.filePath.length > 0 ? '/' : ''
+          }${resolvedFile.name}`;
           objectPaths[blobPath] = resolvedFile.name;
           // script.setAttribute('data-tag', `${startTag}${resolvedFile.name}`);
           // script.removeAttribute('src');