@reactor-team/js-sdk 1.0.1

package/.env.example

@@ -0,0 +1,2 @@
+# NPM authentication token for publishing packages
+NPM_TOKEN=your_npm_token_here

package/.prettierignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+build/
+coverage/
+*.min.js
+*.min.css
+pnpm-lock.yaml 

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf"
+}

package/README.md

@@ -0,0 +1,26 @@
+# Reactor Frontend SDK
+
+## Overview
+
+This is the frontend SDK for Reactor. It provides a set of tools and utilities to build frontend applications that can use the Reactor platform.
+
+There are two main ways to use the frontend SDK:
+
+1. **Imperative API**: Use it in any TS/JS application.
+2. **React API**: Use it in a React applications.
+
+## 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
+./publish_package.sh
+```

package/dist/index.d.mts

@@ -0,0 +1,151 @@
+import { z } from 'zod';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react, { ReactNode } from 'react';
+import { RemoteVideoTrack } from 'livekit-client';
+
+type ReactorStatus = "disconnected" | "connecting" | "waiting" | "ready";
+interface ReactorWaitingInfo {
+    position?: number;
+    estimatedWaitTime?: number;
+    averageWaitTime?: number;
+}
+interface ReactorError {
+    code: string;
+    message: string;
+    timestamp: number;
+    recoverable: boolean;
+    component: "coordinator" | "gpu" | "livekit";
+    retryAfter?: number;
+}
+interface ReactorState$1 {
+    status: ReactorStatus;
+    waitingInfo?: ReactorWaitingInfo;
+    lastError?: ReactorError;
+}
+type ReactorEvent = "statusChanged" | "waitingInfoChanged" | "newMessage" | "fps" | "streamChanged" | "error";
+
+declare const OptionsSchema: z.ZodObject<{
+    directConnection: z.ZodOptional<z.ZodObject<{
+        livekitJwtToken: z.ZodString;
+        livekitWsUrl: z.ZodString;
+    }, z.core.$strip>>;
+    insecureApiKey: z.ZodOptional<z.ZodString>;
+    jwtToken: z.ZodOptional<z.ZodString>;
+    coordinatorUrl: z.ZodOptional<z.ZodString>;
+    modelName: z.ZodString;
+}, z.core.$strip>;
+type Options = z.input<typeof OptionsSchema>;
+type EventHandler = (...args: any[]) => void;
+declare class Reactor {
+    private coordinatorClient;
+    private machineClient;
+    private status;
+    private coordinatorUrl;
+    private lastError?;
+    private waitingInfo?;
+    private jwtToken?;
+    private insecureApiKey?;
+    private directConnection?;
+    private modelName;
+    private modelVersion;
+    constructor(options: Options);
+    private eventListeners;
+    on(event: ReactorEvent, handler: EventHandler): void;
+    off(event: ReactorEvent, handler: EventHandler): void;
+    emit(event: ReactorEvent, ...args: any[]): void;
+    /**
+     * Public method to send a message to the machine.
+     * Automatically wraps the message in an application message.
+     * @param message The message to send to the machine.
+     * @throws Error if not in ready state
+     */
+    sendMessage(message: any): void;
+    /**
+     * Connects to the machine via LiveKit and waits for the gpu machine to be ready.
+     * Once the machine is ready, the Reactor will establish the LiveKit connection.
+     * @param livekitJwtToken The JWT token for LiveKit authentication
+     * @param livekitWsUrl The WebSocket URL for LiveKit connection
+     */
+    private connectToGPUMachine;
+    /**
+     * Connects to the coordinator and waits for a GPU to be assigned.
+     * Once a GPU is assigned, the Reactor will connect to the gpu machine via LiveKit.
+     */
+    connect(): Promise<void>;
+    /**
+     * Disconnects from the coordinator and the gpu machine.
+     * Ensures cleanup completes even if individual disconnections fail.
+     */
+    disconnect(): Promise<void>;
+    private setStatus;
+    private setWaitingInfo;
+    getStatus(): ReactorStatus;
+    /**
+     * Get the current state including status, error, and waiting info
+     */
+    getState(): ReactorState$1;
+    /**
+     * Get waiting information when status is 'waiting'
+     */
+    getWaitingInfo(): ReactorWaitingInfo | undefined;
+    /**
+     * Get the last error that occurred
+     */
+    getLastError(): ReactorError | undefined;
+    /**
+     * Create and store an error
+     */
+    private createError;
+}
+
+interface ReactorState {
+    status: ReactorStatus;
+    videoTrack: RemoteVideoTrack | null;
+    fps?: number;
+    waitingInfo?: ReactorWaitingInfo;
+    lastError?: ReactorError;
+}
+interface ReactorActions {
+    sendMessage(message: any): void;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+}
+interface ReactorInternalState {
+    reactor: Reactor;
+}
+type ReactorStore = ReactorState & ReactorActions & {
+    internal: ReactorInternalState;
+};
+interface ReactorInitializationProps extends Options {
+}
+
+interface ReactorProviderProps extends ReactorInitializationProps {
+    autoConnect?: boolean;
+    children: ReactNode;
+}
+declare function ReactorProvider({ children, autoConnect, ...props }: ReactorProviderProps): react_jsx_runtime.JSX.Element;
+declare function useReactorStore<T = ReactorStore>(selector: (state: ReactorStore) => T): T;
+
+interface ReactorViewProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: react.CSSProperties;
+}
+declare function ReactorView({ width, height, className, style, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Generic hook for accessing selected parts of the Reactor store.
+ *
+ * @param selector - A function that selects part of the store state.
+ * @returns The selected slice from the store.
+ */
+declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
+/**
+ * Hook for handling message subscriptions with proper React lifecycle management.
+ *
+ * @param handler - The message handler function
+ */
+declare function useReactorMessage(handler: (message: any) => void): void;
+
+export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, useReactor, useReactorMessage, useReactorStore };

package/dist/index.d.ts

@@ -0,0 +1,151 @@
+import { z } from 'zod';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react, { ReactNode } from 'react';
+import { RemoteVideoTrack } from 'livekit-client';
+
+type ReactorStatus = "disconnected" | "connecting" | "waiting" | "ready";
+interface ReactorWaitingInfo {
+    position?: number;
+    estimatedWaitTime?: number;
+    averageWaitTime?: number;
+}
+interface ReactorError {
+    code: string;
+    message: string;
+    timestamp: number;
+    recoverable: boolean;
+    component: "coordinator" | "gpu" | "livekit";
+    retryAfter?: number;
+}
+interface ReactorState$1 {
+    status: ReactorStatus;
+    waitingInfo?: ReactorWaitingInfo;
+    lastError?: ReactorError;
+}
+type ReactorEvent = "statusChanged" | "waitingInfoChanged" | "newMessage" | "fps" | "streamChanged" | "error";
+
+declare const OptionsSchema: z.ZodObject<{
+    directConnection: z.ZodOptional<z.ZodObject<{
+        livekitJwtToken: z.ZodString;
+        livekitWsUrl: z.ZodString;
+    }, z.core.$strip>>;
+    insecureApiKey: z.ZodOptional<z.ZodString>;
+    jwtToken: z.ZodOptional<z.ZodString>;
+    coordinatorUrl: z.ZodOptional<z.ZodString>;
+    modelName: z.ZodString;
+}, z.core.$strip>;
+type Options = z.input<typeof OptionsSchema>;
+type EventHandler = (...args: any[]) => void;
+declare class Reactor {
+    private coordinatorClient;
+    private machineClient;
+    private status;
+    private coordinatorUrl;
+    private lastError?;
+    private waitingInfo?;
+    private jwtToken?;
+    private insecureApiKey?;
+    private directConnection?;
+    private modelName;
+    private modelVersion;
+    constructor(options: Options);
+    private eventListeners;
+    on(event: ReactorEvent, handler: EventHandler): void;
+    off(event: ReactorEvent, handler: EventHandler): void;
+    emit(event: ReactorEvent, ...args: any[]): void;
+    /**
+     * Public method to send a message to the machine.
+     * Automatically wraps the message in an application message.
+     * @param message The message to send to the machine.
+     * @throws Error if not in ready state
+     */
+    sendMessage(message: any): void;
+    /**
+     * Connects to the machine via LiveKit and waits for the gpu machine to be ready.
+     * Once the machine is ready, the Reactor will establish the LiveKit connection.
+     * @param livekitJwtToken The JWT token for LiveKit authentication
+     * @param livekitWsUrl The WebSocket URL for LiveKit connection
+     */
+    private connectToGPUMachine;
+    /**
+     * Connects to the coordinator and waits for a GPU to be assigned.
+     * Once a GPU is assigned, the Reactor will connect to the gpu machine via LiveKit.
+     */
+    connect(): Promise<void>;
+    /**
+     * Disconnects from the coordinator and the gpu machine.
+     * Ensures cleanup completes even if individual disconnections fail.
+     */
+    disconnect(): Promise<void>;
+    private setStatus;
+    private setWaitingInfo;
+    getStatus(): ReactorStatus;
+    /**
+     * Get the current state including status, error, and waiting info
+     */
+    getState(): ReactorState$1;
+    /**
+     * Get waiting information when status is 'waiting'
+     */
+    getWaitingInfo(): ReactorWaitingInfo | undefined;
+    /**
+     * Get the last error that occurred
+     */
+    getLastError(): ReactorError | undefined;
+    /**
+     * Create and store an error
+     */
+    private createError;
+}
+
+interface ReactorState {
+    status: ReactorStatus;
+    videoTrack: RemoteVideoTrack | null;
+    fps?: number;
+    waitingInfo?: ReactorWaitingInfo;
+    lastError?: ReactorError;
+}
+interface ReactorActions {
+    sendMessage(message: any): void;
+    connect(): Promise<void>;
+    disconnect(): Promise<void>;
+}
+interface ReactorInternalState {
+    reactor: Reactor;
+}
+type ReactorStore = ReactorState & ReactorActions & {
+    internal: ReactorInternalState;
+};
+interface ReactorInitializationProps extends Options {
+}
+
+interface ReactorProviderProps extends ReactorInitializationProps {
+    autoConnect?: boolean;
+    children: ReactNode;
+}
+declare function ReactorProvider({ children, autoConnect, ...props }: ReactorProviderProps): react_jsx_runtime.JSX.Element;
+declare function useReactorStore<T = ReactorStore>(selector: (state: ReactorStore) => T): T;
+
+interface ReactorViewProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: react.CSSProperties;
+}
+declare function ReactorView({ width, height, className, style, }: ReactorViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Generic hook for accessing selected parts of the Reactor store.
+ *
+ * @param selector - A function that selects part of the store state.
+ * @returns The selected slice from the store.
+ */
+declare function useReactor<T>(selector: (state: ReactorStore) => T): T;
+/**
+ * Hook for handling message subscriptions with proper React lifecycle management.
+ *
+ * @param handler - The message handler function
+ */
+declare function useReactorMessage(handler: (message: any) => void): void;
+
+export { type Options, Reactor, type ReactorError, type ReactorEvent, ReactorProvider, type ReactorState$1 as ReactorState, type ReactorStatus, ReactorView, type ReactorViewProps, type ReactorWaitingInfo, useReactor, useReactorMessage, useReactorStore };