From 0ba6725dfee41c37fdd5ccb3db01cd4afd861523 Mon Sep 17 00:00:00 2001 From: Amaury Date: Mon, 19 Feb 2024 14:07:05 +0100 Subject: [PATCH] Dynamically import locales (#2047) * add initializer for window.flatpickr * repair linting * remove commented code * add option to disable initializer's auto-import of flatpickr * repair lock file * don't use the initializer * use test-waiters * remove window types * do not use test waiters --- ember-flatpickr/.eslintrc.js | 13 ++------ ember-flatpickr/addon-main.cjs | 4 +-- ember-flatpickr/package.json | 8 ++--- ember-flatpickr/rollup.config.mjs | 2 +- .../src/components/ember-flatpickr.ts | 21 ++++++++----- .../unpublished-development-types/index.d.ts | 4 +-- test-app/app/app.js | 1 - .../components/ember-flatpickr-test.js | 30 +++++++++++++++++++ test-app/types/test-app/index.d.ts | 2 +- 9 files changed, 55 insertions(+), 30 deletions(-) diff --git a/ember-flatpickr/.eslintrc.js b/ember-flatpickr/.eslintrc.js index 7bc4e581..aa9685d7 100644 --- a/ember-flatpickr/.eslintrc.js +++ b/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'], - }, ], }; diff --git a/ember-flatpickr/addon-main.cjs b/ember-flatpickr/addon-main.cjs index d36b0c86..07684a92 100644 --- a/ember-flatpickr/addon-main.cjs +++ b/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); diff --git a/ember-flatpickr/package.json b/ember-flatpickr/package.json index 95ec4e81..12e6d0c1 100644 --- a/ember-flatpickr/package.json +++ b/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", diff --git a/ember-flatpickr/rollup.config.mjs b/ember-flatpickr/rollup.config.mjs index cf1e4909..13660feb 100644 --- a/ember-flatpickr/rollup.config.mjs +++ b/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 diff --git a/ember-flatpickr/src/components/ember-flatpickr.ts b/ember-flatpickr/src/components/ember-flatpickr.ts index 48e9abfc..781996dd 100644 --- a/ember-flatpickr/src/components/ember-flatpickr.ts +++ b/ember-flatpickr/src/components/ember-flatpickr.ts @@ -10,7 +10,6 @@ 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; @@ -18,7 +17,7 @@ interface EmberFlatpickrArgs extends FlatpickrOptions { 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 { // Require that users pass a date assert( ' requires a `date` to be passed as the value for flatpickr.', - date !== undefined + date !== undefined, ); // Require that users pass an onChange assert( ' requires an `onChange` action or null for no action.', - onChange !== undefined + onChange !== undefined, ); // Wrap is not supported assert( ' 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 { + 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 { } = this.args; const config: Partial = 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, diff --git a/ember-flatpickr/unpublished-development-types/index.d.ts b/ember-flatpickr/unpublished-development-types/index.d.ts index d30e3744..e057e4af 100644 --- a/ember-flatpickr/unpublished-development-types/index.d.ts +++ b/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'; diff --git a/test-app/app/app.js b/test-app/app/app.js index 7517b907..ba26ef70 100644 --- a/test-app/app/app.js +++ b/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; diff --git a/test-app/tests/integration/components/ember-flatpickr-test.js b/test-app/tests/integration/components/ember-flatpickr-test.js index f8edabd4..35d97b05 100644 --- a/test-app/tests/integration/components/ember-flatpickr-test.js +++ b/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``); + + 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); diff --git a/test-app/types/test-app/index.d.ts b/test-app/types/test-app/index.d.ts index 8b137891..dfb18056 100644 --- a/test-app/types/test-app/index.d.ts +++ b/test-app/types/test-app/index.d.ts @@ -1 +1 @@ - +import 'ember-source/types/stable';