From 7738be32ec284fffe2750842545e2767c74ec9a8 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 4 Feb 2026 17:56:08 +0100 Subject: [PATCH 1/9] chore: allow 3px of difference in SC visual tests (#31972) --- packages/shared-components/vitest.config.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts index 32a0f9ae24..2d5d55bc16 100644 --- a/packages/shared-components/vitest.config.ts +++ b/packages/shared-components/vitest.config.ts @@ -81,7 +81,10 @@ export default defineConfig({ configDir: path.join(dirname, ".storybook"), storybookScript: "storybook --ci", }), - storybookVis({}), + storybookVis({ + // 3px of difference allowed before marking as failed + failureThreshold: 3, + }), ], test: { name: "storybook", From b82c34d9d3ec0e5e61c5bbcf5c485cb58afc4ddd Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 5 Feb 2026 10:18:02 +0100 Subject: [PATCH 2/9] doc: add note about `Flex` And `Box` in code style (#31962) --- code_style.md | 1 + 1 file changed, 1 insertion(+) diff --git a/code_style.md b/code_style.md index b6c1e46e95..bd1fb4371c 100644 --- a/code_style.md +++ b/code_style.md @@ -274,6 +274,7 @@ Inheriting all the rules of TypeScript, the following additionally apply: 20. Do not use `React.Component::forceUpdate`. 21. Prefer to use [compound typography components](https://compound.element.io/?path=/docs/compound-web_typography--docs) instead of raw HTML elements for text. This ensures consistent font usage and letter spacing across the app. 22. If you can't use 21, don't forget to apply the correct CSS classes for font and letter spacing. +23. Prefer to use `Flex` or `Box` components from shared-components for layout instead of raw HTML elements with CSS flexbox styles. ## Stylesheets From 2a8ea7a2308a94f2c56161b798cbb67c2e8b1376 Mon Sep 17 00:00:00 2001 From: ElementRobot Date: Thu, 5 Feb 2026 10:24:10 +0100 Subject: [PATCH 3/9] [create-pull-request] automated change (#31976) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com> --- playwright/testcontainers/synapse.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright/testcontainers/synapse.ts b/playwright/testcontainers/synapse.ts index d68dddf672..e5b962ab86 100644 --- a/playwright/testcontainers/synapse.ts +++ b/playwright/testcontainers/synapse.ts @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers"; -const TAG = "develop@sha256:9abab158a1cd7af619d5889fc8c83496e569e647068a8b856f4ad05e8cf342e8"; +const TAG = "develop@sha256:4620e446582e79a3942f5438ebf714da18c281143496e53be318334b4697b449"; /** * SynapseContainer which freezes the docker digest to stabilise tests, From 839744ee2f10872f03aa87504c189e2d9cd72bd0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 10:43:01 +0000 Subject: [PATCH 4/9] Switch element-web to ESM Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .eslintrc.js => .eslintrc.cjs | 0 .prettierrc.js | 1 - .stylelintrc.js => .stylelintrc.cjs | 0 babel.config.js => babel.config.cjs | 0 jest.config.ts | 2 +- package.json | 3 ++- packages/shared-components/package.json | 2 +- packages/shared-components/yarn.lock | 6 +++--- recorder-worklet-loader.js => recorder-worklet-loader.cjs | 0 webpack.config.js => webpack.config.cjs | 2 +- yarn.lock | 5 +++++ 11 files changed, 13 insertions(+), 8 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) delete mode 100644 .prettierrc.js rename .stylelintrc.js => .stylelintrc.cjs (100%) rename babel.config.js => babel.config.cjs (100%) rename recorder-worklet-loader.js => recorder-worklet-loader.cjs (100%) rename webpack.config.js => webpack.config.cjs (99%) diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 6a17910f1a..0000000000 --- a/.prettierrc.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require("eslint-plugin-matrix-org/.prettierrc.js"); diff --git a/.stylelintrc.js b/.stylelintrc.cjs similarity index 100% rename from .stylelintrc.js rename to .stylelintrc.cjs diff --git a/babel.config.js b/babel.config.cjs similarity index 100% rename from babel.config.js rename to babel.config.cjs diff --git a/jest.config.ts b/jest.config.ts index 8662a89ca7..b19b884d30 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -43,7 +43,7 @@ const config: Config = { "@vector-im/compound-web": "/node_modules/@vector-im/compound-web", }, transformIgnorePatterns: [ - "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock|@element-hq/web-shared-components|react-virtuoso)).+$", + "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock|@element-hq/web-shared-components|react-virtuoso|lodash)).+$", ], collectCoverageFrom: [ "/src/**/*.{js,ts,tsx}", diff --git a/package.json b/package.json index 397465c8fe..4c2d4cb746 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "url": "https://github.com/element-hq/element-web" }, "license": "SEE LICENSE IN README.md", + "type": "module", "files": [ "lib", "res", @@ -126,7 +127,7 @@ "linkify-react": "4.3.2", "linkify-string": "4.3.2", "linkifyjs": "4.3.2", - "lodash": "^4.17.21", + "lodash": "npm:lodash-es@^4.17.21", "maplibre-gl": "^5.0.0", "matrix-encrypt-attachment": "^1.0.3", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json index 0ed297872e..7e91fb482f 100644 --- a/packages/shared-components/package.json +++ b/packages/shared-components/package.json @@ -54,7 +54,7 @@ "@vector-im/compound-design-tokens": "^6.4.3", "classnames": "^2.5.1", "counterpart": "^0.18.6", - "lodash": "^4.17.21", + "lodash": "npm:lodash-es@^4.17.21", "matrix-web-i18n": "3.6.0", "react-merge-refs": "^3.0.2", "react-virtuoso": "^4.14.0", diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock index 65e06d97d6..b63a1566d3 100644 --- a/packages/shared-components/yarn.lock +++ b/packages/shared-components/yarn.lock @@ -4754,10 +4754,10 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash@^4.17.15, lodash@^4.17.21, lodash@~4.17.15: +lodash@^4.17.15, lodash@^4.17.21, "lodash@npm:lodash-es@^4.17.21", lodash@~4.17.15: version "4.17.23" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.23.tgz#f113b0378386103be4f6893388c73d0bde7f2c5a" - integrity sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w== + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.23.tgz#58c4360fd1b5d33afc6c0bbd3d1149349b1138e0" + integrity sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg== long@^5.0.0: version "5.3.2" diff --git a/recorder-worklet-loader.js b/recorder-worklet-loader.cjs similarity index 100% rename from recorder-worklet-loader.js rename to recorder-worklet-loader.cjs diff --git a/webpack.config.js b/webpack.config.cjs similarity index 99% rename from webpack.config.js rename to webpack.config.cjs index 3ea0f68b0e..d2bccc5969 100644 --- a/webpack.config.js +++ b/webpack.config.cjs @@ -413,7 +413,7 @@ module.exports = (env, argv) => { type: "javascript/auto", use: [ { - loader: path.resolve("./recorder-worklet-loader.js"), + loader: path.resolve("./recorder-worklet-loader.cjs"), }, { loader: "babel-loader", diff --git a/yarn.lock b/yarn.lock index 03671c8044..ce8716d50a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9617,6 +9617,11 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.23.tgz#f113b0378386103be4f6893388c73d0bde7f2c5a" integrity sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w== +"lodash@npm:lodash-es@^4.17.21": + version "4.17.23" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.23.tgz#58c4360fd1b5d33afc6c0bbd3d1149349b1138e0" + integrity sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg== + log-update@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.1.0.tgz#1a04ff38166f94647ae1af562f4bd6a15b1b7cd4" From 5f4930f976e4933033335c43a0c120d249c30b80 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 10:57:09 +0000 Subject: [PATCH 5/9] Update testcontainers imports Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- playwright/e2e/oidc/index.ts | 2 +- playwright/plugins/homeserver/synapse/consentHomeserver.ts | 2 +- playwright/services.ts | 2 +- playwright/testcontainers/dendrite.ts | 2 +- playwright/testcontainers/mas.ts | 2 +- playwright/testcontainers/synapse.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/playwright/e2e/oidc/index.ts b/playwright/e2e/oidc/index.ts index 50aa2de8d5..2cc6d48176 100644 --- a/playwright/e2e/oidc/index.ts +++ b/playwright/e2e/oidc/index.ts @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import { type MailpitClient } from "@element-hq/element-web-playwright-common/lib/testcontainers"; +import { type MailpitClient } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; import { type Page } from "@playwright/test"; import { expect } from "../../element-web-test"; diff --git a/playwright/plugins/homeserver/synapse/consentHomeserver.ts b/playwright/plugins/homeserver/synapse/consentHomeserver.ts index 9b3316bf57..0dfc0aa735 100644 --- a/playwright/plugins/homeserver/synapse/consentHomeserver.ts +++ b/playwright/plugins/homeserver/synapse/consentHomeserver.ts @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import { type SynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers"; +import { type SynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; import { type Fixtures } from "../../../element-web-test.ts"; diff --git a/playwright/services.ts b/playwright/services.ts index 8ecf10e20e..5442a01098 100644 --- a/playwright/services.ts +++ b/playwright/services.ts @@ -10,7 +10,7 @@ import { type Services as BaseServices, type WorkerOptions as BaseWorkerOptions, } from "@element-hq/element-web-playwright-common/lib/fixtures"; -import { type HomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers"; +import { type HomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; import { type OAuthServer } from "./plugins/oauth_server"; import { DendriteContainer, PineconeContainer } from "./testcontainers/dendrite"; diff --git a/playwright/testcontainers/dendrite.ts b/playwright/testcontainers/dendrite.ts index 55938778cd..68a356027e 100644 --- a/playwright/testcontainers/dendrite.ts +++ b/playwright/testcontainers/dendrite.ts @@ -14,7 +14,7 @@ import { StartedSynapseContainer, type HomeserverContainer, type StartedMatrixAuthenticationServiceContainer, -} from "@element-hq/element-web-playwright-common/lib/testcontainers"; +} from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; const DEFAULT_CONFIG = { version: 2, diff --git a/playwright/testcontainers/mas.ts b/playwright/testcontainers/mas.ts index 4f1a86aa83..caca293378 100644 --- a/playwright/testcontainers/mas.ts +++ b/playwright/testcontainers/mas.ts @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import { MatrixAuthenticationServiceContainer as BaseMatrixAuthenticationServiceContainer, type StartedPostgreSqlContainer, -} from "@element-hq/element-web-playwright-common/lib/testcontainers"; +} from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; const TAG = "main@sha256:d0d03f9067c7977807131a9c739c9ed9f081063d1a1c21bee66204e40c44aa50"; diff --git a/playwright/testcontainers/synapse.ts b/playwright/testcontainers/synapse.ts index d68dddf672..574f6e6cdc 100644 --- a/playwright/testcontainers/synapse.ts +++ b/playwright/testcontainers/synapse.ts @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers"; +import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js"; const TAG = "develop@sha256:9abab158a1cd7af619d5889fc8c83496e569e647068a8b856f4ad05e8cf342e8"; From 4e3b685c1b1d972763b632db3939fc2000739992 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 11:35:05 +0000 Subject: [PATCH 6/9] Fix modernizr cjs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- package.json | 2 +- src/vector/index.ts | 2 +- src/vector/{modernizr.js => modernizr.cjs} | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) rename src/vector/{modernizr.js => modernizr.cjs} (99%) diff --git a/package.json b/package.json index 491eb9fe56..0a019919b3 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats", "build:res": "node scripts/copy-res.ts", "build:genfiles": "yarn build:res && yarn build:module_system", - "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", + "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js && mv src/vector/modernizr.js src/vector/modernizr.cjs", "build:bundle": "webpack --progress --mode production", "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json", "build:module_system": "node module_system/scripts/install.ts", diff --git a/src/vector/index.ts b/src/vector/index.ts index 3dfcbe6cdf..2010c95d75 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -15,7 +15,7 @@ import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-se // These are things that can run before the skin loads - be careful not to reference the react-sdk though. import { parseQsFromFragment } from "./url_utils"; -import "./modernizr"; +import "./modernizr.cjs"; // Import shared components CSS import "@element-hq/web-shared-components/dist/element-web-shared-components.css"; diff --git a/src/vector/modernizr.js b/src/vector/modernizr.cjs similarity index 99% rename from src/vector/modernizr.js rename to src/vector/modernizr.cjs index 932513ebe8..87c3bca20e 100644 --- a/src/vector/modernizr.js +++ b/src/vector/modernizr.cjs @@ -1,5 +1,5 @@ /*! - * modernizr v3.13.0 + * modernizr v3.13.1 * Build https://modernizr.com/download?-cors-cryptography-cssanimations-cssfilters-displaytable-es5date-es5function-es5object-es5undefined-es6array-es6collections-es6string-fetch-flexbox-json-localstorage-objectfit-promises-resizeobserver-sandbox-svg-svgasimg-svgfilters-urlparser-urlsearchparams-webaudio-dontmin * * Copyright (c) @@ -35,7 +35,7 @@ * @access public */ var ModernizrProto = { - _version: '3.13.0', + _version: '3.13.1', // Any settings that don't work as separate modules // can go in here as configuration. From ed87a2bed166a800b0c07948bc2afcb5b8556856 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 11:50:16 +0000 Subject: [PATCH 7/9] Fix modernizr cjs ignore files Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .eslintignore | 2 +- .prettierignore | 2 +- sonar-project.properties | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.eslintignore b/.eslintignore index 08ec761fb3..cfd87467f1 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,4 @@ -src/vector/modernizr.js +src/vector/modernizr.cjs test/end-to-end-tests/node_modules/ test/end-to-end-tests/element/ test/end-to-end-tests/synapse/ diff --git a/.prettierignore b/.prettierignore index abaa4d3df3..cade5f84bb 100644 --- a/.prettierignore +++ b/.prettierignore @@ -21,7 +21,7 @@ electron/pub /build_config.yaml # Raises an error because it contains a template var breaking the script tag src/vector/index.html -src/vector/modernizr.js +src/vector/modernizr.cjs /docs/lib /book /debian/tmp diff --git a/sonar-project.properties b/sonar-project.properties index c1d3f59842..6e39daebba 100644 --- a/sonar-project.properties +++ b/sonar-project.properties @@ -17,7 +17,7 @@ sonar.coverage.exclusions=\ playwright/**/*,\ res/**/*,\ scripts/**/*,\ - src/vector/modernizr.js,\ + src/vector/modernizr.cjs,\ src/components/views/dialogs/devtools/**/*,\ src/utils/SessionLock.ts,\ src/**/*.d.ts,\ From 94b1bfb590289e0bc598a13c3c9014dea2b83f6f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 12:04:21 +0000 Subject: [PATCH 8/9] Move modernizr sonar exclusion to exclude everything Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- sonar-project.properties | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/sonar-project.properties b/sonar-project.properties index 6e39daebba..26970ca7f4 100644 --- a/sonar-project.properties +++ b/sonar-project.properties @@ -7,7 +7,7 @@ sonar.organization=element-hq sonar.sources=src,res,packages/shared-components/src sonar.tests=test,playwright,src,packages sonar.test.inclusions=test/*,playwright/*,src/**/*.test.*,packages/*/src/**/*.test.*,packages/*/src/test/**/* -sonar.exclusions=__mocks__,docs,element.io,nginx +sonar.exclusions=__mocks__,docs,element.io,nginx,src/vector/modernizr.cjs sonar.cpd.exclusions=src/i18n/strings/*.json sonar.typescript.tsconfigPath=./tsconfig.json @@ -17,7 +17,6 @@ sonar.coverage.exclusions=\ playwright/**/*,\ res/**/*,\ scripts/**/*,\ - src/vector/modernizr.cjs,\ src/components/views/dialogs/devtools/**/*,\ src/utils/SessionLock.ts,\ src/**/*.d.ts,\ From 41a0e5dd189f7c579faea1ff499af5d8ec3251c4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 5 Feb 2026 12:30:58 +0000 Subject: [PATCH 9/9] Update playwright tests for esm compat Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- playwright/e2e/crypto/migration.spec.ts | 4 ++++ playwright/plugins/oauth_server/index.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/playwright/e2e/crypto/migration.spec.ts b/playwright/e2e/crypto/migration.spec.ts index 86072fccc0..191568c29c 100644 --- a/playwright/e2e/crypto/migration.spec.ts +++ b/playwright/e2e/crypto/migration.spec.ts @@ -8,9 +8,13 @@ Please see LICENSE files in the repository root for full details. import path from "path"; import { readFile } from "node:fs/promises"; +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; import { expect, test } from "../../element-web-test"; +const __dirname = dirname(fileURLToPath(import.meta.url)); + test.describe("migration", { tag: "@no-webkit" }, function () { test.use({ displayName: "Alice", diff --git a/playwright/plugins/oauth_server/index.ts b/playwright/plugins/oauth_server/index.ts index 446426a9c1..16aad2f027 100644 --- a/playwright/plugins/oauth_server/index.ts +++ b/playwright/plugins/oauth_server/index.ts @@ -11,6 +11,10 @@ import express from "express"; import { type AddressInfo } from "net"; import { type TestInfo } from "@playwright/test"; import { randB64Bytes } from "@element-hq/element-web-playwright-common/lib/utils/rand.js"; +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); export class OAuthServer { private server?: http.Server;