Open editor on clicking compilation error

Author: astronomersiva

lib/templates/error.html

@@ -1085,14 +1085,16 @@
     </header>
     <main class="container">
       <article class="content">
+        <div onclick="fetch('/ember_open_editor_for_template_compilation_error')">
         <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>
-        {{/if}}
+          {{#if location.file}}
+            <h2 class="error-message">{{location.file}}{{#if location.line}}:{{location.line}}{{/if}}</h2>
+          {{/if}}
 
-        {{#if codeFrame}}
-          <pre><code class="javascript">{{codeFrame}}</code></pre>
-        {{/if}}
+          {{#if codeFrame}}
+            <pre><code class="javascript">{{codeFrame}}</code></pre>
+          {{/if}}
+        </div>
 
         <div class="collapsible">
           <input id="toggle" type="checkbox">

lib/utils/filename-normaliser.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const path = require('path');
+
+const pkg = require(`${process.cwd()}/package.json`);
+
+module.exports = function normaliseFileName(fileName) {
+  let projectName = pkg.name;
+  let normalisedFileName = fileName.split(path.sep);
+
+  // Classic Structure
+  // actual location        : projectName/app/templates/templateName.hbs
+  // location as per stack  : project-name/templates/templateName.hbs
+  // should be normalised to: app/templates/templateName.hbs
+
+  // Pods
+  // actual location        : projectName/app/routeName/templateName.hbs
+  // location as per stack  : project-name/routeName/templateName.hbs
+  // should be normalised to: app/routeName/templateName.hbs
+
+  // in-repo engine
+  // actual location        : projectName/lib/engine-name/addon/templates/templateName.hbs
+  // location as per stack  : engine-name/templates/cars.hbs
+  // should be normalised to: lib/engine-name/addon/templates/templateName.hbs
+
+  // handle templates inside application with either pod or classic structure
+  if (normalisedFileName[0] === projectName) {
+    normalisedFileName[0] = 'app';
+  } else {
+    // handle templates inside in-repo engines
+    normalisedFileName = ['lib', normalisedFileName.shift(), 'addon', ...normalisedFileName];
+  }
+
+  return normalisedFileName.join(path.sep);
+}

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 normaliseFileName = require('./utils/filename-normaliser');
 
 module.exports = function watcherMiddleware(watcher, options) {
   options = options || {};
@@ -34,6 +36,21 @@ 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 fileName = errorLocation.file;
+        let normalisedFileName = normaliseFileName(fileName);
+
+        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": {