Initial implementation of co-located templates RFC.

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 2018,
     sourceType: 'module'
   },
   plugins: [
@@ -22,6 +22,7 @@ module.exports = {
     {
       files: [
         '.template-lintrc.js',
+        'colocated-broccoli-plugin.js',
         'ember-cli-build.js',
         'ember-addon-main.js',
         'index.js',
@@ -40,7 +41,7 @@ module.exports = {
       ],
       parserOptions: {
         sourceType: 'script',
-        ecmaVersion: 2015
+        ecmaVersion: 2018
       },
       env: {
         browser: false,
@@ -59,7 +60,7 @@ module.exports = {
       ],
       parserOptions: {
         sourceType: 'script',
-        ecmaVersion: 2015
+        ecmaVersion: 2018
       },
       env: {
         browser: false,

colocated-broccoli-plugin.js

@@ -0,0 +1,104 @@
+'use strict';
+
+const fs = require('fs');
+const mkdirp = require('mkdirp');
+const copyFileSync = require('fs-copy-file-sync');
+const path = require('path');
+const walkSync = require('walk-sync');
+const Plugin = require('broccoli-plugin');
+
+module.exports = class ColocatedTemplateProcessor extends Plugin {
+  constructor(tree, options) {
+    super([tree], options);
+
+    this.options = options;
+  }
+
+  build() {
+    // TODO: do we need to pass through all files, or only template files?
+    let files = walkSync(this.inputPaths[0], { directories: false });
+
+    let filesToCopy = [];
+    files.forEach(filePath => {
+      let filePathParts = path.parse(filePath);
+      let inputPath = path.join(this.inputPaths[0], filePath);
+
+      // TODO: why are these different?
+      // Apps: my-app/components/foo.hbs, my-app/templates/components/foo.hbs
+      // Addons: components/foo.js, templates/components/foo.hbs
+
+      // TODO: make this more robust
+      let isInsideComponentsFolder =
+        (filePath.includes('/components/') || filePath.startsWith('components/')) &&
+        !filePath.includes('/templates/components/') &&
+        !filePath.startsWith('templates/components');
+
+      // copy forward non-hbs files
+      // TODO: don't copy .js files that will ultimately be overridden
+      if (!isInsideComponentsFolder || filePathParts.ext !== '.hbs') {
+        filesToCopy.push(filePath);
+        return;
+      }
+
+      // TODO: deal with alternate extensions (e.g. ts)
+      let possibleJSPath = path.join(filePathParts.dir, filePathParts.name + '.js');
+      let hasJSFile = fs.existsSync(path.join(this.inputPaths[0], possibleJSPath));
+
+      if (filePathParts.name === 'template') {
+        // TODO: maybe warn?
+        return;
+      }
+
+      let templateContents = fs.readFileSync(inputPath, { encoding: 'utf8' });
+      let jsContents = null;
+
+      // TODO: deal with hygiene
+      if (hasJSFile) {
+        // add the template, call setComponentTemplate
+
+        jsContents = fs.readFileSync(path.join(this.inputPaths[0], possibleJSPath), { encoding: 'utf8' });
+
+        if (jsContents.includes('export default')) {
+          jsContents = jsContents.replace('export default', 'const CLASS =');
+        } else {
+          let message = `${filePath}\` does not contain a \`default export\`. Did you forget to export the component class?`;
+          jsContents = `${jsContents}\nthrow new Error(${JSON.stringify(message)})`;
+        }
+
+        jsContents = `${jsContents}
+const setComponentTemplate = Ember._setComponentTemplate;
+const TEMPLATE = ${this.options.precompile(templateContents)};
+export default setComponentTemplate(TEMPLATE, CLASS);`;
+      } else {
+        // create JS file, use null component pattern
+        jsContents = `const templateOnlyComponent = Ember._templateOnlyComponent;
+const setComponentTemplate = Ember._setComponentTemplate;
+const TEMPLATE = ${this.options.precompile(templateContents)};
+const CLASS = templateOnlyComponent();
+export default setComponentTemplate(TEMPLATE, CLASS);`;
+      }
+
+
+      let outputPath = path.join(this.outputPath, possibleJSPath);
+
+      // TODO: don't speculatively mkdirSync (likely do in a try/catch with ENOENT)
+      mkdirp.sync(path.dirname(outputPath));
+      fs.writeFileSync(outputPath, jsContents, { encoding: 'utf8' });
+    });
+
+    filesToCopy.forEach(filePath => {
+      let inputPath = path.join(this.inputPaths[0], filePath);
+      let outputPath = path.join(this.outputPath, filePath);
+
+      // avoid copying file over top of a previously written one
+      if (fs.existsSync(outputPath)) {
+        return;
+      }
+
+      // TODO: don't speculatively mkdirSync (likely do in a try/catch with ENOENT)
+      mkdirp.sync(path.dirname(outputPath));
+      copyFileSync(inputPath, outputPath);
+    })
+  }
+}
+

ember-addon-main.js

@@ -4,12 +4,24 @@ const path = require('path');
 const utils = require('./utils');
 const addDependencyTracker = require("./addDependencyTracker");
 const hashForDep = require('hash-for-dep');
+const ColocatedTemplateProcessor = require('./colocated-broccoli-plugin');
 
 module.exports = {
   name: require('./package').name,
 
   parentRegistry: null,
 
+  _getDebugTree() {
+    if (!this._cachedDebugTree) {
+      // when this.parent === this.project, `this.parent.name` is a function 😭
+      let parentName = typeof this.parent.name === 'function' ? this.parent.name() : this.parent.name;
+
+      this._cachedDebugTree = require('broccoli-debug').buildDebugCallback(`ember-cli-htmlbars:${parentName}`);
+    }
+
+    return this._cachedDebugTree;
+  },
+
   purgeModule(templateCompilerPath) {
     // ensure we get a fresh templateCompilerModuleInstance per ember-addon
     // instance NOTE: this is a quick hack, and will only work as long as
@@ -37,21 +49,29 @@ module.exports = {
     // ensure that broccoli-ember-hbs-template-compiler is not processing hbs files
     registry.remove('template', 'broccoli-ember-hbs-template-compiler');
 
+    let precompile = string => {
+      let htmlbarsOptions = this.htmlbarsOptions();
+      let templateCompiler = htmlbarsOptions.templateCompiler;
+      return utils.template(templateCompiler, string);
+    }
+
+    let debugTree = this._getDebugTree();
+
     registry.add('template', {
       name: 'ember-cli-htmlbars',
       ext: 'hbs',
       _addon: this,
       toTree(tree) {
+        let inputTree = debugTree(tree, '01-input');
+
         let htmlbarsOptions = this._addon.htmlbarsOptions();
+        let unifiedColocatedTemplates = debugTree(new ColocatedTemplateProcessor(inputTree, { precompile }), '02-colocated-output');
+
         let TemplateCompiler = require('./index');
-        return new TemplateCompiler(tree, htmlbarsOptions);
+        return debugTree(new TemplateCompiler(unifiedColocatedTemplates, htmlbarsOptions), '03-output');
       },
 
-      precompile(string) {
-        let htmlbarsOptions = this._addon.htmlbarsOptions();
-        let templateCompiler = htmlbarsOptions.templateCompiler;
-        return utils.template(templateCompiler, string);
-      }
+      precompile,
     });
 
     if (type === 'parent') {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-cli-htmlbars",
-  "version": "3.1.0",
+  "version": "3.2.0-alpha.0",
   "description": "A library for adding htmlbars to ember CLI",
   "keywords": [
     "ember-addon",
@@ -17,9 +17,10 @@
   "license": "MIT",
   "author": "Jonathan Jackson & Chase McCarthy",
   "files": [
-    "index.js",
     "addDependencyTracker.js",
+    "colocated-broccoli-plugin.js",
     "ember-addon-main.js",
+    "index.js",
     "utils.js"
   ],
   "main": "index.js",
@@ -34,17 +35,22 @@
     "test:node:debug": "mocha debug node-tests/*.js"
   },
   "dependencies": {
+    "broccoli-debug": "^0.6.5",
     "broccoli-persistent-filter": "^2.3.1",
+    "broccoli-plugin": "^2.0.0",
+    "fs-copy-file-sync": "^1.1.1",
     "hash-for-dep": "^1.5.1",
     "json-stable-stringify": "^1.0.1",
-    "strip-bom": "^3.0.0"
+    "mkdirp": "^0.5.1",
+    "strip-bom": "^3.0.0",
+    "walk-sync": "^1.1.3"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
     "broccoli-test-helper": "^2.0.0",
     "chai": "^4.2.0",
     "co": "^4.6.0",
-    "ember-cli": "~3.9.0",
+    "ember-cli": "github:ember-cli/ember-cli",
     "ember-cli-app-version": "^3.2.0",
     "ember-cli-babel": "^7.11.0",
     "ember-cli-dependency-checker": "^3.2.0",

tests/dummy/app/components/bar.hbs

@@ -0,0 +1 @@
+Hello from bar!

tests/dummy/app/components/bar.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  attributeBindings: ['lolol'],
+});

tests/dummy/app/components/foo.hbs

@@ -0,0 +1 @@
+Stuff!!