Use colocated components

addon/components/api/x-class/component.js → addon/components/api/x-class/index.js

@@ -7,10 +7,7 @@ import config from 'ember-get-config';
 
 const { showImportPaths } = config['ember-cli-addon-docs'];
 
-import layout from './template';
-
 export default Component.extend({
-  layout,
   tagName: '',
 
   showImportPaths,

addon/components/api/x-component/component.js → addon/components/api/x-component/index.js

@@ -4,10 +4,7 @@ import { alias, or } from '@ember/object/computed';
 import { capitalize } from '@ember/string';
 import { memberFilter } from '../../../utils/computed';
 
-import layout from './template';
-
 export default Component.extend({
-  layout,
   tagName: '',
 
   showInherited: false,

addon/components/api/x-import-path.hbs

@@ -0,0 +1,18 @@
+<div class="import-path docs-mb-6" data-test-import-path>
+  <pre class="docs-md__code docs-whitespace-no-wrap">
+    <span class="hljs-keyword">
+      import
+    </span>
+
+    {{#if (eq @item.exportType "default")}}
+      {{@item.name}}
+    {{else}}
+      { {{@item.name}} }
+    {{/if}}
+
+    <span class="hljs-keyword">
+      from
+    </span>
+    <span class="hljs-string">'{{@item.file}}'</span>;
+  </pre>
+</div>

addon/components/api/x-meta-panel/header.hbs

@@ -0,0 +1,3 @@
+    <h4 class="docs-mb-2 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs">
+      {{yield}}
+    </h4>

addon/components/api/x-meta-panel/component.js → addon/components/api/x-meta-panel/index.hbs

@@ -1,13 +1,5 @@
-import { hbs } from 'ember-cli-htmlbars';
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-  layout: hbs`
     <div class="docs-px-6 docs-pt-3 docs-mt-4 docs-border docs-border-grey-light docs-rounded docs-text-xs">
       {{yield (hash
         header=(component 'api/x-meta-panel/header')
       )}}
-    </div>
-  `,
-});
+    </div>

addon/components/api/x-module/template.hbs → addon/components/api/x-module/index.hbs

@@ -1,6 +1,9 @@
-<Api::XSections @sections={{hash
+<Api::XSections
+  @sections={{
+    hash
     classes=@module.classes
     components=@module.components
     functions=@module.functions
     variables=@module.variables
-  }} />
+  }}
+/>

addon/components/api/x-section/component.js → addon/components/api/x-section/index.js

@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import layout from './template';
 import config from 'ember-get-config';
 
 const { showImportPaths } = config['ember-cli-addon-docs'];
@@ -10,7 +9,6 @@ const { showImportPaths } = config['ember-cli-addon-docs'];
   @hide
 */
 export default Component.extend({
-  layout,
   tagName: '',
 
   showImportPaths,

addon/components/api/x-sections.hbs

@@ -0,0 +1,13 @@
+{{#each-in @sections as |sectionName items|}}
+  {{#if items}}
+    <section data-test-api-section class="item-section">
+      <h2 data-test-section-header={{sectionName}} class="docs-h2">
+        {{capitalize sectionName}}
+      </h2>
+
+      {{#each items as |item|}}
+        <Api::XSection @item={{item}} />
+      {{/each}}
+    </section>
+  {{/if}}
+{{/each-in}}

addon/components/docs-code-highlight/component.js → addon/components/docs-code-highlight/index.js

@@ -1,10 +1,5 @@
-import {
-  classNameBindings,
-  tagName,
-  layout as templateLayout,
-} from '@ember-decorators/component';
+import { classNameBindings, tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
-import layout from './template';
 import hljs from 'highlight.js/lib/core';
 
 // Installed languages
@@ -34,7 +29,6 @@ hljs.registerLanguage('ts', typescript);
 
 @tagName('pre')
 @classNameBindings('language')
-@templateLayout(layout)
 export default class DocsCodeHighlight extends Component {
   didInsertElement() {
     super.didInsertElement(...arguments);

addon/components/docs-demo/component.js → addon/components/docs-demo/index.js

@@ -1,8 +1,7 @@
-import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { tagName } from '@ember-decorators/component';
 import { action, computed } from '@ember/object';
 import { A } from '@ember/array';
 import Component from '@ember/component';
-import layout from './template';
 
 /**
   A demo component that can be used to demonstrate code samples. Comes
@@ -29,7 +28,6 @@ import layout from './template';
   @yield {Component} demo.liveExample
 */
 
-@templateLayout(layout)
 @tagName('')
 export default class DocsDemo extends Component {
   // eslint-disable-next-line ember/classic-decorator-hooks

addon/components/docs-demo/x-example/component.js → addon/components/docs-demo/x-example/index.js

@@ -1,11 +1,6 @@
-import {
-  classNames,
-  layout as templateLayout,
-} from '@ember-decorators/component';
+import { classNames } from '@ember-decorators/component';
 import Component from '@ember/component';
-import layout from './template';
 
-@templateLayout(layout)
 @classNames('docs-p-4')
 export default class XExample extends Component {
   // eslint-disable-next-line ember/classic-decorator-hooks

addon/components/docs-header/component.js → addon/components/docs-header/index.js

@@ -1,5 +1,4 @@
 import Component from '@ember/component';
-import layout from './template';
 import config from 'ember-get-config';
 import { computed } from '@ember/object';
 import { classify } from '@ember/string';
@@ -31,7 +30,6 @@ const { projectName, projectHref, latestVersionName } =
   @yield {Component} header.link
 */
 export default Component.extend({
-  layout,
   tagName: '',
 
   projectVersion: service(),

addon/components/docs-header/link/component.js → addon/components/docs-header/link/index.js

@@ -1,10 +1,8 @@
 import Component from '@ember/component';
-import layout from './template';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  layout,
   tagName: '',
 
   router: service(),

addon/components/docs-header/search-box/component.js → addon/components/docs-header/search-box/index.js

@@ -1,21 +1,29 @@
 import Component from '@ember/component';
-import template from './template';
 import { task } from 'ember-concurrency';
-import config from 'ember-get-config';
+import { getOwner } from '@ember/application';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { classNames, layout } from '@ember-decorators/component';
+import { classNames } from '@ember-decorators/component';
 import { formElementHasFocus } from 'ember-cli-addon-docs/keyboard-config';
 
-const projectName = config['ember-cli-addon-docs'].projectName;
-
 @classNames('docs-ml-auto')
-@layout(template)
 export default class DocsHeaderSearchBoxComponent extends Component {
   @service store;
 
   query = null;
 
+  constructor() {
+    super(...arguments);
+
+    const config =
+      getOwner(this).resolveRegistration('config:environment')[
+        'ember-cli-addon-docs'
+      ];
+    const { projectName } = config;
+
+    this.set('projectName', projectName);
+  }
+
   didInsertElement() {
     super.didInsertElement(...arguments);
 
@@ -29,7 +37,7 @@ export default class DocsHeaderSearchBoxComponent extends Component {
   // project.
   @task
   *fetchProject() {
-    yield this.store.findRecord('project', projectName);
+    yield this.store.findRecord('project', this.projectName);
   }
 
   @action

addon/components/docs-header/search-result/component.js → addon/components/docs-header/search-result/index.js

@@ -1,11 +1,8 @@
 import Component from '@ember/component';
-import layout from './template';
 import { computed } from '@ember/object';
 import { bool } from '@ember/object/computed';
 
 export default Component.extend({
-  layout,
-
   result: null,
   onClick() {},
   onMouseEnter() {},

addon/components/docs-header/search-results/component.js → addon/components/docs-header/search-results/index.js

@@ -1,17 +1,12 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { action } from '@ember/object';
-import template from './template';
 import { keyResponder, onKey } from 'ember-keyboard';
-import { layout } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import { task } from 'ember-concurrency';
-import config from 'ember-get-config';
-
-const projectName = config['ember-cli-addon-docs'].projectName;
+import { getOwner } from '@ember/application';
 
 @keyResponder
-@layout(template)
 export default class DocsHeaderSearchResultsComponent extends Component {
   @service docsSearch;
   @service router;
@@ -20,6 +15,18 @@ export default class DocsHeaderSearchResultsComponent extends Component {
   query = null; // passed in
   selectedIndex = null;
 
+  constructor() {
+    super(...arguments);
+
+    const config =
+      getOwner(this).resolveRegistration('config:environment')[
+        'ember-cli-addon-docs'
+      ];
+    const { projectName } = config;
+
+    this.set('projectName', projectName);
+  }
+
   didInsertElement() {
     super.didInsertElement(...arguments);
 
@@ -34,7 +41,7 @@ export default class DocsHeaderSearchResultsComponent extends Component {
   }
 
   get project() {
-    return this.store.peekRecord('project', projectName);
+    return this.store.peekRecord('project', this.projectName);
   }
 
   @computed('query')

addon/components/docs-header/version-selector/component.js → addon/components/docs-header/version-selector/index.js

@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import layout from './template';
 import { reads } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import { A } from '@ember/array';
@@ -11,8 +10,6 @@ import { getOwner } from '@ember/application';
 export default Component.extend({
   projectVersion: service(),
 
-  layout,
-
   init() {
     this._super(...arguments);
     const config =