Update linting dependencies & fix linting issues

Author: mydea

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['ember', '@typescript-eslint', 'prettier'],
-  extends: ['eslint:recommended', 'plugin:ember/recommended', 'prettier/@typescript-eslint'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
   env: {
     browser: true,
   },

package.json

@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@glimmer/component": "^1.0.0-beta.3",
-    "@glimmer/tracking": "^1.0.0-beta.3",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@typed-ember/renovate-config": "1.2.1",
     "@types/capture-console": "1.0.1",
     "@types/chai": "4.3.0",
@@ -71,8 +71,8 @@
     "@types/qunit": "2.11.3",
     "@types/resolve": "1.20.1",
     "@types/semver": "7.3.9",
-    "@typescript-eslint/eslint-plugin": "4.8.1",
-    "@typescript-eslint/parser": "4.8.1",
+    "@typescript-eslint/eslint-plugin": "5.10.1",
+    "@typescript-eslint/parser": "5.10.1",
     "broccoli-asset-rev": "3.0.0",
     "broccoli-node-api": "1.7.0",
     "broccoli-plugin": "4.0.3",
@@ -97,11 +97,11 @@
     "ember-resolver": "8.0.2",
     "ember-source": "3.23.0",
     "ember-try": "1.4.0",
-    "eslint": "7.13.0",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-plugin-ember": "9.6.0",
+    "eslint": "8.7.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-ember": "10.5.8",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-prettier": "4.0.0",
     "esprima": "4.0.1",
     "fixturify": "2.1.0",
     "got": "11.8.0",
@@ -110,8 +110,8 @@
     "in-repo-b": "link:tests/dummy/lib/in-repo-b",
     "loader.js": "4.7.0",
     "mocha": "8.2.1",
-    "prettier": "2.1.2",
-    "prettier-eslint": "11.0.0",
+    "prettier": "2.5.1",
+    "prettier-eslint": "13.0.0",
     "qunit-dom": "1.6.0",
     "rimraf": "3.0.2",
     "testdouble": "3.16.1",

tests/dummy/app/app.js

@@ -3,11 +3,11 @@ import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver,
-});
+class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
 

tests/dummy/app/templates/components/js-importing-ts.hbs renamed to tests/dummy/app/components/js-importing-ts.hbs

@@ -1,6 +1,6 @@
 <div style="border: 2px solid black;width: 100%; background-color: azure; margin-top: 20px; padding: 0 0 20px 20px">
 <p style="margin-top: 0px; border-bottom: chocolate 1px solid">js-importing-ts.hbs</p>
-{{poke}}
+{{this.poke}}
 <p>Ts helper: {{typed-help}}</p>
 <p>Js helper: {{js-help}}</p>
 </div>

tests/dummy/app/components/js-importing-ts.js

@@ -1,8 +1,9 @@
-import Component from '@ember/component';
-import { equal } from '@ember/object/computed';
+import Component from '@glimmer/component';
 
 import * as constants from '../lib/some-const';
 
-export default Component.extend({
-  poke: equal('ha', constants.CHANGE),
-});
+export default class JsImportingTs extends Component {
+  get poke() {
+    return constants.CHANGE === 'ha';
+  }
+}

tests/dummy/app/components/test-one.js

@@ -1,5 +1,5 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({
-  someValue: 'from component',
-});
+export default class TestOne extends Component {
+  someValue = 'from component';
+}

tests/dummy/app/templates/components/ts-component.hbs renamed to tests/dummy/app/components/ts-component.hbs

@@ -1,7 +1,7 @@
 <div style="border: 2px solid black;width: 100%; background-color: azure; margin-top: 20px; padding: 0 0 20px 20px">
 <p style="margin-top: 0px; border-bottom: chocolate 1px solid">ts-component.hbs</p>
-  {{#if someValue}}
-    Component defines <b>someValue</b> property as: {{someValue}}
+  {{#if this.someValue}}
+    Component defines <b>someValue</b> property as: {{this.someValue}}
   {{else}}
     <span style="color:red">Missing <b>someValue</b> property, expected to be defined by the component.</span>
   {{/if}}

tests/dummy/app/components/ts-component.ts

@@ -1,9 +1,9 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 function compute(): { value: string } {
   return { value: 'from component' };
 }
 
-export default Component.extend({
-  someValue: compute().value,
-});
+export default class TsComponent extends Component {
+  someValue = compute().value;
+}

tests/dummy/app/controllers/application.ts

@@ -1,7 +1,7 @@
 import Controller from '@ember/controller';
 
-export default Controller.extend({
+export default class ApplicationController extends Controller {
   // Just a very roundabout way of using some ES6 features
-  value: ((test = 'Test') => `${test} ${'Value'}`)(),
-  foo: 'hello',
-});
+  value = ((test = 'Test') => `${test} ${'Value'}`)();
+  foo = 'hello';
+}

tests/dummy/app/router.js

@@ -1,10 +1,10 @@
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-const Router = EmberRouter.extend({
-  location: config.locationType,
-  rootURL: config.rootURL,
-});
+class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
 
 Router.map(function () {});