Switch from yarn classic to pnpm (#31971)

* Switch shared-components from yarn classic to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch element-web from yarn classic to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch CI to pnpm

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update docs & comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hold back postcss to match yarn.lock & use workspace protocol

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak CI

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Rid the world of `$(res)`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to type=module

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix module import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make knip happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make docker build happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale params

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix badly formatted logging

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to lodash-es

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make jest happier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch element-web to ESM

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update testcontainers imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix modernizr cjs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix modernizr cjs ignore files

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move modernizr sonar exclusion to exclude everything

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright tests for esm compat

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add pnpm-link utility

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Test matrix-web-i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to src/vector/index.ts

* Update playwright-common

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use catalogs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve pnpm-link script

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use pnpm import to regenerate lockfile from yarn.lock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

scripts/analyse_unused_exports.ts

@@ -28,7 +28,7 @@ ignore.push("/common.ts");
 // We ignore js-sdk by default as it may export for other non element-web projects
 if (!includeJSSDK) ignore.push("matrix-js-sdk");
 
-const command = `yarn ts-prune --ignore "${ignore.join("|")}" | grep -v "(used in module)"`;
+const command = `pnpm ts-prune --ignore "${ignore.join("|")}" | grep -v "(used in module)"`;
 
 exec(command, (error, stdout, stderr) => {
     if (error) throw error;

scripts/docker-link-repos.sh

@@ -21,9 +21,9 @@ fi
 echo "Linking js-sdk"
 git clone --depth 1 --branch $JS_SDK_BRANCH "$JS_SDK_REPO" js-sdk
 cd js-sdk
-yarn link
-yarn --network-timeout=100000 install
+pnpm link
+pnpm install
 cd ../
 
 echo "Setting up element-web with js-sdk package"
-yarn link matrix-js-sdk
+pnpm link matrix-js-sdk

scripts/docker-package.sh

@@ -18,4 +18,4 @@ fi
 
 DIST_VERSION=$("$DIR"/normalize-version.sh "$DIST_VERSION")
 
-VERSION=$DIST_VERSION yarn build
+VERSION=$DIST_VERSION pnpm build

scripts/layered.sh

@@ -14,7 +14,7 @@ set -ex
 # for the primary repo (element-web in this case).
 
 # Install dependencies
-yarn install --frozen-lockfile
+pnpm install --frozen-lockfile
 
 # Pass appropriate repo to fetchdep.sh
 export PR_ORG=element-hq
@@ -24,8 +24,8 @@ export PR_REPO=element-web
 scripts/fetchdep.sh matrix-org matrix-js-sdk develop
 pushd matrix-js-sdk
 [ -n "$JS_SDK_GITHUB_BASE_REF" ] && git fetch --depth 1 origin $JS_SDK_GITHUB_BASE_REF && git checkout $JS_SDK_GITHUB_BASE_REF
-yarn link
-yarn install --frozen-lockfile
+pnpm link
+pnpm install --frozen-lockfile
 popd
 
 # Also set up matrix-analytics-events for branch with matching name
@@ -34,13 +34,13 @@ scripts/fetchdep.sh matrix-org matrix-analytics-events
 # This is expected as this project does not share a release cycle but we still branch match it
 if [ -d matrix-analytics-events ]; then
     pushd matrix-analytics-events
-    yarn link
-    yarn install --frozen-lockfile
-    yarn build:ts
+    pnpm link
+    pnpm install --frozen-lockfile
+    pnpm build:ts
     popd
 fi
 
 # Link the layers into element-web
-yarn link matrix-js-sdk
-[ -d matrix-analytics-events ] && yarn link @matrix-org/analytics-events
-yarn install --frozen-lockfile $@
+pnpm link matrix-js-sdk
+[ -d matrix-analytics-events ] && pnpm link @matrix-org/analytics-events
+pnpm install --frozen-lockfile $@

scripts/package.sh

@@ -8,11 +8,11 @@ else
     version=`git describe --dirty --tags || echo unknown`
 fi
 
-yarn clean
-VERSION=$version yarn build
+pnpm clean
+VERSION=$version pnpm build
 
 # include the sample config in the tarball. Arguably this should be done by
-# `yarn build`, but it's just too painful.
+# `pnpm build`, but it's just too painful.
 cp config.sample.json webapp/
 
 mkdir -p dist

scripts/pnpm-link.ts

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Utility script to mimic yarn classic `link` behaviour
+// to enable rapid development of libraries like matrix-js-sdk using symlinks/directory junctions
+// reads .link-config file for DEPENDENCY=PATH values and removes those dependencies from node_modules,
+// replacing them with a symlink/directory junction.
+// This tool is a helpful substitute to `pnpm link` as that modifies the package.json & pnpm-lock.yaml files.
+
+import fs from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { execSync } from "node:child_process";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const configPath = join(__dirname, "..", ".link-config");
+const nodeModulesPath = join(__dirname, "..", "node_modules");
+
+try {
+    const configFile = await fs.readFile(configPath, "utf-8");
+    for (const line of configFile.trim().split("\n")) {
+        const [dependency, path] = line.split("=");
+        const dependencyPath = join(nodeModulesPath, dependency);
+
+        try {
+            const stat = await fs.stat(dependencyPath);
+            if (stat.isSymbolicLink()) {
+                const linkPath = await fs.readlink(dependencyPath);
+                if (linkPath === path) {
+                    // already done
+                    continue;
+                } else {
+                    await fs.unlink(dependencyPath);
+                }
+            } else {
+                await fs.rm(dependencyPath, { recursive: true });
+            }
+
+            console.log(`Linking ${dependency} to ${path}`);
+            await fs.symlink(path, dependencyPath);
+
+            // pnpm install may have wiped out the `node_modules` dir so we have to restore it
+            execSync("pnpm i --ignore-scripts --frozen-lockfile", {
+                cwd: dependencyPath,
+            });
+        } catch (e) {
+            console.error(`Failed to link ${dependency}`, e);
+        }
+    }
+} catch {
+    // Ignore config file not existing
+}