From 760b7f6cd440b4e2bd417999240bcee273b3bd7a Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 15 Feb 2021 15:07:19 -0800 Subject: [PATCH] fix: fix Intl.RelativeTimeFormat on iOS 13 (#1947) Fixes #1938 --- package.json | 3 + src/routes/_utils/asyncPolyfills.js | 4 ++ src/routes/_utils/loadPolyfills.js | 10 +++- .../_utils/relativeTimeFormatPolyfill.js | 12 ++++ webpack/shared.config.js | 4 +- yarn.lock | 56 +++++++++++++++++++ 6 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 src/routes/_utils/relativeTimeFormatPolyfill.js diff --git a/package.json b/package.json index 709e8b13..6e1fcd6e 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,9 @@ "build-vercel-json": "node -r esm bin/build-vercel-json.js" }, "dependencies": { + "@formatjs/intl-locale": "^2.4.14", + "@formatjs/intl-pluralrules": "^4.0.6", + "@formatjs/intl-relativetimeformat": "^8.0.4", "@rollup/plugin-replace": "^2.3.3", "arrow-key-navigation": "^1.2.0", "blurhash": "^1.1.3", diff --git a/src/routes/_utils/asyncPolyfills.js b/src/routes/_utils/asyncPolyfills.js index 11f60c5b..8d4e41a7 100644 --- a/src/routes/_utils/asyncPolyfills.js +++ b/src/routes/_utils/asyncPolyfills.js @@ -6,3 +6,7 @@ export const importRequestIdleCallback = () => import( export const importFocusVisible = () => import( /* webpackChunkName: '$polyfill$-focus-visible' */ 'focus-visible' ) + +export const importRelativeTimeFormat = () => import( + /* webpackChunkName: '$polyfill$-relative-time-format' */ './relativeTimeFormatPolyfill' +) diff --git a/src/routes/_utils/loadPolyfills.js b/src/routes/_utils/loadPolyfills.js index d32a2243..08d54d3d 100644 --- a/src/routes/_utils/loadPolyfills.js +++ b/src/routes/_utils/loadPolyfills.js @@ -1,9 +1,15 @@ import { - importRequestIdleCallback + importRequestIdleCallback, + importRelativeTimeFormat } from './asyncPolyfills' export function loadPolyfills () { return Promise.all([ - typeof requestIdleCallback === 'undefined' && importRequestIdleCallback() + typeof requestIdleCallback !== 'function' && importRequestIdleCallback(), + ( + typeof Intl.RelativeTimeFormat !== 'function' || + typeof Intl.Locale !== 'function' || + typeof Intl.PluralRules !== 'function' + ) && importRelativeTimeFormat() ]) } diff --git a/src/routes/_utils/relativeTimeFormatPolyfill.js b/src/routes/_utils/relativeTimeFormatPolyfill.js new file mode 100644 index 00000000..d1f35964 --- /dev/null +++ b/src/routes/_utils/relativeTimeFormatPolyfill.js @@ -0,0 +1,12 @@ +// 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' diff --git a/webpack/shared.config.js b/webpack/shared.config.js index 6f758fcb..a43b7a62 100644 --- a/webpack/shared.config.js +++ b/webpack/shared.config.js @@ -23,8 +23,8 @@ const resolve = { extensions: ['.js', '.json', '.html'], mainFields: ['svelte', 'module', 'browser', 'main'], alias: { - // All browsers we target support Intl.PluralRules, so format-message-interpret can fall back to that. This file is - // pretty big (9.83kB) and it's not needed. + // All browsers we target support Intl.PluralRules (or it's polyfilled). + // So format-message-interpret can fall back to that. This file is pretty big (9.83kB) and it's not needed. './plurals': 'lodash-es/noop', 'lookup-closest-locale': 'lodash-es/noop' // small, but also not needed } diff --git a/yarn.lock b/yarn.lock index 15b7a6f4..a68bbc9c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -955,6 +955,47 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@formatjs/ecma402-abstract@1.5.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.5.2.tgz#6c20c24f814ebf8e9dd46e34310a67895853a931" + integrity sha512-rscxoLyIwH2x+l15Z4eD580ioO3CkFVoWDLgDtgiOnWzDzpL5EigDRg9V4mINb8W6bQRT1xnCxiRwvw3bgvqrA== + dependencies: + tslib "^2.0.1" + +"@formatjs/intl-getcanonicallocales@1.5.3": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.5.3.tgz#b5978462340da1502502c3fde1c4abccff8f3b8e" + integrity sha512-QVBnSPZ32Y80wkXbf36hP9VbyklbOb8edppxFcgO9Lbd47zagllw65Y81QOHEn/j11JcTn2OhW0vea95LHvQmA== + dependencies: + cldr-core "38" + tslib "^2.0.1" + +"@formatjs/intl-locale@^2.4.14": + version "2.4.14" + resolved "https://registry.yarnpkg.com/@formatjs/intl-locale/-/intl-locale-2.4.14.tgz#9852678ee1ba3214e75f2e21fd0010d06e998d93" + integrity sha512-BWjAx+1kiN2VvQvx2L41cv8gr40mBDA78PKhVKLq+cPeAp8lwMmnGWUYr1sUXNew31N1acb6fqNJUD5sBGB/wQ== + dependencies: + "@formatjs/ecma402-abstract" "1.5.2" + "@formatjs/intl-getcanonicallocales" "1.5.3" + cldr-core "38" + tslib "^2.0.1" + +"@formatjs/intl-pluralrules@^4.0.6": + version "4.0.6" + resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-4.0.6.tgz#bab69e68b122089daa39f57072978a560f955176" + integrity sha512-/7Hjg/7EiHuZq4zwd406UoX2w5KtUrLRj9SI8mPOkUpHHqruSskYuJYahKWW7rNytPRaoCLfsigoFS0CDHBjlg== + dependencies: + "@formatjs/ecma402-abstract" "1.5.2" + tslib "^2.0.1" + +"@formatjs/intl-relativetimeformat@^8.0.4": + version "8.0.4" + resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-8.0.4.tgz#eca86236320802c7c7d0f7500573ebab679d607d" + integrity sha512-MUxsXa/cukBa4+8waUS7rQcVz0CKt7UufU9nXcUGh1FR85urqh42dz+3bM2klg51P5Mhove2mecQGeFwOhFYBQ== + dependencies: + "@formatjs/ecma402-abstract" "1.5.2" + tslib "^2.0.1" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -2245,6 +2286,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +cldr-core@38: + version "38.1.0" + resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-38.1.0.tgz#3c400436b89110e2c0584469d51b7479ef0fa70c" + integrity sha512-Da9xKjDp4qGGIX0VDsBqTan09iR5nuYD2a/KkfEaUyqKhu6wFVNRiCpPDXeRbpVwPBY6PgemV8WiHatMhcpy4A== + clean-css@4.2.x: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" @@ -6953,6 +6999,11 @@ relateurl@0.2.x: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= +relative-time-format@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.0.5.tgz#3fb7c76ae39156afe0a3a7ff0cb7bf30aa0f0fb6" + integrity sha512-MAgx/YKcUQYJpIaWcfetPstElnWf26JxVis4PirdwVrrymFdbxyCSm6yENpfB1YuwFbtHSHksN3aBajVNxk10Q== + "remedial@>= 1.0.7", remedial@^1.0.7: version "1.0.8" resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0" @@ -8338,6 +8389,11 @@ tslib@^1.9.0, tslib@^1.9.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== +tslib@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" + integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"