Vue2.5 (codesandbox#246)

* Vue 2.5

* Fix warnings and error api

Author: CompuIves

package.json

@@ -158,9 +158,9 @@
     "styled-components": "^2.1.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
-    "vue": "^2.4.2",
-    "vue-template-compiler": "^2.4.2",
-    "vue-template-es2015-compiler": "^1.5.3"
+    "vue": "^2.5.2",
+    "vue-template-compiler": "^2.5.2",
+    "vue-template-es2015-compiler": "^1.6.0"
   },
   "scripts": {
     "start": "cross-env LOCAL_SERVER=1 node scripts/start.js",

src/app/store/preview-actions-api/actions.js

@@ -1,5 +1,6 @@
 // This executes all actions that are requested by the preview
 import resolveModule from 'common/sandbox/resolve-module';
+import _debug from 'debug';
 
 import notifActions from '../notifications/actions';
 import moduleActions from '../entities/sandboxes/modules/actions';
@@ -8,8 +9,25 @@ import { modulesFromSandboxSelector } from '../entities/sandboxes/modules/select
 import { directoriesFromSandboxSelector } from '../entities/sandboxes/directories/selectors';
 import { singleSandboxSelector } from '../entities/sandboxes/selectors';
 
+const debug = _debug('cs:preview-api');
+
+function getModule(sandboxId: string, path: string, getState: Function) {
+  const sandbox = singleSandboxSelector(getState(), { id: sandboxId });
+  const modules = modulesFromSandboxSelector(getState(), { sandbox });
+  const directories = directoriesFromSandboxSelector(getState(), {
+    sandbox,
+  });
+
+  try {
+    return resolveModule(path.replace(/^\//, ''), modules, directories);
+  } catch (e) {
+    return null;
+  }
+}
+
 export default {
   executeAction: action => async (dispatch: Function, getState: Function) => {
+    debug('Received new preview action', action);
     switch (action.action) {
       case 'notification': {
         const { title, timeAlive, notificationType } = action;
@@ -18,21 +36,27 @@ export default {
         );
       }
       case 'show-error': {
-        return dispatch(moduleActions.setError(action.moduleId, action));
+        const { sandboxId, path } = action;
+
+        const module = getModule(sandboxId, path, getState);
+        if (module) {
+          return dispatch(moduleActions.setError(module.id, action));
+        }
+        return null;
       }
       case 'show-correction': {
-        return dispatch(moduleActions.addCorrection(action.moduleId, action));
+        const { sandboxId, path } = action;
+
+        const module = getModule(sandboxId, path, getState);
+        if (module) {
+          return dispatch(moduleActions.addCorrection(module.id, action));
+        }
+        return null;
       }
       case 'source.module.rename': {
         const { sandboxId, path, title } = action;
 
-        const sandbox = singleSandboxSelector(getState(), { id: sandboxId });
-        const modules = modulesFromSandboxSelector(getState(), { sandbox });
-        const directories = directoriesFromSandboxSelector(getState(), {
-          sandbox,
-        });
-
-        const module = resolveModule(path, modules, directories);
+        const module = getModule(sandboxId, path, getState);
         if (module) {
           return dispatch(
             sandboxActions.renameModule(sandboxId, module.id, title)
@@ -46,9 +70,16 @@ export default {
         return dispatch(sandboxActions.forceRender(sandboxId));
       }
       case 'editor.open-module': {
-        const { moduleId, sandboxId /* , lineNumber */ } = action;
-        // TODO functionality to open specific lineNumber
-        return dispatch(sandboxActions.setCurrentModule(sandboxId, moduleId));
+        const { sandboxId, path } = action;
+
+        const module = getModule(sandboxId, path, getState);
+        if (module) {
+          // TODO functionality to open specific lineNumber
+          return dispatch(
+            sandboxActions.setCurrentModule(sandboxId, module.id)
+          );
+        }
+        return null;
       }
       default:
         return null;

src/node_modules/codesandbox-api/package.json

@@ -36,7 +36,7 @@ function buildErrorMessage(e) {
   }
 
   return {
-    moduleId: e.tModule ? e.tModule.module.id : e.moduleId,
+    path: e.tModule ? e.tModule.module.path : e.path,
     title,
     message,
     line: parseInt(line, 10),
@@ -79,7 +79,7 @@ function buildDynamicError(ref: ErrorRecord) {
       return {
         type: 'action',
         action: 'show-error',
-        moduleId: module.id,
+        path: module.path,
         title: ref.error.name,
         message: ref.error.message,
         line: relevantFrame._originalLineNumber,
@@ -114,7 +114,7 @@ export default function showError(ref: ErrorRecord) {
       actions.error.show(errorToSend.title, errorToSend.message, {
         line: errorToSend.line,
         column: errorToSend.column,
-        moduleId: errorToSend.moduleId,
+        path: errorToSend.path,
         payload: errorToSend.payload,
       })
     );

src/node_modules/codesandbox-api/src/actions/correction.ts

@@ -7,7 +7,7 @@ export default class ModuleError extends Error {
     super();
 
     this.name = 'ModuleError';
-    this.module = module;
+    this.path = err.fileName || module.module.path;
     this.message =
       err && typeof err === 'object' && err.message ? err.message : err;
     this.error = err;

src/node_modules/codesandbox-api/src/actions/editor.ts

@@ -1,11 +1,12 @@
 import TranspiledModule from '../transpiled-module';
+import { WarningStructure } from '../transpilers/utils/worker-warning-handler';
 
 export default class ModuleWarning extends Error {
-  constructor(module, warning) {
+  constructor(module: TranspiledModule, warning: WarningStructure) {
     super();
 
     this.name = 'ModuleWarning';
-    this.module = module;
+    this.path = warning.fileName || module.module.path;
     this.message = warning.message;
     this.warning = warning.message;
     this.lineNumber = warning.lineNumber;
@@ -16,7 +17,7 @@ export default class ModuleWarning extends Error {
     Error.captureStackTrace(this, this.constructor);
   }
 
-  module: TranspiledModule;
+  path: string;
   message: string;
   warning: string;
   message: string;

src/node_modules/codesandbox-api/src/actions/error.ts

@@ -381,7 +381,7 @@ export default class TranspiledModule {
                 actions.correction.show(warning.message, {
                   line: warning.lineNumber,
                   column: warning.columnNumber,
-                  moduleId: warning.module.module.id,
+                  path: warning.path,
                   source: warning.source,
                   severity: 'warning',
                 })