Merge pull request #287 from josemarluedke/feat/ref-util

feat: add ref util

packages/utilities/package.json

@@ -40,13 +40,13 @@
     "ember-source": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@ember/render-modifiers": "^2.1.0",
     "@ember/test-waiters": "^3.0.2",
     "@embroider/addon-shim": "^1.8.7",
     "@frontile/theme": "workspace:0.17.0-alpha.15",
     "ember-auto-import": "^2.7.2",
     "ember-element-helper": "^0.8.5",
-    "focus-visible": "^5.2.0"
+    "focus-visible": "^5.2.0",
+    "ember-modifier": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.24.0",

packages/utilities/src/components/collapsible.gts

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { buildWaiter } from '@ember/test-waiters';
 import { on } from '@ember/modifier';
-import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { modifier } from 'ember-modifier';
 import safeStyles from '../utils/safe-styles';
 
 const waiter = buildWaiter('@frontile/utilities:collapsible');
@@ -66,7 +66,14 @@ class Collapsible extends Component<CollapsibleSignature> {
     return safeStyles(styles);
   }
 
-  @action update(element: HTMLElement, [isOpen]: boolean[]): void {
+  hasSetupUpdate = false;
+  update = modifier((element: HTMLElement, [isOpen]: boolean[]) => {
+    // do not run update on the initial setup of modifier
+    if (!this.hasSetupUpdate) {
+      this.hasSetupUpdate = true;
+      return;
+    }
+
     if (this.isCurrentlyOpen !== !!isOpen) {
       this.waiterToken = waiter.beginAsync();
     }
@@ -76,7 +83,7 @@ class Collapsible extends Component<CollapsibleSignature> {
     } else {
       this.contract(element);
     }
-  }
+  });
 
   @action onTransitionEnd(event: TransitionEvent): void {
     if (
@@ -157,7 +164,7 @@ class Collapsible extends Component<CollapsibleSignature> {
     <div
       style={{this.styles}}
       ...attributes
-      {{didUpdate this.update @isOpen}}
+      {{this.update @isOpen}}
       {{on "transitionend" this.onTransitionEnd}}
     >
       {{yield}}

packages/utilities/src/index.ts

@@ -4,3 +4,4 @@ export * from './components/visually-hidden';
 export * from './components/collapsible';
 export * from './components/divider';
 export * from './components/spinner';
+export * from './utils/ref';

packages/utilities/src/utils/ref.ts

@@ -0,0 +1,23 @@
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+class State<T> {
+  @tracked element: T | undefined;
+}
+
+function ref<T extends Element = Element>() {
+  const state = new State<T>();
+  return {
+    get element(): T | undefined {
+      return state.element;
+    },
+    setup: modifier((el: T) => {
+      state.element = el;
+      return (): void => {
+        state.element = undefined;
+      };
+    })
+  };
+}
+
+export { ref };

packages/utilities/unpublished-development-types/index.d.ts

@@ -4,13 +4,10 @@
 
 import 'ember-source/types';
 import '@glint/environment-ember-template-imports';
-import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
 import type CoreRegistry from '../src/template-registry.ts';
 
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry
-    extends RenderModifiersRegistry,
-      CoreRegistry {
+  export default interface Registry extends CoreRegistry {
     // ...
   }
 }