From 98815714bac0181b0faff3a513af60f6266d73d3 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 15 Mar 2021 19:46:58 -0700
Subject: [PATCH] fix: fix name of webpack chunk for intl polyfill (#2001)

* fix: fix name of webpack chunk for intl polyfill

* fix: fix typo
---
 src/routes/_utils/polyfills/asyncPolyfills.js | 33 ++++++++++++++++---
 .../_utils/polyfills/listFormatPolyfill.js    |  7 ----
 src/routes/_utils/polyfills/loadPolyfills.js  | 29 +++++++++++-----
 .../polyfills/relativeTimeFormatPolyfill.js   | 12 -------
 4 files changed, 48 insertions(+), 33 deletions(-)
 delete mode 100644 src/routes/_utils/polyfills/listFormatPolyfill.js
 delete mode 100644 src/routes/_utils/polyfills/relativeTimeFormatPolyfill.js

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'