Example invocation of ember-codemods/ember-native-class-codemod#535

Author: gitKrystan

codemods.log

@@ -22,10 +22,10 @@ pre-commit:
       glob: "*.scss"
       include: "app/assets/stylesheets|plugins/.+?/assets/stylesheets"
       run: yarn pprettier --list-different {staged_files}
-    eslint:
-      glob: "*.js"
-      include: "app/assets/javascripts|plugins/.+?/assets/javascripts"
-      run: yarn eslint -f compact --quiet {staged_files}
+    # eslint:
+    #   glob: "*.js"
+    #   include: "app/assets/javascripts|plugins/.+?/assets/javascripts"
+    #   run: yarn eslint -f compact --quiet {staged_files}
     ember-template-lint:
       glob: "*.hbs"
       include: "app/assets/javascripts|plugins/.+?/assets/javascripts"
@@ -49,8 +49,8 @@ lints:
       run: yarn pprettier --list-different **/*.js
     prettier-scss:
       run: yarn pprettier --list-different **/*.scss
-    eslint:
-      run: yarn eslint -f compact --quiet --ext .js .
+    # eslint:
+    #   run: yarn eslint -f compact --quiet --ext .js .
     ember-template-lint:
       run: yarn run ember-template-lint .
     yaml-syntax:

lefthook.yml

@@ -1,45 +1,51 @@
+import classic from "ember-classic-decorator";
+import { tagName } from "@ember-decorators/component";
+import { equal } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
-import { equal } from "@ember/object/computed";
 import { getColors } from "discourse/plugins/poll/lib/chart-colors";
 import { htmlSafe } from "@ember/template";
 import { propertyEqual } from "discourse/lib/computed";
 
-export default Component.extend({
+@classic
+@tagName("")
+export default class PollBreakdownOption extends Component {
   // Arguments:
-  option: null,
-  index: null,
-  totalVotes: null,
-  optionsCount: null,
-  displayMode: null,
-  highlightedOption: null,
-  onMouseOver: null,
-  onMouseOut: null,
+  option = null;
+
+  index = null;
+  totalVotes = null;
+  optionsCount = null;
+  displayMode = null;
+  highlightedOption = null;
+  onMouseOver = null;
+  onMouseOut = null;
 
-  tagName: "",
+  @propertyEqual("highlightedOption", "index")
+  highlighted;
 
-  highlighted: propertyEqual("highlightedOption", "index"),
-  showPercentage: equal("displayMode", "percentage"),
+  @equal("displayMode", "percentage")
+  showPercentage;
 
   @discourseComputed("option.votes", "totalVotes")
   percent(votes, total) {
     return I18n.toNumber((votes / total) * 100.0, { precision: 1 });
-  },
+  }
 
   @discourseComputed("optionsCount")
   optionColors(optionsCount) {
     return getColors(optionsCount);
-  },
+  }
 
   @discourseComputed("highlighted")
   colorBackgroundStyle(highlighted) {
     if (highlighted) {
       // TODO: Use CSS variables (#10341)
       return htmlSafe("background: rgba(0, 0, 0, 0.1);");
     }
-  },
+  }
 
   @discourseComputed("highlighted", "optionColors", "index")
   colorPreviewStyle(highlighted, optionColors, index) {
@@ -48,7 +54,7 @@ export default Component.extend({
       : optionColors[index];
 
     return htmlSafe(`background: ${color};`);
-  },
+  }
 
   @action
   onHover(active) {
@@ -57,5 +63,5 @@ export default Component.extend({
     } else {
       this.onMouseOut();
     }
-  },
-});
+  }
+}