Upgrade to Yarn v4 (Berry)

.github/workflows/build-element-call.yaml

@@ -28,13 +28,15 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - name: Enable Corepack
+        run: corepack enable
       - name: Yarn cache
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install --frozen-lockfile"
+        run: "yarn install --immutable"
       - name: Build full version
         if: ${{ inputs.package == 'full' }}
         run: "yarn run build:full"

.github/workflows/lint.yaml

@@ -8,13 +8,15 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - name: Enable Corepack
+        run: corepack enable
       - name: Yarn cache
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install --frozen-lockfile"
+        run: "yarn install --immutable"
       - name: Prettier
         run: "yarn run prettier:check"
       - name: i18n

.github/workflows/playwright.yml

@@ -9,6 +9,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Enable Corepack
+        run: corepack enable
       - uses: actions/setup-node@v4
         with:
           cache: "yarn"

.github/workflows/test.yaml

@@ -10,13 +10,15 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - name: Enable Corepack
+        run: corepack enable
       - name: Yarn cache
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install --frozen-lockfile"
+        run: "yarn install --immutable"
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov

.github/workflows/translations-download.yaml

@@ -15,13 +15,16 @@ jobs:
       - name: Checkout the code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:
           cache: "yarn"
           node-version-file: ".node-version"
 
       - name: Install Deps
-        run: "yarn install --frozen-lockfile"
+        run: "yarn install --immutable"
 
       - name: Prune i18n
         run: "rm -R locales"

.gitignore

@@ -9,7 +9,17 @@ dist-ssr
 public/config.json
 backend/synapse_tmp/*
 /coverage
+
+# Yarn
 yarn-error.log
+/.pnp.*
+/.yarn/*
+!/.yarn/patches
+!/.yarn/plugins
+!/.yarn/releases
+!/.yarn/sdks
+!/.yarn/versions
+/.links.yaml
 
 # Playwright
 /test-results/

.yarn/plugins/linker.cjs

@@ -0,0 +1,87 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+module.exports = {
+  name: "linker",
+  factory: (require) => ({
+    hooks: {
+      registerPackageExtensions: async (config, registerPackageExtension) => {
+        const { structUtils } = require("@yarnpkg/core");
+        const { parseSyml } = require("@yarnpkg/parsers");
+        const path = require("path");
+        const fs = require("fs");
+        const process = require("process");
+
+        // Create a descriptor that we can use to target our direct dependencies
+        const projectPath = config.projectCwd
+          .replace(/\\/g, "/")
+          .replace("/C:/", "C:/");
+        const manifestPath = path.join(projectPath, "package.json");
+        const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+        const selfDescriptor = structUtils.parseDescriptor(
+          `${manifest.name}@*`,
+          true,
+        );
+
+        // Load the list of linked packages
+        const linksPath = path.join(projectPath, ".links.yaml");
+        let linksFile;
+        try {
+          linksFile = fs.readFileSync(linksPath, "utf8");
+        } catch (e) {
+          return; // File doesn't exist, there's nothing to link
+        }
+        let links;
+        try {
+          links = parseSyml(linksFile);
+        } catch (e) {
+          console.error(".links.yaml has invalid syntax", e);
+          process.exit(1);
+        }
+
+        // Resolve paths and turn them into a Yarn package extension
+        const overrides = Object.fromEntries(
+          Object.entries(links).map(([name, link]) => [
+            name,
+            `portal:${path.resolve(config.projectCwd, link)}`,
+          ]),
+        );
+        const overrideIdentHashes = new Set();
+        for (const name of Object.keys(overrides))
+          overrideIdentHashes.add(
+            structUtils.parseDescriptor(`${name}@*`, true).identHash,
+          );
+
+        registerPackageExtension(selfDescriptor, { dependencies: overrides });
+
+        // Filter out the original dependencies from the package spec so Yarn
+        // knows to override them
+        const filterDependencies = (original) => {
+          const pkg = structUtils.copyPackage(original);
+          pkg.dependencies = new Map(
+            Array.from(pkg.dependencies.entries()).filter(
+              ([, value]) => !overrideIdentHashes.has(value.identHash),
+            ),
+          );
+          return pkg;
+        };
+
+        // Patch Yarn's own normalizePackage method with the above filter
+        const originalNormalizePackage = config.normalizePackage;
+        config.normalizePackage = function (pkg, extensions) {
+          return originalNormalizePackage.call(
+            this,
+            pkg.identHash === selfDescriptor.identHash
+              ? filterDependencies(pkg)
+              : pkg,
+            extensions,
+          );
+        };
+      },
+    },
+  }),
+};

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+plugins:
+  - .yarn/plugins/linker.cjs

README.md

@@ -147,6 +147,7 @@ To get started clone and set up this project:
 ```sh
 git clone https://github.com/element-hq/element-call.git
 cd element-call
+corepack enable
 yarn
 ```
 

docs/README.md

@@ -1,8 +1,9 @@
 ## Element Call Docs
 
-This folder contains documentation for Element Call setup and usage.
+This folder contains documentation for setup, usage, and development of Element Call.
 
 - [Embedded vs standalone mode](./embedded-standalone.md)
 - [Url format and parameters](./url-params.md)
 - [Global JS controls](./controls.md)
 - [Self-Hosting](./self-hosting.md)
+- [Developing with linked packages](./linking.md)

docs/linking.md

@@ -0,0 +1,12 @@
+# Developing with linked packages
+
+If you want to make changes to a package that Element Call depends on and see those changes applied in real time, you can create a link to a local copy of the package. Yarn has a command for this (`yarn link`), but it's not recommended to use it as it ends up modifying package.json with details specific to your development environment.
+
+Instead, you can use our little 'linker' plugin. Create a file named `.links.yaml` in the Element Call project directory, listing the names and paths of any dependencies you want to link. For example:
+
+```yaml
+matrix-js-sdk: ../path/to/matrix-js-sdk
+"@vector-im/compound-web": /home/alice/path/to/compound-web
+```
+
+Then run `yarn install`.

docs/self-hosting.md

@@ -105,6 +105,7 @@ source. First, clone and install the package:
 ```sh
 git clone https://github.com/element-hq/element-call.git
 cd element-call
+corepack enable
 yarn
 yarn build
 ```

package.json

@@ -130,5 +130,6 @@
   "resolutions": {
     "@livekit/components-core/rxjs": "^7.8.1",
     "matrix-widget-api": "1.11.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

scripts/dockerbuild.sh

@@ -4,5 +4,6 @@ set -ex
 
 export VITE_APP_VERSION=$(git describe --tags --abbrev=0)
 
+corepack enable
 yarn install
 yarn run build

src/analytics/PosthogAnalytics.ts

@@ -12,7 +12,6 @@ import posthog, {
 } from "posthog-js";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Buffer } from "buffer";
 
 import { widget } from "../widget";
 import {
@@ -297,7 +296,7 @@ export class PosthogAnalytics {
     const posthogIdMaterial = "ec" + accountAnalyticsId + client.getUserId();
     const bufferForPosthogId = await crypto.subtle.digest(
       "sha-256",
-      Buffer.from(posthogIdMaterial, "utf-8"),
+      new TextEncoder().encode(posthogIdMaterial),
     );
     const view = new Int32Array(bufferForPosthogId);
     return Array.from(view)