Dynamically import locales

ember-flatpickr/package.json

@@ -88,7 +88,8 @@
   },
   "ember-addon": {
     "app-js": {
-      "./components/ember-flatpickr.js": "./dist/_app_/components/ember-flatpickr.js"
+      "./components/ember-flatpickr.js": "./dist/_app_/components/ember-flatpickr.js",
+      "./initializers/ember-flatpickr.js": "./dist/_app_/initializers/ember-flatpickr.js"
     },
     "main": "addon-main.cjs",
     "type": "addon",

ember-flatpickr/rollup.config.mjs

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

ember-flatpickr/src/initializers/ember-flatpickr.ts

@@ -0,0 +1,11 @@
+import flatpickr from "flatpickr";
+
+export function initialize() {
+  if (window) {
+    window.flatpickr = flatpickr;
+  }
+};
+
+export default {
+  initialize
+};

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

@@ -2,3 +2,10 @@
 // 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 type flatpickr from "flatpickr";
+
+declare global {
+  interface Window {
+    flatpickr: flatpickr;
+  }
+}

test-app/app/controllers/docs/components/ember-flatpickr.js

@@ -2,6 +2,10 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { next } from '@ember/runloop';
+import 'flatpickr/dist/l10n/fr';
+import 'flatpickr/dist/l10n/de';
+import 'flatpickr/dist/l10n/ru';
+import 'flatpickr/dist/l10n/uk';
 
 export default class EmberFlatpickr extends Controller {
   @tracked dateValue = null;

test-app/ember-cli-build.js

@@ -19,4 +19,16 @@ module.exports = function (defaults) {
   const { maybeEmbroider } = require('@embroider/test-setup');
 
   return maybeEmbroider(app);
+
+  // bundle analyzer
+  // const { Webpack } = require('@embroider/webpack');
+  // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+  // return require('@embroider/compat').compatBuild(app, Webpack, {
+  //   packagerOptions: {
+  //     webpackConfig: {
+  //       plugins: [new BundleAnalyzerPlugin()],
+  //     },
+  //   },
+  // });
 };

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

@@ -15,6 +15,7 @@ import {
   setFlatpickrDate,
 } from 'ember-flatpickr/test-support/helpers';
 import langs from 'flatpickr/dist/l10n';
+import 'flatpickr/dist/l10n/fr';
 
 const clickDay = async (index) => {
   await triggerEvent(findAll('.flatpickr-days .flatpickr-day')[index], 'click');
@@ -456,6 +457,33 @@ 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"
+    />`);
+
+    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/tests/unit/initializers/ember-flatpickr-test.js

@@ -0,0 +1,38 @@
+import Application from '@ember/application';
+import config from 'test-app/config/environment';
+import { module, test } from 'qunit';
+import Resolver from 'ember-resolver';
+import { run } from '@ember/runloop';
+import { initialize } from 'ember-flatpickr/initializers/ember-flatpickr';
+
+module('Unit | Initializer | ember-flatpickr', function (hooks) {
+  hooks.beforeEach(function () {
+    this.TestApplication = class TestApplication extends Application {
+      modulePrefix = config.modulePrefix;
+      podModulePrefix = config.podModulePrefix;
+      Resolver = Resolver;
+    };
+
+    this.TestApplication.initializer({
+      name: 'initializer under test',
+      initialize,
+    });
+
+    this.application = this.TestApplication.create({
+      autoboot: false,
+    });
+  });
+
+  hooks.afterEach(function () {
+    run(this.application, 'destroy');
+  });
+
+  test('window.flatpickr is available after boot', async function (assert) {
+    await this.application.boot();
+    assert.ok(window.flatpickr, 'flatpickr is available on the window');
+    assert.ok(
+      window.flatpickr.l10ns,
+      'flatpickr locales are available on the window',
+    );
+  });
+});

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

@@ -1 +1,7 @@
+import 'ember-source/types/stable';
 
+declare global {
+  interface Window {
+    flatpickr: flatpickr;
+  }
+}