Merge pull request #714 from gilest/chore/replace-render-modifiers

Drop `@ember/render-modifiers`
cibernox · Nov 13, 2023 · c7516fa · c7516fa
2 parents 4f460d2 + 0f89589
commit c7516fa
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 67 deletions.
diff --git a/addon/components/basic-dropdown-content.hbs b/addon/components/basic-dropdown-content.hbs
@@ -22,13 +22,10 @@
             @otherStyles
             this.positionStyles
           }}
-          {{did-insert this.setup}}
-          {{did-insert @dropdown.actions.reposition}}
-          {{did-insert this.setupMutationObserver}}
-          {{did-insert this.animateIn}}
-          {{will-destroy this.teardownMutationObserver}}
-          {{will-destroy this.animateOut}}
-          {{will-destroy this.teardown}}
+          {{this.respondToEvents}}
+          {{this.initiallyReposition}}
+          {{this.observeMutations}}
+          {{this.animateInAndOut}}
           {{on 'focusin' (fn (or @onFocusIn this.noop) @dropdown)}}
           {{on 'focusout' (fn (or @onFocusOut this.noop) @dropdown)}}
           {{on 'mouseenter' (fn (or @onMouseEnter this.noop) @dropdown)}}

diff --git a/addon/components/basic-dropdown-content.ts b/addon/components/basic-dropdown-content.ts
@@ -11,6 +11,7 @@ import {
 import hasMoved from '../utils/has-moved';
 import { Dropdown } from './basic-dropdown';
 import { isTesting } from '@embroider/macros';
+import { modifier } from 'ember-modifier';
 
 interface Args {
   animationEnabled?: boolean;
@@ -66,7 +67,7 @@ export default class BasicDropdownContent extends Component<Args> {
 
     return animationEnabledArg && !isTesting();
   }
-  
+
   get positionStyles(): Record<string, string> {
     const style: Record<string, string> = {};
     if (this.args.top !== undefined) {
@@ -97,8 +98,7 @@ export default class BasicDropdownContent extends Component<Args> {
    */
   noop(): void {}
 
-  @action
-  setup(dropdownElement: Element): void {
+  respondToEvents = modifier((dropdownElement: Element): () => void => {
     let triggerElement = document.querySelector(
       `[data-ebd-id=${this.args.dropdown.uniqueId}-trigger]`
     );
@@ -137,61 +137,65 @@ export default class BasicDropdownContent extends Component<Args> {
       this.scrollableAncestors = getScrollableAncestors(triggerElement);
     }
     this.addScrollHandling(dropdownElement);
-  }
-
-  @action
-  teardown(): void {
-    this.removeGlobalEvents();
-    this.removeScrollHandling();
-    this.scrollableAncestors = [];
-
-    document.removeEventListener(
-      this.args.rootEventType,
-      this.handleRootMouseDown as RootMouseDownHandler,
-      true
-    );
+    return () => {
+      this.removeGlobalEvents();
+      this.removeScrollHandling();
+      this.scrollableAncestors = [];
 
-    if (this.isTouchDevice) {
-      document.removeEventListener('touchstart', this.touchStartHandler, true);
       document.removeEventListener(
-        'touchend',
+        this.args.rootEventType,
         this.handleRootMouseDown as RootMouseDownHandler,
         true
       );
+
+      if (this.isTouchDevice) {
+        document.removeEventListener('touchstart', this.touchStartHandler, true);
+        document.removeEventListener(
+          'touchend',
+          this.handleRootMouseDown as RootMouseDownHandler,
+          true
+        );
+      }
     }
-  }
+  // @ts-ignore
+  }, { eager: false });
 
-  @action
-  animateIn(dropdownElement: Element): void {
-    if (!this.animationEnabled) return;
-    waitForAnimations(dropdownElement, () => {
-      this.animationClass = this.transitionedInClass;
+  initiallyReposition = modifier(() => {
+    // Escape autotracking frame and avoid backtracking re-render
+    Promise.resolve().then(() => {
+      this.args.dropdown.actions.reposition()
     });
-  }
+  // @ts-ignore
+  }, { eager: false });
 
-  @action
-  animateOut(dropdownElement: Element): void {
-    if (!this.animationEnabled) return;
-    let parentElement =
-      dropdownElement.parentElement ?? this.destinationElement;
-    if (parentElement === null) return;
-    if (this.args.renderInPlace) {
-      parentElement = parentElement.parentElement;
-    }
-    if (parentElement === null) return;
-    let clone = dropdownElement.cloneNode(true) as Element;
-    clone.id = `${clone.id}--clone`;
-    clone.classList.remove(...this.transitioningInClass.split(' '));
-    clone.classList.add(...this.transitioningOutClass.split(' '));
-    parentElement.appendChild(clone);
-    this.animationClass = this.transitioningInClass;
-    waitForAnimations(clone, function () {
-      (parentElement as HTMLElement).removeChild(clone);
+  animateInAndOut = modifier((dropdownElement: Element): () => void => {
+    if (!this.animationEnabled) return () => {};
+    waitForAnimations(dropdownElement, () => {
+      this.animationClass = this.transitionedInClass;
     });
-  }
+    return () => {
+      if (!this.animationEnabled) return;
+      let parentElement =
+        dropdownElement.parentElement ?? this.destinationElement;
+      if (parentElement === null) return;
+      if (this.args.renderInPlace) {
+        parentElement = parentElement.parentElement;
+      }
+      if (parentElement === null) return;
+      let clone = dropdownElement.cloneNode(true) as Element;
+      clone.id = `${clone.id}--clone`;
+      clone.classList.remove(...this.transitioningInClass.split(' '));
+      clone.classList.add(...this.transitioningOutClass.split(' '));
+      parentElement.appendChild(clone);
+      this.animationClass = this.transitioningInClass;
+      waitForAnimations(clone, function () {
+        (parentElement as HTMLElement).removeChild(clone);
+      });
+    };
+  // @ts-ignore
+  }, { eager: false });
 
-  @action
-  setupMutationObserver(dropdownElement: Element): void {
+  observeMutations = modifier((dropdownElement: Element): () => void => {
     this.mutationObserver = new MutationObserver((mutations) => {
       let shouldReposition = mutations.some(
         (record: MutationRecord) =>
@@ -214,15 +218,14 @@ export default class BasicDropdownContent extends Component<Args> {
       childList: true,
       subtree: true,
     });
-  }
-
-  @action
-  teardownMutationObserver(): void {
-    if (this.mutationObserver !== undefined) {
-      this.mutationObserver.disconnect();
-      this.mutationObserver = undefined;
+    return () => {
+      if (this.mutationObserver !== undefined) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver = undefined;
+      }
     }
-  }
+  // @ts-ignore
+  }, { eager: false });
 
   @action
   touchStartHandler(): void {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -100,7 +100,6 @@
     "test": "tests"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.0.5",
     "@embroider/macros": "^1.12.0",
     "@embroider/util": "^1.11.0",
     "@glimmer/component": "^1.1.2",

diff --git a/tests/dummy/app/components/autofocus-input.js b/tests/dummy/app/components/autofocus-input.js
@@ -1,7 +1,8 @@
 import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
 export default class extends Component {
-  focusInput(input) {
+  focusInput = modifier((input) => {
     input.focus();
-  }
+  });
 }
diff --git a/tests/dummy/app/templates/components/autofocus-input.hbs b/tests/dummy/app/templates/components/autofocus-input.hbs
@@ -1 +1 @@
-<input type='text' {{did-insert this.focusInput}} ...attributes />
+<input type='text' {{this.focusInput}} ...attributes />
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<input type='text' {{did-insert this.focusInput}} ...attributes />
		<input type='text' {{this.focusInput}} ...attributes />