Use magic-string to generate correct sourcemaps for colocated templates

Author: wagenet

lib/colocated-broccoli-plugin.js

@@ -6,6 +6,7 @@ const walkSync = require('walk-sync');
 const Plugin = require('broccoli-plugin');
 const logger = require('heimdalljs-logger')('ember-cli-htmlbars:colocated-broccoli-plugin');
 const FSTree = require('fs-tree-diff');
+const MagicString = require('magic-string');
 
 module.exports = class ColocatedTemplateProcessor extends Plugin {
   constructor(tree) {
@@ -165,10 +166,28 @@ module.exports = class ColocatedTemplateProcessor extends Plugin {
         jsContents = `import templateOnly from '@ember/component/template-only';\n\nexport default templateOnly();\n`;
       }
 
-      jsContents = prefix + jsContents;
-
       let jsOutputPath = path.join(this.outputPath, backingClassPath);
 
+      if (prefix.length > 0) {
+        let jsContentsMagic = new MagicString(jsContents);
+
+        jsContentsMagic.prepend(prefix);
+
+        jsContents = jsContentsMagic.toString();
+
+        // It's unclear how to format the comment correctly for coffeescript.
+        if (!backingClassPath.endsWith('.coffee')) {
+          let jsContentsMap = jsContentsMagic.generateMap({
+            file: jsOutputPath,
+            source: backingClassPath,
+            includeContent: true,
+            hires: true,
+          });
+
+          jsContents += `\n//# sourceMappingURL=${jsContentsMap.toUrl()}`;
+        }
+      }
+
       switch (method) {
         case 'unlink': {
           if (filePathParts.ext === '.hbs' && hasBackingClass) {