Enable Element Call to be consumed as a package within a larger app

.github/workflows/element-call.yaml

@@ -30,7 +30,8 @@ jobs:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
+        # We should only need the production dependencies to build things
+        run: "yarn install --production --frozen-lockfile"
       - name: Build
         run: "yarn run build"
         env:

.github/workflows/lint.yaml

@@ -14,7 +14,7 @@ jobs:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
+        run: "yarn install --frozen-lockfile"
       - name: Prettier
         run: "yarn run prettier:check"
       - name: i18n

.github/workflows/test.yaml

@@ -16,7 +16,7 @@ jobs:
           cache: "yarn"
           node-version-file: ".node-version"
       - name: Install dependencies
-        run: "yarn install"
+        run: "yarn install --frozen-lockfile"
       - name: Vitest
         run: "yarn run test:coverage"
       - name: Upload to codecov

.npmignore

@@ -0,0 +1,4 @@
+# Ignore everything
+/*
+# And then restore just the dist directory
+!/dist/

knip.ts

@@ -25,6 +25,9 @@ export default {
     // https://github.com/webpro-nl/knip/issues/766
     "@vector-im/compound-web",
     "matrix-widget-api",
+    // @actions/github has an undeclared dependency on undici
+    // https://github.com/actions/toolkit/issues/1684
+    "undici",
   ],
   ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

package.json

@@ -6,6 +6,7 @@
     "dev": "vite",
     "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "serve": "vite preview",
+    "prepare": "yarn build --config vite-embedded.config.js",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
     "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
@@ -19,7 +20,7 @@
     "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f dev-backend-docker-compose.yml up"
   },
-  "devDependencies": {
+  "dependencies": {
     "@babel/core": "^7.16.5",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
@@ -44,6 +45,42 @@
     "@react-spring/web": "^9.4.4",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^2.0.0",
+    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^2.0.0",
+    "@vector-im/compound-web": "^7.2.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "classnames": "^2.3.1",
+    "i18next": "^23.0.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "livekit-client": "^2.5.7",
+    "lodash-es": "^4.17.21",
+    "loglevel": "^1.9.1",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^1.10.0",
+    "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
+    "pako": "^2.0.4",
+    "postcss": "^8.4.41",
+    "postcss-preset-env": "^10.0.0",
+    "posthog-js": "1.160.3",
+    "qrcode": "^1.5.4",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "rxjs": "^7.8.1",
+    "undici": "^5.25.4",
+    "unique-names-generator": "^4.6.0",
+    "vaul": "^1.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-compression2": "^1.3.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-svgr": "^4.0.0"
+  },
+  "devDependencies": {
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
@@ -62,14 +99,8 @@
     "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^2.0.0",
-    "@vector-im/compound-web": "^7.2.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^2.0.5",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
-    "classnames": "^2.3.1",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^9.0.0",
@@ -83,40 +114,13 @@
     "eslint-plugin-unicorn": "^56.0.0",
     "global-jsdom": "^25.0.0",
     "history": "^4.0.0",
-    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.0.0",
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
-    "livekit-client": "^2.5.7",
-    "lodash-es": "^4.17.21",
-    "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.10.0",
-    "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
-    "pako": "^2.0.4",
-    "postcss": "^8.4.41",
-    "postcss-preset-env": "^10.0.0",
-    "posthog-js": "1.160.3",
     "prettier": "^3.0.0",
-    "qrcode": "^1.5.4",
-    "react": "18",
-    "react-dom": "18",
-    "react-i18next": "^15.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7",
-    "react-use-measure": "^2.1.1",
-    "rxjs": "^7.8.1",
     "sass": "^1.42.1",
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
-    "unique-names-generator": "^4.6.0",
-    "vaul": "^1.0.0",
-    "vite": "^6.0.0",
-    "vite-plugin-compression2": "^1.3.1",
-    "vite-plugin-html-template": "^1.1.0",
-    "vite-plugin-svgr": "^4.0.0",
     "vitest": "^2.0.0",
     "vitest-axe": "^1.0.0-pre.3"
   },

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)

vite-embedded.config.js

@@ -0,0 +1,9 @@
+import { defineConfig, mergeConfig } from "vite";
+import standaloneConfig from "./vite.config";
+
+// Config for embedded deployments (possibly hosted under a non-root path)
+export default defineConfig((env) =>
+  mergeConfig(standaloneConfig(env), {
+    base: "", // Use relative URLs to allow the app to be hosted under any path
+  }),
+);

vite.config.js

@@ -8,12 +8,13 @@ Please see LICENSE in the repository root for full details.
 import { defineConfig, loadEnv } from "vite";
 import { compression } from "vite-plugin-compression2";
 import svgrPlugin from "vite-plugin-svgr";
-import htmlTemplate from "vite-plugin-html-template";
+import { createHtmlPlugin } from "vite-plugin-html";
 import { codecovVitePlugin } from "@codecov/vite-plugin";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 
+// Config for standalone deployments (hosted as an SPA at the root path)
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
@@ -28,9 +29,12 @@ export default defineConfig(({ mode }) => {
         ref: true,
       },
     }),
-    htmlTemplate.default({
-      data: {
-        title: env.VITE_PRODUCT_NAME || "Element Call",
+    createHtmlPlugin({
+      entry: "src/main.tsx",
+      inject: {
+        data: {
+          title: env.VITE_PRODUCT_NAME || "Element Call",
+        },
       },
     }),