diff --git a/package-lock.json b/package-lock.json
index 8c519efbd..52da0cb41 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2b8ae0271..c4ab3a395 100644
--- a/package.json
+++ b/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",
diff --git a/src/init.js b/src/init.js
index 034b93934..26ef1e3f4 100644
--- a/src/init.js
+++ b/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);
})();
/**
diff --git a/src/lib/format-time.js b/src/lib/format-time.js
index 4484d18a0..b4f7eaba2 100644
--- a/src/lib/format-time.js
+++ b/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.
diff --git a/src/lib/intl-polyfill.js b/src/lib/intl-polyfill.js
new file mode 100644
index 000000000..896553a0f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/lib/relative-time-polyfill.js b/src/lib/relative-time-polyfill.js
deleted file mode 100644
index de37f3b98..000000000
--- a/src/lib/relative-time-polyfill.js
+++ /dev/null
@@ -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');