Replace render-modifier with ember-modifier

docs/app/components/liquid-bind-demo.js

@@ -38,8 +38,8 @@ export default class LiquidBindDemoComponent extends Component {
     this.seconds = now.format('ss');
   }
 
-  @action
-  destroyElement() {
+  willDestroy() {
+    super.willDestroy();
     clearInterval(this.interval);
   }
 

docs/app/templates/components/liquid-bind-demo.hbs

@@ -1,4 +1,4 @@
-<div class="liquid-bind-demo" {{will-destroy this.destroyElement}}>
+<div class="liquid-bind-demo">
   <h3>Demo</h3>
   <button id="force-tick" type="button" {{on "click" this.forceTick}}>Force Tick</button>
 

liquid-fire/package.json

@@ -25,12 +25,12 @@
     "prepare": "pnpm build"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.1.0",
     "@embroider/addon-shim": "^1.8.6",
     "@embroider/macros": "^1.13.1",
     "broccoli-funnel": "^3.0.8",
     "broccoli-merge-trees": "^4.2.0",
-    "broccoli-stew": "^3.0.0"
+    "broccoli-stew": "^3.0.0",
+    "ember-modifier": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
@@ -49,7 +49,8 @@
     "eslint-plugin-prettier": "^5.0.0",
     "prettier": "^3.0.1",
     "rollup": "^3.27.1",
-    "rollup-plugin-copy": "^3.4.0"
+    "rollup-plugin-copy": "^3.4.0",
+    "webpack": "^5.93.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

liquid-fire/src/components/liquid-child.hbs

@@ -1,7 +1,6 @@
 <div class="liquid-child {{@class}}" data-liquid-child={{@uniqueChildId}}
    ...attributes
-  {{did-insert this.setup}}
-  {{will-destroy this.destroyElement}}
+  {{this.setup}}
 >
   {{~yield~}}
 </div>

liquid-fire/src/components/liquid-child.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { all } from 'rsvp';
+import { modifier } from 'ember-modifier';
 import './liquid-child.css';
 
 export default class LiquidChildComponent extends Component {
@@ -11,9 +11,15 @@ export default class LiquidChildComponent extends Component {
   _waitingFor = [];
   _isLiquidChild = true;
   _serviceElement = null;
+  _didSetup = false;
+
+  setup = modifier((element) => {
+    if (this._didSetup) {
+      return;
+    }
+
+    this._didSetup = true;
 
-  @action
-  setup(element) {
     this.element = element;
 
     this._serviceElement = this.liquidFireChildren.register(
@@ -32,10 +38,10 @@ export default class LiquidChildComponent extends Component {
         }
       }
     });
-  }
+  });
 
-  @action
-  destroyElement() {
+  willDestroy() {
+    super.willDestroy();
     if (this._serviceElement) {
       this.liquidFireChildren.unregister(this._serviceElement);
       this._serviceElement = null;

liquid-fire/src/components/liquid-container.hbs

@@ -1,3 +1,3 @@
-<div class="liquid-container {{@class}}" ...attributes {{did-insert this.setup}}>
+<div class="liquid-container {{@class}}" ...attributes {{this.setup}}>
 	{{~yield this~}}
 </div>

liquid-fire/src/components/liquid-container.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
 import { measure, animateGrowth } from '../utils/animate';
 import './liquid-container.css';
 
@@ -9,6 +10,7 @@ export default class LiquidContainerComponent extends Component {
 
   _wasInserted = false;
   element = null;
+  _didSetup = false;
 
   get growDuration() {
     return this.args.growDuration || 250;
@@ -38,11 +40,16 @@ export default class LiquidContainerComponent extends Component {
     return this.args.growHeight !== undefined ? this.args.growHeight : true;
   }
 
-  @action
-  setup(element) {
+  setup = modifier((element) => {
+    if (this._didSetup) {
+      return;
+    }
+
+    this._didSetup = true;
+
     this.element = element;
     this._wasInserted = true;
-  }
+  });
 
   @action
   willTransition(versions) {

liquid-fire/src/components/liquid-measured.hbs

@@ -1,6 +1,3 @@
-<div
-	{{did-insert this.setup}}
-	{{will-destroy this.destroyElement}}
->
+<div {{this.setup}}>
 	{{yield}}
 </div>

liquid-fire/src/components/liquid-measured.js

@@ -3,20 +3,27 @@ import { inject as service } from '@ember/service';
 import { bind } from '@ember/runloop';
 import Component from '@glimmer/component';
 import { MutationObserver } from '../index';
-import { action } from '@ember/object';
 import { measure } from '../utils/animate';
+import { modifier } from 'ember-modifier';
 
 const WINDOW_RESIZE_THROTTLE_DURATION = 100;
 
 export default class LiquidMeasuredComponent extends Component {
+  _didSetup = false;
+
   constructor() {
     super(...arguments);
 
     // this._destroyOnUnload = bind(this, this._destroyOnUnload);
   }
 
-  @action
-  setup(element) {
+  setup = modifier((element) => {
+    if (this._didSetup) {
+      return;
+    }
+
+    this._didSetup = true;
+
     this.element = element;
 
     const self = this;
@@ -44,10 +51,11 @@ export default class LiquidMeasuredComponent extends Component {
     });
     // Chrome Memory Leak: https://bugs.webkit.org/show_bug.cgi?id=93661
     // window.addEventListener('unload', this._destroyOnUnload);
-  }
+  });
+
+  willDestroy() {
+    super.willDestroy();
 
-  @action
-  destroyElement() {
     if (this.observer) {
       this.observer.disconnect();
     }

liquid-fire/src/components/liquid-outlet.hbs

@@ -19,7 +19,8 @@
   >
   {{~!~}}
     {{~#-with-dynamic-vars outletState=version~}}
-      {{outlet}}
+      {{!-- template-lint-disable no-outlet-outside-routes --}}
+      {{~outlet~}}
     {{~/-with-dynamic-vars~}}
   {{~!~}}
   </LiquidBind>

liquid-fire/src/components/liquid-spacer.hbs

@@ -1,6 +1,6 @@
 <div class={{@class}}
   ...attributes
-  {{did-insert this.setup}}
+  {{this.setup}}
 >
   <LiquidMeasured @didMeasure={{this.sizeChanged}}>
     {{yield}}

liquid-fire/src/components/liquid-spacer.js

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { modifier } from 'ember-modifier';
 import { animateGrowth, measure } from '../utils/animate';
 
 export default class LiquidOutletComponent extends Component {
   @service('liquid-fire-transitions') transitionMap;
 
   element = null;
+  _didSetup = false;
 
   get enabled() {
     return this.args.enabled || true;
@@ -40,8 +42,13 @@ export default class LiquidOutletComponent extends Component {
     return this.args.growHeight !== undefined ? this.args.growHeight : true;
   }
 
-  @action
-  setup(element) {
+  setup = modifier((element) => {
+    if (this._didSetup) {
+      return;
+    }
+
+    this._didSetup = true;
+
     this.element = element;
 
     const elt = element;
@@ -56,7 +63,7 @@ export default class LiquidOutletComponent extends Component {
     if (this.growHeight) {
       elt.style.height = `${measurements.height}px`;
     }
-  }
+  });
 
   @action
   sizeChanged(measurements) {

liquid-fire/src/components/liquid-sync.hbs

@@ -1,5 +1,3 @@
+{{!-- template-lint-disable no-action --}}
 {{yield (action "ready")~}}
-<div class="liquid-sync"
-	{{did-insert this.setup}}
-	{{will-destroy this.destroyElement}}
-></div>
+<div class="liquid-sync" {{this.setup}}></div>

liquid-fire/src/components/liquid-sync.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { defer } from 'rsvp';
 import { inject as service } from '@ember/service';
+import { modifier } from 'ember-modifier';
 import './liquid-sync.css';
 
 export default class LiquidSyncComponent extends Component {
@@ -10,14 +11,8 @@ export default class LiquidSyncComponent extends Component {
 
   _lfDefer = [];
 
-  @action
-  setup(element) {
-    this.element = element;
-    this.pauseLiquidFire();
-  }
-
-  @action
-  destroyElement() {
+  willDestroy() {
+    super.willDestroy();
     this.ready();
   }
 
@@ -26,6 +21,17 @@ export default class LiquidSyncComponent extends Component {
     this.resumeLiquidFire();
   }
 
+  setup = modifier((element) => {
+    if (this._didSetup) {
+      return;
+    }
+
+    this._didSetup = true;
+
+    this.element = element;
+    this.pauseLiquidFire();
+  });
+
   pauseLiquidFire() {
     const context = this.liquidFireChildren.closest(this.element);
     if (context) {

liquid-fire/src/components/liquid-versions.hbs

@@ -11,6 +11,6 @@
   {{~/if}}
 {{~/each~}}
 <div class="liquid-versions"
-  {{did-insert this.appendVersion}}
-  {{did-update this.appendVersion @value @use @rules @matchContext @versionEquality @renderWhenFalse @class @notify}}
+  {{this.appendVersion}}
+  {{this.appendVersion @value @use @rules @matchContext @versionEquality @renderWhenFalse @class @notify}}
 ></div>

liquid-fire/src/components/liquid-versions.js

@@ -5,16 +5,27 @@ import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
+import { modifier } from 'ember-modifier';
 import './liquid-versions.css';
 
 export default class LiquidVersionsComponent extends Component {
   @service('liquid-fire-transitions') transitionMap;
 
-  @tracked versions = null;
+  @tracked _versions = null;
 
-  @action
-  appendVersion() {
-    let versions = this.versions;
+  __versions = null;
+
+  get versions() {
+    return this._versions;
+  }
+
+  set versions(v) {
+    this._versions = v;
+    this.__versions = v;
+  }
+
+  appendVersion = modifier(() => {
+    let versions = this.__versions;
     let firstTime = false;
     const newValue = this.args.value;
     let oldValue;
@@ -36,7 +47,7 @@ export default class LiquidVersionsComponent extends Component {
         // equal for our purposes that are not `===`. In that case, we
         // still need to thread updated values through to our children
         // so they have their own opportunity to react.
-        set(versions[0], 'value', newValue);
+        set(this.versions[0], 'value', newValue);
       }
       return;
     }
@@ -50,21 +61,21 @@ export default class LiquidVersionsComponent extends Component {
 
     this.firstTime = firstTime;
     if (firstTime) {
-      set(this, 'versions', versions);
+      this.versions = versions;
     }
 
     if (!(newValue || this.args.renderWhenFalse || firstTime)) {
       this._transition();
     }
-  }
+  });
 
   _transition() {
     assert(
       `LiquidVersions: @containerElement is required!`,
       !!this.args.containerElement,
     );
 
-    const versions = this.versions;
+    const versions = this.__versions;
     const firstTime = this.firstTime;
     this.firstTime = false;