Use optimized fonts from fontsource

Dockerfile

@@ -2,3 +2,9 @@ FROM nginxinc/nginx-unprivileged:alpine
 
 COPY ./dist /app
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf
+
+USER root
+
+RUN rm -rf /usr/share/nginx/html
+
+USER 101

config/nginx.conf

@@ -3,16 +3,23 @@ server {
     server_name  localhost;
 
     root   /app;
-    gzip_static on;
 
     location / {
+        # disable cache entriely by default (apart from Etag which is accurate enough)
+        add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+        if_modified_since off;
+        expires off;
+        # also turn off last-modified since they are just the timestamps of the file in the docker image
+        # and may or may not bear any resemblance to when the resource changed
+        add_header Last-Modified "";
+
         try_files $uri $uri/ /index.html;
-        add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
     # assets can be cached because they have hashed filenames
     location /assets {
-        add_header Cache-Control "public, immutable, max-age=31536000";
+        expires 1w;
+        add_header Cache-Control "public, no-transform";
     }
 
     location /apple-app-site-association {

package.json

@@ -51,9 +51,8 @@
     "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "^4.17.12",
+    "@types/lodash": "^4.14.199",
     "@types/node": "^20.0.0",
-    "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
@@ -89,7 +88,7 @@
     "jsdom": "^25.0.0",
     "knip": "^5.27.2",
     "livekit-client": "^2.5.7",
-    "lodash-es": "^4.17.21",
+    "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#8e9a04cdec0f88fc876bbbf406db55b0677f005d",
     "matrix-widget-api": "^1.10.0",
@@ -112,9 +111,8 @@
     "typescript": "^5.1.6",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "vaul": "^1.0.0",
+    "vaul": "^0.9.0",
     "vite": "^5.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",

public/locales/de/app.json

@@ -115,7 +115,7 @@
   "matrix_id": "Matrix-ID: {{id}}",
   "microphone_off": "Mikrofon aus",
   "microphone_on": "Mikrofon an",
-  "mute_microphone_button_label": "Mikrofon stumm schalten",
+  "mute_microphone_button_label": "Mikrofon deaktivieren",
   "participant_count_one": "{{count, number}}",
   "participant_count_other": "{{count, number}}",
   "qr_code": "QR-Code",
@@ -184,15 +184,14 @@
   "unauthenticated_view_body": "Noch nicht registriert? <2>Konto erstellen</2>",
   "unauthenticated_view_eula_caption": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
   "unauthenticated_view_login_button": "Melde dich mit deinem Konto an",
-  "unmute_microphone_button_label": "Mikrofon einschalten",
+  "unmute_microphone_button_label": "Mikrofon aktivieren",
   "version": "{{productName}} Version: {{version}}",
   "video_tile": {
     "always_show": "Immer anzeigen",
     "change_fit_contain": "An Fenster anpassen",
     "collapse": "Minimieren",
     "expand": "Erweitern",
-    "mute_for_me": "Für mich stumm schalten",
-    "muted_for_me": "Für mich stumm geschaltet",
+    "mute_for_me": "Für mich stummschalten",
     "volume": "Lautstärke"
   }
 }

src/@types/global.d.ts

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import "matrix-js-sdk/src/@types/global";
-import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
 import { Controls } from "../controls";
 
 declare global {
@@ -24,9 +23,4 @@ declare global {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;
   }
-
-  namespace Intl {
-    // Add DurationFormat as part of the Intl namespace because we polyfill it
-    const DurationFormat: typeof PolyfillDurationFormat;
-  }
 }

src/ClientContext.tsx

@@ -16,13 +16,19 @@ import {
   useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
+import {
+  ClientEvent,
+  ICreateClientOpts,
+  MatrixClient,
+} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
-import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
+import { WidgetApi } from "matrix-widget-api";
 
-import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,
@@ -30,6 +36,7 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
+import { Config } from "./config/Config";
 
 declare global {
   interface Window {
@@ -352,7 +359,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   );
 };
 
-export type InitResult = {
+type InitResult = {
   widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
@@ -369,8 +376,50 @@ async function loadClient(): Promise<InitResult | null> {
       passwordlessUser: false,
     };
   } else {
-    const { initSPA } = await import("./utils/spa");
-    return initSPA(loadSession, clearSession);
+    // We're running as a standalone application
+    try {
+      const session = loadSession();
+      if (!session) {
+        logger.log("No session stored; continuing without a client");
+        return null;
+      }
+
+      logger.log("Using a standalone client");
+
+      /* eslint-disable camelcase */
+      const { user_id, device_id, access_token, passwordlessUser } = session;
+      const initClientParams: ICreateClientOpts = {
+        baseUrl: Config.defaultHomeserverUrl()!,
+        accessToken: access_token,
+        userId: user_id,
+        deviceId: device_id,
+        fallbackICEServerAllowed: fallbackICEServerAllowed,
+        livekitServiceURL: Config.get().livekit?.livekit_service_url,
+      };
+
+      try {
+        const client = await initClient(initClientParams, true);
+        return {
+          widgetApi: null,
+          client,
+          passwordlessUser,
+        };
+      } catch (err) {
+        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
+          // We can't use this session anymore, so let's log it out
+          logger.log(
+            "The session from local store is invalid; continuing without a client",
+          );
+          clearSession();
+          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
+          return null;
+        }
+        throw err;
+      }
+    } catch (err) {
+      clearSession();
+      throw err;
+    }
   }
 }
 

src/__snapshots__/Modal.test.tsx.snap

@@ -39,16 +39,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   aria-labelledby="radix-:ra:"
   class="overlay modal drawer"
   data-state="open"
-  data-vaul-animate="true"
-  data-vaul-custom-container="false"
-  data-vaul-delayed-snap-points="false"
-  data-vaul-drawer=""
-  data-vaul-drawer-direction="bottom"
-  data-vaul-snap-points="false"
   id="radix-:r9:"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
+  vaul-drawer=""
+  vaul-drawer-direction="bottom"
+  vaul-drawer-visible="true"
 >
   <div
     class="content"

src/config/Config.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { merge } from "lodash-es";
+import { merge } from "lodash";
 
 import { getUrlParams } from "../UrlParams";
 import {

src/initializer.test.ts

@@ -9,9 +9,9 @@ import { expect, test } from "vitest";
 
 import { Initializer } from "../src/initializer";
 
-test("initBeforeReact sets font family from URL param", async () => {
+test("initBeforeReact sets font family from URL param", () => {
   window.location.hash = "#?font=DejaVu Sans";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue(
       "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", async () => {
   ).toBe('"DejaVu Sans"');
 });
 
-test("initBeforeReact sets font scale from URL param", async () => {
+test("initBeforeReact sets font scale from URL param", () => {
   window.location.hash = "#?fontScale=1.2";
-  await Initializer.initBeforeReact();
+  Initializer.initBeforeReact();
   expect(
     getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
   ).toBe("1.2");

src/initializer.tsx

@@ -11,8 +11,6 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
-import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
@@ -43,17 +41,10 @@ export class Initializer {
     return Initializer.internalInstance?.isInitialized;
   }
 
-  public static async initBeforeReact(): Promise<void> {
-    const polyfills: Promise<unknown>[] = [];
-    if (shouldPolyfillSegmenter()) {
-      polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
-    }
-
-    if (shouldPolyfillDurationFormat()) {
-      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
-    }
-
-    await Promise.all(polyfills);
+  public static initBeforeReact(): void {
+    // this maybe also needs to return a promise in the future,
+    // if we have to do async inits before showing the loading screen
+    // but this should be avoided if possible
 
     //i18n
     const languageDetector = new LanguageDetector();
@@ -63,7 +54,7 @@ export class Initializer {
       lookup: () => getUrlParams().lang ?? undefined,
     });
 
-    await i18n
+    i18n
       .use(Backend)
       .use(languageDetector)
       .use(initReactI18next)
@@ -83,6 +74,9 @@ export class Initializer {
           order: ["urlFragment", "navigator"],
           caches: [],
         },
+      })
+      .catch((e) => {
+        logger.error("Failed to initialize i18n", e);
       });
 
     // Custom Themeing

src/main.tsx

@@ -20,6 +20,8 @@ import {
   setLogExtension as setLKLogExtension,
   setLogLevel as setLKLogLevel,
 } from "livekit-client";
+import "@formatjs/intl-segmenter/polyfill";
+import "@formatjs/intl-durationformat/polyfill";
 
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
@@ -55,17 +57,12 @@ if (fatalError !== null) {
   throw fatalError; // Stop the app early
 }
 
-Initializer.initBeforeReact()
-  .then(() => {
-    const history = createBrowserHistory();
+Initializer.initBeforeReact();
 
-    root.render(
-      <StrictMode>
-        <App history={history} />
-      </StrictMode>,
-    );
-  })
-  .catch((e) => {
-    logger.error("Failed to initialize app", e);
-    root.render(e.message);
-  });
+const history = createBrowserHistory();
+
+root.render(
+  <StrictMode>
+    <App history={history} />
+  </StrictMode>,
+);

src/reactions/RaisedHandIndicator.tsx

@@ -11,12 +11,19 @@ import {
   useCallback,
   useEffect,
   useState,
-  useMemo,
 } from "react";
+import { DurationFormat } from "@formatjs/intl-durationformat";
 import { useTranslation } from "react-i18next";
 
 import { ReactionIndicator } from "./ReactionIndicator";
 
+const durationFormatter = new DurationFormat(undefined, {
+  minutesDisplay: "always",
+  secondsDisplay: "always",
+  hoursDisplay: "auto",
+  style: "digital",
+});
+
 export function RaisedHandIndicator({
   raisedHandTime,
   miniature,
@@ -31,17 +38,6 @@ export function RaisedHandIndicator({
   const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
-  const durationFormatter = useMemo(
-    () =>
-      new Intl.DurationFormat(undefined, {
-        minutesDisplay: "always",
-        secondsDisplay: "always",
-        hoursDisplay: "auto",
-        style: "digital",
-      }),
-    [],
-  );
-
   const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (event) => {
       if (!onClick) {
@@ -73,7 +69,7 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
   if (!raisedHandTime) {
     return;

src/settings/rageshake.ts

@@ -28,7 +28,7 @@ Please see LICENSE in the repository root for full details.
 //    purge on startup to prevent logs from accumulating.
 
 import EventEmitter from "events";
-import { throttle } from "lodash-es";
+import { throttle } from "lodash";
 import { Logger, logger } from "matrix-js-sdk/src/logger";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import loglevel, { LoggingMethod } from "loglevel";

src/settings/submit-rageshake.ts

@@ -6,6 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { ComponentProps, useCallback, useEffect, useState } from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import pako from "pako";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
   ClientEvent,
@@ -20,14 +23,11 @@ import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
 
-const gzip = async (text: string): Promise<Blob> => {
-  // pako is relatively large (200KB), so we only import it when needed
-  const { gzip: pakoGzip } = await import("pako");
-
+const gzip = (text: string): Blob => {
   // encode as UTF-8
   const buf = new TextEncoder().encode(text);
   // compress
-  return new Blob([pakoGzip(buf)]);
+  return new Blob([pako.gzip(buf)]);
 };
 
 /**
@@ -253,14 +253,12 @@ export function useSubmitRageshake(): {
           const logs = await getLogsForReport();
 
           for (const entry of logs) {
-            body.append("compressed-log", await gzip(entry.lines), entry.id);
+            body.append("compressed-log", gzip(entry.lines), entry.id);
           }
 
           body.append(
             "file",
-            await gzip(
-              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
-            ),
+            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
             "traces.json.gz",
           );
         }

src/state/CallViewModel.test.ts

@@ -23,7 +23,7 @@ import {
   RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash-es";
+import { isEqual } from "lodash";
 
 import { CallViewModel, Layout } from "./CallViewModel";
 import {

src/state/CallViewModel.ts

@@ -672,7 +672,7 @@ export class CallViewModel extends ViewModel {
     this.gridModeUserSelection.next(value);
   }
 
-  private readonly gridLayoutMedia: Observable<GridLayoutMedia> = combineLatest(
+  private readonly gridLayout: Observable<LayoutMedia> = combineLatest(
     [this.grid, this.spotlight],
     (grid, spotlight) => ({
       type: "grid",
@@ -683,28 +683,28 @@ export class CallViewModel extends ViewModel {
     }),
   );
 
-  private readonly spotlightLandscapeLayoutMedia: Observable<SpotlightLandscapeLayoutMedia> =
+  private readonly spotlightLandscapeLayout: Observable<LayoutMedia> =
     combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
       type: "spotlight-landscape",
       spotlight,
       grid,
     }));
 
-  private readonly spotlightPortraitLayoutMedia: Observable<SpotlightPortraitLayoutMedia> =
+  private readonly spotlightPortraitLayout: Observable<LayoutMedia> =
     combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
       type: "spotlight-portrait",
       spotlight,
       grid,
     }));
 
-  private readonly spotlightExpandedLayoutMedia: Observable<SpotlightExpandedLayoutMedia> =
+  private readonly spotlightExpandedLayout: Observable<LayoutMedia> =
     combineLatest([this.spotlight, this.pip], (spotlight, pip) => ({
       type: "spotlight-expanded",
       spotlight,
       pip: pip ?? undefined,
     }));
 
-  private readonly oneOnOneLayoutMedia: Observable<OneOnOneLayoutMedia | null> =
+  private readonly oneOnOneLayout: Observable<LayoutMedia | null> =
     this.mediaItems.pipe(
       map((mediaItems) => {
         if (mediaItems.length !== 2) return null;
@@ -722,8 +722,9 @@ export class CallViewModel extends ViewModel {
       }),
     );
 
-  private readonly pipLayoutMedia: Observable<LayoutMedia> =
-    this.spotlight.pipe(map((spotlight) => ({ type: "pip", spotlight })));
+  private readonly pipLayout: Observable<LayoutMedia> = this.spotlight.pipe(
+    map((spotlight) => ({ type: "pip", spotlight })),
+  );
 
   /**
    * The media to be used to produce a layout.
@@ -736,24 +737,24 @@ export class CallViewModel extends ViewModel {
             switchMap((gridMode) => {
               switch (gridMode) {
                 case "grid":
-                  return this.oneOnOneLayoutMedia.pipe(
+                  return this.oneOnOneLayout.pipe(
                     switchMap((oneOnOne) =>
-                      oneOnOne === null ? this.gridLayoutMedia : of(oneOnOne),
+                      oneOnOne === null ? this.gridLayout : of(oneOnOne),
                     ),
                   );
                 case "spotlight":
                   return this.spotlightExpanded.pipe(
                     switchMap((expanded) =>
                       expanded
-                        ? this.spotlightExpandedLayoutMedia
-                        : this.spotlightLandscapeLayoutMedia,
+                        ? this.spotlightExpandedLayout
+                        : this.spotlightLandscapeLayout,
                     ),
                   );
               }
             }),
           );
         case "narrow":
-          return this.oneOnOneLayoutMedia.pipe(
+          return this.oneOnOneLayout.pipe(
             switchMap((oneOnOne) =>
               oneOnOne === null
                 ? combineLatest(
@@ -761,12 +762,12 @@ export class CallViewModel extends ViewModel {
                     (grid, spotlight) =>
                       grid.length > smallMobileCallThreshold ||
                       spotlight.some((vm) => vm instanceof ScreenShareViewModel)
-                        ? this.spotlightPortraitLayoutMedia
-                        : this.gridLayoutMedia,
+                        ? this.spotlightPortraitLayout
+                        : this.gridLayout,
                   ).pipe(switchAll())
                 : // The expanded spotlight layout makes for a better one-on-one
                   // experience in narrow windows
-                  this.spotlightExpandedLayoutMedia,
+                  this.spotlightExpandedLayout,
             ),
           );
         case "flat":
@@ -776,14 +777,14 @@ export class CallViewModel extends ViewModel {
                 case "grid":
                   // Yes, grid mode actually gets you a "spotlight" layout in
                   // this window mode.
-                  return this.spotlightLandscapeLayoutMedia;
+                  return this.spotlightLandscapeLayout;
                 case "spotlight":
-                  return this.spotlightExpandedLayoutMedia;
+                  return this.spotlightExpandedLayout;
               }
             }),
           );
         case "pip":
-          return this.pipLayoutMedia;
+          return this.pipLayout;
       }
     }),
     this.scope.state(),

src/utils/spa.ts

@@ -1,64 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only
-Please see LICENSE in the repository root for full details.
-*/
-
-import { ICreateClientOpts } from "matrix-js-sdk/src/client";
-import { MatrixError } from "matrix-js-sdk/src/http-api";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { Config } from "../config/Config";
-import { fallbackICEServerAllowed, initClient } from "./matrix";
-import type { InitResult, Session } from "../ClientContext";
-
-export async function initSPA(
-  loadSession: () => Session | undefined,
-  clearSession: () => void,
-): Promise<InitResult | null> {
-  // We're running as a standalone application
-  try {
-    const session = loadSession();
-    if (!session) {
-      logger.log("No session stored; continuing without a client");
-      return null;
-    }
-
-    logger.log("Using a standalone client");
-
-    /* eslint-disable camelcase */
-    const { user_id, device_id, access_token, passwordlessUser } = session;
-    const initClientParams: ICreateClientOpts = {
-      baseUrl: Config.defaultHomeserverUrl()!,
-      accessToken: access_token,
-      userId: user_id,
-      deviceId: device_id,
-      fallbackICEServerAllowed,
-      livekitServiceURL: Config.get().livekit?.livekit_service_url,
-    };
-
-    try {
-      const client = await initClient(initClientParams, true);
-      return {
-        widgetApi: null,
-        client,
-        passwordlessUser,
-      };
-    } catch (err) {
-      if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
-        // We can't use this session anymore, so let's log it out
-        logger.log(
-          "The session from local store is invalid; continuing without a client",
-        );
-        clearSession();
-        // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
-        return null;
-      }
-      throw err;
-    }
-  } catch (err) {
-    clearSession();
-    throw err;
-  }
-}

src/vitest.setup.ts

@@ -6,8 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import "global-jsdom/register";
-import "@formatjs/intl-durationformat/polyfill";
-import "@formatjs/intl-segmenter/polyfill";
 import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
@@ -16,7 +14,6 @@ import { cleanup } from "@testing-library/react";
 import "vitest-axe/extend-expect";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import EN_GB from "../public/locales/en-GB/app.json";
 import { Config } from "./config/Config";
 
 // Bare-minimum i18n config
@@ -25,13 +22,6 @@ i18n
   .init({
     lng: "en-GB",
     fallbackLng: "en-GB",
-    supportedLngs: ["en-GB"],
-    // We embed the translations, so that it never needs to fetch
-    resources: {
-      "en-GB": {
-        app: EN_GB,
-      },
-    },
     interpolation: {
       escapeValue: false, // React has built-in XSS protections
     },

vite.config.js

@@ -6,7 +6,6 @@ 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 { codecovVitePlugin } from "@codecov/vite-plugin";
@@ -39,10 +38,6 @@ export default defineConfig(({ mode }) => {
       bundleName: "element-call",
       uploadToken: process.env.CODECOV_TOKEN,
     }),
-
-    compression({
-      exclude: [/config.json/],
-    }),
   ];
 
   if (

yarn.lock

@@ -2542,7 +2542,7 @@
     "@react-spring/shared" "~9.7.5"
     "@react-spring/types" "~9.7.5"
 
-"@rollup/pluginutils@^5.1.0", "@rollup/pluginutils@^5.1.3":
+"@rollup/pluginutils@^5.1.3":
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
   integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
@@ -3017,14 +3017,7 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash-es@^4.17.12":
-  version "4.17.12"
-  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
-  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
+"@types/lodash@^4.14.199":
   version "4.17.13"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
   integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
@@ -3060,11 +3053,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
   integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
 
-"@types/pako@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
-  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
-
 "@types/prop-types@*":
   version "15.7.13"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
@@ -6100,6 +6088,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loglevel@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.1.tgz#d63976ac9bcd03c7c873116d41c2a85bafff1be7"
@@ -7927,11 +7920,6 @@ tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar-mini@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/tar-mini/-/tar-mini-0.2.0.tgz#2b2cdc215f5b83b0ab8ce363dc9ded22de51849b"
-  integrity sha512-+qfUHz700DWnRutdUsxRRVZ38G1Qr27OetwaMYTdg8hcPxf46U0S1Zf76dQMWRBmusOt2ZCK5kbIaiLkoGO7WQ==
-
 teex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/teex/-/teex-1.0.1.tgz#b8fa7245ef8e8effa8078281946c85ab780a0b12"
@@ -8367,6 +8355,13 @@ value-or-function@^4.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-4.0.0.tgz#70836b6a876a010dc3a2b884e7902e9db064378d"
   integrity sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==
 
+vaul@^0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.1.tgz#3640198e04636b209b1f907fcf3079bec6ecc66b"
+  integrity sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.0.4"
+
 vaul@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.0.tgz#7da4bc965e0b184ada632f1208096b0f5575d920"
@@ -8435,16 +8430,6 @@ vite-node@2.1.4:
     pathe "^1.1.2"
     vite "^5.0.0"
 
-vite-plugin-compression2@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/vite-plugin-compression2/-/vite-plugin-compression2-1.3.1.tgz#ac2a512f8ca90a76687add6cf441000dd2c41485"
-  integrity sha512-UMr66CFu+RVPiD8E3iaX9BdZjCgO+lzzaAPAZvL5YgwH6FU4OR/MulJEyp9wq9EKoO6ErjUtPpaiDi3hvzv79Q==
-  dependencies:
-    "@rollup/pluginutils" "^5.1.0"
-    tar-mini "^0.2.0"
-  optionalDependencies:
-    vite "^5.3.4"
-
 vite-plugin-html-template@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-html-template/-/vite-plugin-html-template-1.2.2.tgz#d263c18dcf5f5e54bc74894546fd0ed993191f2f"
@@ -8461,7 +8446,7 @@ vite-plugin-svgr@^4.0.0:
     "@svgr/core" "^8.1.0"
     "@svgr/plugin-jsx" "^8.1.0"
 
-vite@^5.0.0, vite@^5.3.4:
+vite@^5.0.0:
   version "5.4.11"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
   integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==