fix(modifier): ensure compatibility with ember-modifier v4

adopted-ember-addons · Sep 12, 2022 · 665d5b7 · 665d5b7
1 parent 9a3fae6
commit 665d5b7
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@embroider/addon-shim": "^0.50.2",
-    "ember-modifier": "^3.0.0"
+    "ember-modifier": "^3.2.7"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

diff --git a/src/components/pikaday-inputless.js b/src/components/pikaday-inputless.js
@@ -6,8 +6,11 @@ export default class extends Component {
   @tracked container;
   constructor(owner, args) {
     super(owner, args);
-    this.setContainer = modifier((element) => {
-      this.container = element;
-    });
+    this.setContainer = modifier(
+      (element) => {
+        this.container = element;
+      },
+      { eager: false }
+    );
   }
 }
diff --git a/src/modifiers/pikaday.js b/src/modifiers/pikaday.js
@@ -1,3 +1,4 @@
+import { registerDestructor } from '@ember/destroyable';
 import Modifier from 'ember-modifier';
 import makePikaday from '../../vendor/pikaday';
 import { maybeFindMoment } from '../find-moment';
@@ -7,18 +8,27 @@ export default class PikadayModifier extends Modifier {
   #pikaday;
   #observer;
 
-  get pikadayOptions() {
+  constructor(owner, args) {
+    super(owner, args);
+
+    registerDestructor(this, () => {
+      this.#pikaday.destroy();
+      this.#observer.disconnect();
+    });
+  }
+
+  getPikadayOptions(element, positional, named) {
     let opts = {
       // Our element is Pikaday's field
-      field: this.element,
+      field: element,
 
       // All other named arguments go through to Pikaday
-      ...this.args.named,
+      ...named,
 
       // We also optionally accept a bag of arguments as the first positional
       // argument, because it's hard to do argument splatting in hbs. These are
       // taking precedence over the named arguments.
-      ...this.args.positional[0],
+      ...positional[0],
     };
 
     if (!opts.i18n) {
@@ -30,43 +40,40 @@ export default class PikadayModifier extends Modifier {
     return opts;
   }
 
-  didInstall() {
-    this.#pikaday = new Pikaday(this.pikadayOptions);
-    let { value } = this.args.named;
-    if (value) {
-      this.#pikaday.setDate(value, true);
-    }
-    this.syncDisabled();
-    this.#observer = new MutationObserver(this.syncDisabled.bind(this));
-    this.#observer.observe(this.element, { attributes: true });
-  }
-
-  didUpdateArguments() {
-    let { value, minDate, maxDate } = this.args.named;
-    let valueAltered = false;
-    this.#pikaday.setMinDate(copyDate(minDate));
-    if (minDate && value && value < minDate) {
-      value = minDate;
-      valueAltered = true;
-    }
+  modify(element, positional, named) {
+    const pikadayOptions = this.getPikadayOptions(element, positional, named);
 
-    this.#pikaday.setMaxDate(copyDate(maxDate));
-    if (maxDate && value && value > maxDate) {
-      value = maxDate;
-      valueAltered = true;
-    }
+    if (!this.#pikaday) {
+      this.#pikaday = new Pikaday(pikadayOptions);
+      let { value } = named;
+      if (value) {
+        this.#pikaday.setDate(value, true);
+      }
+      this.syncDisabled(element);
+      this.#observer = new MutationObserver(() => this.syncDisabled(element));
+      this.#observer.observe(element, { attributes: true });
+    } else {
+      let { value, minDate, maxDate } = named;
+      let valueAltered = false;
+      this.#pikaday.setMinDate(copyDate(minDate));
+      if (minDate && value && value < minDate) {
+        value = minDate;
+        valueAltered = true;
+      }
 
-    this.#pikaday.setDate(value, !valueAltered);
-    this.#pikaday.config(this.pikadayOptions);
-  }
+      this.#pikaday.setMaxDate(copyDate(maxDate));
+      if (maxDate && value && value > maxDate) {
+        value = maxDate;
+        valueAltered = true;
+      }
 
-  willDestroy() {
-    this.#pikaday.destroy();
-    this.#observer.disconnect();
+      this.#pikaday.setDate(value, !valueAltered);
+      this.#pikaday.config(pikadayOptions);
+    }
   }
 
-  syncDisabled() {
-    if (this.element.hasAttribute('disabled')) {
+  syncDisabled(element) {
+    if (element.hasAttribute('disabled')) {
       this.#pikaday.hide();
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -5619,10 +5619,10 @@ ember-cli-typescript@^2.0.2:
     stagehand "^1.0.0"
     walk-sync "^1.0.0"
 
-ember-cli-typescript@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-4.2.1.tgz#54d08fc90318cc986f3ea562f93ce58a6cc4c24d"
-  integrity sha512-0iKTZ+/wH6UB/VTWKvGuXlmwiE8HSIGcxHamwNhEC5x1mN3z8RfvsFZdQWYUzIWFN2Tek0gmepGRPTwWdBYl/A==
+ember-cli-typescript@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/ember-cli-typescript/-/ember-cli-typescript-5.1.1.tgz#cf561026f3e7bd05312c1c212acffa1c30d5fa0c"
+  integrity sha512-DbzATYWY8nbXwSxXqtK8YlqGJTcyFyL+eg6IGCc2ur0AMnq/H+o6Z9np9eGoq1sI+HwX7vBkOVoD3k0WurAwXg==
   dependencies:
     ansi-to-html "^0.6.15"
     broccoli-stew "^3.0.0"
@@ -5813,15 +5813,15 @@ [email protected]:
     ember-cli-babel "^6.0.0-beta.4"
     regenerator-runtime "^0.9.5"
 
-ember-modifier@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.0.0.tgz#74466d32e4ef9b80004915676cc3bfd6e3fd7a3d"
-  integrity sha512-ccXfMnjWhjEUCB5taeIPQmf0h1zPUIMbmsCV7W+JZ2BioPUZTLhE1WuHspmV0iEOiX3Fwx8jMOx6b74sFcKJ0g==
+ember-modifier@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.2.7.tgz#f2d35b7c867cbfc549e1acd8d8903c5ecd02ea4b"
+  integrity sha512-ezcPQhH8jUfcJQbbHji4/ZG/h0yyj1jRDknfYue/ypQS8fM8LrGcCMo0rjDZLzL1Vd11InjNs3BD7BdxFlzGoA==
   dependencies:
     ember-cli-babel "^7.26.6"
     ember-cli-normalize-entity-name "^1.0.0"
     ember-cli-string-utils "^1.1.0"
-    ember-cli-typescript "^4.2.1"
+    ember-cli-typescript "^5.0.0"
     ember-compatibility-helpers "^1.2.5"
 
 ember-page-title@^7.0.0: