From b408610277cbf2bca2bcd7c9943d6dcda0d9d84e Mon Sep 17 00:00:00 2001 From: "Timo K." Date: Wed, 7 Oct 2026 12:01:21 +0200 Subject: [PATCH] Remove livekit-client from the list of external dependencies --- README.md | 5 +++-- component/package.json | 1 - docs/agents/architecture.md | 4 +++- scripts/check-component-externals.mjs | 3 +-- vite-component.config.ts | 6 +++++- 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5f1ed6bd2..2cbe2d127 100644 --- a/README.md +++ b/README.md @@ -306,9 +306,10 @@ directory target it rather than the repository; run them from the repository root. The host imports the component from `@element-hq/element-call-component` and the stylesheet from `@element-hq/element-call-component/style.css`, and has to provide `react`, -`react-dom`, `matrix-js-sdk`, `livekit-client`, `@vector-im/compound-web` and +`react-dom`, `matrix-js-sdk`, `@vector-im/compound-web` and `@vector-im/compound-design-tokens` itself, since the bundle leaves them -external. Compound's stylesheet are the host's to load too: the component shares +external. +Compound's stylesheet are the host's to load too: the component shares the host's copy of Compound, (required for example for tooltips) The component is large, and a host will usually load it lazily, only once a diff --git a/component/package.json b/component/package.json index ee81cd51b..0d45eb4d7 100644 --- a/component/package.json +++ b/component/package.json @@ -40,7 +40,6 @@ "peerDependencies": { "@vector-im/compound-design-tokens": "^11.0.0", "@vector-im/compound-web": "^10.0.0", - "livekit-client": "^2.18.1", "matrix-js-sdk": "*", "react": "^19", "react-dom": "^19" diff --git a/docs/agents/architecture.md b/docs/agents/architecture.md index fab783c19..59b0940e3 100644 --- a/docs/agents/architecture.md +++ b/docs/agents/architecture.md @@ -76,8 +76,10 @@ Code that builds in only one is a bug. - `build:component` — `@element-hq/element-call-component`, sources in `component/` (its own pnpm project; run pnpm from the repo root). Host API is in the README; `pnpm lint:externals` rejects an import of a `react` / `react-dom` / - `matrix-js-sdk` / `livekit-client` / `@vector-im/compound-web` / + `matrix-js-sdk` / `@vector-im/compound-web` / `@vector-im/compound-design-tokens` subpath the externals list omits. + `livekit-client` is bundled on purpose: no host imports it, and the pinned + version travels with the component. Compound's stylesheets are loaded by `src/index.css` for the page and by the host for the component, never by `src/base.css`. Two entry points: `index.tsx` (the component) and `api.ts` (types, enums and diff --git a/scripts/check-component-externals.mjs b/scripts/check-component-externals.mjs index 42d9235df..e088682d7 100644 --- a/scripts/check-component-externals.mjs +++ b/scripts/check-component-externals.mjs @@ -9,7 +9,7 @@ Please see LICENSE in the repository root for full details. * Checks that the component build leaves the packages a host must supply to * the host. * - * A host application already has React, the Matrix SDK, LiveKit and Compound, + * A host application already has React, the Matrix SDK and Compound, * and a second copy of any of them is worse than dead weight: React would hold * two sets of hooks, the Matrix client would run two sync loops, and a second * Compound would style the tooltips it floats into the host's body with class @@ -44,7 +44,6 @@ const MUST_BE_EXTERNAL = [ "react", "react-dom", "matrix-js-sdk", - "livekit-client", "@vector-im/compound-web", "@vector-im/compound-design-tokens", ]; diff --git a/vite-component.config.ts b/vite-component.config.ts index 93e661acd..5c4e01cb6 100644 --- a/vite-component.config.ts +++ b/vite-component.config.ts @@ -72,6 +72,11 @@ export default defineConfig(({ mode }) => { // host's Compound stylesheet only when the two happened to be the same // version. // + // LiveKit is deliberately not in this list. No host imports + // `livekit-client` itself, so bundling it duplicates nothing, and the + // exact version Element Call was tested against travels with it instead + // of being something every host has to pin and keep in step. + // // Every subpath has to be named. Element Call reaches most of the Matrix // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not // catch those — while the pattern and callback forms of this option are @@ -88,7 +93,6 @@ export default defineConfig(({ mode }) => { "react/compiler-runtime", "react-dom", "react-dom/client", - "livekit-client", "matrix-js-sdk", "matrix-js-sdk/lib/browser-index", "matrix-js-sdk/lib/client",