@reactor-team/js-sdk 2.0.0 → 2.0.2

package/README.md

@@ -11,24 +11,10 @@ There are two main ways to use the frontend SDK:
 
 ## Building the SDK
 
-Set up the environment variables:
-
-```bash
-cp .env.example .env
-```
-
-Then add your NPM_TOKEN to the .env file.
-
-Build the SDK:
-
 ```bash
 pnpm build
 ```
 
-## Publishing
-
-To publish the SDK:
+## Documentation
 
-```bash
-./publish_package.sh
-```
+- [Getting Started](https://docs.reactor.inc)

package/dist/index.d.mts

@@ -11,6 +11,9 @@ interface ReactorError {
     component: "coordinator" | "gpu" | "livekit";
     retryAfter?: number;
 }
+declare class ConflictError extends Error {
+    constructor(message: string);
+}
 interface ReactorState$1 {
     status: ReactorStatus;
     lastError?: ReactorError;
@@ -171,4 +174,17 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, PROD_COORDINATOR_URL, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, WebcamStream, useReactor, useReactorMessage, useReactorStore };
+/**
+ * ⚠️ INSECURE: Fetches a JWT token directly from the client.
+ *
+ * WARNING: This function exposes your API key in client-side code.
+ * Only use this for local development or testing purposes.
+ * In production, call /tokens from your server and pass the JWT to your frontend.
+ *
+ * @param apiKey - Your Reactor API key (will be exposed in client code!)
+ * @param coordinatorUrl - Optional coordinator URL, defaults to production
+ * @returns string containing the JWT token
+ */
+declare function fetchInsecureJwtToken(apiKey: string, coordinatorUrl?: string): Promise<string>;
+
+export { ConflictError, type Options, PROD_COORDINATOR_URL, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, WebcamStream, fetchInsecureJwtToken, useReactor, useReactorMessage, useReactorStore };

package/dist/index.d.ts

@@ -11,6 +11,9 @@ interface ReactorError {
     component: "coordinator" | "gpu" | "livekit";
     retryAfter?: number;
 }
+declare class ConflictError extends Error {
+    constructor(message: string);
+}
 interface ReactorState$1 {
     status: ReactorStatus;
     lastError?: ReactorError;
@@ -171,4 +174,17 @@ declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
  */
 declare function useReactorMessage(handler: (message: any) => void): void;
 
-export { type Options, PROD_COORDINATOR_URL, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, WebcamStream, useReactor, useReactorMessage, useReactorStore };
+/**
+ * ⚠️ INSECURE: Fetches a JWT token directly from the client.
+ *
+ * WARNING: This function exposes your API key in client-side code.
+ * Only use this for local development or testing purposes.
+ * In production, call /tokens from your server and pass the JWT to your frontend.
+ *
+ * @param apiKey - Your Reactor API key (will be exposed in client code!)
+ * @param coordinatorUrl - Optional coordinator URL, defaults to production
+ * @returns string containing the JWT token
+ */
+declare function fetchInsecureJwtToken(apiKey: string, coordinatorUrl?: string): Promise<string>;
+
+export { ConflictError, type Options, PROD_COORDINATOR_URL, Reactor, ReactorController, type ReactorControllerProps, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, WebcamStream, fetchInsecureJwtToken, useReactor, useReactorMessage, useReactorStore };

package/dist/index.js

@@ -79,18 +79,27 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ConflictError: () => ConflictError,
   PROD_COORDINATOR_URL: () => PROD_COORDINATOR_URL,
   Reactor: () => Reactor,
   ReactorController: () => ReactorController,
   ReactorProvider: () => ReactorProvider,
   ReactorView: () => ReactorView,
   WebcamStream: () => WebcamStream,
+  fetchInsecureJwtToken: () => fetchInsecureJwtToken,
   useReactor: () => useReactor,
   useReactorMessage: () => useReactorMessage,
   useReactorStore: () => useReactorStore
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/types.ts
+var ConflictError = class extends Error {
+  constructor(message) {
+    super(message);
+  }
+};
+
 // src/core/CoordinatorClient.ts
 var INITIAL_BACKOFF_MS = 500;
 var MAX_BACKOFF_MS = 3e4;
@@ -109,6 +118,11 @@ var CoordinatorClient = class {
       Authorization: `Bearer ${this.jwtToken}`
     };
   }
+  getIceServers() {
+    return __async(this, null, function* () {
+      return [{ urls: "stun:stun.l.google.com:19302" }];
+    });
+  }
   /**
    * Creates a new session with the coordinator.
    * Expects a 200 response and stores the session ID.
@@ -345,6 +359,27 @@ var LocalCoordinatorClient = class extends CoordinatorClient {
     });
     this.localBaseUrl = baseUrl;
   }
+  /**
+   * Gets ICE servers from the local HTTP runtime.
+   * @returns The ICE server configuration
+   */
+  getIceServers() {
+    return __async(this, null, function* () {
+      console.debug("[LocalCoordinatorClient] Fetching ICE servers...");
+      const response = yield fetch(`${this.localBaseUrl}/ice_servers`, {
+        method: "GET"
+      });
+      if (!response.ok) {
+        throw new Error("Failed to get ICE servers from local coordinator.");
+      }
+      const data = yield response.json();
+      console.debug(
+        "[LocalCoordinatorClient] Received ICE servers:",
+        data.ice_servers
+      );
+      return data.ice_servers;
+    });
+  }
   /**
    * Creates a local session by posting to /start_session.
    * @returns always "local"
@@ -385,6 +420,9 @@ var LocalCoordinatorClient = class extends CoordinatorClient {
         body: JSON.stringify(sdpBody)
       });
       if (!response.ok) {
+        if (response.status === 409) {
+          throw new ConflictError("Connection superseded by newer request");
+        }
         throw new Error("Failed to get SDP answer from local coordinator.");
       }
       const sdpAnswer = yield response.json();
@@ -403,15 +441,12 @@ var LocalCoordinatorClient = class extends CoordinatorClient {
 };
 
 // src/utils/webrtc.ts
-var DEFAULT_ICE_SERVERS = [
-  { urls: "stun:stun.l.google.com:19302" },
-  { urls: "stun:stun1.l.google.com:19302" }
-];
 var DEFAULT_DATA_CHANNEL_LABEL = "data";
+var FORCE_RELAY_MODE = false;
 function createPeerConnection(config) {
-  var _a;
   return new RTCPeerConnection({
-    iceServers: (_a = config == null ? void 0 : config.iceServers) != null ? _a : DEFAULT_ICE_SERVERS
+    iceServers: config.iceServers,
+    iceTransportPolicy: FORCE_RELAY_MODE ? "relay" : "all"
   });
 }
 function createDataChannel(pc, label) {
@@ -492,7 +527,7 @@ var GPUMachineClient = class {
   constructor(config) {
     this.eventListeners = /* @__PURE__ */ new Map();
     this.status = "disconnected";
-    this.config = config != null ? config : {};
+    this.config = config;
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // Event Emitter API
@@ -889,9 +924,14 @@ var Reactor = class {
         console.warn("[Reactor] No active session to reconnect to.");
         return;
       }
+      if (this.status === "ready") {
+        console.warn("[Reactor] Already connected, no need to reconnect.");
+        return;
+      }
       this.setStatus("connecting");
       if (!this.machineClient) {
-        this.machineClient = new GPUMachineClient();
+        const iceServers = yield this.coordinatorClient.getIceServers();
+        this.machineClient = new GPUMachineClient({ iceServers });
         this.setupMachineClientHandlers();
       }
       const sdpOffer = yield this.machineClient.createOffer();
@@ -903,8 +943,12 @@ var Reactor = class {
         yield this.machineClient.connect(sdpAnswer);
         this.setStatus("ready");
       } catch (error) {
+        let recoverable = false;
+        if (error instanceof ConflictError) {
+          recoverable = true;
+        }
         console.error("[Reactor] Failed to reconnect:", error);
-        this.disconnect(false);
+        this.disconnect(recoverable);
         this.createError(
           "RECONNECTION_FAILED",
           `Failed to reconnect: ${error}`,
@@ -939,7 +983,8 @@ var Reactor = class {
           // Safe: validated on line 186-188
           model: this.model
         });
-        this.machineClient = new GPUMachineClient();
+        const iceServers = yield this.coordinatorClient.getIceServers();
+        this.machineClient = new GPUMachineClient({ iceServers });
         this.setupMachineClientHandlers();
         const sdpOffer = yield this.machineClient.createOffer();
         const sessionId = yield this.coordinatorClient.createSession(sdpOffer);
@@ -2128,14 +2173,37 @@ function WebcamStream({
     }
   );
 }
+
+// src/utils/tokens.ts
+function fetchInsecureJwtToken(_0) {
+  return __async(this, arguments, function* (apiKey, coordinatorUrl = PROD_COORDINATOR_URL) {
+    console.warn(
+      "[Reactor] \u26A0\uFE0F SECURITY WARNING: fetchInsecureJwtToken() exposes your API key in client-side code. This should ONLY be used for local development or testing. In production, fetch tokens from your server instead."
+    );
+    const response = yield fetch(`${coordinatorUrl}/tokens`, {
+      method: "GET",
+      headers: {
+        "X-API-Key": apiKey
+      }
+    });
+    if (!response.ok) {
+      const error = yield response.text();
+      throw new Error(`Failed to create token: ${response.status} ${error}`);
+    }
+    const { jwt } = yield response.json();
+    return jwt;
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ConflictError,
   PROD_COORDINATOR_URL,
   Reactor,
   ReactorController,
   ReactorProvider,
   ReactorView,
   WebcamStream,
+  fetchInsecureJwtToken,
   useReactor,
   useReactorMessage,
   useReactorStore