Start converting to native classes

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

@@ -1,3 +1,5 @@
+import classic from 'ember-classic-decorator';
+import { classNameBindings, tagName, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from './template';
 import hljs from 'highlight.js/lib/core';
@@ -27,13 +29,14 @@ hljs.registerLanguage('sh', shell);
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('ts', typescript);
 
-export default Component.extend({
-  tagName: 'pre',
-  classNameBindings: ['language'],
-  layout,
+@classic
+@tagName('pre')
+@classNameBindings('language')
+@templateLayout(layout)
+export default class DocsCodeHighlight extends Component {
   didInsertElement() {
-    this._super.apply(this, arguments);
+    super.didInsertElement(...arguments);
 
     hljs.highlightBlock(this.element);
   }
-});
+}

addon/components/docs-demo/component.js

@@ -1,4 +1,6 @@
-import { computed } from '@ember/object';
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { action, computed } from '@ember/object';
 import { A } from '@ember/array';
 import Component from '@ember/component';
 import layout from './template';
@@ -27,23 +29,23 @@ import layout from './template';
   @yield {Component} demo.snippet
   @yield {Component} demo.liveExample
 */
-export default Component.extend({
-  layout,
-  tagName: '',
-
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class DocsDemo extends Component {
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.set('snippetRegistrations', A());
-  },
+  }
 
   /**
     The snippets registered with this demo component
 
     @field snippetRegistrations
     @type Array<Object>
   */
-  snippetRegistrations: null,
+  snippetRegistrations = null;
 
   /**
     The finalized snippets complete with name (or default), language,
@@ -54,7 +56,8 @@ export default Component.extend({
     @type Array<Object>
     @readOnly
    */
-  snippets: computed('activeSnippet', 'snippetRegistrations.[]', function() {
+  @computed('activeSnippet', 'snippetRegistrations.[]')
+  get snippets() {
     let activeSnippet = this.activeSnippet;
 
     return this.snippetRegistrations
@@ -67,7 +70,7 @@ export default Component.extend({
           language: language || defaults.language
         };
       })
-  }),
+  }
 
   /**
     Returns the default label and language based on snippet file name
@@ -102,32 +105,32 @@ export default Component.extend({
     }
 
     return { label, language };
-  },
-
-  actions: {
-    /**
-      Registers snippets with the demo component and sets it to the active
-      snippet if it's the only one
-
-      @action registerSnippet
-      @param {Object} snippet
-    */
-    registerSnippet(snippet) {
-      this.snippetRegistrations.pushObject(snippet);
-
-      if (this.get('snippetRegistrations.length') === 1) {
-        this.set('activeSnippet', snippet.name);
-      }
-    },
-
-    /**
-      Sets the active snippet
-
-      @action selectSnippet
-      @param {Object} snippet
-    */
-    selectSnippet(snippet) {
+  }
+
+  /**
+    Registers snippets with the demo component and sets it to the active
+    snippet if it's the only one
+
+    @action registerSnippet
+    @param {Object} snippet
+  */
+  @action
+  registerSnippet(snippet) {
+    this.snippetRegistrations.pushObject(snippet);
+
+    if (this.get('snippetRegistrations.length') === 1) {
       this.set('activeSnippet', snippet.name);
     }
   }
-});
+
+  /**
+    Sets the active snippet
+
+    @action selectSnippet
+    @param {Object} snippet
+  */
+  @action
+  selectSnippet(snippet) {
+    this.set('activeSnippet', snippet.name);
+  }
+}

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

@@ -1,13 +1,14 @@
+import classic from 'ember-classic-decorator';
+import { classNames, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from './template';
 
-export default Component.extend({
-  layout,
-
-  classNames: 'docs-p-4',
-
+@classic
+@templateLayout(layout)
+@classNames('docs-p-4')
+export default class XExample extends Component {
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.set('elementId', 'example-' + this.name);
   }
-});
+}

addon/components/docs-link/component.js

@@ -1,3 +1,5 @@
+import classic from 'ember-classic-decorator';
+import { classNames } from '@ember-decorators/component';
 import LinkComponent from '@ember/routing/link-component';
 
 /**
@@ -10,8 +12,6 @@ import LinkComponent from '@ember/routing/link-component';
   @class DocsLink
   @public
 */
-export default LinkComponent.extend({
-
-  classNames: 'docs-md__a'
-
-});
+@classic
+@classNames('docs-md__a')
+export default class DocsLink extends LinkComponent {}

addon/components/docs-logo/component.js

@@ -1,3 +1,5 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import { equal } from '@ember/object/computed';
 import { assert } from '@ember/debug';
 import Component from '@ember/component';
@@ -9,10 +11,10 @@ import layout from './template';
   @class DocsLogo
   @public
 */
-export default Component.extend({
-  layout,
-  tagName: '',
-
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class DocsLogo extends Component {
   /**
     Render either the 'ember', 'ember-cli' or 'ember-data' logo:
 
@@ -25,17 +27,22 @@ export default Component.extend({
     @argument logo
     @type String
   */
-  logo: 'ember',
+  logo = 'ember';
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     let logo = this.logo;
     let validLogos = ['ember', 'ember-cli', 'ember-data'];
     assert(`You passed "${logo}" to the docs-logo component, but the only valid options are [${validLogos}].`, validLogos.includes(logo));
-  },
+  }
+
+  @equal('logo', 'ember')
+  showEmber;
+
+  @equal('logo', 'ember-cli')
+  showEmberCli;
 
-  showEmber: equal('logo', 'ember'),
-  showEmberCli: equal('logo', 'ember-cli'),
-  showEmberData: equal('logo', 'ember-data')
-});
+  @equal('logo', 'ember-data')
+  showEmberData;
+}

addon/components/docs-snippet/component.js

@@ -1,3 +1,5 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from './template';
 
@@ -11,47 +13,47 @@ import layout from './template';
   @class DocsSnippet
   @public
 */
-export default Component.extend({
-  tagName: '',
-  layout,
-
+@classic
+@tagName('')
+@templateLayout(layout)
+export default class DocsSnippet extends Component {
   /**
     The name of the snippet
 
     @argument name
     @type String?
   */
-  name: null,
+  name = null;
 
   /**
     The language of the snippet
 
     @argument language
     @type String?
   */
-  language: null,
+  language = null;
 
   /**
     The title of the snippet
 
     @argument title
     @type String?
   */
-  title: null,
+  title = null;
 
   /**
     Whether or not to show the copy button for this snippet
 
     @argument showCopy
     @type Boolean
   */
-  showCopy: true,
+  showCopy = true;
 
   /**
     Whether or not the snippet should be unindented
 
     @argument unindent
     @type Boolean
   */
-  unindent: true,
-});
+  unindent = true;
+}

addon/components/docs-viewer/x-autogenerated-api-docs/component.js

@@ -1,16 +1,21 @@
-import Component from '@ember/component';
-import { inject as service } from '@ember/service';
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import { computed } from '@ember/object';
-import layout from './template';
+import { inject as service } from '@ember/service';
 import { readOnly } from '@ember/object/computed';
+import Component from '@ember/component';
+import layout from './template';
 import { set as _set } from 'lodash';
 
-export default Component.extend({
-  layout,
-  tagName: '',
-  store: service(),
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class XAutogeneratedApiDocs extends Component {
+  @service
+  store;
 
-  sections: readOnly('project.navigationIndex'),
+  @readOnly('project.navigationIndex')
+  sections;
 
   /*
     Autogenerated sections include "resolved types", by which we mean things like
@@ -19,9 +24,10 @@ export default Component.extend({
 
     These are the sections for the resolved types.
   */
-  resolvedTypeSections: computed('sections', function() {
+  @computed('sections')
+  get resolvedTypeSections() {
     return this.sections.filter(section => section.type !== 'modules');
-  }),
+  }
 
   /*
     Autogenerated sections include "resolved types", by which we mean things like
@@ -57,7 +63,8 @@ export default Component.extend({
     };
     ```
   */
-  moduleIndex: computed('sections', function() {
+  @computed('sections')
+  get moduleIndex() {
     let modulesSection = this.sections.filter(section => section.type === 'modules')[0];
 
     if (modulesSection) {
@@ -101,6 +108,7 @@ export default Component.extend({
 
       return transform(index)[0];
     }
-  })
 
-});
+    return null;
+  }
+}

addon/components/docs-viewer/x-autogenerated-api-docs/module-nav/component.js

@@ -1,10 +1,12 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from './template';
 
 /*
   A component used to recursively render a nested structure of module nodes.
 */
-export default Component.extend({
-  layout,
-  tagName: ''
-});
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class ModuleNav extends Component {}

addon/components/docs-viewer/x-current-page-index/component.js

@@ -1,10 +1,9 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from './template';
 
-export default Component.extend({
-
-  layout,
-
-  tagName: '',
-
-});
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class XCurrentPageIndex extends Component {}