Migration to native javascript classes - remove the @classic decorator (in components - without migration to glimmer components).

Author: svogt0511

.eslintrc.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 module.exports = {
   root: true,
@@ -37,8 +37,8 @@ module.exports = {
     // 'ember/no-replace-test-comments': 'error',
     // 'ember/no-replace-test-comments': 'error',
     // NEW - for ember-classic-decorator and migration to native js classes
-    'ember/classic-decorator-hooks': 0,
-    'ember/classic-decorator-no-classic-methods': 0
+    'ember/classic-decorator-hooks': 2,
+    'ember/classic-decorator-no-classic-methods': 2
   },
   overrides: [
     // node files

app/components/bar-chart.js

@@ -1,4 +1,4 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { classNameBindings, classNames, tagName } from '@ember-decorators/component';
 import { action, computed } from '@ember/object';
 import { schedule } from '@ember/runloop';
@@ -11,8 +11,8 @@ import { timeYears } from 'd3-time';
 import { timeFormat } from 'd3-time-format';
 import { scaleTime, scaleLinear } from 'd3-scale';
 import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 @tagName('div')
 @classNames('col-lg-3', 'col-md-4')
 @classNameBindings('offset:col-lg-offset-3')
@@ -54,8 +54,8 @@ export default class BarChart extends Component {
   cumulative = true;
   summarize = false;
 
-  init() {
-    super.init();
+  constructor(...args) {
+    super(...args);
 
     schedule('afterRender', this, function () {
       this.send('barChart');

app/components/cc-license.js

@@ -1,10 +1,11 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { classNames, tagName } from '@ember-decorators/component';
 import { htmlSafe } from '@ember/template';
 import { w } from '@ember/string';
 import { A } from '@ember/array';
 import Component from '@ember/component';
 import URI from 'urijs';
+import { tracked } from '@glimmer/tracking';
 
 const Tooltips = [
   {
@@ -39,7 +40,6 @@ const Tooltips = [
   }
 ];
 
-@classic
 @tagName('div')
 @classNames('license')
 export default class CcLicense extends Component {
@@ -79,9 +79,9 @@ export default class CcLicense extends Component {
             ];
         }
       }
-      this.set('licenseLogo', licenseLogo);
+      this.licenseLogo = licenseLogo;
     } else {
-      this.set('licenseLogo', null);
+      this.licenseLogo = null;
     }
   }
 }

app/components/create-doi-button.js

@@ -1,10 +1,10 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action } from '@ember/object';
 import { classNames } from '@ember-decorators/component';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 @classNames('')
 export default class CreateDoiButton extends Component {
   @service
@@ -13,12 +13,6 @@ export default class CreateDoiButton extends Component {
   @service
   router;
 
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-
-    this.set('currentUser', this.currentUser);
-  }
-
   @action
   createDoi() {
     this.router.transitionTo('repositories.show.dois.new');

app/components/doi-alternate-identifier.js

@@ -1,7 +1,8 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action } from '@ember/object';
 import Component from '@ember/component';
 import { isBlank } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
 
 const alternateIdentifierTypeList = [
   'ARK',
@@ -25,13 +26,12 @@ const alternateIdentifierTypeList = [
   'w3id'
 ];
 
-@classic
 export default class DoiAlternateIdentifier extends Component {
   alternateIdentifierTypeList = alternateIdentifierTypeList;
   alternateIdentifierTypes = alternateIdentifierTypeList;
 
-  init(...args) {
-    super.init(...args);
+  constructor(...args) {
+    super(...args);
 
     this.selected = this.selected || [];
   }
@@ -48,7 +48,7 @@ export default class DoiAlternateIdentifier extends Component {
         this.alternateIdentifierTypes.push(select.searchText);
         select.actions.choose(select.searchText);
         this.fragment.set('alternateIdentifierType', select.searchText);
-        this.set('alternateIdentifierTypes', alternateIdentifierTypeList);
+        this.alternateIdentifierTypes = alternateIdentifierTypeList;
       }
     }
   }
@@ -61,11 +61,11 @@ export default class DoiAlternateIdentifier extends Component {
   @action
   selectAlternateIdentifierType(alternateIdentifierType) {
     this.fragment.set('alternateIdentifierType', alternateIdentifierType);
-    this.set('alternateIdentifierTypes', alternateIdentifierTypeList);
+    this.alternateIdentifierTypes = alternateIdentifierTypeList;
   }
 
   @action
   deleteAlternateIdentifier() {
-    this.model.get('alternateIdentifiers').removeObject(this.fragment);
+    this.model.alternateIdentifiers.removeObject(this.fragment);
   }
 }

app/components/doi-alternate-identifiers.js

@@ -1,27 +1,27 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action } from '@ember/object';
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class DoiAlternateIdentifiers extends Component {
-  showAlternateIdentifiers = false;
+  @tracked showAlternateIdentifiers = false;
 
   didReceiveAttrs() {
     super.didReceiveAttrs(...arguments);
 
-    if (!this.model.get('alternateIdentifiers')) {
-      this.model.set('alternateIdentifiers', []);
+    if (!this.model.alternateIdentifiers) {
+      this.model.alternateIdentifiers = [];
     }
   }
 
   @action
   addAlternateIdentifier() {
-    this.model.get('alternateIdentifiers').createFragment();
-    this.set('showAlternateIdentifiers', true);
+    this.model.alternateIdentifiers.createFragment();
+    this.showAlternateIdentifiers = true;
   }
 
   @action
   toggleAlternateIdentifiers() {
-    this.set('showAlternateIdentifiers', !this.showAlternateIdentifiers);
+    this.showAlternateIdentifiers = !this.showAlternateIdentifiers;
   }
 }

app/components/doi-citation-body.js

@@ -1,8 +1,8 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 @tagName('div')
 export default class DoiCitationBody extends Component {
   didReceiveAttrs() {

app/components/doi-citation.js

@@ -1,13 +1,13 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action } from '@ember/object';
 import { tagName } from '@ember-decorators/component';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import fetch from 'fetch';
 import ENV from 'bracco/config/environment';
 import { UploadFile, UploadFileReader } from 'ember-file-upload';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 @tagName('div')
 export default class DoiCitation extends Component {
   @service
@@ -29,17 +29,17 @@ export default class DoiCitation extends Component {
       'chicago-fullnote-bibliography': 'Chicago',
       ieee: 'IEEE'
     };
-    this.set('citationFormats', citationFormats);
+    this.citationFormats = citationFormats;
   }
 
   selectStyle(style) {
     let self = this;
     let url =
-      ENV.API_URL + '/dois/' + this.model.get('doi') + '?style=' + style;
+      ENV.API_URL + '/dois/' + this.modeldoi + '?style=' + style;
     let headers = { Accept: 'text/x-bibliography' };
-    if (this.currentUser.get('jwt')) {
+    if (this.currentUser.jwt) {
       headers = {
-        Authorization: 'Bearer ' + this.currentUser.get('jwt'),
+        Authorization: 'Bearer ' + this.currentUser.jwt,
         Accept: 'text/x-bibliography'
       };
     }
@@ -55,23 +55,22 @@ export default class DoiCitation extends Component {
 
     result.then(async function (response) {
       if (typeof response === 'string') {
-        self.set('citationOutput', response);
+        self.citationOutput = response;
       } else {
         if (self.isDestroying || self.isDestroyed) {
           return;
         }
         let reader = UploadFile.fromBlob(response, 'blob')
         reader.readAsText().then(
           (result) => {
-            self.set('citationOutput', result);
+            self.citationOutput = result;
           },
           (err) => {
             console.error(err);
           }
         );
       }
     });
-    // this.get('router').transitionTo({ queryParams: { citation: citation } });
   }
 
   @action

app/components/doi-contributor.js

@@ -1,9 +1,10 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action, computed } from '@ember/object';
 import PersonBaseComponent from './person-base-component';
 import { pascalCase } from 'pascal-case';
 import humanizeString from 'humanize-string';
 import { isBlank } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
 
 const contributorTypes = [
   'ContactPerson',
@@ -54,22 +55,21 @@ const personalContributorTypes = [
   'WorkPackageLeader'
 ];
 
-@classic
 export default class DoiContributor extends PersonBaseComponent {
   humanContributorTypes = humanContributorTypes;
 
   @computed('fragment.contributorType')
   get humanContributorType() {
-    return isBlank(this.get('fragment.contributorType'))
+    return isBlank(this.fragment.contributorType)
       ? null
-      : humanizeString(this.get('fragment.contributorType'));
+      : humanizeString(this.fragment.contributorType);
   }
 
   selectContributorType(contributorType) {
     if (contributorType) {
       let contributorTypeId = pascalCase(contributorType);
-      this.fragment.set('contributorType', contributorTypeId);
-      this.set('contributorType', contributorType);
+      this.fragment.contributorType = contributorTypeId;
+      this.contributorType = contributorType;
 
       if (organizationalContributorTypes.includes(contributorTypeId)) {
         this.selectNameType('Organizational');
@@ -79,14 +79,14 @@ export default class DoiContributor extends PersonBaseComponent {
         this.selectNameType('Personal');
       }
     } else {
-      this.fragment.set('contributorType', null);
+      this.fragment.contributorType = null;
     }
-    this.set('humanContributorTypes', humanContributorTypes);
+    this.humanContributorTypes = humanContributorTypes;
   }
 
   @action
   deleteContributorAction() {
-    this.model.get('contributors').removeObject(this.fragment);
+    this.model.contributors.removeObject(this.fragment);
   }
 
   @action

app/components/doi-contributors.js

@@ -1,39 +1,29 @@
-import classic from 'ember-classic-decorator';
+// Finish conversion of this component to a @glimmer component.
 import { action } from '@ember/object';
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class DoiContributors extends Component {
-  showContributors = false;
+  @tracked showContributors = false;
 
   didReceiveAttrs() {
     super.didReceiveAttrs(...arguments);
 
-    if (!this.model.get('contributors')) {
-      this.model.set('contributors', []);
+    if (!this.model.contributors) {
+      this.model.contributors = [];
     }
   }
 
   @action
   addContributor() {
-    this.model
-      .get('contributors')
-      .createFragment({ nameIdentifiers: [], affiliation: [] });
-    this.model
-      .get('contributors')
-      .get('lastObject')
-      .get('nameIdentifiers')
-      .createFragment();
-    this.model
-      .get('contributors')
-      .get('lastObject')
-      .get('affiliation')
-      .createFragment();
-    this.set('showContributors', true);
+    this.model.contributors.createFragment({ nameIdentifiers: [], affiliation: [] });
+    this.model.contributors.lastObject.nameIdentifiers.createFragment();
+    this.model.contributors.lastObject.affiliation.createFragment();
+    this.showContributors = true;
   }
 
   @action
   toggleContributors() {
-    this.set('showContributors', !this.showContributors);
+    this.showContributors = !this.showContributors;
   }
 }