Open editor on clicking compilation error

Author: astronomersiva

lib/templates/error.html

@@ -1087,7 +1087,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('/ember_open_editor_for_template_compilation_error')">
+            {{location.file}}{{#if location.line}}:{{location.line}}{{/if}}
+          </h2>
         {{/if}}
 
         {{#if codeFrame}}
@@ -1125,5 +1127,12 @@ <h2>Environment</h2>
         <span>{{versionString}}</span>
       </article>
     </main>
+    <script>
+      function openEditorForTemplateError(fileName) {
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', fileName, true);
+        xhr.send();
+      }
+    </script>
   </body>
 </html>

lib/utils/filename-normaliser.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const path = require('path');
+const { existsSync } = require('fs');
+
+const pkg = require(`${process.cwd()}/package.json`);
+
+const normaliseFileName = (fileName) => {
+  // 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);
+};
+
+const 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,6 +36,28 @@ module.exports = function watcherMiddleware(watcher, options) {
 
       next();
     }, (buildError) => {
+      if (request.url === '/ember_open_editor_for_template_compilation_error') {
+        let errorLocation = buildError.broccoliPayload.error.location || {};
+        let {
+          file: fileName,
+          line,
+          column
+        } = errorLocation;
+
+        if (fileName) {
+          let normalisedFileName = getNormalisedFileName(fileName, line, column);
+
+          return launchEditor(normalisedFileName, () => {
+            if (!process.env.EDITOR && !process.env.VISUAL) {
+              console.log(
+                'To set up the editor integration, set the env variables EDITOR or VISUAL ' +
+                'to an editor of your choice and restart the server.'
+              );
+            }
+          });
+        }
+      }
+
       errorHandler(response, {
         'buildError': buildError,
         'liveReloadPath': options.liveReloadPath

package.json

@@ -20,6 +20,7 @@
   "homepage": "https://github.com/ember-cli/broccoli-middleware",
   "dependencies": {
     "handlebars": "^4.0.4",
+    "launch-editor": "^2.2.1",
     "mime-types": "^2.1.18"
   },
   "devDependencies": {

test/filename-normaliser-test.js

@@ -0,0 +1,87 @@
+'use strict';
+
+const expect = require('chai').expect;
+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 = '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 = 'broccoli-middleware/components/awesome-component/template.hbs';
+      const expectedFileName = 'app/components/awesome-component/template.hbs';
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    it('templates are normalised correctly', function() {
+      const fileName = 'broccoli-middleware/awesome-route/template.hbs';
+      const expectedFileName = '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 = 'awesome-engine/components/awesome-component/template.hbs';
+        const expectedFileName = '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 = 'awesome-engine/awesome-route/template.hbs';
+        const expectedFileName = '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 = 'broccoli-middleware/templates/components/awesome-component.hbs';
+      const expectedFileName = 'app/templates/components/awesome-component.hbs';
+      const normalisedFileName = normaliseFileName(fileName);
+
+      expect(normalisedFileName).to.equal(expectedFileName);
+    });
+
+    it('templates are normalised correctly', function() {
+      const fileName = 'broccoli-middleware/templates/application.hbs';
+      const expectedFileName = '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 = 'awesome-engine/templates/components/awesome-component.hbs';
+        const expectedFileName = '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 = 'awesome-engine/templates/awesome-route.hbs';
+        const expectedFileName = 'lib/awesome-engine/addon/templates/awesome-route.hbs';
+        const normalisedFileName = normaliseFileName(fileName);
+
+        expect(normalisedFileName).to.equal(expectedFileName);
+      });
+    });
+  });
+});