feat(build): ESM and CJS bundles

package.json

@@ -63,19 +63,19 @@
     "@jscutlery/semver": "^2.30.1",
     "@nrwl/devkit": "^16.0.1",
     "@types/eslint": "^8.4.8",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
-    "@typescript-eslint/typescript-estree": "^5.47.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/typescript-estree": "^5.62.0",
     "eslint": "^8.28.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^4.2.1",
     "ngx-deploy-npm": "^5.2.0",
     "nx": "16.0.1",
-    "prettier": "^2.8.4",
-    "typescript": "^4.9.5",
-    "vercel": "^32.1.0",
-    "vite": "^4.4.9"
+    "prettier": "^2.8.8",
+    "typescript": "^5.2.2",
+    "vercel": "^32.4.1",
+    "vite": "^4.4.11"
   }
 }

packages/client/package.json

@@ -33,7 +33,7 @@
     "@protobuf-ts/runtime": "^2.9.1",
     "@protobuf-ts/runtime-rpc": "^2.9.1",
     "@protobuf-ts/twirp-transport": "^2.9.1",
-    "@types/ws": "^8.5.6",
+    "@types/ws": "^8.5.7",
     "axios": "^1.5.1",
     "base64-js": "^1.5.1",
     "isomorphic-ws": "^5.0.0",
@@ -46,19 +46,19 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.7.0",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-replace": "^5.0.3",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@types/jsonwebtoken": "^9.0.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": "^2.8.4",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.28.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.9",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
     "vitest": "^0.34.4",
     "vitest-mock-extended": "^1.2.1"
   }

packages/client/src/__tests__/server-side/call-members.test.ts

@@ -7,7 +7,7 @@ import { Call } from '../../Call';
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
-describe.skip('call members API', () => {
+describe('call members API', () => {
   let client: StreamVideoServerClient;
   const callId = `call${generateUUIDv4()}`;
   let call: Call;

packages/client/src/__tests__/server-side/call-types.test.ts

@@ -11,7 +11,7 @@ import {
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
-describe.skip('call types CRUD API', () => {
+describe('call types CRUD API', () => {
   let client: StreamVideoServerClient;
   const callTypeName = `calltype${generateUUIDv4()}`;
 
@@ -92,7 +92,7 @@ describe.skip('call types CRUD API', () => {
     });
   });
 
-  it.skip('update', async () => {
+  it('update', async () => {
     const updateResponse = await client.updateCallType(callTypeName, {
       settings: {
         audio: { mic_default_on: false, default_device: 'earpiece' },

packages/client/src/__tests__/server-side/call.test.ts

@@ -11,7 +11,7 @@ import {
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
-describe.skip('call API', () => {
+describe('call API', () => {
   let client: StreamVideoServerClient;
   const callId = `call${generateUUIDv4()}`;
   let call: Call;

packages/client/src/__tests__/server-side/create-token.test.ts

@@ -6,7 +6,7 @@ import { StreamVideoServerClient } from '../../StreamVideoServerClient';
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
-describe.skip('creating tokens', () => {
+describe('creating tokens', () => {
   let client: StreamVideoServerClient;
   const userId = 'john';
 

packages/client/src/__tests__/server-side/server-side-user.test.ts

@@ -5,7 +5,7 @@ import { StreamVideoServerClient } from '../../StreamVideoServerClient';
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
-describe.skip('server side user connect', () => {
+describe('server side user connect', () => {
   let client: StreamVideoServerClient;
 
   beforeEach(() => {

packages/client/src/devices/ScreenShareState.ts

@@ -1,6 +1,5 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
-import { distinctUntilChanged } from 'rxjs/operators';
 import { ScreenShareSettings } from '../types';
 
 export class ScreenShareState extends InputMediaDeviceManagerState<DisplayMediaStreamOptions> {

packages/client/src/rtc/Publisher.ts

@@ -707,7 +707,6 @@ export class Publisher {
         ].includes(trackType);
 
         const trackSettings = track.getSettings();
-        // @ts-expect-error - `channelCount` is not defined on `MediaTrackSettings`
         const isStereo = isAudioTrack && trackSettings.channelCount === 2;
 
         return {

packages/client/src/sorting/presets.ts

@@ -39,25 +39,15 @@ const ifInvisibleOrUnknownBy = conditional(
 export const defaultSortPreset = combineComparators(
   pinned,
   screenSharing,
-  ifInvisibleBy(dominantSpeaker),
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
-  // ifInvisibleBy(name),
-);
-
-/**
- * The sorting preset for speaker layout.
- */
-export const speakerLayoutSortPreset = combineComparators(
-  pinned,
-  screenSharing,
-  dominantSpeaker,
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
+  ifInvisibleBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   // ifInvisibleBy(name),
 );
 
@@ -67,23 +57,31 @@ export const speakerLayoutSortPreset = combineComparators(
  */
 export const paginatedLayoutSortPreset = combineComparators(
   pinned,
-  ifInvisibleOrUnknownBy(dominantSpeaker),
-  ifInvisibleOrUnknownBy(speaking),
-  ifInvisibleOrUnknownBy(reactionType('raised-hand')),
-  ifInvisibleOrUnknownBy(publishingVideo),
-  ifInvisibleOrUnknownBy(publishingAudio),
+  ifInvisibleOrUnknownBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   // ifInvisibleOrUnknownBy(name),
 );
 
 /**
  * The sorting preset for livestreams and audio rooms.
  */
 export const livestreamOrAudioRoomSortPreset = combineComparators(
-  ifInvisibleBy(dominantSpeaker),
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
+  ifInvisibleBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   role('admin', 'host', 'speaker'),
   // name,
 );

packages/client/src/store/CallState.ts

@@ -1,5 +1,10 @@
-import { BehaviorSubject, Observable } from 'rxjs';
-import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  map,
+  Observable,
+  shareReplay,
+} from 'rxjs';
 import type { Patch } from './rxUtils';
 import * as RxUtils from './rxUtils';
 import {
@@ -406,38 +411,38 @@ export class CallState {
 
       // events that update call state:
       'call.accepted': (e) => this.updateFromCallResponse(e.call),
+      'call.blocked_user': this.blockUser,
       'call.created': (e) => this.updateFromCallResponse(e.call),
-      'call.notification': (e) => {
+      'call.ended': (e) => {
         this.updateFromCallResponse(e.call);
-        this.setMembers(e.members);
+        this.setCurrentValue(this.endedBySubject, e.user);
       },
-      'call.rejected': (e) => this.updateFromCallResponse(e.call),
-      'call.ring': (e) => this.updateFromCallResponse(e.call),
+      'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
+      'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
       'call.live_started': (e) => this.updateFromCallResponse(e.call),
-      'call.updated': (e) => this.updateFromCallResponse(e.call),
-      'call.session_started': (e) => this.updateFromCallResponse(e.call),
-      'call.session_ended': (e) => this.updateFromCallResponse(e.call),
-      'call.ended': (e) => {
+      'call.member_added': this.updateFromMemberAdded,
+      'call.member_removed': this.updateFromMemberRemoved,
+      'call.member_updated_permission': this.updateMembers,
+      'call.member_updated': this.updateMembers,
+      'call.notification': (e) => {
         this.updateFromCallResponse(e.call);
-        this.setCurrentValue(this.endedBySubject, e.user);
+        this.setMembers(e.members);
       },
+      'call.permissions_updated': this.updateOwnCapabilities,
+      'call.reaction_new': this.updateParticipantReaction,
       'call.recording_started': () =>
         this.setCurrentValue(this.recordingSubject, true),
       'call.recording_stopped': () =>
         this.setCurrentValue(this.recordingSubject, false),
-      'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
-      'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
+      'call.rejected': (e) => this.updateFromCallResponse(e.call),
+      'call.ring': (e) => this.updateFromCallResponse(e.call),
+      'call.session_ended': (e) => this.updateFromCallResponse(e.call),
       'call.session_participant_joined':
         this.updateFromSessionParticipantJoined,
       'call.session_participant_left': this.updateFromSessionParticipantLeft,
-      'call.blocked_user': this.blockUser,
+      'call.session_started': (e) => this.updateFromCallResponse(e.call),
       'call.unblocked_user': this.unblockUser,
-      'call.permissions_updated': this.updateOwnCapabilities,
-      'call.member_added': this.updateFromMemberAdded,
-      'call.member_removed': this.updateFromMemberRemoved,
-      'call.member_updated': this.updateMembers,
-      'call.member_updated_permission': this.updateMembers,
-      'call.reaction_new': this.updateParticipantReaction,
+      'call.updated': (e) => this.updateFromCallResponse(e.call),
     };
   }
 

packages/client/src/store/rxUtils.ts

@@ -1,9 +1,19 @@
-import { Observable, Subject, combineLatest } from 'rxjs';
+import { combineLatest, Observable, Subject } from 'rxjs';
+
+type FunctionPatch<T> = (currentValue: T) => T;
 
 /**
  * A value or a function which takes the current value and returns a new value.
  */
-export type Patch<T> = T | ((currentValue: T) => T);
+export type Patch<T> = T | FunctionPatch<T>;
+
+/**
+ * Checks if the provided update is a function patch.
+ *
+ * @param update the value to check.
+ */
+const isFunctionPatch = <T>(update: Patch<T>): update is FunctionPatch<T> =>
+  typeof update === 'function';
 
 /**
  * Gets the current value of an observable, or undefined if the observable has
@@ -39,11 +49,9 @@ export const getCurrentValue = <T>(observable$: Observable<T>) => {
  * @return the updated value.
  */
 export const setCurrentValue = <T>(subject: Subject<T>, update: Patch<T>) => {
-  const next =
-    // TypeScript needs more context to infer the type of update
-    typeof update === 'function' && update instanceof Function
-      ? update(getCurrentValue(subject))
-      : update;
+  const next = isFunctionPatch(update)
+    ? update(getCurrentValue(subject))
+    : update;
 
   subject.next(next);
   return next;

packages/client/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "outDir": "./dist",
-    "module": "ES2015",
-    "target": "ES2015",
+    "module": "ES2020",
+    "target": "ES2020",
     "lib": [
       "esnext",
       "dom"
@@ -21,6 +21,7 @@
     "sourceMap": true,
     "inlineSources": true,
   },
+  "exclude": ["**/__tests__/**"],
   "include": [
     "./src",
     "index.ts",

packages/i18n/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@stream-io/i18n",
   "packageManager": "[email protected]",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "license": "See license in LICENSE",
   "scripts": {
     "clean": "rimraf dist",
-    "start": "tsc --project tsconfig.json --watch",
-    "build": "yarn clean && tsc --project tsconfig.json"
+    "start": "rollup -c -w",
+    "build": "yarn clean && rollup -c"
   },
   "files": [
     "dist",
@@ -22,8 +23,10 @@
     "i18next": "^22.4.15"
   },
   "devDependencies": {
-    "rimraf": "^5.0.1",
-    "typescript": "^4.9.5"
+    "@rollup/plugin-typescript": "^11.1.5",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
+    "typescript": "^5.2.2"
   },
   "version": "0.1.2"
 }

packages/i18n/rollup.config.mjs

@@ -0,0 +1,30 @@
+import typescript from '@rollup/plugin-typescript';
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+const config = {
+  input: 'index.ts',
+  output: [
+    {
+      file: 'dist/index.es.js',
+      format: 'es',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.cjs.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    typescript({
+      tsconfig:
+        process.env.NODE_ENV === 'production'
+          ? './tsconfig.production.json'
+          : './tsconfig.json',
+    }),
+  ],
+};
+
+export default [config];