From 9f27685a54301e076292c04262a8b064a9c558d8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 23 Jul 2024 11:57:12 +0200 Subject: [PATCH] Polyfill Intl.Segmenter This fixes Element on older versions of Firefox by adding a Polyfill for Intl.Segmenter. The Polyfill is conditionally imported so it only inflates the initial bundle size by about 100 bytes. On browsers that need it, the polyfill is quite large at 317Kb. Users on these browser will still see the 'unsupported browser' screen, but will be able to click through to use the app anyway. This keeps the Intl.Segmenter modernizr check but this would also happen due to https://github.com/element-hq/element-web/pull/27674 --- package.json | 1 + src/vector/index.ts | 9 +++++++ yarn.lock | 59 +++++++++++++++++++++------------------------ 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index c08fc93a7f..4f469c5bff 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@types/react": "17.0.80" }, "dependencies": { + "@formatjs/intl-segmenter": "^11.5.7", "@matrix-org/react-sdk-module-api": "^2.3.0", "jsrsasign": "^11.0.0", "katex": "^0.16.0", diff --git a/src/vector/index.ts b/src/vector/index.ts index 025cb361ef..7a2f3e2b59 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -19,6 +19,7 @@ limitations under the License. */ import { logger } from "matrix-js-sdk/src/logger"; +import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-segmenter/should-polyfill"; // These are things that can run before the skin loads - be careful not to reference the react-sdk though. import { parseQsFromFragment } from "./url_utils"; @@ -77,6 +78,8 @@ function checkBrowserFeatures(): boolean { // ES2024: https://402.ecma-international.org/9.0/#sec-intl.segmenter // The built-in modernizer 'intl' check only checks for the presence of the Intl object, not the Segmenter, // and older Firefox has the former but not the latter, so we add our own. + // This is polyfilled now, but we still want to show the warning because we want to remove the polyfill + // at some point. window.Modernizr.addTest("intlsegmenter", () => typeof window.Intl?.Segmenter === "function"); // Basic test for WebAssembly support. We could also try instantiating a simple module, @@ -112,6 +115,10 @@ const supportedBrowser = checkBrowserFeatures(); // the browser to use as much parallelism as it can. // Load parallelism is based on research in https://github.com/element-hq/element-web/issues/12253 async function start(): Promise { + if (shouldPolyFillIntlSegmenter()) { + await import(/* webpackChunkName: "intl-segmenter-polyfill" */ "@formatjs/intl-segmenter/polyfill-force"); + } + // load init.ts async so that its code is not executed immediately and we can catch any exceptions const { rageshakePromise, @@ -132,6 +139,8 @@ async function start(): Promise { "./init" ); + // Now perform the next stage of initialisation. This has its own try/catch in which we render + // a react error page on failure. try { // give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB await settled(rageshakePromise); diff --git a/yarn.lock b/yarn.lock index cd65b702ea..11f1fa2f7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1536,6 +1536,30 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c" integrity sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA== +"@formatjs/ecma402-abstract@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz#39197ab90b1c78b7342b129a56a7acdb8f512e17" + integrity sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g== + dependencies: + "@formatjs/intl-localematcher" "0.5.4" + tslib "^2.4.0" + +"@formatjs/intl-localematcher@0.5.4": + version "0.5.4" + resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz#caa71f2e40d93e37d58be35cfffe57865f2b366f" + integrity sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g== + dependencies: + tslib "^2.4.0" + +"@formatjs/intl-segmenter@^11.5.7": + version "11.5.7" + resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.5.7.tgz#c9fcb94d4690372d3ccd609ce1490910b582af78" + integrity sha512-MPvUKOURPY1aHc/d3YtLKp4hamrJtdBRc/AZVt9zRitrNeRszSwpIIYDHka9chQJTRIJlIfS4S9FGMdA1PE3Xw== + dependencies: + "@formatjs/ecma402-abstract" "2.0.0" + "@formatjs/intl-localematcher" "0.5.4" + tslib "^2.4.0" + "@humanwhocodes/config-array@^0.11.14": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -7915,7 +7939,6 @@ matrix-events-sdk@0.0.1: "matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop": version "34.0.0" - uid "94e393c9a619b5d7427ff4103128521229ad4f6c" resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/94e393c9a619b5d7427ff4103128521229ad4f6c" dependencies: "@babel/runtime" "^7.12.5" @@ -7942,7 +7965,6 @@ matrix-mock-request@^2.5.0: "matrix-react-sdk@github:matrix-org/matrix-react-sdk#develop": version "3.101.0" - uid "19f9f9856451a8e4cce6d313d19ca8aed4b5d6b4" resolved "https://codeload.github.com/matrix-org/matrix-react-sdk/tar.gz/19f9f9856451a8e4cce6d313d19ca8aed4b5d6b4" dependencies: "@babel/runtime" "^7.12.5" @@ -10474,16 +10496,7 @@ string-replace-loader@3: loader-utils "^2.0.0" schema-utils "^3.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10569,14 +10582,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11046,7 +11052,7 @@ tsconfig-paths@^3.15.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0: +tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0: version "2.6.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ== @@ -11675,7 +11681,7 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11693,15 +11699,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"