Run codemods

Author: jenweber

app/adapters/application.js

@@ -1,21 +1,22 @@
-import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import { inject as service } from '@ember/service';
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import fetch from 'fetch';
 import ENV from 'ember-api-docs/config/environment';
 import { pluralize } from 'ember-inflector';
 import { isBlank } from '@ember/utils';
 
-export default JSONAPIAdapter.extend({
-  host: ENV.API_HOST,
-
-  currentProject: '',
+export default class Application extends JSONAPIAdapter {
+  host = ENV.API_HOST;
+  currentProject = '';
+  currentProjectVersion = '';
 
-  currentProjectVersion: '',
+  @service
+  metaStore;
 
-  metaStore: service(),
-  projectService: service('project'),
+  @service('project')
+  projectService;
 
-  ids: null,
+  ids = null;
 
   shouldReloadRecord(store, { modelName, id }) {
     if (modelName === 'project') {
@@ -24,23 +25,25 @@ export default JSONAPIAdapter.extend({
       this.currentProjectVersion = id;
     }
     return; // return undefined so auto determinated
-  },
+  }
+
   shouldBackgroundReloadAll() {
     return false;
-  },
+  }
+
   shouldBackgroundReloadRecord(store, { modelName, id }) {
     let key = `${modelName}-${id}`;
     let hasId = this.ids[key];
     if (!hasId) {
       this.ids[key] = true;
     }
     return !hasId;
-  },
+  }
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.ids = {};
-  },
+  }
 
   async findRecord(store, { modelName }, id) {
     let url;
@@ -87,5 +90,5 @@ export default JSONAPIAdapter.extend({
     let response = await fetch(url);
     let json = await response.json();
     return json;
-  },
-});
+  }
+}

app/components/api-index-filter.js

@@ -1,36 +1,27 @@
+import { classNames } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 import sortBy from 'lodash.sortby';
 
 const filterDataComputedParams =
   'filterData.{showInherited,showProtected,showPrivate,showDeprecated}';
 
-export default Component.extend({
-  classNames: ['api-index-filter'],
+@classNames('api-index-filter')
+export default class ApiIndexFilter extends Component {
+  @computed('model.methods.[]', filterDataComputedParams)
+  get filteredMethods() {
+    return this.filterItems('methods');
+  }
 
-  filteredMethods: computed(
-    'model.methods.[]',
-    filterDataComputedParams,
-    function () {
-      return this.filterItems('methods');
-    }
-  ),
-
-  filteredEvents: computed(
-    'model.events.[]',
-    filterDataComputedParams,
-    function () {
-      return this.filterItems('events');
-    }
-  ),
+  @computed('model.events.[]', filterDataComputedParams)
+  get filteredEvents() {
+    return this.filterItems('events');
+  }
 
-  filteredProperties: computed(
-    'model.properties.[]',
-    filterDataComputedParams,
-    function () {
-      return this.filterItems('properties');
-    }
-  ),
+  @computed('model.properties.[]', filterDataComputedParams)
+  get filteredProperties() {
+    return this.filterItems('properties');
+  }
 
   filterItems(itemType) {
     let items =
@@ -52,20 +43,16 @@ export default Component.extend({
 
     let sortedItems = sortBy(items, (item) => item.name);
     return this.filterMultipleInheritance(sortedItems);
-  },
+  }
 
-  filteredData: computed(
-    'filteredMethods',
-    'filteredProperties',
-    'filteredEvents',
-    function () {
-      return {
-        methods: this.filteredMethods,
-        properties: this.filteredProperties,
-        events: this.filteredEvents,
-      };
-    }
-  ),
+  @computed('filteredMethods', 'filteredProperties', 'filteredEvents')
+  get filteredData() {
+    return {
+      methods: this.filteredMethods,
+      properties: this.filteredProperties,
+      events: this.filteredEvents,
+    };
+  }
 
   /**
    * Returns an array where duplicate methods (by name) are removed.
@@ -94,7 +81,8 @@ export default Component.extend({
       }
     }
     return dedupedArray;
-  },
+  }
+
   /**
    * Returns whichever item is most local.
    * What is "most local" is determined by looking at the file path for the
@@ -114,5 +102,5 @@ export default Component.extend({
       // otherwise, the next item must be "more local"
       return nextItem;
     }
-  },
-});
+  }
+}

app/components/api-index.js

@@ -1,8 +1,9 @@
 import { computed } from '@ember/object';
 import Component from '@ember/component';
 
-export default Component.extend({
-  sections: computed('itemData.{methods,properties,events}', function () {
+export default class ApiIndex extends Component {
+  @computed('itemData.{methods,properties,events}')
+  get sections() {
     return [
       {
         title: 'Methods',
@@ -26,5 +27,5 @@ export default Component.extend({
         routeSuffix: '.events.event',
       },
     ];
-  }),
-});
+  }
+}

app/components/class-field-description.js

@@ -1,22 +1,24 @@
-import Component from '@ember/component';
-import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
 
-export default Component.extend({
-  legacyModuleMappings: service(),
+export default class ClassFieldDescription extends Component {
+  @service
+  legacyModuleMappings;
 
-  hasImportExample: computed('field.{name,class}', function () {
+  @computed('field.{name,class}')
+  get hasImportExample() {
     return this.legacyModuleMappings.hasFunctionMapping(
       this.get('field.name'),
       this.get('field.class')
     );
-  }),
+  }
 
   /**
    * Callback for updating the anchor with the field name that was clicked by a user.
    *
    * @method updateAnchor
    * @method fieldName String The name representing the field that was clicked.
    */
-  updateAnchor() {},
-});
+  updateAnchor() {}
+}

app/components/ember-anchor.js

@@ -3,7 +3,7 @@ import AnchorComponent from 'ember-anchor/components/ember-anchor';
 import config from 'ember-api-docs/config/environment';
 import getOffset from 'ember-api-docs/utils/get-offset';
 
-export default AnchorComponent.extend({
+export default class EmberAnchor extends AnchorComponent {
   // This overrides Ember Anchor to support scrolling within a fixed position element
   _scrollToElemPosition() {
     let qp = this.anchorQueryParam;
@@ -25,5 +25,5 @@ export default AnchorComponent.extend({
         scrollContainer.scrollTop = offsetToScroll;
       }
     }
-  },
-});
+  }
+}

app/components/import-example.js

@@ -1,11 +1,11 @@
+import { action } from '@ember/object';
 import Component from '@ember/component';
 import { later } from '@ember/runloop';
 
-export default Component.extend({
-  actions: {
-    showSuccess() {
-      this.toggleProperty('showClipboardSuccessIcon');
-      later(this, () => this.toggleProperty('showClipboardSuccessIcon'), 950);
-    },
-  },
-});
+export default class ImportExample extends Component {
+  @action
+  showSuccess() {
+    this.toggleProperty('showClipboardSuccessIcon');
+    later(this, () => this.toggleProperty('showClipboardSuccessIcon'), 950);
+  }
+}

app/components/loading-spinner.js

@@ -1,5 +1,5 @@
+import { classNames } from '@ember-decorators/component';
 import Component from '@ember/component';
 
-export default Component.extend({
-  classNames: ['loading-spinner'],
-});
+@classNames('loading-spinner')
+export default class LoadingSpinner extends Component {}

app/components/search-input/dropdown-header.js

@@ -1,5 +1,5 @@
+import { classNames } from '@ember-decorators/component';
 import Component from '@ember/component';
 
-export default Component.extend({
-  classNames: ['ds-suggestion'],
-});
+@classNames('ds-suggestion')
+export default class DropdownHeader extends Component {}

app/components/search-input/dropdown.js

@@ -1,22 +1,25 @@
-import { set } from '@ember/object';
+import {
+  classNames,
+  attributeBindings,
+  tagName,
+} from '@ember-decorators/component';
+import { set, get, computed } from '@ember/object';
 import Component from '@ember/component';
-import { get, computed } from '@ember/object';
 import { A } from '@ember/array';
 
-export default Component.extend({
+@tagName('span')
+@classNames('ds-dropdown-menu', 'ds-with-1')
+@attributeBindings('role')
+export default class Dropdown extends Component {
   // Public API
-  role: 'listbox',
-  isVisible: false,
+  role = 'listbox';
 
-  // Private API
-  tagName: 'span',
-  classNames: ['ds-dropdown-menu', 'ds-with-1'],
-  attributeBindings: ['role'],
+  isVisible = false;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     set(this, 'results', A());
-  },
+  }
 
   // show
   // Massage data to make it easier for displaying on the template
@@ -28,7 +31,8 @@ export default Component.extend({
    *    }
    *  }
    */
-  _groupedResults: computed('results.[]', function () {
+  @computed('results.[]')
+  get _groupedResults() {
     if (!get(this, 'results.length')) {
       return {};
     }
@@ -72,5 +76,5 @@ export default Component.extend({
 
       return lvl0Result;
     }, {});
-  }),
-});
+  }
+}

app/components/table-of-contents.js

@@ -1,10 +1,10 @@
+import { action } from '@ember/object';
 import Component from '@ember/component';
 
-export default Component.extend({
-  actions: {
-    toggle(type) {
-      const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
-      tableElement.classList.toggle('selected');
-    },
-  },
-});
+export default class TableOfContents extends Component {
+  @action
+  toggle(type) {
+    const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
+    tableElement.classList.toggle('selected');
+  }
+}

app/controllers/application.js

@@ -169,6 +169,6 @@ const links = [
   },
 ];
 
-export default Controller.extend({
-  links,
-});
+export default class ApplicationController extends Controller {
+  links = links;
+}

app/controllers/class.js

@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
 
-export default Controller.extend({
-  queryParams: ['anchor', 'type'],
-});
+export default class ClassController extends Controller {
+  queryParams = ['anchor', 'type'];
+}

app/controllers/events.js

@@ -2,7 +2,11 @@ import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
 
-export default Controller.extend(AnchorControllerSupport, {
-  filterData: service(),
-  queryParams: ['anchor'],
-});
+export default class EventsController extends Controller.extend(
+  AnchorControllerSupport
+) {
+  @service
+  filterData;
+
+  queryParams = ['anchor'];
+}