Modernize to @Tracked, other modern ember (#558)

* replace .set() with @Tracked

* fix missing tracked

* consolidate changelog

* conslidate again

* add missing tracked

CHANGELOG.md

@@ -1,10 +1,11 @@
 # Changelog
 
-### 4.0.0-beta.1
-  - Fix missing transform in NPM package.
-
-### 4.0.0-beta.0
-  - Convert to V2 Addon (#551)
+### 4.0.0 (unreleased)
+  - Ember Concurrency is now a V2 Embroider Addon (#551)
+    - BREAKING CHANGE: you must now register the Babel transform used by Ember Concurrency within consuming apps and addons
+      - See upgrade docs: https://ember-concurrency.com/docs/v4-upgrade
+  - The guides have been updated to reflect modern/best practices:
+    - Instead of using the `(perform)` helper, it is now recommended that the bound `.perform()` method on each Task be directly invoked in the template, e.g. `{{on "click" this.myTask.perform}}`, or, when arguments are present, `{{on "click" (fn this.myTask.perform 123 'foo')}}`
 
 ### 3.1.1
   - Add ember 5 as peerDependencies (#542)

packages/test-app/app/components/events-example/component.js

@@ -25,8 +25,6 @@ export default class EventsExampleComponent extends Component.extend(Evented) {
     }
   });
 
-  jQueryEvent = null;
-
   jQueryEventLoop = task(async () => {
     let $body = $('body');
     while (true) {
@@ -35,8 +33,6 @@ export default class EventsExampleComponent extends Component.extend(Evented) {
     }
   });
 
-  emberEvent = null;
-
   emberEventedLoop = task(async () => {
     while (true) {
       let event = await waitForEvent(this, 'fooEvent');

packages/test-app/app/components/task-function-syntax-2/component.js

@@ -1,9 +1,10 @@
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 
 export default class TaskFunctionSyntaxComponent2 extends Component {
   tagName = '';
-  status = null;
+  @tracked status = null;
 
   // BEGIN-SNIPPET task-function-syntax-2
   pickRandomNumbers = task(async () => {
@@ -12,7 +13,7 @@ export default class TaskFunctionSyntaxComponent2 extends Component {
       nums.push(Math.floor(Math.random() * 10));
     }
 
-    this.set('status', `My favorite numbers: ${nums.join(', ')}`);
+    this.status = `My favorite numbers: ${nums.join(', ')}`;
   });
   // END-SNIPPET
 }

packages/test-app/app/components/task-function-syntax-3/component.js

@@ -1,16 +1,17 @@
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 export default class TaskFunctionSyntaxComponent3 extends Component {
   tagName = '';
-  status = null;
+  @tracked status = null;
 
   // BEGIN-SNIPPET task-function-syntax-3
   myTask = task(async () => {
-    this.set('status', `Thinking...`);
+    this.status = `Thinking...`;
     let promise = timeout(1000).then(() => 123);
     let resolvedValue = await promise;
-    this.set('status', `The value is ${resolvedValue}`);
+    this.status = `The value is ${resolvedValue}`;
   });
   // END-SNIPPET
 }

packages/test-app/app/components/task-function-syntax-4/component.js

@@ -1,20 +1,21 @@
 import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 export default class TaskFunctionSyntaxComponent4 extends Component {
   tagName = '';
-  status = null;
+  @tracked status = null;
 
   // BEGIN-SNIPPET task-function-syntax-4
   myTask = task(async () => {
-    this.set('status', `Thinking...`);
+    this.status = `Thinking...`;
     try {
       await timeout(1000).then(() => {
         throw 'Ahhhhh!!!!';
       });
-      this.set('status', `This does not get used!`);
+      this.status = `This does not get used!`;
     } catch (e) {
-      this.set('status', `Caught value: ${e}`);
+      this.status = `Caught value: ${e}`;
     }
   });
   // END-SNIPPET

packages/test-app/app/components/task-lifecycle-events-example/component.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { addListener, removeListener } from '@ember/object/events';
+import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 // BEGIN-SNIPPET task-lifecycle-events
@@ -30,7 +31,7 @@ function loopingAjaxTask(id) {
 export default class TaskLifecycleEventsExample extends Component {
   tagName = '';
 
-  logs = [];
+  @tracked logs = [];
 
   constructor() {
     super(...arguments);
@@ -91,9 +92,7 @@ export default class TaskLifecycleEventsExample extends Component {
   @task({ on: 'init' }) task7 = loopingAjaxTask(7);
 
   log(color, message) {
-    let logs = this.logs;
-    logs.push({ color, message });
-    this.set('logs', logs.slice(-7));
+    this.logs = [...this.logs, { color, message }].slice(-7);
   }
 }
 // END-SNIPPET

packages/test-app/app/docs/cancelation/controller.js

@@ -1,28 +1,30 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { forever, task } from 'ember-concurrency';
 
 // BEGIN-SNIPPET cancelation
 export default class CancelationController extends Controller {
-  count = 0;
-  mostRecent = null;
+  @tracked count = 0;
+  @tracked mostRecent = null;
 
   myTask = task(async () => {
     try {
-      this.incrementProperty('count');
+      this.count += 1;
       await forever;
     } finally {
       // finally blocks always get called,
       // even when the task is being canceled
       this.decrementProperty('count');
+      this.count -= 1;
     }
   });
 
   @action
   performTask() {
     let task = this.myTask;
     let taskInstance = task.perform();
-    this.set('mostRecent', taskInstance);
+    this.mostRecent = taskInstance;
   }
 
   @action

packages/test-app/app/docs/child-tasks/controller.js

@@ -1,30 +1,31 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 import { restartableTask, task, timeout } from 'ember-concurrency';
 
 // BEGIN-SNIPPET child-tasks
 export default class ChildTasksController extends Controller {
-  status = 'Waiting to start';
+  @tracked status = 'Waiting to start';
 
   parentTask = restartableTask(async () => {
-    this.set('status', '1. Parent: one moment...');
+    this.status = '1. Parent: one moment...';
     await timeout(1000);
     let value = await this.childTask.perform();
-    this.set('status', `5. Parent: child says "${value}"`);
+    this.status = `5. Parent: child says "${value}"`;
     await timeout(1000);
-    this.set('status', '6. Done!');
+    this.status = '6. Done!';
   });
 
   childTask = task(async () => {
-    this.set('status', '2. Child: one moment...');
+    this.status = '2. Child: one moment...';
     await timeout(1000);
     let value = await this.grandchildTask.perform();
-    this.set('status', `4. Child: grandchild says "${value}"`);
+    this.status = `4. Child: grandchild says "${value}"`;
     await timeout(1000);
     return "What's up";
   });
 
   grandchildTask = task(async () => {
-    this.set('status', '3. Grandchild: one moment...');
+    this.status = '3. Grandchild: one moment...';
     await timeout(1000);
     return 'Hello';
   });

packages/test-app/app/docs/examples/joining-tasks/controller.js

@@ -4,12 +4,15 @@ import { randomWord } from 'test-app/utils';
 
 // BEGIN-SNIPPET joining-tasks
 import { task, timeout, all, race } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
 const methods = { all, race };
 
 export default class JoiningTasksController extends Controller {
-  childTasks = null;
-  colors = ['#ff8888', '#88ff88', '#8888ff'];
-  status = 'Waiting...';
+  @tracked childTasks = null;
+  @tracked colors = ['#ff8888', '#88ff88', '#8888ff'];
+  @tracked status = 'Waiting...';
+  @tracked id = null;
+  @tracked percent = null;
 
   parent = task({ restartable: true }, async (methodName) => {
     let allOrRace = methods[methodName];
@@ -19,10 +22,10 @@ export default class JoiningTasksController extends Controller {
       childTasks.push(this.child.perform(id));
     }
 
-    this.set('childTasks', childTasks);
-    this.set('status', 'Waiting for child tasks to complete...');
+    this.childTasks = childTasks;
+    this.status = 'Waiting for child tasks to complete...';
     let words = await allOrRace(childTasks);
-    this.set('status', `Done: ${makeArray(words).join(', ')}`);
+    this.status = `Done: ${makeArray(words).join(', ')}`;
   });
 
   @task({ enqueue: true, maxConcurrency: 3 })
@@ -31,14 +34,14 @@ export default class JoiningTasksController extends Controller {
     id: null,
 
     *perform(id) {
-      this.set('id', id);
+      this.id = id;
       while (this.percent < 100) {
         yield timeout(Math.random() * 100 + 100);
         let newPercent = Math.min(
           100,
           Math.floor(this.percent + Math.random() * 20),
         );
-        this.set('percent', newPercent);
+        this.percent = newPercent;
       }
       return randomWord();
     },

packages/test-app/app/docs/tutorial/refactor/template.hbs

@@ -122,8 +122,8 @@
   call right when the user navigates away, the component will be destroyed and
   the
   <code>findStores</code>
-  task will stop right where it is and will never hit the line of code with the
-  <code>this.set()</code>, thus avoiding the
+  task will stop right where it is and will never hit the line of code with
+  <code>this.result = result</code>, thus avoiding the
   <code>"set on destroyed object"</code>
   error.
 </p>

packages/test-app/app/helpers-test/controller.js

@@ -1,17 +1,18 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { forever, task } from 'ember-concurrency';
 
 export default class HelpersTestController extends Controller {
-  maybeNullTask = null;
-  status = null;
+  @tracked maybeNullTask = null;
+  @tracked status = null;
 
   myTask = task(async (...args) => {
     try {
-      this.set('status', args.join('-'));
+      this.status = args.join('-');
       await forever;
     } finally {
-      this.set('status', 'canceled');
+      this.status = 'canceled';
     }
   });
 
@@ -27,11 +28,11 @@ export default class HelpersTestController extends Controller {
   });
 
   someTask = task(async () => {
-    this.set('status', 'someTask');
+    this.status = 'someTask';
   });
 
   @action
   setupTask() {
-    this.set('maybeNullTask', this.someTask);
+    this.maybeNullTask = this.someTask;
   }
 }

packages/test-app/app/testing-ergo/foo/controller.js

@@ -1,20 +1,21 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 export default class FooController extends Controller {
-  isShowingButton = false;
+  @tracked isShowingButton = false;
 
   showButtonSoon = task(async () => {
-    this.set('isShowingButton', false);
+    this.isShowingButton = false;
     await timeout(200);
-    this.set('isShowingButton', true);
+    this.isShowingButton = true;
   });
 
   value = 0;
 
   @action
   setValue() {
-    this.set('value', 123);
+    this.value = 123;
   }
 }

packages/test-app/package.json

@@ -62,14 +62,13 @@
     "ember-cli-terser": "^4.0.2",
     "ember-code-snippet": "^3.0.0",
     "ember-concurrency": "workspace:*",
-    "ember-data": "~4.11.3",
     "ember-fetch": "^8.1.2",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.1.0",
     "ember-page-title": "^7.0.0",
     "ember-prism": "^0.13.0",
     "ember-qunit": "^6.2.0",
-    "ember-resolver": "^10.0.0",
+    "ember-resolver": "^11.0.0",
     "ember-sinon-qunit": "^7.4.0",
     "ember-source": "~4.11.0",
     "ember-source-channel-url": "^3.0.0",

packages/test-app/snippets/task-cancelation-example-1.js

@@ -1,8 +1,11 @@
 import Component from '@ember/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { task, timeout } from 'ember-concurrency';
 
 export default class TaskCancelationExampleComponent extends Component {
+  @tracked results = null;
+
   queryServer = task(async () => {
     await timeout(10000);
     return 123;
@@ -11,6 +14,6 @@ export default class TaskCancelationExampleComponent extends Component {
   @action
   async fetchResults() {
     let results = await this.queryServer.perform();
-    this.set('results', results);
+    this.results = results;
   }
 }