Remove use of ember-lifeline (#1002)

Author: bertdeblock

docs/app/components/snippets/content-events-1.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { runTask, cancelTask } from 'ember-lifeline';
+import { task, timeout } from 'ember-concurrency';
 
 export default class extends Component {
   notifications = [
@@ -17,23 +17,17 @@ export default class extends Component {
 
   @action
   open(dropdown) {
-    if (this.closeTimer) {
-      cancelTask(this, this.closeTimer);
-      this.closeTimer = null;
-    } else {
-      dropdown.actions.open();
-    }
+    this.closeLaterTask.cancelAll();
+    dropdown.actions.open();
   }
 
   @action
   closeLater(dropdown) {
-    this.closeTimer = runTask(
-      this,
-      () => {
-        this.closeTimer = null;
-        dropdown.actions.close();
-      },
-      200,
-    );
+    this.closeLaterTask.perform(dropdown);
   }
+
+  closeLaterTask = task(async (dropdown) => {
+    await timeout(200);
+    dropdown.actions.close();
+  });
 }

docs/app/controllers/public-pages/docs/content-events.js

@@ -1,41 +1,6 @@
 import Controller from '@ember/controller';
-import { runTask, cancelTask } from 'ember-lifeline';
-import { action } from '@ember/object';
 import ContentEvents1Component from '../../../components/snippets/content-events-1';
 
 export default class extends Controller {
   contentEvents1Component = ContentEvents1Component;
-
-  notifications = [
-    { text: 'Edward' },
-    { text: 'Jonathan' },
-    { text: 'Tom' },
-    { text: 'Eric' },
-  ];
-
-  prevent(e) {
-    return e.stopImmediatePropagation();
-  }
-
-  @action
-  open(dropdown) {
-    if (this.closeTimer) {
-      cancelTask(this, this.closeTimer);
-      this.closeTimer = null;
-    } else {
-      dropdown.actions.open();
-    }
-  }
-
-  @action
-  closeLater(dropdown) {
-    this.closeTimer = runTask(
-      this,
-      () => {
-        this.closeTimer = null;
-        dropdown.actions.close();
-      },
-      200,
-    );
-  }
 }

docs/package.json

@@ -73,7 +73,6 @@
     "ember-code-snippet": "git://github.com/ef4/ember-code-snippet.git#d054b697098ad52481c94a952ccf8d89ba1f25fe",
     "ember-concurrency": "^4.0.4",
     "ember-fetch": "^8.1.2",
-    "ember-lifeline": "^7.0.0",
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.2.0",
     "ember-page-title": "^9.0.1",

ember-basic-dropdown/package.json

@@ -68,7 +68,6 @@
     "decorator-transforms": "^2.3.0",
     "ember-element-helper": "^0.8.7",
     "ember-modifier": "^4.2.0",
-    "ember-lifeline": "^7.0.0",
     "ember-style-modifier": "^4.4.0",
     "ember-truth-helpers": "^4.0.3"
   },

ember-basic-dropdown/src/components/basic-dropdown-content.ts

@@ -11,7 +11,6 @@ import hasMoved from '../utils/has-moved.ts';
 import { isTesting } from '@embroider/macros';
 import { modifier } from 'ember-modifier';
 import type { Dropdown, TRootEventType } from './basic-dropdown.ts';
-import { runTask } from 'ember-lifeline';
 
 export interface BasicDropdownContentSignature {
   Element: Element;
@@ -205,11 +204,8 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
         );
       }
 
-      window.addEventListener('resize', this.runloopAwareRepositionBound);
-      window.addEventListener(
-        'orientationchange',
-        this.runloopAwareRepositionBound,
-      );
+      window.addEventListener('resize', this.repositionBound);
+      window.addEventListener('orientationchange', this.repositionBound);
 
       if (this.isTouchDevice) {
         document.addEventListener(
@@ -350,7 +346,7 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
         }
 
         if (shouldReposition) {
-          this.runloopAwareReposition();
+          this.reposition();
         }
       });
       this.mutationObserver.observe(dropdownElement, {
@@ -405,31 +401,22 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
   }
 
   @action
-  runloopAwareReposition(): void {
+  reposition(): void {
     if (!this.args.dropdown) {
       return;
     }
 
-    runTask(this, () => {
-      if (!this.args.dropdown) {
-        return;
-      }
-
-      this.args.dropdown.actions.reposition();
-    });
+    this.args.dropdown.actions.reposition();
   }
 
   @action
   removeGlobalEvents(): void {
-    window.removeEventListener('resize', this.runloopAwareRepositionBound);
-    window.removeEventListener(
-      'orientationchange',
-      this.runloopAwareRepositionBound,
-    );
+    window.removeEventListener('resize', this.repositionBound);
+    window.removeEventListener('orientationchange', this.repositionBound);
   }
 
   touchMoveHandlerBound = (e: TouchEvent) => this.touchMoveHandler(e);
-  runloopAwareRepositionBound = () => this.runloopAwareReposition();
+  repositionBound = () => this.reposition();
   touchStartHandlerBound = () => this.touchStartHandler();
 
   // Methods
@@ -522,15 +509,15 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
   // These two functions wire up scroll handling if `preventScroll` is false.
   // These trigger reposition of the dropdown.
   addScrollEvents(): void {
-    window.addEventListener('scroll', this.runloopAwareRepositionBound);
+    window.addEventListener('scroll', this.repositionBound);
     this.scrollableAncestors.forEach((el) => {
-      el.addEventListener('scroll', this.runloopAwareRepositionBound);
+      el.addEventListener('scroll', this.repositionBound);
     });
   }
   removeScrollEvents(): void {
-    window.removeEventListener('scroll', this.runloopAwareRepositionBound);
+    window.removeEventListener('scroll', this.repositionBound);
     this.scrollableAncestors.forEach((el) => {
-      el.removeEventListener('scroll', this.runloopAwareRepositionBound);
+      el.removeEventListener('scroll', this.repositionBound);
     });
   }
 }

ember-basic-dropdown/src/components/basic-dropdown.ts

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { scheduleTask } from 'ember-lifeline';
 import calculatePosition from '../utils/calculate-position.ts';
 import type {
   CalculatePosition,
@@ -12,6 +11,7 @@ import type {
 } from '../utils/calculate-position.ts';
 import { getOwner } from '@ember/application';
 import type Owner from '@ember/owner';
+import { schedule } from '@ember/runloop';
 import type { ComponentLike } from '@glint/template';
 import type { BasicDropdownTriggerSignature } from './basic-dropdown-trigger.ts';
 import type { BasicDropdownContentSignature } from './basic-dropdown-content.ts';
@@ -166,7 +166,8 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
       this._previousDisabled !== UNINITIALIZED &&
       this._previousDisabled !== newVal
     ) {
-      scheduleTask(this, 'actions', () => {
+      // eslint-disable-next-line ember/no-runloop
+      schedule('actions', () => {
         if (newVal && this.publicAPI.isOpen) {
           // eslint-disable-next-line ember/no-side-effects
           this.isOpen = false;

pnpm-lock.yaml

@@ -70,7 +70,6 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-fetch": "^8.1.2",
-    "ember-lifeline": "^7.0.0",
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.2.0",
     "ember-page-title": "^9.0.1",

test-app/package.json

@@ -1,4 +1,3 @@
-import { scheduleTask } from 'ember-lifeline';
 import { registerDeprecationHandler } from '@ember/debug';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
@@ -675,8 +674,7 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
     this.isDisabled = false;
     this.toggleDisabled = () => this.toggleProperty('isDisabled');
-    this.registerAPI = (api) =>
-      scheduleTask(this, 'actions', () => this.set('remoteController', api));
+    this.registerAPI = (api) => this.set('remoteController', api);
     await render(hbs`
       <BasicDropdown @disabled={{this.isDisabled}} @registerAPI={{this.registerAPI}} as |dropdown|>
         <dropdown.Trigger>Click me</dropdown.Trigger>

test-app/tests/integration/components/basic-dropdown-test.js

@@ -1,6 +1,5 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { runTask } from 'ember-lifeline';
 import { hbs } from 'ember-cli-htmlbars';
 import { render, click, triggerEvent, settled } from '@ember/test-helpers';
 
@@ -563,13 +562,11 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         <div id="content-target-div"></div>
       </BasicDropdownContent>
     `);
-    await runTask(this, () => {
-      let target = this.element
-        .getRootNode()
-        .querySelector('#content-target-div');
-      let span = document.createElement('SPAN');
-      target.appendChild(span);
-    });
+    let target = this.element
+      .getRootNode()
+      .querySelector('#content-target-div');
+    let span = document.createElement('SPAN');
+    target.appendChild(span);
     await settled();
     assert.strictEqual(repositions, 2, 'It was repositioned twice');
   });
@@ -595,9 +592,7 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         {{/if}}
       </BasicDropdownContent>
     `);
-    await runTask(this, () => {
-      this.set('divVisible', true);
-    });
+    this.set('divVisible', true);
     await settled();
     assert.strictEqual(repositions, 2, 'It was repositioned twice');
   });
@@ -631,13 +626,11 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         <div id="content-target-div"></div>
       </BasicDropdownContent>
     `);
-    runTask(this, () => {
-      let target = this.element
-        .getRootNode()
-        .querySelector('#content-target-div');
-      let span = document.createElement('SPAN');
-      target.appendChild(span);
-    });
+    let target = this.element
+      .getRootNode()
+      .querySelector('#content-target-div');
+    let span = document.createElement('SPAN');
+    target.appendChild(span);
   });
 
   test('A renderInPlace component is repositioned if the window scrolls', async function (assert) {