Merge pull request #3095 from element-hq/robin/berry

Upgrade to Yarn v4 (Berry)

Author: robintown

.githooks/post-commit

@@ -0,0 +1,11 @@
+#!/usr/bin/sh
+
+FILE=.links.disabled.yaml
+if test -f "$FILE"; then
+  # echo "$FILE exists. -> moving to .links.disabled.yaml"
+  mv .links.disabled.yaml .links.yaml
+  # echo "running yarn"
+  yarnLog=$(yarn)
+  echo "[yarn-linker] The post-commit hook has re-enabled .links.yaml."
+  exit 1
+fi

.githooks/pre-commit

@@ -0,0 +1,12 @@
+#!/usr/bin/sh
+
+FILE=".links.yaml"
+if test -f "$FILE"; then
+  # echo "$FILE exists. -> moving to .links.disabled.yaml"
+  mv .links.yaml .links.disabled.yaml
+  # echo "running yarn"
+  x=$(yarn)
+  y=$(git add yarn.lock)
+  echo "[yarn-linker] The pre-commit hook has disabled .links.yaml and MODIFIED the yarn.lock file. Review the staged changes (the hook added yarn.lock, was this desired?) and run \`git commit \` again if they look okay. The post-commit hook will re-enable your links."
+  exit 1
+fi

.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/publish-embedded-packages.yaml

@@ -80,6 +80,7 @@ jobs:
           name: build-output-embedded
           path: embedded/web/dist
 
+      # n.b. We don't enable corepack here because we are using plain npm
       - name: Setup node
         uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4
         with:

.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
@@ -32,12 +34,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Enable Corepack
+        run: corepack enable
       - uses: actions/setup-node@v4
         with:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
       - name: Run backend components

.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,18 @@ 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
+/.links.disabled.yaml
 
 # Playwright
 /test-results/

.yarn/plugins/linker.cjs

@@ -0,0 +1,91 @@
+/*
+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: {
+      // Yarn's plugin system is very light on documentation. The best we have
+      // for this hook is simply the type definition in
+      // https://github.com/yarnpkg/berry/blob/master/packages/yarnpkg-core/sources/Plugin.ts
+      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,
+          );
+
+        // Extend our own package's dependencies with these local overrides
+        registerPackageExtension(selfDescriptor, { dependencies: overrides });
+
+        // Filter out the original dependencies from the package spec so Yarn
+        // actually respects the overrides
+        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 to use 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

@@ -149,6 +149,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
 ```
 
@@ -168,6 +169,10 @@ You're now ready to launch the development server:
 yarn dev
 ```
 
+See also:
+
+- [Developing with linked packages](./linking.md)
+
 ### Backend
 
 A docker compose file `dev-backend-docker-compose.yml` is provided to start the

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,39 @@
+# 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`.
+
+## Hooks
+
+Changes in `.links.yaml` will also update `yarn.lock` when `yarn` is executed. The lockfile will then contain the local
+version of the package which would not work on others dev setups or the github CI.
+One always needs to run:
+
+```bash
+mv .links.yaml .links.disabled.yaml
+yarn
+```
+
+before committing a change.
+
+To make it more convenient to work with this linking system we added git hooks for your conviniece.
+A `pre-commit` hook will run `mv .links.yaml .links.disabled.yaml`, `yarn` and `git add yarn.lock` if it detects
+a `.links.yaml` file and abort the commit.
+You will than need to check if the resulting changes are appropriate and commit again.
+
+A `post-commit` hook will setup the linking as it was
+before if a `.links.disabled.yaml` is present. It runs `mv .links.disabled.yaml .links.yaml` and `yarn`.
+
+To activate the hooks automatically configure git with
+
+```bash
+git config --local core.hooksPath .githooks/
+```

docs/self-hosting.md

@@ -159,6 +159,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": "yarn@4.7.0"
 }

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 { type Subscription } from "rxjs";
 
 import { widget } from "../widget";
@@ -296,7 +295,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)