Implement component co-location blueprints (#18203)

Implement component co-location blueprints

Co-authored-by: Robert Jackson <rjackson@linkedin.com>

blueprints/component/files/__root__/__path__/__name__.js

@@ -1,4 +1,3 @@
-import Component from '@ember/component';
+<%= importComponent %>
 <%= importTemplate %>
-export default Component.extend({<%= contents %>
-});
+export default <%= defaultExport %>

blueprints/component/index.js

@@ -1,15 +1,25 @@
 'use strict';
 
 const path = require('path');
+const SilentError = require('silent-error');
 const stringUtil = require('ember-cli-string-utils');
 const pathUtil = require('ember-cli-path-utils');
 const getPathOption = require('ember-cli-get-component-path-option');
 const normalizeEntityName = require('ember-cli-normalize-entity-name');
-const useEditionDetector = require('../edition-detector');
-const isModuleUnificationProject = require('../module-unification').isModuleUnificationProject;
-const EOL = require('os').EOL;
+const { isModuleUnificationProject } = require('../module-unification');
+const { EOL } = require('os');
+
+const OCTANE = process.env.EMBER_VERSION === 'octane';
+
+// TODO: this should be reading from the @ember/canary-features module
+// need to refactor broccoli/features.js to be able to work more similarly
+// to https://github.com/emberjs/data/pull/6231
+const EMBER_GLIMMER_SET_COMPONENT_TEMPLATE = OCTANE;
+
+// intentionally avoiding use-edition-detector
+module.exports = {
+  EMBER_GLIMMER_SET_COMPONENT_TEMPLATE,
 
-module.exports = useEditionDetector({
   description: 'Generates a component.',
 
   availableOptions: [
@@ -19,9 +29,66 @@ module.exports = useEditionDetector({
       default: 'components',
       aliases: [{ 'no-path': '' }],
     },
+    {
+      name: 'component-class',
+      type: ['@ember/component', '@glimmer/component', '@ember/component/template-only', ''],
+      default: OCTANE ? '--no-component-class' : '@ember/component',
+      aliases: [
+        { cc: '@ember/component' },
+        { gc: '@glimmer/component' },
+        { tc: '@ember/component/template-only' },
+        { nc: '' },
+        { 'no-component-class': '' },
+      ],
+    },
+    {
+      name: 'component-structure',
+      type: ['flat', 'nested', 'classic'],
+      default: OCTANE ? 'flat' : 'classic',
+      aliases: [{ fs: 'flat' }, { ns: 'nested' }, { cs: 'classic' }],
+    },
   ],
 
-  fileMapTokens: function() {
+  init() {
+    this._super && this._super.init.apply(this, arguments);
+    let isOctane = process.env.EMBER_VERSION === 'OCTANE';
+
+    this.availableOptions.forEach(option => {
+      if (option.name === 'component-class') {
+        if (isOctane) {
+          option.default = '--no-component-class';
+        } else {
+          option.default = '@ember/component';
+        }
+      } else if (option.name === 'component-structure') {
+        option.default = isOctane ? 'flat' : 'classic';
+      }
+    });
+
+    this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE = EMBER_GLIMMER_SET_COMPONENT_TEMPLATE || isOctane;
+  },
+
+  install(options) {
+    if (!this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) {
+      if (options.componentClass !== '@ember/component') {
+        throw new SilentError(
+          'Usage of --component-class argument to `ember generate component` is only available on canary'
+        );
+      }
+
+      if (options.componentStructure !== 'classic') {
+        throw new SilentError(
+          'Usage of --component-structure argument to `ember generate component` is only available on canary'
+        );
+      }
+    }
+
+    return this._super.install.apply(this, arguments);
+  },
+
+  fileMapTokens(options) {
+    let commandOptions = this.options;
+
     if (isModuleUnificationProject(this.project)) {
       return {
         __name__: function() {
@@ -46,40 +113,96 @@ module.exports = useEditionDetector({
           return 'template';
         },
       };
-    } else {
+    } else if (commandOptions.pod) {
       return {
-        __path__: function(options) {
-          if (options.pod) {
-            return path.join(options.podPath, options.locals.path, options.dasherizedModuleName);
-          } else {
-            return 'components';
-          }
+        __path__() {
+          return path.join(options.podPath, options.locals.path, options.dasherizedModuleName);
         },
-        __templatepath__: function(options) {
-          if (options.pod) {
-            return path.join(options.podPath, options.locals.path, options.dasherizedModuleName);
-          }
+        __templatepath__() {
+          return path.join(options.podPath, options.locals.path, options.dasherizedModuleName);
+        },
+        __templatename__() {
+          return 'template';
+        },
+      };
+    } else if (
+      !this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE ||
+      commandOptions.componentStructure === 'classic'
+    ) {
+      return {
+        __path__() {
+          return 'components';
+        },
+        __templatepath__() {
           return 'templates/components';
         },
-        __templatename__: function(options) {
-          if (options.pod) {
-            return 'template';
-          }
+        __templatename__() {
           return options.dasherizedModuleName;
         },
       };
+    } else if (
+      this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE &&
+      commandOptions.componentStructure === 'flat'
+    ) {
+      return {
+        __path__() {
+          return 'components';
+        },
+        __templatepath__() {
+          return 'components';
+        },
+        __templatename__() {
+          return options.dasherizedModuleName;
+        },
+      };
+    } else if (
+      this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE &&
+      commandOptions.componentStructure === 'nested'
+    ) {
+      return {
+        __path__() {
+          return `components/${options.dasherizedModuleName}`;
+        },
+        __name__() {
+          return 'index';
+        },
+        __templatepath__() {
+          return `components/${options.dasherizedModuleName}`;
+        },
+        __templatename__() {
+          return `index`;
+        },
+      };
     }
   },
 
-  normalizeEntityName: function(entityName) {
+  files() {
+    let files = this._super.files.apply(this, arguments);
+
+    if (
+      this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE &&
+      (this.options.componentClass === '' || this.options.componentClass === '--no-component-class')
+    ) {
+      files = files.filter(file => !file.endsWith('.js'));
+    }
+
+    return files;
+  },
+
+  normalizeEntityName(entityName) {
     return normalizeEntityName(
       entityName.replace(/\.js$/, '') //Prevent generation of ".js.js" files
     );
   },
 
-  locals: function(options) {
+  locals(options) {
+    let sanitizedModuleName = options.entity.name.replace(/\//g, '-');
+    let classifiedModuleName = stringUtil.classify(sanitizedModuleName);
+
     let templatePath = '';
+    let importComponent = '';
     let importTemplate = '';
+    let defaultExport = '';
     let contents = '';
 
     if (!isModuleUnificationProject(this.project)) {
@@ -98,10 +221,32 @@ module.exports = useEditionDetector({
       }
     }
 
+    let componentClass = this.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
+      ? options.componentClass
+      : '@ember/component';
+
+    switch (componentClass) {
+      case '@ember/component':
+        importComponent = `import Component from '@ember/component';`;
+        defaultExport = `Component.extend({${contents}\n});`;
+        break;
+      case '@glimmer/component':
+        importComponent = `import Component from '@glimmer/component';`;
+        defaultExport = `class ${classifiedModuleName}Component extends Component {\n}`;
+        break;
+      case '':
+      case '@ember/component/template-only':
+        importComponent = `import templateOnly from '@ember/component/template-only';`;
+        defaultExport = `templateOnly();`;
+        break;
+    }
+
     return {
-      importTemplate: importTemplate,
-      contents: contents,
+      importTemplate,
+      importComponent,
+      defaultExport,
       path: getPathOption(options),
+      componentClass: options.componentClass,
     };
   },
-});
+};