mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-18 08:32:46 +03:00
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
This commit is contained in:
David Baker
parent
1f4006ac13
commit
9f27685a54
3 changed files with 38 additions and 31 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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<void> {
|
||||
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<void> {
|
|||
"./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);
|
||||
|
|
|
|||
59
yarn.lock
59
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue