Update types & ember to 4.x

.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,
   },

.github/workflows/ci.yml

@@ -26,10 +26,7 @@ jobs:
     steps:
       - name: Checkout Code
         uses: actions/checkout@v2
-      - name: Install Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '^10'
+      - uses: volta-cli/action@v1
       # https://github.com/expo/expo-github-action/issues/20#issuecomment-541676895
       - name: Raise Watched File Limit
         run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
@@ -53,7 +50,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v1
         with:
-          node-version: '^10'
+          node-version: '^12'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
       - name: Prepare CI Environment
@@ -70,10 +67,7 @@ jobs:
     steps:
       - name: Checkout Code
         uses: actions/checkout@v2
-      - name: Install Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '^10'
+      - uses: volta-cli/action@v1
       - name: Raise Watched File Limit
         run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: Install Dependencies
@@ -100,10 +94,7 @@ jobs:
     steps:
       - name: Checkout Code
         uses: actions/checkout@v2
-      - name: Install Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: '^10'
+      - uses: volta-cli/action@v1
       - name: Raise Watched File Limit
         run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: Install Dependencies

docs/ember/testing.md

@@ -260,7 +260,7 @@ This is a decent test, and TypeScript actually makes the experience of writing c
 To inform TypeScript about this, we need to tell it that the type of `this` in each test assertion includes the `user` property, of type `User`. We’ll start by importing the `TestContext` defined by Ember’s test helpers, and extending it:
 
 ```typescript
-import { TestContext } from 'ember-test-helpers';
+import { TestContext } from '@ember/test-helpers';
 
 import User from 'app/types/user';
 
@@ -282,9 +282,8 @@ Putting it all together, this is what our updated test definition would look lik
 ```typescript
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, TestContext } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import { TestContext } from 'ember-test-helpers';
 
 import User from 'app/types/user';
 

known-typings.md

@@ -25,7 +25,6 @@ For addons which do not have types shipped with the addon directly, you may be f
 * `@types/ember-data`
 * `@types/ember-mocha`
 * `@types/ember-qunit`
-* `@types/ember-test-helpers`
-* `@types/ember-testing-helpers`
+* `@types/ember__test-helpers`
 * `@types/ember`
 * `@types/rsvp`

package.json

@@ -51,29 +51,28 @@
   },
   "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.0",
-    "@types/chai": "4.2.14",
-    "@types/chai-as-promised": "7.1.3",
-    "@types/console-ui": "2.2.3",
+    "@types/capture-console": "1.0.1",
+    "@types/chai": "4.3.0",
+    "@types/chai-as-promised": "7.1.4",
+    "@types/console-ui": "2.2.5",
     "@types/core-object": "3.0.1",
-    "@types/debug": "4.1.5",
-    "@types/ember": "3.16.2",
-    "@types/ember-qunit": "3.4.13",
-    "@types/ember__object": "^3.1.1",
-    "@types/esprima": "4.0.2",
-    "@types/express": "4.17.7",
-    "@types/fs-extra": "9.0.4",
-    "@types/got": "9.6.11",
-    "@types/mocha": "8.0.4",
+    "@types/debug": "4.1.7",
+    "@types/ember": "4.0.0",
+    "@types/ember-qunit": "5.0.0",
+    "@types/esprima": "4.0.3",
+    "@types/express": "4.17.13",
+    "@types/fs-extra": "9.0.13",
+    "@types/got": "9.6.12",
+    "@types/mocha": "9.1.0",
     "@types/node": "14.14.8",
-    "@types/qunit": "2.11.1",
-    "@types/resolve": "1.17.1",
-    "@types/semver": "7.3.4",
-    "@typescript-eslint/eslint-plugin": "4.8.1",
-    "@typescript-eslint/parser": "4.8.1",
+    "@types/qunit": "2.11.3",
+    "@types/resolve": "1.20.1",
+    "@types/semver": "7.3.9",
+    "@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",
@@ -98,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",
@@ -111,21 +110,19 @@
     "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",
     "ts-node": "9.0.0",
-    "typescript": "4.0.5"
+    "typescript": "4.5.5"
   },
   "resolutions": {
-    "@types/ember": "3.16.2",
-    "@types/ember__string": "3.16.1",
     "hawk": "7"
   },
   "engines": {
-    "node": "10.* || >= 12.*"
+    "node": ">= 12.*"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
@@ -142,7 +139,7 @@
     "proseWrap": "never"
   },
   "volta": {
-    "node": "10.23.0",
-    "yarn": "1.22.10"
+    "node": "12.22.9",
+    "yarn": "1.22.17"
   }
 }

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 → 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 → 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 () {});
 

ts/tests/acceptance/build-test.ts

@@ -160,9 +160,7 @@ function isExpressionStatement(stmt: Statement | ModuleDeclaration): stmt is Exp
   return stmt.type === 'ExpressionStatement';
 }
 
-function isSpecialCallExpression(
-  expr: Expression
-): expr is CallExpression & {
+function isSpecialCallExpression(expr: Expression): expr is CallExpression & {
   arguments: [Literal, Expression, ClassExpression];
 } {
   return (