Open editor on clicking compilation error

Author: astronomersiva

lib/templates/error.html

@@ -1099,7 +1099,9 @@
       <article class="content">
         <h1 class="error-header">Dang! Looks like a {{errorType}}.</h1>
         {{#if location.file}}
-          <h2 class="error-message">{{location.file}}{{#if location.line}}:{{location.line}}{{/if}}</h2>
+          <h2 class="error-message" onclick="openEditorForTemplateError()">
+            {{location.file}}{{#if location.line}}:{{location.line}}{{/if}}
+          </h2>
         {{/if}}
 
           {{#if codeFrame}}
@@ -1140,5 +1142,12 @@ <h2>Environment</h2>
         <span>{{versionString}}</span>
       </article>
     </main>
+    <script>
+      function openEditorForTemplateError() {
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', '/ember_open_editor_for_template_compilation_error', true);
+        xhr.send();
+      }
+    </script>
   </body>
 </html>

lib/utils/filename-normaliser.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const path = require('path');
+const findup = require('find-up');
+const { existsSync } = require('fs');
+
+const pkg = require(findup.sync('package.json'));
+
+function normaliseFileName(fileName = '') {
+  // check for invalid file paths
+  // for example,
+  // path.basename('myfile') will be myfile, doesn't need normalisation as this is probably
+  // not a template file
+  // path.basename('templates/myfile') will not be equal to fileName
+  if (path.basename(fileName) === fileName) {
+    return null;
+  }
+
+  // handles module unification layout
+  // location as per stack  : src/ui/components/my-component/template.hbs
+  // should be normalised to: src/ui/components/my-component/template.hbs
+  if (fileName.startsWith('src')) {
+    return fileName;
+  }
+
+  // handle templates inside application with either pod or classic structure
+  // Classic Structure
+  // location as per stack  : project-name/templates/templateName.hbs
+  // should be normalised to: app/templates/templateName.hbs
+  // Pods
+  // location as per stack  : project-name/routeName/templateName.hbs
+  // should be normalised to: app/routeName/templateName.hbs
+  if (fileName.startsWith(pkg.name)) {
+    let fileNameElements = fileName.split(path.sep);
+    fileNameElements.shift();
+
+    return path.join('app', ...fileNameElements);
+  }
+
+  // handle templates inside in-repo engines
+  // location as per stack  : engine-name/templates/cars.hbs
+  // should be normalised to: lib/engine-name/addon/templates/templateName.hbs
+  let fileNameElements = fileName.split(path.sep);
+  fileNameElements = ['lib', fileNameElements.shift(), 'addon', ...fileNameElements];
+
+  return path.join(...fileNameElements);
+}
+
+function getNormalisedFileName(fileName, line = 1, column = 1) {
+  let normalisedFileName = normaliseFileName(fileName);
+  if (existsSync(normalisedFileName)) {
+    return `${normalisedFileName}:${line}:${column}`;
+  }
+
+  return null;
+}
+
+module.exports = { normaliseFileName, getNormalisedFileName };

lib/watcher-middleware.js

@@ -2,8 +2,10 @@
 
 const url = require('url');
 const path = require('path');
+const launchEditor = require('launch-editor');
 
 const errorHandler = require('./utils/error-handler');
+const { getNormalisedFileName } = require('./utils/filename-normaliser');
 
 module.exports = function watcherMiddleware(watcher, options) {
   options = options || {};
@@ -34,10 +36,49 @@ module.exports = function watcherMiddleware(watcher, options) {
 
       next();
     }, (buildError) => {
-      errorHandler(response, {
-        'buildError': buildError,
-        'liveReloadPath': options.liveReloadPath
-      });
+      if (request.url === '/ember_open_editor_for_template_compilation_error') {
+        let errorLocation = buildError.broccoliPayload.error.location || {};
+        let { originalError } = buildError.broccoliPayload;
+        if (originalError) {
+          let originalLocation = originalError.loc || originalError.location || {};
+          errorLocation.line = originalLocation.line || errorLocation.line || 1;
+          errorLocation.column = originalLocation.column || errorLocation.column || 1;
+        }
+
+        let {
+          file: fileName,
+          line,
+          column
+        } = errorLocation;
+
+        if (fileName) {
+          let normalisedFileName = getNormalisedFileName(fileName, line, column);
+
+          // 1) If the EMBER_CLI_EDITOR is set, it's value will be used as the editor.
+          // 2) If EMBER_CLI_EDITOR is not set, launchEditor will try to guess which editor is open.
+          //    a) If it succeeds, that guessed editor will be opened.
+          //    b) Else, it will fall back to VISUAL and EDITOR.
+          // 3) If none of these work, it will display a message asking the user to set EMBER_CLI_EDITOR
+          let emberCliEditor = process.env.EMBER_CLI_EDITOR;
+
+          launchEditor(normalisedFileName, emberCliEditor, () => {
+            if (!emberCliEditor) {
+              console.log(
+                'To set up the editor integration, set the env variable EMBER_CLI_EDITOR ' +
+                'to an editor of your choice and restart the server.'
+              );
+            }
+          });
+        }
+
+        response.writeHead(200);
+        response.end();
+      } else {
+        errorHandler(response, {
+          'buildError': buildError,
+          'liveReloadPath': options.liveReloadPath
+        });
+      }
     })
     .catch((err) => {
       console.log(err);

package.json

@@ -20,8 +20,10 @@
   "homepage": "https://github.com/ember-cli/broccoli-middleware",
   "dependencies": {
     "ansi-html": "^0.0.7",
+    "find-up": "^3.0.0",
     "handlebars": "^4.0.4",
     "has-ansi": "^3.0.0",
+    "launch-editor": "^2.2.1",
     "mime-types": "^2.1.18"
   },
   "devDependencies": {

test/filename-normaliser-test.js

@@ -0,0 +1,88 @@
+'use strict';
+
+const expect = require('chai').expect;
+const path = require('path');
+const normaliseFileName = require('./../lib/utils/filename-normaliser').normaliseFileName;
+
+describe('file name normaliser', function() {
+  describe('handles module unification layout', function() {
+    it('components are normalised correctly', function() {
+      const fileName = path.normalize('src/ui/components/my-component/template.hbs');
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(fileName);
+    });
+  });
+
+  describe('handles pod layout', function() {
+    it('components are normalised correctly', function() {
+      const fileName = path.normalize('broccoli-middleware/components/awesome-component/template.hbs');
+      const expectedFileName = path.normalize('app/components/awesome-component/template.hbs');
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    it('templates are normalised correctly', function() {
+      const fileName = path.normalize('broccoli-middleware/awesome-route/template.hbs');
+      const expectedFileName = path.normalize('app/awesome-route/template.hbs');
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    describe('in-repo engines are normalised correctly', function() {
+      it('components are normalised correctly', function() {
+        const fileName = path.normalize('awesome-engine/components/awesome-component/template.hbs');
+        const expectedFileName = path.normalize('lib/awesome-engine/addon/components/awesome-component/template.hbs');
+        const normalisedFileName = normaliseFileName(fileName);
+
+        expect(normalisedFileName).to.equal(expectedFileName);
+      });
+
+      it('templates are normalised correctly', function() {
+        const fileName = path.normalize('awesome-engine/awesome-route/template.hbs');
+        const expectedFileName = path.normalize('lib/awesome-engine/addon/awesome-route/template.hbs');
+        const normalisedFileName = normaliseFileName(fileName);
+
+        expect(normalisedFileName).to.equal(expectedFileName);
+      });
+    });
+  });
+
+  describe('handles classic layout', function() {
+    it('components are normalised correctly', function() {
+      const fileName = path.normalize('broccoli-middleware/templates/components/awesome-component.hbs');
+      const expectedFileName = path.normalize('app/templates/components/awesome-component.hbs');
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    it('templates are normalised correctly', function() {
+      const fileName = path.normalize('broccoli-middleware/templates/application.hbs');
+      const expectedFileName = path.normalize('app/templates/application.hbs');
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    describe('in-repo engines are normalised correctly', function() {
+      it('components are normalised correctly', function() {
+        const fileName = path.normalize('awesome-engine/templates/components/awesome-component.hbs');
+        const expectedFileName = path.normalize('lib/awesome-engine/addon/templates/components/awesome-component.hbs');
+        const normalisedFileName = normaliseFileName(fileName);
+
+        expect(normalisedFileName).to.equal(expectedFileName);
+      });
+
+      it('templates are normalised correctly', function() {
+        const fileName = path.normalize('awesome-engine/templates/awesome-route.hbs');
+        const expectedFileName = path.normalize('lib/awesome-engine/addon/templates/awesome-route.hbs');
+        const normalisedFileName = normaliseFileName(fileName);
+
+        expect(normalisedFileName).to.equal(expectedFileName);
+      });
+    });
+  });
+});