feat: React SDK cold-start optimizations (#1488)

Improves the cold-start performance of our React Video SDK by extracting
the core parts of the `CallStatsLatencyChart` component in a separate
lazy-loaded chunk. This saves around ~150KB of minified JS from being
loaded, parsed, and compiled by the browser. We now use
code-size-optimized Protobuf models. Binary encoding and decoding now
happen through reflection (saves ~60KB minified).
The total saving is ~210KB after minification, a drop of ~30%.

Additionally, the SDK is now marked as free of side effects thus,
allowing bundlers to tree-shake the unused code more efficiently.

### Possible breaking changes
- `CallStats` exported a few enums that weren't intended to be part of
the public API (`Statuses`). This is now fixed. Customers possibly
relying on this enum are advised to copy it in their codebase.
- `CallStatsLatencyChart` isn't exported anymore.

### New
- Dependencies were updated to their latest versions
- Now we use `rollup@4` to bundle libs and `vite@5` to run our sample
apps
- CallStats component now has an optional `showCodecInfo`. When enabled,
it will show the name of the codec currently in use.

---------

Co-authored-by: Matvei Andrienko <m.y.andrienko@outlook.com>

package.json

@@ -78,8 +78,8 @@
     "nx": "16.10.0",
     "prettier": "^3.3.2",
     "typescript": "^5.5.2",
-    "vercel": "^37.2.1",
-    "vite": "^4.4.11"
+    "vercel": "^37.4.2",
+    "vite": "^5.4.6"
   },
   "resolutions": {
     "eslint-plugin-prettier": "^5.1.3"

packages/audio-filters-web/package.json

@@ -16,6 +16,7 @@
     "url": "https://github.com/GetStream/stream-video-js.git",
     "directory": "packages/audio-filters-web"
   },
+  "sideEffects": false,
   "files": [
     "dist",
     "src",
@@ -29,10 +30,10 @@
     "wasm-feature-detect": "^1.6.1"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "rimraf": "^5.0.7",
-    "rollup": "^3.29.4",
+    "rollup": "^4.22.0",
     "typescript": "^5.5.2"
   }
 }

packages/client/package.json

@@ -43,20 +43,20 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.13.4",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stream-io/audio-filters-web": "workspace:^",
-    "@stream-io/node-sdk": "^0.4.0",
+    "@stream-io/node-sdk": "^0.4.3",
     "@types/sdp-transform": "^2.4.7",
     "@types/ua-parser-js": "^0.7.37",
     "@vitest/coverage-v8": "^0.34.4",
     "dotenv": "^16.3.1",
     "happy-dom": "^11.0.2",
     "prettier": "^3.3.2",
     "rimraf": "^5.0.7",
-    "rollup": "^3.29.4",
+    "rollup": "^4.22.0",
     "typescript": "^5.5.2",
-    "vite": "^4.4.11",
+    "vite": "^5.4.6",
     "vitest": "^1.0.0",
     "vitest-mock-extended": "^1.2.1"
   }

packages/client/src/coordinator/connection/client.ts

@@ -47,7 +47,6 @@ export class StreamClient {
   axiosInstance: AxiosInstance;
   baseURL?: string;
   browser: boolean;
-  cleaningIntervalRef?: NodeJS.Timeout;
   clientID?: string;
   key: string;
   listeners: Partial<
@@ -323,11 +322,6 @@ export class StreamClient {
    *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
    */
   closeConnection = async (timeout?: number) => {
-    if (this.cleaningIntervalRef != null) {
-      clearInterval(this.cleaningIntervalRef);
-      this.cleaningIntervalRef = undefined;
-    }
-
     await Promise.all([
       this.wsConnection?.disconnect(timeout),
       this.wsFallback?.disconnect(timeout),