From 807143fe65bfd534685695f8fa4b798826a7aa31 Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Thu, 8 Oct 2020 15:39:51 -0500 Subject: [PATCH] Add the intl-polyfill for IE11 --- .../common/intl-polyfills/allLocales.ts | 9 +++++ .../custom/getCanonicalLocales.ts | 7 ++++ .../intl-polyfills/custom/numberFormat.ts | 22 ++++++++++++ .../intl-polyfills/custom/pluralRules.ts | 22 ++++++++++++ .../common/intl-polyfills/custom/types.ts | 2 ++ .../intl-polyfills/getCanonicalLocales.ts | 4 +++ app/javascript/common/intl-polyfills/index.ts | 8 +++++ .../common/intl-polyfills/numberFormat.ts | 6 ++++ .../common/intl-polyfills/pluralRules.ts | 6 ++++ .../components/formik/MoneyTextField.tsx | 2 +- package.json | 3 ++ yarn.lock | 36 +++++++++++++++++++ 12 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 app/javascript/common/intl-polyfills/allLocales.ts create mode 100644 app/javascript/common/intl-polyfills/custom/getCanonicalLocales.ts create mode 100644 app/javascript/common/intl-polyfills/custom/numberFormat.ts create mode 100644 app/javascript/common/intl-polyfills/custom/pluralRules.ts create mode 100644 app/javascript/common/intl-polyfills/custom/types.ts create mode 100644 app/javascript/common/intl-polyfills/getCanonicalLocales.ts create mode 100644 app/javascript/common/intl-polyfills/index.ts create mode 100644 app/javascript/common/intl-polyfills/numberFormat.ts create mode 100644 app/javascript/common/intl-polyfills/pluralRules.ts diff --git a/app/javascript/common/intl-polyfills/allLocales.ts b/app/javascript/common/intl-polyfills/allLocales.ts new file mode 100644 index 00000000..47a9fcf0 --- /dev/null +++ b/app/javascript/common/intl-polyfills/allLocales.ts @@ -0,0 +1,9 @@ +// License: LGPL-3.0-or-later +let allLocales = ['en']; + +export function setAllLocales(locales:string[]):string[]{ + allLocales = locales; + return allLocales; +} + +export default allLocales; \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/custom/getCanonicalLocales.ts b/app/javascript/common/intl-polyfills/custom/getCanonicalLocales.ts new file mode 100644 index 00000000..792614ba --- /dev/null +++ b/app/javascript/common/intl-polyfills/custom/getCanonicalLocales.ts @@ -0,0 +1,7 @@ +// License: LGPL-3.0-or-later +import {shouldPolyfill} from '@formatjs/intl-getcanonicallocales/should-polyfill'; +export default async function getCanonicalLocales(): Promise { + if (shouldPolyfill()) { + await import('@formatjs/intl-getcanonicallocales/polyfill'); + } +} \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/custom/numberFormat.ts b/app/javascript/common/intl-polyfills/custom/numberFormat.ts new file mode 100644 index 00000000..530ee811 --- /dev/null +++ b/app/javascript/common/intl-polyfills/custom/numberFormat.ts @@ -0,0 +1,22 @@ +// License: LGPL-3.0-or-later +import {shouldPolyfill} from '@formatjs/intl-numberformat/should-polyfill'; + +import pluralRules from './pluralRules'; + +import type {Polyfilled} from './types'; + +type PolyfilledNumberFormat = Polyfilled + +export default async function numberFormat(locales:string[]) :Promise { + await pluralRules(locales); + if (shouldPolyfill()) { + // Load the polyfill 1st BEFORE loading data + await import('@formatjs/intl-numberformat/polyfill'); + } + + if ((Intl.NumberFormat as PolyfilledNumberFormat).polyfilled) { + await Promise.all( + locales.map(l => import("@formatjs/intl-numberformat/locale-data/"+ l)) + ); + } +} \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/custom/pluralRules.ts b/app/javascript/common/intl-polyfills/custom/pluralRules.ts new file mode 100644 index 00000000..82abf66c --- /dev/null +++ b/app/javascript/common/intl-polyfills/custom/pluralRules.ts @@ -0,0 +1,22 @@ +// License: LGPL-3.0-or-later + +import {shouldPolyfill} from '@formatjs/intl-pluralrules/should-polyfill'; +import type {Polyfilled} from './types'; + +import getCanonicalLocales from './getCanonicalLocales'; + +type PolyfilledPluralRules = Polyfilled + +export default async function pluralRules(locales:string[]):Promise { + await getCanonicalLocales(); + if (shouldPolyfill()) { + // Load the polyfill 1st BEFORE loading data + await import('@formatjs/intl-pluralrules/polyfill'); + } + + if ((Intl.PluralRules as PolyfilledPluralRules).polyfilled) { + await Promise.all( + locales.map(l => import("@formatjs/intl-pluralrules/locale-data/"+ l)) + ); + } +} \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/custom/types.ts b/app/javascript/common/intl-polyfills/custom/types.ts new file mode 100644 index 00000000..4efcead6 --- /dev/null +++ b/app/javascript/common/intl-polyfills/custom/types.ts @@ -0,0 +1,2 @@ +// License: LGPL-3.0-or-later +export type Polyfilled = T & {polyfilled?:boolean}; \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/getCanonicalLocales.ts b/app/javascript/common/intl-polyfills/getCanonicalLocales.ts new file mode 100644 index 00000000..22450d91 --- /dev/null +++ b/app/javascript/common/intl-polyfills/getCanonicalLocales.ts @@ -0,0 +1,4 @@ +// License: LGPL-3.0-or-later +import getCanonicalLocales from './custom/getCanonicalLocales'; +const promise = getCanonicalLocales(); +export default promise; \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/index.ts b/app/javascript/common/intl-polyfills/index.ts new file mode 100644 index 00000000..03f7e478 --- /dev/null +++ b/app/javascript/common/intl-polyfills/index.ts @@ -0,0 +1,8 @@ +// License: LGPL-3.0-or-later +const promises = Promise.all([ + import('./getCanonicalLocales'), + import('./pluralRules'), + import('./numberFormat'), +]) as unknown as Promise; + +export default promises; diff --git a/app/javascript/common/intl-polyfills/numberFormat.ts b/app/javascript/common/intl-polyfills/numberFormat.ts new file mode 100644 index 00000000..2845f65c --- /dev/null +++ b/app/javascript/common/intl-polyfills/numberFormat.ts @@ -0,0 +1,6 @@ +// License: LGPL-3.0-or-later +import numberFormat from './custom/numberFormat'; +import allLocales from './allLocales'; + +const promise = numberFormat(allLocales); +export default promise; \ No newline at end of file diff --git a/app/javascript/common/intl-polyfills/pluralRules.ts b/app/javascript/common/intl-polyfills/pluralRules.ts new file mode 100644 index 00000000..d9f6a420 --- /dev/null +++ b/app/javascript/common/intl-polyfills/pluralRules.ts @@ -0,0 +1,6 @@ +// License: LGPL-3.0-or-later +import pluralRules from './custom/pluralRules'; +import allLocales from './allLocales'; + +const promise = pluralRules(allLocales); +export default promise; \ No newline at end of file diff --git a/app/javascript/components/formik/MoneyTextField.tsx b/app/javascript/components/formik/MoneyTextField.tsx index c80b6623..cb92d361 100644 --- a/app/javascript/components/formik/MoneyTextField.tsx +++ b/app/javascript/components/formik/MoneyTextField.tsx @@ -9,7 +9,7 @@ import { useHoudiniIntl } from "../intl"; import { useEffect, useRef } from "react"; import {useI18nCurrencyInput, Types} from '@houdiniproject/react-i18n-currency-input'; - +import '../../common/intl-polyfills/numberFormat'; export interface UseSerializeMoneyProps extends Omit { value:Money diff --git a/package.json b/package.json index 1368713d..7a024d37 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,9 @@ "@babel/preset-env": "^7.7.1", "@babel/preset-react": "^7.10.0", "@babel/preset-typescript": "^7.9.0", + "@formatjs/intl-getcanonicallocales": "^1.4.6", + "@formatjs/intl-numberformat": "^5.6.4", + "@formatjs/intl-pluralrules": "^3.4.9", "@rails/webpacker": "^5.1.1", "@storybook/addon-actions": "^6.0.26", "@storybook/addon-essentials": "^6.0.26", diff --git a/yarn.lock b/yarn.lock index c9b890b0..11cb902a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1671,6 +1671,13 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@formatjs/ecma402-abstract@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.4.tgz#0f11e0309bc885d53ddc823e36d04d520fda7674" + integrity sha512-5XEuvm+bImBmSFlhbE9FeRQKXWtpt+WIYRsma96bneoNMnUMeCADHJxNNSA5JSY4TlrjVZFHW3jE4HYm10bLbA== + dependencies: + tslib "^2.0.1" + "@formatjs/intl-datetimeformat@^1.3.2": version "1.3.2" resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-1.3.2.tgz#97b2600137864e7d047b97b96183e9c9fcba7356" @@ -1693,6 +1700,14 @@ dependencies: cldr-core "36.0.0" +"@formatjs/intl-getcanonicallocales@^1.4.6": + version "1.4.6" + resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.4.6.tgz#348a0b8dd87f2b0513a4942a6273c937dd91ead0" + integrity sha512-V54a+Ks02vke2CSmuGJ4GCvrdWfN105GSH7oZRoW5QSiwuac+fmxb5Qpu4002HetuRu0rrRTm+NMUTfZ1VB2xw== + dependencies: + cldr-core "36.0.0" + tslib "^2.0.1" + "@formatjs/intl-listformat@^2.2.8": version "2.2.8" resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-2.2.8.tgz#9ef57a752f7cdfbe40977c223069956dd4c60809" @@ -1707,6 +1722,22 @@ dependencies: "@formatjs/intl-utils" "^3.4.1" +"@formatjs/intl-numberformat@^5.6.4": + version "5.6.4" + resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-5.6.4.tgz#5a7de8f2dd2f73925a0379455c9cf00774246911" + integrity sha512-Rr2dWfooBLL96t4fj0tE8VfF4XF8cToogFg1G2d1zHGa8JgClHqPsaCUA05CxXOnAADg7n+o+HzR/D2heaN/Ew== + dependencies: + "@formatjs/ecma402-abstract" "^1.2.4" + tslib "^2.0.1" + +"@formatjs/intl-pluralrules@^3.4.9": + version "3.4.9" + resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-3.4.9.tgz#2e4254086332cadc735d7634d3f2575d08c96024" + integrity sha512-3CC9PMUiKczOvYPU+ssvjxP53WW+lKq20gGgYmVawuC4t7uvXrZcZEtAPXclGcmsg5IAV07fTJHAwuE6UySh4w== + dependencies: + "@formatjs/ecma402-abstract" "^1.2.4" + tslib "^2.0.1" + "@formatjs/intl-relativetimeformat@^5.2.10": version "5.2.10" resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-5.2.10.tgz#abb29304d0f3a55e7d351a5fa07b3a18cbaf0638" @@ -16947,6 +16978,11 @@ tslib@^2.0.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e" integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ== +tslib@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.2.tgz#462295631185db44b21b1ea3615b63cd1c038242" + integrity sha512-wAH28hcEKwna96/UacuWaVspVLkg4x1aDM9JlzqaQTOFczCktkVAb5fmXChgandR1EraDPs2w8P+ozM+oafwxg== + tsutils@^3.17.1: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"