feat: convert TokenSource to be stateless again

Author: 1egoman

packages/react/src/TokenSource.ts

@@ -33,11 +33,10 @@ type RoomConfigurationPayload = NonNullable<ConstructorParameters<typeof RoomCon
 
 
 
-export abstract class TokenSourceBase {
-  abstract generate(): Promise<TokenSourceResponseObject>;
+export abstract class TokenSourceFixed {
+  abstract getToken(): Promise<TokenSourceResponseObject>;
 }
 
-export abstract class TokenSourceFixed extends TokenSourceBase {}
 export type TokenSourceOptions = {
   roomName?: string;
   participantName?: string;
@@ -48,11 +47,13 @@ export type TokenSourceOptions = {
   agentName?: string;
 };
 
-export abstract class TokenSourceConfigurable extends TokenSourceBase {
-  abstract setOptions(options: TokenSourceOptions): void;
-  abstract clearOptions(): void;
+export abstract class TokenSourceConfigurable {
+  abstract getToken(options: TokenSourceOptions): Promise<TokenSourceResponseObject>;
 }
 
+export type TokenSource = TokenSourceFixed | TokenSourceConfigurable;
+
+
 
 
 
@@ -131,33 +132,35 @@ export abstract class TokenSourceRefreshable extends TokenSourceConfigurable {
     return true;
   }
 
-  getJwtPayload() {
+  protected shouldUseCachedValue(options: TokenSourceOptions) {
     if (!this.cachedResponse) {
-      return null;
+      return false;
     }
-    return decodeTokenPayload(this.cachedResponse.participantToken);
-  }
-
-  setOptions(options: TokenSourceOptions) {
-    if (!this.isSameAsCachedOptions(options)) {
-      this.cachedResponse = null;
+    if (isResponseExpired(this.cachedResponse)) {
+      return false;
     }
-    this.options = options;
-  }
+    if (this.isSameAsCachedOptions(options)) {
+      return false;
+    }
+    return true;
+}
 
-  clearOptions() {
-    this.options = {};
-    this.cachedResponse = null;
+  getCachedResponseJwtPayload() {
+    if (!this.cachedResponse) {
+      return null;
+    }
+    return decodeTokenPayload(this.cachedResponse.participantToken);
   }
 
-  async getToken(): Promise<TokenSourceResponseObject> {
+  async getToken(options: TokenSourceOptions): Promise<TokenSourceResponseObject> {
     const unlock = await this.fetchMutex.lock();
     try {
-      if (this.cachedResponse && !isResponseExpired(this.cachedResponse)) {
+      if (this.shouldUseCachedValue(options)) {
         return this.cachedResponse!.toJson() as TokenSourceResponseObject;
       }
+      this.cachedOptions = options;
 
-      const tokenResponse = await this.update(this.options);
+      const tokenResponse = await this.update(options);
       this.cachedResponse = tokenResponse;
       return tokenResponse;
     } finally {

packages/react/src/hooks/useSession.ts

@@ -4,7 +4,7 @@ import { EventEmitter } from 'events';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
-  TokenSourceBase,
+  TokenSource,
   TokenSourceConfigurable,
   TokenSourceFixed,
   TokenSourceOptions,
@@ -52,7 +52,7 @@ type SessionStateCommon = {
   subtle: {
     emitter: TypedEventEmitter<SessionCallbacks>;
     room: Room;
-    tokenSource: TokenSourceBase,
+    tokenSource: TokenSource,
     agentConnectTimeoutMilliseconds?: number;
   };
 };
@@ -137,19 +137,6 @@ export function useSession(
 
   const emitter = useMemo(() => new EventEmitter() as TypedEventEmitter<SessionCallbacks>, []);
 
-  // Flexible `TokenSource`s can have options injected
-  useEffect(() => {
-    const isConfigurable = tokenSource instanceof TokenSourceConfigurable;
-    if (!isConfigurable) {
-      return;
-    }
-
-    tokenSource.setOptions(tokenSourceOptions);
-    return () => {
-      tokenSource.clearOptions();
-    };
-  }, [tokenSource, tokenSourceOptions]);
-
   const generateDerivedConnectionStateValues = useCallback(<State extends UseSessionReturn["connectionState"]>(connectionState: State) => ({
     isConnected: (
       connectionState === ConnectionState.Connected ||
@@ -330,6 +317,15 @@ export function useSession(
     },
   }), [conversationState, emitter, room, tokenSource]));
 
+  const tokenSourceGetToken = useCallback(() => {
+    const isConfigurable = tokenSource instanceof TokenSourceConfigurable;
+    if (isConfigurable) {
+      return tokenSource.getToken(tokenSourceOptions);
+    } else {
+      return tokenSource.getToken();
+    }
+  }, [tokenSource]);
+
   const start = useCallback(async (connectOptions: SessionConnectOptions = {}) => {
     const {
       signal,
@@ -345,8 +341,8 @@ export function useSession(
 
     await Promise.all([
       // FIXME: swap the below line in once the new `livekit-client` changes are published
-      // room.connect(options.credentials),
-      tokenSource.getToken().then(({ serverUrl, participantToken }) => (
+      // room.connect(tokenSource),
+      tokenSourceGetToken().then(({ serverUrl, participantToken }) => (
         room.connect(serverUrl, participantToken)
       )),
 
@@ -360,16 +356,18 @@ export function useSession(
     await agent.waitUntilAvailable(signal);
 
     signal?.removeEventListener('abort', onSignalAbort);
-  }, [room, waitUntilDisconnected, tokenSource, waitUntilConnected, agent.waitUntilAvailable]);
+  }, [room, waitUntilDisconnected, tokenSourceGetToken, waitUntilConnected, agent.waitUntilAvailable]);
 
   const end = useCallback(async () => {
     await room.disconnect();
   }, [room]);
 
   const prepareConnection = useCallback(async () => {
-    const credentials = await tokenSource.getToken();
+    const credentials = await tokenSourceGetToken();
+    // FIXME: swap the below line in once the new `livekit-client` changes are published
+    // room.prepareConnection(tokenSource),
     await room.prepareConnection(credentials.serverUrl, credentials.participantToken);
-  }, [tokenSource, room]);
+  }, [tokenSourceGetToken, room]);
   useEffect(() => {
     prepareConnection().catch(err => {
       // FIXME: figure out a better logging solution?