upgrade deps / remove render modifiers

.eslintignore

@@ -3,6 +3,7 @@
 /vendor/
 
 # compiled output
+/declarations/
 /dist/
 /tmp/
 

.github/workflows/ci.yml

@@ -57,8 +57,8 @@ jobs:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-4.8
           - ember-lts-4.12
+          - ember-lts-5.4
           - ember-release
           - ember-beta
           - ember-canary

.npmignore

@@ -28,6 +28,8 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/tsconfig.declarations.json
+/tsconfig.json
 /yarn-error.log
 /yarn.lock
 .gitkeep

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.6.6
+
+- Run ember-cli-update
+- Upgrade dependencies
+
 ## 4.6.5
 
 - Correct app re-exports

addon/components/expander/content.gjs

@@ -1,18 +1,25 @@
 /* https://github.com/ember-cli/eslint-plugin-ember/issues/2035 */
 /* eslint-disable no-unused-expressions */
 
-import didInsert from '@ember/render-modifiers/modifiers/did-insert';
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
-<template>
-  {{! template-lint-disable no-inline-styles }}
-  {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
+export default class DragulaContainer extends Component {
+  lifecycle = modifier((element) => {
+    this.args.onInsert(element);
+  });
 
-  <div
-    class="expander__content"
-    style={{@style}}
-    ...attributes
-    {{didInsert @onInsert}}
-  >
-    {{yield}}
-  </div>
-</template>
+  <template>
+    {{! template-lint-disable no-inline-styles }}
+    {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
+
+    <div
+      class="expander__content"
+      style={{@style}}
+      {{this.lifecycle}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+}

addon/components/expander/index.gjs

@@ -1,3 +1,5 @@
+/* eslint-disable ember/no-runloop */
+
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { hash } from '@ember/helper';
@@ -8,8 +10,7 @@ import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import { waitForAnimation } from '@zestia/animation-utils';
 import Component from '@glimmer/component';
-import didInsert from '@ember/render-modifiers/modifiers/did-insert';
-import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { modifier } from 'ember-modifier';
 import ExpanderButton from '@zestia/ember-expander/components/expander/button';
 import ExpanderContent from '@zestia/ember-expander/components/expander/content';
 const { assign } = Object;
@@ -23,6 +24,7 @@ export default class ExpanderComponent extends Component {
   Button;
   Content;
   contentElement = null;
+  didSetUp;
   id = guidFor(this);
 
   registerComponents = (components) => {
@@ -39,14 +41,23 @@ export default class ExpanderComponent extends Component {
     return htmlSafe(style);
   }
 
+  lifecycle = modifier((element, [expanded]) => {
+    if (!this.didSetUp) {
+      this.handleInsertElement();
+      this.didSetUp = true;
+    }
+
+    this.handleUpdatedArguments({ expanded });
+  });
+
   @action
   handleInsertElement() {
     this.args.onReady?.(this.api);
   }
 
   @action
-  handleUpdatedArguments() {
-    next(() => this._handleManualState());
+  handleUpdatedArguments({ expanded }) {
+    next(() => this._handleManualState(expanded));
   }
 
   @action
@@ -128,10 +139,10 @@ export default class ExpanderComponent extends Component {
     this.maxHeight = null;
   }
 
-  _handleManualState() {
-    if (this.args.expanded === true) {
+  _handleManualState(bool) {
+    if (bool === true) {
       this.expand();
-    } else if (this.args.expanded === false) {
+    } else if (bool === false) {
       this.collapse();
     }
   }
@@ -188,8 +199,7 @@ export default class ExpanderComponent extends Component {
       data-expanded="{{this.isExpanded}}"
       role="region"
       ...attributes
-      {{didInsert this.handleInsertElement}}
-      {{didUpdate this.handleUpdatedArguments @expanded}}
+      {{this.lifecycle @expanded}}
     >
       {{yield this.api}}
     </div>