modifiers

package.json

@@ -2,15 +2,14 @@
   "author": "Zestia",
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@ember/render-modifiers": "^2.1.0",
     "@ember/test-waiters": "^3.1.0",
     "@embroider/util": "^1.12.1",
     "@zestia/animation-utils": "^5.0.5",
     "@zestia/position-utils": "^7.0.6",
     "ember-auto-import": "^2.7.4",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-modifier": "^4.1.0",
+    "ember-modifier": "^4.2.0",
     "ember-template-imports": "^4.0.0"
   },
   "description": "Render tooltips asyncronously on hover",
@@ -93,7 +92,7 @@
     "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
     "lint:css": "stylelint '**/*.{css,scss}'",
     "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
-    "lint:fix": "npm run lint:css:fix; npm run lint:hbs:fix; npm run lint:js:fix; npm run lint:intl:fix; npm run lint:prettier:fix",
+    "lint:fix": "npm run lint:css:fix; npm run lint:hbs:fix; npm run lint:js:fix; npm run lint:prettier:fix",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",

tests/dummy/app/controllers/destination.js

@@ -1,12 +1,9 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
 
 export default class InElementController extends Controller {
   @tracked elsewhere;
 
-  @action
-  registerElsewhere(element) {
-    this.elsewhere = element;
-  }
+  registerElsewhere = modifier((element) => (this.elsewhere = element));
 }

tests/dummy/app/templates/destination.hbs

@@ -1,5 +1,5 @@
 <p>
-  The tooltip is output to a specific element in the DOM
+  The tooltip is output to a specific element in the DOM (view source).
 </p>
 
 <div>
@@ -10,6 +10,6 @@
   </Tooltip>
 </div>
 
-<div id="elsewhere" {{did-insert this.registerElsewhere}}>
+<div id="elsewhere" {{this.registerElsewhere}}>
   {{! tooltip rendered here }}
 </div>

tests/dummy/config/ember-cli-update.json

@@ -10,9 +10,7 @@
           "outputRepo": "https://github.com/ember-cli/ember-addon-output",
           "codemodsSource": "ember-addon-codemods-manifest@1",
           "isBaseBlueprint": true,
-          "options": [
-            "--no-welcome"
-          ]
+          "options": ["--no-welcome"]
         }
       ]
     }

tests/integration/components/tooltip/attach-to-test.gjs

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
-import { render, rerender, triggerEvent } from '@ember/test-helpers';
+import { render, settled, triggerEvent } from '@ember/test-helpers';
 import { tracked } from '@glimmer/tracking';
 import { assertPosition } from 'dummy/tests/integration/components/tooltip/helpers';
 import Tooltip from '@zestia/ember-async-tooltips/components/tooltip';
@@ -39,7 +39,8 @@ module('tooltip | attach to', function (hooks) {
 
     state.attachTo = '#two';
 
-    await rerender();
+    await settled();
+    await new Promise(requestAnimationFrame);
 
     assertPosition('.tooltip', { left: 37, top: 42 });
   });

tests/integration/components/tooltip/cancelling-test.gjs

@@ -12,7 +12,7 @@ module('tooltip | cancelling', function (hooks) {
     assert.expect(1);
 
     const state = new (class {
-      @tracked show = '#one';
+      @tracked show = true;
     })();
 
     await render(<template>

tests/integration/components/tooltip/destination-test.gjs

@@ -15,9 +15,7 @@ module('tooltip | destination', function (hooks) {
       @tracked elsewhere;
     })();
 
-    const register = modifier((element) => (state.elsewhere = element), {
-      eager: false
-    });
+    const register = modifier((element) => (state.elsewhere = element));
 
     await render(<template>
       <div>

tests/integration/components/tooltip/eager-test.gjs

@@ -45,7 +45,7 @@ module('tooltip | eager loading', function (hooks) {
 
     timer.stop();
 
-    timer.assertBetween(300, 350); // animation duration
+    timer.assertBetween(280, 350); // animation duration
   });
 
   test('load time is more than the show delay', async function (assert) {

tests/integration/components/tooltip/helpers.gjs

@@ -16,7 +16,10 @@ export class Timer {
   }
 
   assertBetween(lower, upper) {
-    assert.ok(this.time >= lower && this.time <= upper);
+    assert.ok(
+      this.time >= lower && this.time <= upper,
+      `expected ${this.time} to be between ${lower} and ${upper}`
+    );
   }
 }
 

tests/integration/components/tooltip/lazy-test.gjs

@@ -55,7 +55,7 @@ module('tooltip | lazy loading', function (hooks) {
 
     timer.stop();
 
-    timer.assertBetween(250, 300); // animation duration
+    timer.assertBetween(240, 300); // animation duration
   });
 
   test('load time is more than the show delay', async function (assert) {

tests/integration/components/tooltip/rendering-test.gjs

@@ -59,7 +59,7 @@ module('tooltip | rendering', function (hooks) {
 
     await triggerEvent('.tooltipper', 'mouseenter');
 
-    const tooltip = tooltipService.tooltips[0];
+    const [tooltip] = tooltipService.tooltips;
     const willHideTooltip = tooltip.hide();
 
     triggerEvent('.tooltipper', 'mouseenter');