cibernox · mkszepp · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
@@ -15,9 +15,7 @@ module.exports = {
   env: {
     browser: true,
   },
-  rules: {
-    'ember/no-runloop': 0,
-  },
+  rules: {},
   overrides: [
     // ts files
     {

diff --git a/docs/app/components/snippets/content-events-1.js b/docs/app/components/snippets/content-events-1.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { later, cancel } from '@ember/runloop';
+import { runTask, cancelTask } from 'ember-lifeline';
 
 export default class extends Component {
   notifications = [
@@ -18,7 +18,7 @@ export default class extends Component {
   @action
   open(dropdown) {
     if (this.closeTimer) {
-      cancel(this.closeTimer);
+      cancelTask(this, this.closeTimer);
       this.closeTimer = null;
     } else {
       dropdown.actions.open();
@@ -27,9 +27,13 @@ export default class extends Component {
 
   @action
   closeLater(dropdown) {
-    this.closeTimer = later(() => {
-      this.closeTimer = null;
-      dropdown.actions.close();
-    }, 200);
+    this.closeTimer = runTask(
+      this,
+      () => {
+        this.closeTimer = null;
+        dropdown.actions.close();
+      },
+      200,
+    );
   }
 }
diff --git a/docs/app/controllers/public-pages/docs/content-events.js b/docs/app/controllers/public-pages/docs/content-events.js
@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
-import { later, cancel } from '@ember/runloop';
+import { runTask, cancelTask } from 'ember-lifeline';
 import { action } from '@ember/object';
 import ContentEvents1Component from '../../../components/snippets/content-events-1';
 
@@ -20,7 +20,7 @@ export default class extends Controller {
   @action
   open(dropdown) {
     if (this.closeTimer) {
-      cancel(this.closeTimer);
+      cancelTask(this, this.closeTimer);
       this.closeTimer = null;
     } else {
       dropdown.actions.open();
@@ -29,9 +29,13 @@ export default class extends Controller {
 
   @action
   closeLater(dropdown) {
-    this.closeTimer = later(() => {
-      this.closeTimer = null;
-      dropdown.actions.close();
-    }, 200);
+    this.closeTimer = runTask(
+      this,
+      () => {
+        this.closeTimer = null;
+        dropdown.actions.close();
+      },
+      200,
+    );
   }
 }
diff --git a/docs/package.json b/docs/package.json
@@ -89,6 +89,7 @@
     "ember-code-snippet": "git://github.com/ef4/ember-code-snippet.git#d054b697098ad52481c94a952ccf8d89ba1f25fe",
     "ember-concurrency": "^4.0.2",
     "ember-fetch": "^8.1.2",
+    "ember-lifeline": "^7.0.0",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.1.0",
     "ember-page-title": "^8.2.3",

diff --git a/ember-basic-dropdown/.eslintrc.cjs b/ember-basic-dropdown/.eslintrc.cjs
@@ -15,9 +15,7 @@ module.exports = {
   env: {
     browser: true,
   },
-  rules: {
-    'ember/no-runloop': 0,
-  },
+  rules: {},
   overrides: [
     // ts files
     {

diff --git a/ember-basic-dropdown/package.json b/ember-basic-dropdown/package.json
@@ -72,6 +72,7 @@
     "decorator-transforms": "^1.1.0",
     "ember-element-helper": "^0.8.6",
     "ember-modifier": "^4.1.0",
+    "ember-lifeline": "^7.0.0",
     "ember-style-modifier": "^4.3.1",
     "ember-truth-helpers": "^4.0.3"
   },

diff --git a/ember-basic-dropdown/src/components/basic-dropdown-content.ts b/ember-basic-dropdown/src/components/basic-dropdown-content.ts
@@ -1,7 +1,6 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { join } from '@ember/runloop';
 import { getScrollParent } from '../utils/calculate-position.ts';
 import {
   distributeScroll,
@@ -12,6 +11,7 @@ import hasMoved from '../utils/has-moved.ts';
 import { isTesting } from '@embroider/macros';
 import { modifier } from 'ember-modifier';
 import type { Dropdown } from './basic-dropdown.ts';
+import { runTask } from 'ember-lifeline';
 
 export interface BasicDropdownContentSignature {
   Element: Element;
@@ -398,7 +398,13 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
       return;
     }
 
-    join(this.args.dropdown.actions.reposition);
+    runTask(this, () => {
+      if (!this.args.dropdown) {
+        return;
+      }
+
+      this.args.dropdown.actions.reposition();
+    });
   }
 
   @action

diff --git a/ember-basic-dropdown/src/components/basic-dropdown.ts b/ember-basic-dropdown/src/components/basic-dropdown.ts
@@ -2,14 +2,14 @@ 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,
   CalculatePositionResult,
   HorizontalPosition,
   VerticalPosition,
 } from '../utils/calculate-position.ts';
-import { schedule } from '@ember/runloop';
 import { getOwner } from '@ember/application';
 import type Owner from '@ember/owner';
 import type { ComponentLike } from '@glint/template';
@@ -162,7 +162,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
       this._previousDisabled !== UNINITIALIZED &&
       this._previousDisabled !== newVal
     ) {
-      schedule('actions', () => {
+      scheduleTask(this, 'actions', () => {
         if (newVal && this.publicAPI.isOpen) {
           // eslint-disable-next-line ember/no-side-effects
           this.isOpen = false;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-app/.eslintrc.js b/test-app/.eslintrc.js
@@ -15,9 +15,7 @@ module.exports = {
   env: {
     browser: true,
   },
-  rules: {
-    'ember/no-runloop': 0,
-  },
+  rules: {},
   overrides: [
     // ts files
     {

diff --git a/test-app/package.json b/test-app/package.json
@@ -80,6 +80,7 @@
     "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": "^2.1.2",
     "ember-modifier": "^4.1.0",
     "ember-page-title": "^8.2.3",

diff --git a/test-app/tests/integration/components/basic-dropdown-test.js b/test-app/tests/integration/components/basic-dropdown-test.js
@@ -1,4 +1,4 @@
-import { run, scheduleOnce } from '@ember/runloop';
+import { scheduleTask } from 'ember-lifeline';
 import { registerDeprecationHandler } from '@ember/debug';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
@@ -10,6 +10,7 @@ import {
   triggerEvent,
   waitUntil,
   find,
+  settled,
 } from '@ember/test-helpers';
 
 let deprecations = [];
@@ -663,7 +664,7 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     assert
       .dom('#dropdown-is-opened', this.element.getRootNode())
       .exists('The select is open');
-    run(() => this.set('isDisabled', true));
+    this.set('isDisabled', true);
     assert
       .dom('#dropdown-is-opened', this.element.getRootNode())
       .doesNotExist('The select is now closed');
@@ -675,7 +676,7 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     this.isDisabled = false;
     this.toggleDisabled = () => this.toggleProperty('isDisabled');
     this.registerAPI = (api) =>
-      scheduleOnce('actions', this, this.set, 'remoteController', api);
+      scheduleTask(this, 'actions', () => this.set('remoteController', api));
     await render(hbs`
       <BasicDropdown @disabled={{this.isDisabled}} @registerAPI={{this.registerAPI}} as |dropdown|>
         <dropdown.Trigger>Click me</dropdown.Trigger>
@@ -692,11 +693,11 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     assert
       .dom('#is-disabled', this.element.getRootNode())
       .doesNotExist('The select is enabled');
-    run(() => this.set('isDisabled', true));
+    this.set('isDisabled', true);
     assert
       .dom('#is-disabled', this.element.getRootNode())
       .exists('The select is disabled');
-    run(() => this.set('isDisabled', false));
+    this.set('isDisabled', false);
     assert
       .dom('#is-disabled', this.element.getRootNode())
       .doesNotExist('The select is enabled again');
@@ -805,9 +806,7 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       this.element.getRootNode().querySelector('.ember-basic-dropdown-trigger'),
     );
 
-    run(() => {
-      returnValue = remoteController.actions.reposition();
-    });
+    returnValue = remoteController.actions.reposition();
     assert.ok(Object.prototype.hasOwnProperty.call(returnValue, 'hPosition'));
     assert.ok(Object.prototype.hasOwnProperty.call(returnValue, 'vPosition'));
     assert.ok(Object.prototype.hasOwnProperty.call(returnValue, 'top'));
@@ -1337,9 +1336,9 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         'The style attribute is the expected one',
       );
 
-    run(() => {
-      publicApi.actions.reposition();
-    });
+    publicApi.actions.reposition();
+
+    await settled();
 
     assert
       .dom('.ember-basic-dropdown-content', this.element.getRootNode())