FCE-883 / Bundle webrtc package in ts-client (#186)

## Description

Configure TSUP to bundle webrtc client in the ts client.
Additionally add `protobufs` package and store the protobufs there,
instead of keeping them in `ts-client`.

## Motivation and Context

This allows to release `ts-client` without publishing `webrtc-client`.

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

.github/workflows/docs.yaml

@@ -31,6 +31,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Install node dependencies
@@ -46,4 +48,4 @@ jobs:
           path: "docs"
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2

.github/workflows/node.yaml

@@ -23,7 +23,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          cache: "npm"
+
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
 
       - name: Install dependencies ⬇️
         run: yarn --immutable

.github/workflows/playwright.yaml

@@ -19,7 +19,8 @@ jobs:
         with:
           node-version: 20
           cache: npm
-
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
       - name: Install dependencies ⬇️
         run: yarn --immutable
 

.github/workflows/release.yaml

@@ -13,11 +13,14 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
       - run: yarn
       - run: yarn build
-      - run: yarn npm publish --access public 
+      - run: yarn npm publish --access public
         working-directory: packages/ts-client
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -31,11 +34,11 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
       - run: yarn
       - run: yarn build
-      - run: yarn npm publish --access public 
+      - run: yarn npm publish --access public
         working-directory: packages/react-client
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitmodules

@@ -1,4 +1,3 @@
-[submodule "packages/ts-client/protos"]
-	path = packages/ts-client/protos
+[submodule "packages/protobufs/protos"]
+	path = packages/protobufs/protos
 	url = https://github.com/fishjam-cloud/protos.git
-	branch = master

e2e-tests/ts-client/app/package.json

@@ -16,6 +16,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fishjam-cloud/protobufs": "workspace:*",
     "@fishjam-cloud/ts-client": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

e2e-tests/ts-client/app/src/App.tsx

@@ -8,8 +8,8 @@ import type {
   BandwidthLimit,
   SimulcastConfig,
 } from "@fishjam-cloud/ts-client";
-import { WebRTCEndpoint } from "@fishjam-cloud/ts-client";
-import { PeerMessage } from "@fishjam-cloud/ts-client/protos";
+import { WebRTCEndpoint, sdkVersion } from "@fishjam-cloud/ts-client";
+import { PeerMessage } from "@fishjam-cloud/protobufs/fishjamPeer";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { MockComponent } from "./MockComponent";
 import { VideoPlayerWithDetector } from "./VideoPlayerWithDetector";
@@ -101,7 +101,9 @@ function connect(token: string, metadata: EndpointMetadata) {
   websocket.binaryType = "arraybuffer";
 
   function socketOpenHandler(_event: Event) {
-    const message = PeerMessage.encode({ authRequest: { token } }).finish();
+    const message = PeerMessage.encode({
+      authRequest: { token, sdkVersion },
+    }).finish();
     websocket.send(message);
   }
 

package.json

@@ -4,9 +4,10 @@
   "license": "MIT",
   "private": true,
   "workspaces": [
+    "packages/protobufs",
+    "packages/webrtc-client",
     "packages/ts-client",
     "packages/react-client",
-    "packages/webrtc-client",
     "examples/ts-client/*",
     "examples/react-client/*",
     "e2e-tests/ts-client/app",