Merge branch 't3chguy/esm' of ssh://github.com/element-hq/element-web into t3chguy/pnpm

# Conflicts:
#	package.json
#	packages/shared-components/yarn.lock
#	yarn.lock

.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/

.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

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
 

package.json

@@ -41,7 +41,7 @@
         "build-stats": "pnpm clean && pnpm build:genfiles && pnpm build:bundle-stats",
         "build:res": "node scripts/copy-res.ts",
         "build:genfiles": "pnpm build:res && pnpm 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",

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",

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",

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;

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/index.js";
 
-const TAG = "develop@sha256:9abab158a1cd7af619d5889fc8c83496e569e647068a8b856f4ad05e8cf342e8";
+const TAG = "develop@sha256:4620e446582e79a3942f5438ebf714da18c281143496e53be318334b4697b449";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,

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.js,\
   src/components/views/dialogs/devtools/**/*,\
   src/utils/SessionLock.ts,\
   src/**/*.d.ts,\

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";

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.