Dynamically import locales

ember-flatpickr/.eslintrc.js

@@ -30,12 +30,8 @@ module.exports = {
         './.prettierrc.js',
         './.stylelintrc.js',
         './.template-lintrc.js',
-        './ember-cli-build.js',
-        './index.js',
-        './testem.js',
+        './addon-main.cjs',
         './blueprints/*/index.js',
-        './config/**/*.js',
-        './tests/dummy/config/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -49,17 +45,12 @@ module.exports = {
     // Typescript files
     {
       parser: '@typescript-eslint/parser',
-      files: ['addon/**/*.ts'],
+      files: ['src/**/*.ts', 'unpublished-development-types/**/*.ts'],
       plugins: ['@typescript-eslint'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
         'prefer-rest-params': 'off',
       },
     },
-    {
-      // test files
-      files: ['tests/**/*-test.{js,ts}'],
-      extends: ['plugin:qunit/recommended'],
-    },
   ],
 };

ember-flatpickr/addon-main.cjs

@@ -1,5 +1,5 @@
-'use strict';
+"use strict";
 
-const { addonV1Shim } = require('@embroider/addon-shim');
+const { addonV1Shim } = require("@embroider/addon-shim");
 
 module.exports = addonV1Shim(__dirname);

ember-flatpickr/package.json

@@ -41,24 +41,24 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.3",
-    "@embroider/addon-shim": "^1.8.7",
-    "@ember/test-helpers": "~3.3.0"
+    "@ember/test-helpers": "~3.3.0",
+    "@embroider/addon-shim": "^1.8.7"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@glimmer/component": "~1.1.2",
-    "ember-template-lint": "~5.13.0",
     "@babel/plugin-proposal-decorators": "^7.23.9",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/plugin-transform-class-static-block": "^7.23.4",
     "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/runtime": "^7.23.9",
     "@embroider/addon-dev": "^4.2.1",
+    "@glimmer/component": "~1.1.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.3",
     "babel-plugin-ember-template-compilation": "^2.2.1",
     "concurrently": "^8.0.1",
     "ember-source": "~5.6.0",
+    "ember-template-lint": "~5.13.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ember": "^11.12.0",

ember-flatpickr/rollup.config.mjs

@@ -29,7 +29,7 @@ export default {
       'components/**/*.js',
       'helpers/**/*.js',
       'modifiers/**/*.js',
-      'services/**/*.js',
+      'services/**/*.js'
     ]),
 
     // Follow the V2 Addon rules about dependencies. Your code can import from

ember-flatpickr/src/components/ember-flatpickr.ts

@@ -10,15 +10,14 @@ import flatpickr from 'flatpickr';
 /* Replace getOwner from @ember/application to @ember/owner when we can do a conditional macro for ember < 4.10 or ember 4.x is not supported by ember-flatpickr anymore  */
 import { getOwner } from '@ember/application';
 
-
 interface EmberFlatpickrArgs extends FlatpickrOptions {
   date: FlatpickrOptions['defaultDate'];
   disabled: boolean;
 }
 
 type FastbootService = {
   isFastBoot: boolean;
-}
+};
 
 /**
  * Ember component that wraps the lightweight [`flatpickr`](https://flatpickr.js.org) datetime
@@ -92,27 +91,29 @@ export default class EmberFlatpickr extends Component<EmberFlatpickrArgs> {
     // Require that users pass a date
     assert(
       '<EmberFlatpickr> requires a `date` to be passed as the value for flatpickr.',
-      date !== undefined
+      date !== undefined,
     );
 
     // Require that users pass an onChange
     assert(
       '<EmberFlatpickr> requires an `onChange` action or null for no action.',
-      onChange !== undefined
+      onChange !== undefined,
     );
 
     // Wrap is not supported
     assert(
       '<EmberFlatpickr> does not support the wrap option. Please see documentation for an alternative.',
-      wrap !== true
+      wrap !== true,
     );
 
     // Pass all values and setup flatpickr
     scheduleOnce('afterRender', this, this._setFlatpickrOptions, element);
   }
 
-  _setFlatpickrOptions(element: HTMLInputElement): void {
-    const fastboot = getOwner(this)?.lookup('service:fastboot') as unknown as (FastbootService | undefined);
+  async _setFlatpickrOptions(element: HTMLInputElement): Promise<void> {
+    const fastboot = getOwner(this)?.lookup('service:fastboot') as unknown as
+      | FastbootService
+      | undefined;
 
     if (fastboot && fastboot['isFastBoot']) {
       return;
@@ -129,9 +130,13 @@ export default class EmberFlatpickr extends Component<EmberFlatpickrArgs> {
     } = this.args;
 
     const config: Partial<FlatpickrOptions> = Object.fromEntries(
-      Object.entries(rest).filter((entry) => entry[1] !== undefined)
+      Object.entries(rest).filter((entry) => entry[1] !== undefined),
     );
 
+    if (typeof this.args.locale === 'string') {
+      await import(`flatpickr/dist/l10n/${this.args.locale}.js`);
+    }
+
     this.flatpickrRef = flatpickr(element, {
       onChange,
       onClose: onClose || this.onClose,

ember-flatpickr/unpublished-development-types/index.d.ts

@@ -1,4 +1,4 @@
 // Add any types here that you need for local development only.
 // These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
-import "ember-source/types/stable";
-import "ember-source/types/preview";
+import 'ember-source/types/stable';
+import 'ember-source/types/preview';

test-app/app/app.js

@@ -3,7 +3,6 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'test-app/config/environment';
 import 'flatpickr/dist/flatpickr.css';
-import 'flatpickr/dist/l10n';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

test-app/tests/integration/components/ember-flatpickr-test.js

@@ -7,6 +7,7 @@ import {
   find,
   findAll,
   triggerEvent,
+  waitFor,
 } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import {
@@ -456,6 +457,35 @@ module('Integration | Component | ember flatpickr', function (hooks) {
     );
   });
 
+  test('locale as string works correctly', async function (assert) {
+    assert.expect(1);
+
+    this.set('dateValue', '2080-12-01T16:16:22.585Z');
+    this.set('maxDate', '2080-12-31T16:16:22.585Z');
+    this.set('minDate', '2080-12-01T16:16:22.585Z');
+
+    this.set('locale', 'fr');
+
+    await render(hbs`<EmberFlatpickr
+      @date={{this.dateValue}}
+      @locale={{this.locale}}
+      @maxDate={{this.maxDate}}
+      @minDate={{this.minDate}}
+      @onChange={{null}}
+      placeholder="Pick date"
+    />`);
+
+    await waitFor('.flatpickr-current-month .flatpickr-monthDropdown-month');
+
+    assert.strictEqual(
+      find(
+        '.flatpickr-current-month .flatpickr-monthDropdown-month',
+      ).textContent.trim(),
+      'décembre',
+      'French locale applied successfully',
+    );
+  });
+
   test('onLocaleUpdated fired', async function (assert) {
     assert.expect(1);
 

test-app/types/test-app/index.d.ts

@@ -1 +1 @@
-
+import 'ember-source/types/stable';