diff --git a/src/routes/_utils/polyfills/asyncPolyfills.js b/src/routes/_utils/polyfills/asyncPolyfills.js index 22ed3fca..e31cd920 100644 --- a/src/routes/_utils/polyfills/asyncPolyfills.js +++ b/src/routes/_utils/polyfills/asyncPolyfills.js @@ -7,10 +7,33 @@ export const importFocusVisible = () => import( /* webpackChunkName: '$polyfill$-focus-visible' */ 'focus-visible' ) -export const importRelativeTimeFormat = () => import( - /* webpackChunkName: '$polyfill$-relative-time-format' */ './relativeTimeFormatPolyfill' +export const importIntlLocale = () => import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-locale/polyfill' ) -export const importListFormat = () => import( - /* webpackChunkName: '$polyfill$-list-format' */ './listFormatPolyfill' -) +export const importIntlPluralRules = async () => { // has to be imported serially + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-pluralrules/polyfill' + ) + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-pluralrules/locale-data/en' + ) +} + +export const importIntlRelativeTimeFormat = async () => { // has to be imported serially + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-relativetimeformat/polyfill' + ) + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-relativetimeformat/locale-data/en' + ) +} + +export const importIntlListFormat = async () => { // has to be imported serially + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-listformat/polyfill' + ) + await import( + /* webpackChunkName: '$polyfill$-internationalization' */ '@formatjs/intl-listformat/locale-data/en' + ) +} diff --git a/src/routes/_utils/polyfills/listFormatPolyfill.js b/src/routes/_utils/polyfills/listFormatPolyfill.js deleted file mode 100644 index aa69739e..00000000 --- a/src/routes/_utils/polyfills/listFormatPolyfill.js +++ /dev/null @@ -1,7 +0,0 @@ -// Thank you Safari -// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat#browser_compatibility -// Also note I'm not going to do anything fancy here for loading the polyfill locale data. -// Safari can just get English every time. - -import '@formatjs/intl-listformat/polyfill' -import '@formatjs/intl-listformat/locale-data/en' diff --git a/src/routes/_utils/polyfills/loadPolyfills.js b/src/routes/_utils/polyfills/loadPolyfills.js index 981454ba..28a8cb63 100644 --- a/src/routes/_utils/polyfills/loadPolyfills.js +++ b/src/routes/_utils/polyfills/loadPolyfills.js @@ -1,17 +1,28 @@ import { - importRequestIdleCallback, - importRelativeTimeFormat, - importListFormat + importIntlListFormat, + importIntlLocale, importIntlPluralRules, importIntlRelativeTimeFormat, + importRequestIdleCallback } from './asyncPolyfills' +async function loadIntlPolyfillsIfNecessary () { + // Have to chain these so that they load in the proper order. + // Luckily these requests aren't done in serial, because we're using the same Webpack + // chunk name for each one. + if (typeof Intl.Locale !== 'function') { + await importIntlLocale() + } + if (typeof Intl.PluralRules !== 'function') { + await importIntlPluralRules() + } + await Promise.all([ + typeof Intl.RelativeTimeFormat !== 'function' && importIntlRelativeTimeFormat(), + typeof Intl.ListFormat !== 'function' && importIntlListFormat() + ]) +} + export function loadPolyfills () { return Promise.all([ typeof requestIdleCallback !== 'function' && importRequestIdleCallback(), - ( - typeof Intl.RelativeTimeFormat !== 'function' || - typeof Intl.Locale !== 'function' || - typeof Intl.PluralRules !== 'function' - ) && importRelativeTimeFormat(), - typeof Intl.ListFormat !== 'function' && importListFormat() + loadIntlPolyfillsIfNecessary() ]) } diff --git a/src/routes/_utils/polyfills/relativeTimeFormatPolyfill.js b/src/routes/_utils/polyfills/relativeTimeFormatPolyfill.js deleted file mode 100644 index d1f35964..00000000 --- a/src/routes/_utils/polyfills/relativeTimeFormatPolyfill.js +++ /dev/null @@ -1,12 +0,0 @@ -// Making this a single module so it gets bundled into a single chunk. -// As it turns out, thanks to iOS 13, we need to not only support Intl.RelativeTimeFormat, but -// also Intl.Locale and Intl.PluralRules. When iOS 13 is not so widespread, we can remove this. -// Also note I'm not going to do anything fancy here for loading the polyfill locale data. -// iOS 13 can just get English every time. -// https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat - -import '@formatjs/intl-locale/polyfill' -import '@formatjs/intl-pluralrules/polyfill' -import '@formatjs/intl-pluralrules/locale-data/en' -import '@formatjs/intl-relativetimeformat/polyfill' -import '@formatjs/intl-relativetimeformat/locale-data/en'