cleanup vite.configs and simplify exported sdk props.

2026-01-18 02:32:27 +00:00 · 2025-12-02 11:31:56 +01:00
parent f76a6cb599
commit 93de12d79c
8 changed files with 933 additions and 88 deletions
--- a/knip.ts
+++ b/knip.ts
@@ -9,7 +9,7 @@ import { type KnipConfig } from "knip";

 export default {
  vite: {
-    config: ["vite.config.ts", "vite-embedded.config.ts"],
+    config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
  },
  entry: ["src/main.tsx", "i18next-parser.config.ts"],
  ignoreBinaries: [
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
    "loglevel": "^1.9.1",
    "matrix-js-sdk": "^39.2.0",
    "matrix-widget-api": "^1.14.0",
+    "node-stdlib-browser": "^1.3.1",
    "normalize.css": "^8.0.1",
    "observable-hooks": "^4.2.3",
    "pako": "^2.0.4",
@@ -135,6 +136,8 @@
    "vite": "^7.0.0",
    "vite-plugin-generate-file": "^0.3.0",
    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-node-stdlib-browser": "^0.2.1",
+    "vite-plugin-singlefile": "^2.3.0",
    "vite-plugin-svgr": "^4.0.0",
    "vitest": "^3.0.0",
    "vitest-axe": "^1.0.0-pre.3"
--- a/sdk/index.html
+++ b/sdk/index.html
@@ -13,11 +13,21 @@
      } catch (e) {
        console.error("createMatrixRTCSdk", e);
      }
-
      const sdk = window.matrixRTCSdk;
+
+      // This is the main bridging interface to godot
+      window.matrixRTCSdkGodot = {
+        dataObs: sdk.data$,
+        memberObs: sdk.members$,
+        // join: sdk.join, // lets stick with autojoin for now
+        sendData: sdk.sendData,
+        leave: sdk.leave,
+        connectedObs: sdk.connected$,
+      };
+
      console.info("matrixRTCSdk join ", sdk);
-      await sdk.join();
-      console.info("matrixRTCSdk joined ");
+      const connectionState = sdk.join();
+      console.info("matrixRTCSdk joined");

      const div = document.getElementById("data");
      div.innerHTML = "<h3>Data:</h3>";
@@ -30,14 +40,12 @@
      });

      sdk.members$.subscribe((memberObjects) => {
-        console.info("members changed", memberObjects);
-
        // reset div
        const div = document.getElementById("members");
        div.innerHTML = "<h3>Members:</h3>";

        // create member list
-        const members = memberObjects.map((member) => member.userId);
+        const members = memberObjects.map((member) => member.membership.sender);
        console.info("members changed", members);
        for (const m of members) {
          console.info("member", m);
@@ -45,22 +53,26 @@
          child.innerHTML = m;
          div.appendChild(child);
        }
-        // TODO forward to godot
      });
+
      sdk.connected$.subscribe((connected) => {
        console.info("connected changed", connected);
        const div = document.getElementById("connect_status");
        div.innerHTML = connected ? "Connected" : "Disconnected";
      });

-      // TODO use it as godot HTML template
-      // var engine = new Engine($GODOT_CONFIG);
-      // engine.startGame();
+      let engine = new Engine($GODOT_CONFIG);
+      engine.startGame();
    </script>
    <!--// TODO use it as godot HTML template-->
-    <!--<script src="$GODOT_URL"></script>-->
+    <script src="$GODOT_URL"></script>
  </head>
  <body>
+    <canvas id="canvas"></canvas>
+    <div
+      id="overlay"
+      style="position: absolute; top: 0; right: 0; background-color: #ffffff10"
+    >
      <div id="connect_status"></div>
      <button onclick="window.matrixRTCSdk.leave();">Leave</button>
      <button onclick="window.matrixRTCSdk.sendData({prop: 'Hello, world!'});">
@@ -68,6 +80,6 @@
      </button>
      <div id="members"></div>
      <div id="data"></div>
-    <canvas id="canvas"></canvas>
+    </div>
  </body>
 </html>
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -18,12 +18,25 @@ Please see LICENSE in the repository root for full details.
 *  - setting up encryption and scharing keys
 */

-import { map, type Observable, of, Subject, switchMap, tap } from "rxjs";
-import { MatrixRTCSessionEvent } from "matrix-js-sdk/lib/matrixrtc";
-import { type TextStreamInfo } from "livekit-client/dist/src/room/types";
+import {
+  combineLatest,
+  map,
+  type Observable,
+  of,
+  shareReplay,
+  Subject,
+  switchMap,
+  tap,
+} from "rxjs";
+import {
+  type CallMembership,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/lib/matrixrtc";
 import {
  type Room as LivekitRoom,
  type TextStreamReader,
+  type LocalParticipant,
+  type RemoteParticipant,
 } from "livekit-client";

 import { type Behavior, constant } from "../src/state/Behavior";
@@ -42,14 +55,23 @@ import {
  widget,
 } from "./helper";
 import { ElementWidgetActions } from "../src/widget";
-import { type MatrixLivekitMember } from "../src/state/CallViewModel/remoteMembers/MatrixLivekitMembers";
+import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";

 interface MatrixRTCSdk {
  join: () => LocalMemberConnectionState;
  /** @throws on leave errors */
  leave: () => void;
  data$: Observable<{ sender: string; data: string }>;
-  members$: Behavior<MatrixLivekitMember[]>;
+  /**
+   * flattened list of members
+   */
+  members$: Behavior<
+    {
+      connection: Connection | null;
+      membership: CallMembership;
+      participant: LocalParticipant | RemoteParticipant | null;
+    }[]
+  >;
  /** Use the LocalMemberConnectionState returned from `join` for a more detailed connection state  */
  connected$: Behavior<boolean>;
  sendData?: (data: unknown) => Promise<void>;
@@ -242,7 +264,30 @@ export async function createMatrixRTCSdk(): Promise<MatrixRTCSdk> {
    },
    data$,
    connected$: callViewModel.connected$,
-    members$: callViewModel.matrixLivekitMembers$,
+    members$: scope.behavior(
+      callViewModel.matrixLivekitMembers$.pipe(
+        switchMap((members) => {
+          const listOfMemberObservables = members.map((member) =>
+            combineLatest([
+              member.connection$,
+              member.membership$,
+              member.participant$,
+            ]).pipe(
+              map(([connection, membership, participant]) => ({
+                connection,
+                membership,
+                participant,
+              })),
+              // using shareReplay instead of a Behavior here because the behavior would need
+              // a tricky scope.end() setup.
+              shareReplay({ bufferSize: 1, refCount: true }),
+            ),
+          );
+          return combineLatest(listOfMemberObservables);
+        }),
+      ),
+      [],
+    ),
    sendData,
  };
 }
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -1519,7 +1519,6 @@ export function createCallViewModel$(
    localMatrixLivekitMember$,
    matrixLivekitMembers$: scope.behavior(
      matrixLivekitMembers$.pipe(
-        // TODO flatten this so its not a obs of obs.
        map((members) => members.value),
        tap((v) => {
          logger.debug("matrixLivekitMembers$ updated (exported)", v);
--- a/vite-sdk.config.js
+++ b/vite-sdk.config.js
@@ -6,26 +6,27 @@ Please see LICENSE in the repository root for full details.
 */

 import { defineConfig, mergeConfig } from "vite";
-import fullConfig from "./vite.config";
+import nodePolyfills from "vite-plugin-node-stdlib-browser";

 const base = "./";

 // Config for embedded deployments (possibly hosted under a non-root path)
-export default defineConfig((env) =>
+export default defineConfig(() =>
  mergeConfig(
-    fullConfig({ ...env, packageType: "sdk" }),
    defineConfig({
+      worker: { format: "es" },
      base, // Use relative URLs to allow the app to be hosted under any path
-      // publicDir: false, // Don't serve the public directory which only contains the favicon
      build: {
+        sourcemap: true,
        manifest: true,
        lib: {
+          formats: ["es"],
          entry: "./sdk/main.ts",
-          name: "matrixrtc-sdk",
-          // the proper extensions will be added
+          name: "MatrixrtcSdk",
          fileName: "matrixrtc-sdk",
        },
      },
+      plugins: [nodePolyfills()],
    }),
  ),
 );
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,7 +27,7 @@ import * as fs from "node:fs";
 export default ({
  mode,
  packageType,
-}: ConfigEnv & { packageType?: "full" | "embedded" | "sdk" }): UserConfig => {
+}: ConfigEnv & { packageType?: "full" | "embedded" }): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  // Environment variables with the VITE_ prefix are accessible at runtime.
  // So, we set this to allow for build/package specific behavior.
@@ -68,7 +68,7 @@ export default ({

  plugins.push(
    createHtmlPlugin({
-      entry: packageType === "sdk" ? "sdk/main.ts" : "src/main.tsx",
+      entry: "src/main.tsx",
      inject: {
        data: {
          brand: env.VITE_PRODUCT_NAME || "Element Call",
@@ -125,15 +125,10 @@ export default ({
            // Default naming fallback
            return "assets/[name]-[hash][extname]";
          },
-          manualChunks:
-            packageType !== "sdk"
-              ? {
+          manualChunks: {
            // we should be able to remove this one https://github.com/matrix-org/matrix-rust-sdk-crypto-wasm/pull/167 lands
-                  "matrix-sdk-crypto-wasm": [
-                    "@matrix-org/matrix-sdk-crypto-wasm",
-                  ],
-                }
-              : undefined,
+            "matrix-sdk-crypto-wasm": ["@matrix-org/matrix-sdk-crypto-wasm"],
+          },
        },
      },
    },
--- a/yarn.lock
+++ b/yarn.lock