WIP: Use conditional importing for intl polyfills

package-lock.json

@@ -1471,24 +1471,16 @@
       }
     },
     "@formatjs/intl-pluralrules": {
-      "version": "4.0.28",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.0.28.tgz",
-      "integrity": "sha512-sWtOHwEff6/cHuSk5l6zpcB3POPCYlBx3DUGASb7QU6AD/tO/oKW6oRHOCHbBdspkBEsUJByZ9LlP2r0Xw6yPQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.1.0.tgz",
+      "integrity": "sha512-rJFWETXa1OOcru4kqjEz/MUyBxdcMWhbmqKVjDBVZ6HF4ZqkC1TUWQkj+jqIxDiShQ6/J7QLMOGMwiGDjGepHg==",
       "dev": true,
       "requires": {
-        "@formatjs/ecma402-abstract": "1.9.4",
+        "@formatjs/ecma402-abstract": "1.9.5",
+        "@formatjs/intl-localematcher": "0.2.18",
         "tslib": "^2.1.0"
       },
       "dependencies": {
-        "@formatjs/ecma402-abstract": {
-          "version": "1.9.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.9.4.tgz",
-          "integrity": "sha512-ePJXI7tWC9PBxQxS7jtbkCLGVmpC8MH8n9Yjmg8dsh9wXK9svu7nAbq76Oiu5Zb+5GVkLkeTVerlSvHCbNImlA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
-        },
         "tslib": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",

package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@formatjs/intl-locale": "2.4.34",
-    "@formatjs/intl-pluralrules": "4.0.28",
+    "@formatjs/intl-pluralrules": "4.1.0",
     "@formatjs/intl-relativetimeformat": "8.1.8",
     "async": "3.1.0",
     "autoprefixer": "6.3.6",

src/init.js

@@ -1,4 +1,5 @@
 const jar = require('./lib/jar');
+import {intlPolyfill} from './lib/intl-polyfill';
 
 /**
  * -----------------------------------------------------------------------------
@@ -35,6 +36,7 @@ const jar = require('./lib/jar');
 
     window._locale = updateLocale();
     document.documentElement.lang = window._locale;
+    intlPolyfill(window._locale);
 })();
 
 /**

src/lib/format-time.js

@@ -1,8 +1,6 @@
 // IMPORTANT: any changes to the time algorithm also need to be made in the corresponding
 // scratchr2 file 'lib/format-time.js'
 
-require('./relative-time-polyfill');
-
 /**
  Given a timestamp in the future, calculate the largest, closest unit to show.
  On the high end we stop at hours. e.g. 15 days is still counted in hours not days or weeks.

src/lib/intl-polyfill.js

@@ -0,0 +1,61 @@
+// this file should only be `required` in the format-time
+// when Intl.RelativeTimeFormat is not available (Safari < 14), but
+// we're not currently able to do the code splitting in www, and it
+// is always included. To reduce the amount of data that's loaded limit
+// the number of languages loaded to just the top few that are still using
+// safari <14. These seven account for most uses.
+// relativetimeformat depends on locale which also needs to be polyfilled in
+// safari <14
+// The plural rules is required for safari 12.
+import {shouldPolyfill as shouldPolyfillLocale} from '@formatjs/intl-locale/should-polyfill';
+import {shouldPolyfill as shouldPolyfillRelativeTimeFormat} from '@formatjs/intl-relativetimeformat/should-polyfill'
+import {shouldPolyfill as shouldPolyfillPluralRules} from '@formatjs/intl-pluralrules/should-polyfill';
+
+async function polyfill(locale) {
+  if (!shouldPolyfillRelativeTimeFormat(locale)) return;
+
+  // Load the polyfill 1st BEFORE loading data
+  await import('@formatjs/intl-relativetimeformat/polyfill')
+
+  if (shouldPolyfillPluralRules(locale)) {
+    await import('@formatjs/intl-pluralrules/polyfill');
+  }
+
+  if (shouldPolyfillLocale(locale)) {
+    await import('@formatjs/intl-locale/polyfill');
+  }
+
+  switch (locale) {
+    case 'ar':
+      await import('@formatjs/intl-relativetimeformat/locale-data/ar');
+      await import('@formatjs/intl-pluralrules/locale-data/ar');
+      break;
+    case 'es':
+    case 'es-419':
+      await import('@formatjs/intl-relativetimeformat/locale-data/es');
+      await import('@formatjs/intl-pluralrules/locale-data/es');
+      break;
+    case 'fr':
+      await import('@formatjs/intl-relativetimeformat/locale-data/fr');
+      await import('@formatjs/intl-pluralrules/locale-data/fr');
+      break
+    case 'ja':
+      await import('@formatjs/intl-relativetimeformat/locale-data/ja');
+      await import('@formatjs/intl-pluralrules/locale-data/ja');
+      break;
+    case 'tr':
+      await import('@formatjs/intl-relativetimeformat/locale-data/tr');
+      await import('@formatjs/intl-pluralrules/locale-data/tr');
+    case 'zh':
+    case 'zh-CN':
+    case 'zh-TW':
+      await import('@formatjs/intl-relativetimeformat/locale-data/zh');
+      await import('@formatjs/intl-pluralrules/locale-data/zh');
+      break;
+    default:
+      await import('@formatjs/intl-relativetimeformat/locale-data/en');
+      await import('@formatjs/intl-pluralrules/locale-data/en');
+      break;
+    }
+}
+export default polyfill;

src/lib/relative-time-polyfill.js

@@ -1,20 +0,0 @@
-// this file should only be `required` in the format-time
-// when Intl.RelativeTimeFormat is not available (Safari < 14), but
-// we're not currently able to do the code splitting in www, and it
-// is always included. To reduce the amount of data that's loaded limit
-// the number of languages loaded to just the top few that are still using
-// safari <14. These seven account for most uses.
-// relativetimeformat depends on locale which also needs to be polyfilled in
-// safari <14
-// The plural rules is required for safari 12.
-require('@formatjs/intl-locale/polyfill');
-require('@formatjs/intl-pluralrules/polyfill');
-require('@formatjs/intl-pluralrules/locale-data/en');
-require('@formatjs/intl-relativetimeformat/polyfill');
-require('@formatjs/intl-relativetimeformat/locale-data/en');
-require('@formatjs/intl-relativetimeformat/locale-data/ar');
-require('@formatjs/intl-relativetimeformat/locale-data/es');
-require('@formatjs/intl-relativetimeformat/locale-data/fr');
-require('@formatjs/intl-relativetimeformat/locale-data/ja');
-require('@formatjs/intl-relativetimeformat/locale-data/tr');
-require('@formatjs/intl-relativetimeformat/locale-data/zh');