@reactor-team/js-sdk 1.0.2 → 1.0.4

package/bin/create-reactor-app.ts

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import simpleGit from "simple-git";
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+
+const REPO = "https://github.com/reactor-team/js-sdk.git";
+const EXAMPLES_PATH = "examples";
+
+async function getTemplates(): Promise<string[]> {
+  try {
+    const res = await fetch(
+      `https://api.github.com/repos/reactor-team/js-sdk/contents/${EXAMPLES_PATH}`
+    );
+    const data = (await res.json()) as { name: string; type: string }[];
+    return data.filter((item) => item.type === "dir").map((item) => item.name);
+  } catch {
+    console.log(
+      chalk.yellow("⚠️  Could not fetch from GitHub, using fallback templates.")
+    );
+    return ["longlive", "matrix-2"];
+  }
+}
+
+function showUsage(): void {
+  console.log(chalk.cyan("\n🧩 Create Reactor App\n"));
+  console.log(chalk.white("Usage:"));
+  console.log(chalk.white("  create-reactor-app [project-name] [template]\n"));
+  console.log(chalk.white("Arguments:"));
+  console.log(chalk.white("  project-name  Name of the project to create"));
+  console.log(
+    chalk.white(
+      "  template      Template to use (longlive, matrix-2, mk64, etc.)\n"
+    )
+  );
+  console.log(
+    chalk.white(
+      "If arguments are not provided, you will be prompted interactively.\n"
+    )
+  );
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  // Show help if requested
+  if (args.includes("--help") || args.includes("-h")) {
+    showUsage();
+    process.exit(0);
+  }
+
+  console.log(chalk.cyan("\n🧩 Create Reactor App\n"));
+
+  const templates = await getTemplates();
+
+  // Parse command line arguments
+  const [argProjectName, argTemplate] = args;
+
+  // Validate template argument if provided
+  if (argTemplate && !templates.includes(argTemplate)) {
+    console.error(chalk.red(`Template "${argTemplate}" is not available.`));
+    console.log(chalk.white("Available templates:"), templates.join(", "));
+    process.exit(1);
+  }
+
+  // Prepare prompts, skipping those with provided arguments
+  const prompts: any[] = [];
+
+  if (!argProjectName) {
+    prompts.push({
+      type: "input",
+      name: "projectName",
+      message: "Enter your project name:",
+      validate: (input: string) =>
+        input ? true : "Project name cannot be empty.",
+    });
+  }
+
+  if (!argTemplate) {
+    prompts.push({
+      type: "list",
+      name: "template",
+      message: "Select a template:",
+      choices: templates,
+    });
+  }
+
+  // Get answers from prompts (if any are needed)
+  const answers = prompts.length > 0 ? await inquirer.prompt(prompts) : {};
+
+  // Use provided arguments or prompted answers
+  const projectName = argProjectName || answers.projectName;
+  const template = argTemplate || answers.template;
+  const dest = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(dest)) {
+    console.error(chalk.red(`Folder "${projectName}" already exists.`));
+    process.exit(1);
+  }
+
+  console.log(chalk.green(`\nCloning template "${template}"...\n`));
+
+  const git = simpleGit();
+  await git.clone(REPO, projectName, ["--depth", "1"]);
+
+  const examplesDir = path.join(dest, EXAMPLES_PATH);
+  const templateDir = path.join(examplesDir, template);
+
+  if (!fs.existsSync(templateDir)) {
+    console.error(chalk.red(`Template "${template}" not found.`));
+    process.exit(1);
+  }
+
+  // Move files up
+  for (const file of fs.readdirSync(templateDir)) {
+    fs.renameSync(path.join(templateDir, file), path.join(dest, file));
+  }
+
+  fs.rmSync(examplesDir, { recursive: true, force: true });
+  fs.rmSync(path.join(dest, ".git"), { recursive: true, force: true });
+
+  console.log(chalk.yellow("\nInstalling dependencies...\n"));
+  execSync("pnpm install", { cwd: dest, stdio: "inherit" });
+
+  console.log(
+    chalk.green(
+      `\n✅ Project "${projectName}" created successfully using "${template}" template!\n`
+    )
+  );
+  console.log(chalk.cyan("Next steps:"));
+  console.log(chalk.white(`	cd ${projectName}`));
+  console.log(chalk.white(`	pnpm dev\n`));
+}
+
+main().catch((err) => {
+  console.error(chalk.red("Error:"), err);
+  process.exit(1);
+});

package/dist/bin/create-reactor-app.mjs

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import simpleGit from "simple-git";
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+const REPO = "https://github.com/reactor-team/js-sdk.git";
+const EXAMPLES_PATH = "examples";
+function getTemplates() {
+  return __async(this, null, function* () {
+    try {
+      const res = yield fetch(
+        `https://api.github.com/repos/reactor-team/js-sdk/contents/${EXAMPLES_PATH}`
+      );
+      const data = yield res.json();
+      return data.filter((item) => item.type === "dir").map((item) => item.name);
+    } catch (e) {
+      console.log(
+        chalk.yellow("\u26A0\uFE0F  Could not fetch from GitHub, using fallback templates.")
+      );
+      return ["longlive", "matrix-2"];
+    }
+  });
+}
+function showUsage() {
+  console.log(chalk.cyan("\n\u{1F9E9} Create Reactor App\n"));
+  console.log(chalk.white("Usage:"));
+  console.log(chalk.white("  create-reactor-app [project-name] [template]\n"));
+  console.log(chalk.white("Arguments:"));
+  console.log(chalk.white("  project-name  Name of the project to create"));
+  console.log(
+    chalk.white(
+      "  template      Template to use (longlive, matrix-2, mk64, etc.)\n"
+    )
+  );
+  console.log(
+    chalk.white(
+      "If arguments are not provided, you will be prompted interactively.\n"
+    )
+  );
+}
+function main() {
+  return __async(this, null, function* () {
+    const args = process.argv.slice(2);
+    if (args.includes("--help") || args.includes("-h")) {
+      showUsage();
+      process.exit(0);
+    }
+    console.log(chalk.cyan("\n\u{1F9E9} Create Reactor App\n"));
+    const templates = yield getTemplates();
+    const [argProjectName, argTemplate] = args;
+    if (argTemplate && !templates.includes(argTemplate)) {
+      console.error(chalk.red(`Template "${argTemplate}" is not available.`));
+      console.log(chalk.white("Available templates:"), templates.join(", "));
+      process.exit(1);
+    }
+    const prompts = [];
+    if (!argProjectName) {
+      prompts.push({
+        type: "input",
+        name: "projectName",
+        message: "Enter your project name:",
+        validate: (input) => input ? true : "Project name cannot be empty."
+      });
+    }
+    if (!argTemplate) {
+      prompts.push({
+        type: "list",
+        name: "template",
+        message: "Select a template:",
+        choices: templates
+      });
+    }
+    const answers = prompts.length > 0 ? yield inquirer.prompt(prompts) : {};
+    const projectName = argProjectName || answers.projectName;
+    const template = argTemplate || answers.template;
+    const dest = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(dest)) {
+      console.error(chalk.red(`Folder "${projectName}" already exists.`));
+      process.exit(1);
+    }
+    console.log(chalk.green(`
+Cloning template "${template}"...
+`));
+    const git = simpleGit();
+    yield git.clone(REPO, projectName, ["--depth", "1"]);
+    const examplesDir = path.join(dest, EXAMPLES_PATH);
+    const templateDir = path.join(examplesDir, template);
+    if (!fs.existsSync(templateDir)) {
+      console.error(chalk.red(`Template "${template}" not found.`));
+      process.exit(1);
+    }
+    for (const file of fs.readdirSync(templateDir)) {
+      fs.renameSync(path.join(templateDir, file), path.join(dest, file));
+    }
+    fs.rmSync(examplesDir, { recursive: true, force: true });
+    fs.rmSync(path.join(dest, ".git"), { recursive: true, force: true });
+    console.log(chalk.yellow("\nInstalling dependencies...\n"));
+    execSync("pnpm install", { cwd: dest, stdio: "inherit" });
+    console.log(
+      chalk.green(
+        `
+\u2705 Project "${projectName}" created successfully using "${template}" template!
+`
+      )
+    );
+    console.log(chalk.cyan("Next steps:"));
+    console.log(chalk.white(`	cd ${projectName}`));
+    console.log(chalk.white(`	pnpm dev
+`));
+  });
+}
+main().catch((err) => {
+  console.error(chalk.red("Error:"), err);
+  process.exit(1);
+});

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.ZodDefault<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.ZodDefault<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 };