beginning to port to a modifier-based implementation

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

package.json

@@ -43,7 +43,8 @@
     "prepublishOnly": "rollup --config"
   },
   "dependencies": {
-    "@embroider/addon-shim": "^0.50.2"
+    "@embroider/addon-shim": "^0.50.2",
+    "ember-modifier": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
@@ -128,7 +129,9 @@
     "main": "addon-main.js",
     "app-js": {
       "./components/pikaday-input.js": "./dist/_app_/components/pikaday-input.js",
-      "./components/pikaday-inputless.js": "./dist/_app_/components/pikaday-inputless.js"
+      "./components/pikaday-input2.js": "./dist/_app_/components/pikaday-input2.js",
+      "./components/pikaday-inputless.js": "./dist/_app_/components/pikaday-inputless.js",
+      "./modifiers/pikaday.js": "./dist/_app_/modifiers/pikaday.js"
     }
   },
   "volta": {

rollup.config.js

@@ -14,18 +14,27 @@ export default {
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
-    addon.publicEntrypoints(['components/**/*.js', 'test-support/index.js']),
+    addon.publicEntrypoints([
+      'components/**/*.js',
+      'modifiers/**/*.js',
+      'test-support/index.js',
+    ]),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
     // not everything in publicEntrypoints necessarily needs to go here.
-    addon.appReexports(['components/**/*.js']),
+    addon.appReexports(['components/**/*.js', 'modifiers/**/*.js']),
 
     // This babel config should *not* apply presets or compile away ES modules.
     // It exists only to provide development niceties for you, like automatic
     // template colocation.
     babel({
-      plugins: ['@embroider/addon-dev/template-colocation-plugin'],
+      plugins: [
+        '@embroider/addon-dev/template-colocation-plugin',
+
+        // https://github.com/embroider-build/embroider/issues/1014#issuecomment-1014926434
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+      ],
       babelHelpers: 'bundled',
     }),
 

src/components/pikaday-input2.hbs

@@ -0,0 +1,26 @@
+<input
+  {{pikaday
+    value=this.value
+    onSelect=this.onSelect
+    setDefaultDate=true
+    defaultDate=@defaultDate
+    onOpen=@onOpen
+    onDraw=this.onDraw
+    onClose=this.onClose
+    format=this.format
+    minDate=@minDate
+    maxDate=@maxDate
+    theme=@theme
+    yearRange=this.yearRange
+    i18n=this.i18n
+    firstDay=this.firstDay
+  }}
+  {{on 'change' this.didChange}}
+  type='text'
+  readonly={{@readonly}}
+  placeholder={{@placeholder}}
+  required={{@required}}
+  disabled={{@disabled}}
+  autocomplete={{@autocomplete}}
+  ...attributes
+/>

src/components/pikaday-input2.js

@@ -0,0 +1,94 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { momentOrMomentTimezone as moment } from '../find-moment';
+
+export default class extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+  }
+
+  get format() {
+    return this.args.format || 'DD.MM.YYYY';
+  }
+
+  get value() {
+    if (this.args.useUTC && this.args.value) {
+      let format = 'YYYY-MM-DD';
+      return moment(
+        moment.utc(this.args.value).format(format),
+        format
+      ).toDate();
+    }
+    return this.args.value;
+  }
+
+  get yearRange() {
+    const yearRange = this.args.yearRange;
+    if (!yearRange) {
+      return 10;
+    }
+    if (yearRange.indexOf(',') > -1) {
+      const yearArray = yearRange.split(',');
+      if (yearArray[1] === 'currentYear') {
+        yearArray[1] = new Date().getFullYear();
+      }
+      return yearArray;
+    } else {
+      return yearRange;
+    }
+  }
+
+  get i18n() {
+    let i18n = this.args.i18n;
+    if (!i18n) {
+      return undefined;
+    }
+    if (!i18n.t) {
+      return i18n;
+    }
+    return {
+      previousMonth: i18n.t('previousMonth').toString(),
+      nextMonth: i18n.t('nextMonth').toString(),
+      months: i18n.t('months').toString().split(','),
+      weekdays: i18n.t('weekdays').toString().split(','),
+      weekdaysShort: i18n.t('weekdaysShort').toString().split(','),
+    };
+  }
+
+  get firstDay() {
+    return this.args.firstDay == null ? 1 : parseInt(this.args.firstDay, 10);
+  }
+
+  @action
+  onClose() {
+    if (!this.#heardValue) {
+      this.onSelect(null);
+    }
+    this.args.onClose?.();
+  }
+
+  #heardValue;
+
+  @action
+  onDraw() {
+    // this is here because apparently the classic behavior is to pass no
+    // arguments to the onDraw callback, but Pikaday's own ownDraw has an
+    // argument.
+    this.args.onDraw?.();
+  }
+
+  @action
+  didChange(event) {
+    this.#heardValue = event.target.value;
+  }
+
+  @action
+  onSelect(date) {
+    if (this.args.useUTC && date) {
+      date = moment
+        .utc([date.getFullYear(), date.getMonth(), date.getDate()])
+        .toDate();
+    }
+    this.args.onSelection?.(date);
+  }
+}

src/modifiers/pikaday.js

@@ -0,0 +1,40 @@
+import Modifier from 'ember-modifier';
+import makePikaday from '../../vendor/pikaday';
+import { momentOrMomentTimezone as moment } from '../find-moment';
+const Pikaday = makePikaday(moment);
+
+export default class PikadayModifier extends Modifier {
+  #pikaday;
+  #observer;
+
+  didInstall() {
+    let opts = {
+      field: this.element,
+      ...this.args.named,
+    };
+    if (!opts.i18n) {
+      delete opts.i18n;
+    }
+    this.#pikaday = new Pikaday(opts);
+    this.#pikaday.setDate(this.args.named.value, true);
+    this.#observer = new MutationObserver(this.sawMutation.bind(this));
+    this.#observer.observe(this.element, { attributes: true });
+  }
+
+  didUpdateArguments() {
+    this.#pikaday.setMinDate(this.args.named.minDate);
+    this.#pikaday.setMaxDate(this.args.named.maxDate);
+    this.#pikaday.setDate(this.args.named.value, true);
+  }
+
+  willDestroy() {
+    this.#pikaday.destroy();
+    this.#observer.disconnect();
+  }
+
+  sawMutation() {
+    if (this.element.hasAttribute('disabled')) {
+      this.#pikaday.hide();
+    }
+  }
+}

test-app/app/templates/application.hbs

@@ -1,3 +1,5 @@
+<input type="text" {{pikaday onSelect=this.itWorked defaultDate=this.someDate setDefaultDate=true}} />
+
 <h2 id="title">Welcome to Ember.js</h2>
 
 {{outlet}}