@rstreamlabs/react 1.7.5 → 1.7.6

package/dist/{chunk-HTAKPV7E.mjs → chunk-5MUU3P7J.mjs}

@@ -5,62 +5,78 @@ import { Terminal } from "@xterm/xterm";
 import { Unicode11Addon } from "@xterm/addon-unicode11";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { WebLinksAddon } from "@xterm/addon-web-links";
-import {
-  WebTTY
-} from "@rstreamlabs/webtty";
+import { WebTTY } from "@rstreamlabs/webtty";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 function WebTTYTerminal(props) {
-  const {
-    // WebTTY client config
-    url,
-    sendHeartbeat,
-    heartbeatIntervalMs,
-    // Execution config
-    cmdArgs,
-    envVars,
-    allocateTty,
-    interactive,
-    username,
-    workdir,
-    // Events
-    onStdout,
-    onStdoutEos,
-    onStderr,
-    onStderrEos,
-    onConnect,
-    onComplete,
-    onError,
-    // xterm.js options
-    terminalOptions,
-    // Callbacks
-    onTerminalCreated,
-    onTitleChange
-  } = props;
   const ref = React.useRef(null);
+  const initialPropsRef = React.useRef(props);
+  const onStdoutEvent = React.useEffectEvent((chunk) => {
+    props.onStdout?.(chunk);
+  });
+  const onStdoutEosEvent = React.useEffectEvent(() => {
+    props.onStdoutEos?.();
+  });
+  const onStderrEvent = React.useEffectEvent((chunk) => {
+    props.onStderr?.(chunk);
+  });
+  const onStderrEosEvent = React.useEffectEvent(() => {
+    props.onStderrEos?.();
+  });
+  const onConnectEvent = React.useEffectEvent(() => {
+    props.onConnect?.();
+  });
+  const onCompleteEvent = React.useEffectEvent((code) => {
+    props.onComplete?.(code);
+  });
+  const onErrorEvent = React.useEffectEvent((message) => {
+    props.onError?.(message);
+  });
+  const onTerminalCreatedEvent = React.useEffectEvent((terminal) => {
+    props.onTerminalCreated?.(terminal);
+  });
+  const onTitleChangeEvent = React.useEffectEvent((title) => {
+    props.onTitleChange?.(title);
+  });
   React.useEffect(() => {
     if (!ref.current) {
       return;
     }
-    let disposeOnData = null;
-    let disposeOnResize = null;
-    let disposeOnTitleChange = null;
-    let resizeObserver = null;
-    let connected = false;
-    let syncedRows = 0;
-    let syncedCols = 0;
+    const {
+      allocateTty,
+      cmdArgs,
+      envVars,
+      heartbeatIntervalMs,
+      interactive,
+      sendHeartbeat,
+      terminalOptions,
+      url,
+      username,
+      workdir
+    } = initialPropsRef.current;
+    const runtime = {
+      connected: false,
+      disposeOnData: null,
+      disposeOnResize: null,
+      disposeOnTitleChange: null,
+      resizeObserver: null,
+      syncedCols: 0,
+      syncedRows: 0
+    };
+    const textDecoder = new TextDecoder();
+    const textEncoder = new TextEncoder();
     const clear = () => {
-      disposeOnData?.dispose();
-      disposeOnData = null;
-      disposeOnResize?.dispose();
-      disposeOnResize = null;
-      disposeOnTitleChange?.dispose();
-      disposeOnTitleChange = null;
-      resizeObserver?.disconnect();
-      resizeObserver = null;
-      connected = false;
-      syncedRows = 0;
-      syncedCols = 0;
+      runtime.disposeOnData?.dispose();
+      runtime.disposeOnData = null;
+      runtime.disposeOnResize?.dispose();
+      runtime.disposeOnResize = null;
+      runtime.disposeOnTitleChange?.dispose();
+      runtime.disposeOnTitleChange = null;
+      runtime.resizeObserver?.disconnect();
+      runtime.resizeObserver = null;
+      runtime.connected = false;
+      runtime.syncedRows = 0;
+      runtime.syncedCols = 0;
     };
     const terminal = new Terminal({
       allowProposedApi: true,
@@ -92,67 +108,65 @@ function WebTTYTerminal(props) {
       return true;
     };
     const syncRemoteSize = (rows, cols) => {
-      if (!connected) return;
+      if (!runtime.connected) return;
       if (rows < 1 || cols < 1) return;
-      if (rows === syncedRows && cols === syncedCols) return;
-      syncedRows = rows;
-      syncedCols = cols;
+      if (rows === runtime.syncedRows && cols === runtime.syncedCols) return;
+      runtime.syncedRows = rows;
+      runtime.syncedCols = cols;
       try {
         webtty.resize(rows, cols);
       } catch (e) {
         console.error("Cannot resize remote TTY:", e);
       }
     };
-    onTerminalCreated?.(terminal);
-    disposeOnTitleChange = terminal.onTitleChange((title) => {
-      onTitleChange?.(title);
+    onTerminalCreatedEvent(terminal);
+    runtime.disposeOnTitleChange = terminal.onTitleChange((title) => {
+      onTitleChangeEvent(title);
     });
     const webtty = new WebTTY(
       { url, sendHeartbeat, heartbeatIntervalMs },
       { cmdArgs, envVars, allocateTty, interactive, username, workdir },
       {
         onStdout: (chunk) => {
-          onStdout?.(chunk);
+          onStdoutEvent(chunk);
           terminal.write(chunk);
         },
         onStdoutEos: () => {
-          onStdoutEos?.();
+          onStdoutEosEvent();
         },
         onStderr: (chunk) => {
-          onStderr?.(chunk);
-          terminal.write(
-            "\x1B[31m" + new TextDecoder().decode(chunk) + "\x1B[0m"
-          );
+          onStderrEvent(chunk);
+          terminal.write("\x1B[31m" + textDecoder.decode(chunk) + "\x1B[0m");
         },
         onStderrEos: () => {
-          onStderrEos?.();
+          onStderrEosEvent();
         },
         onConnect: () => {
-          connected = true;
-          onConnect?.();
+          runtime.connected = true;
+          onConnectEvent();
           terminal.focus();
           fit();
           syncRemoteSize(terminal.rows, terminal.cols);
-          disposeOnData = terminal.onData((data) => {
+          runtime.disposeOnData = terminal.onData((data) => {
             try {
-              webtty.writeStdin(new TextEncoder().encode(data));
+              webtty.writeStdin(textEncoder.encode(data));
             } catch (e) {
               console.error("Cannot writeStdin:", e);
             }
           });
-          disposeOnResize = terminal.onResize((size) => {
+          runtime.disposeOnResize = terminal.onResize((size) => {
             syncRemoteSize(size.rows, size.cols);
           });
         },
         onComplete: (code) => {
-          onComplete?.(code);
+          onCompleteEvent(code);
           terminal.write(`\r
 Process exited with code ${code}.`);
           terminal.write("\x1B[?25l");
           clear();
         },
         onError: (err) => {
-          onError?.(err);
+          onErrorEvent(err);
           terminal.write(`\r
 [ERROR] ${err}`);
           terminal.write("\x1B[?25l");
@@ -161,7 +175,7 @@ Process exited with code ${code}.`);
       }
     );
     webtty.connect();
-    resizeObserver = new ResizeObserver((entries) => {
+    runtime.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (entry.target === ref.current) {
           if (!fit()) return;
@@ -169,7 +183,7 @@ Process exited with code ${code}.`);
         }
       }
     });
-    resizeObserver.observe(ref.current);
+    runtime.resizeObserver.observe(ref.current);
     fit();
     return () => {
       clear();

package/dist/{chunk-CCMP5O6Z.mjs → chunk-DFYVJASW.mjs}

@@ -1,6 +1,6 @@
 import {
   useRstream
-} from "./chunk-CTKB6CWW.mjs";
+} from "./chunk-G47GUMJ6.mjs";
 
 // src/providers/rstream.tsx
 import * as React from "react";

package/dist/{chunk-CTKB6CWW.mjs → chunk-G47GUMJ6.mjs}

@@ -1,36 +1,71 @@
 // src/hooks/use-rstream.ts
-import { Watch } from "@rstreamlabs/rstream";
+import { Watch } from "@rstreamlabs/tunnels";
 import * as React from "react";
 function hasAuth(options) {
   return !!options && !!options.auth;
 }
+function credentialsKey(credentials) {
+  if (!credentials) {
+    return "";
+  }
+  if ("token" in credentials) {
+    return `token:${credentials.token}`;
+  }
+  return `client:${credentials.clientId}:${credentials.clientSecret}`;
+}
+function watchConnectionKey(options) {
+  if (!hasAuth(options)) {
+    return "disabled";
+  }
+  return JSON.stringify({
+    apiUrl: options.apiUrl ?? null,
+    auth: typeof options.auth === "function" ? "function" : `token:${options.auth}`,
+    controlPlaneCredentials: credentialsKey(options.controlPlaneCredentials),
+    engine: options.engine ?? null,
+    projectEndpoint: options.projectEndpoint ?? null,
+    transport: options.transport ?? "sse"
+  });
+}
 function useRstream(options) {
   const [state, setState] = React.useState("disconnected");
   const [error, setError] = React.useState(null);
   const { reconnectTimeout = 1e3, errorTimeout = 5e3 } = options || {};
   const [clients, setClients] = React.useState([]);
   const [tunnels, setTunnels] = React.useState([]);
+  const authEnabled = hasAuth(options);
+  const connectionKey = watchConnectionKey(options);
+  const optionsRef = React.useRef(options);
   React.useEffect(() => {
-    if (!hasAuth(options)) return;
-    let active = true;
-    let watch = null;
-    let timeout = null;
+    optionsRef.current = options;
+  }, [options]);
+  const getWatchOptions = React.useEffectEvent(() => {
+    const current = optionsRef.current;
+    return hasAuth(current) ? current : void 0;
+  });
+  React.useEffect(() => {
+    if (!authEnabled) return;
+    const runtime = {
+      active: true,
+      timeout: null,
+      watch: null
+    };
     const schedule = () => {
-      if (!active) return;
-      if (timeout) return;
+      if (!runtime.active) return;
+      if (runtime.timeout) return;
       setState("connecting");
-      timeout = setTimeout(() => {
-        if (!active) return;
-        timeout = null;
+      runtime.timeout = setTimeout(() => {
+        if (!runtime.active) return;
+        runtime.timeout = null;
         run();
       }, reconnectTimeout);
     };
     const run = async () => {
-      if (!hasAuth(options)) return;
+      const watchOptions = getWatchOptions();
+      if (!watchOptions) return;
       setState("connecting");
-      watch = new Watch(options, {
+      runtime.watch = new Watch(watchOptions, {
         onEvent: (event) => {
-          if (!active) return;
+          if (!runtime.active) return;
           if (event.type === "state.initial") {
             setClients(event.object.clients);
             setTunnels(event.object.tunnels);
@@ -73,36 +108,36 @@ function useRstream(options) {
           }
         },
         onConnect: () => {
-          if (!active) return;
+          if (!runtime.active) return;
           setState("connected");
         },
         onClose: () => {
-          if (!active) return;
-          watch = null;
+          if (!runtime.active) return;
+          runtime.watch = null;
           schedule();
         }
       });
       try {
-        await watch.connect();
+        await runtime.watch.connect();
       } catch {
         schedule();
       }
     };
     run();
     return () => {
-      active = false;
-      if (watch) {
-        watch.disconnect();
-        watch = null;
+      runtime.active = false;
+      if (runtime.watch) {
+        runtime.watch.disconnect();
+        runtime.watch = null;
       }
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
+      if (runtime.timeout) {
+        clearTimeout(runtime.timeout);
+        runtime.timeout = null;
       }
     };
-  }, [options, reconnectTimeout]);
+  }, [authEnabled, connectionKey, reconnectTimeout]);
   React.useEffect(() => {
-    if (options?.auth) {
+    if (authEnabled) {
       if (error && error.type === "danger") return;
       if (state !== "connected") {
         const timeout = setTimeout(() => {
@@ -120,13 +155,13 @@ function useRstream(options) {
     } else {
       setError(null);
     }
-  }, [options, state, error, errorTimeout]);
+  }, [authEnabled, state, error, errorTimeout]);
   React.useEffect(() => {
-    if (options?.auth === void 0 || state !== "connected") {
+    if (!authEnabled || state !== "connected") {
       setClients([]);
       setTunnels([]);
     }
-  }, [options, state]);
+  }, [authEnabled, connectionKey, state]);
   return { state, error, tunnels, clients };
 }
 

package/dist/components/index.d.mts

@@ -17,9 +17,6 @@ interface WebTTYTerminalProps extends WebTTYClientConfig, WebTTYExecutionConfig,
      */
     onTitleChange?: (title: string) => void;
 }
-/**
- * A React component that binds a WebTTY session to an xterm.js instance.
- */
 declare function WebTTYTerminal(props: WebTTYTerminalProps): react_jsx_runtime.JSX.Element;
 
 export { WebTTYTerminal, type WebTTYTerminalProps };

package/dist/components/index.d.ts

@@ -17,9 +17,6 @@ interface WebTTYTerminalProps extends WebTTYClientConfig, WebTTYExecutionConfig,
      */
     onTitleChange?: (title: string) => void;
 }
-/**
- * A React component that binds a WebTTY session to an xterm.js instance.
- */
 declare function WebTTYTerminal(props: WebTTYTerminalProps): react_jsx_runtime.JSX.Element;
 
 export { WebTTYTerminal, type WebTTYTerminalProps };

package/dist/components/index.js

@@ -45,56 +45,74 @@ var import_webtty = require("@rstreamlabs/webtty");
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function WebTTYTerminal(props) {
-  const {
-    // WebTTY client config
-    url,
-    sendHeartbeat,
-    heartbeatIntervalMs,
-    // Execution config
-    cmdArgs,
-    envVars,
-    allocateTty,
-    interactive,
-    username,
-    workdir,
-    // Events
-    onStdout,
-    onStdoutEos,
-    onStderr,
-    onStderrEos,
-    onConnect,
-    onComplete,
-    onError,
-    // xterm.js options
-    terminalOptions,
-    // Callbacks
-    onTerminalCreated,
-    onTitleChange
-  } = props;
   const ref = React.useRef(null);
+  const initialPropsRef = React.useRef(props);
+  const onStdoutEvent = React.useEffectEvent((chunk) => {
+    props.onStdout?.(chunk);
+  });
+  const onStdoutEosEvent = React.useEffectEvent(() => {
+    props.onStdoutEos?.();
+  });
+  const onStderrEvent = React.useEffectEvent((chunk) => {
+    props.onStderr?.(chunk);
+  });
+  const onStderrEosEvent = React.useEffectEvent(() => {
+    props.onStderrEos?.();
+  });
+  const onConnectEvent = React.useEffectEvent(() => {
+    props.onConnect?.();
+  });
+  const onCompleteEvent = React.useEffectEvent((code) => {
+    props.onComplete?.(code);
+  });
+  const onErrorEvent = React.useEffectEvent((message) => {
+    props.onError?.(message);
+  });
+  const onTerminalCreatedEvent = React.useEffectEvent((terminal) => {
+    props.onTerminalCreated?.(terminal);
+  });
+  const onTitleChangeEvent = React.useEffectEvent((title) => {
+    props.onTitleChange?.(title);
+  });
   React.useEffect(() => {
     if (!ref.current) {
       return;
     }
-    let disposeOnData = null;
-    let disposeOnResize = null;
-    let disposeOnTitleChange = null;
-    let resizeObserver = null;
-    let connected = false;
-    let syncedRows = 0;
-    let syncedCols = 0;
+    const {
+      allocateTty,
+      cmdArgs,
+      envVars,
+      heartbeatIntervalMs,
+      interactive,
+      sendHeartbeat,
+      terminalOptions,
+      url,
+      username,
+      workdir
+    } = initialPropsRef.current;
+    const runtime = {
+      connected: false,
+      disposeOnData: null,
+      disposeOnResize: null,
+      disposeOnTitleChange: null,
+      resizeObserver: null,
+      syncedCols: 0,
+      syncedRows: 0
+    };
+    const textDecoder = new TextDecoder();
+    const textEncoder = new TextEncoder();
     const clear = () => {
-      disposeOnData?.dispose();
-      disposeOnData = null;
-      disposeOnResize?.dispose();
-      disposeOnResize = null;
-      disposeOnTitleChange?.dispose();
-      disposeOnTitleChange = null;
-      resizeObserver?.disconnect();
-      resizeObserver = null;
-      connected = false;
-      syncedRows = 0;
-      syncedCols = 0;
+      runtime.disposeOnData?.dispose();
+      runtime.disposeOnData = null;
+      runtime.disposeOnResize?.dispose();
+      runtime.disposeOnResize = null;
+      runtime.disposeOnTitleChange?.dispose();
+      runtime.disposeOnTitleChange = null;
+      runtime.resizeObserver?.disconnect();
+      runtime.resizeObserver = null;
+      runtime.connected = false;
+      runtime.syncedRows = 0;
+      runtime.syncedCols = 0;
     };
     const terminal = new import_xterm2.Terminal({
       allowProposedApi: true,
@@ -126,67 +144,65 @@ function WebTTYTerminal(props) {
       return true;
     };
     const syncRemoteSize = (rows, cols) => {
-      if (!connected) return;
+      if (!runtime.connected) return;
       if (rows < 1 || cols < 1) return;
-      if (rows === syncedRows && cols === syncedCols) return;
-      syncedRows = rows;
-      syncedCols = cols;
+      if (rows === runtime.syncedRows && cols === runtime.syncedCols) return;
+      runtime.syncedRows = rows;
+      runtime.syncedCols = cols;
       try {
         webtty.resize(rows, cols);
       } catch (e) {
         console.error("Cannot resize remote TTY:", e);
       }
     };
-    onTerminalCreated?.(terminal);
-    disposeOnTitleChange = terminal.onTitleChange((title) => {
-      onTitleChange?.(title);
+    onTerminalCreatedEvent(terminal);
+    runtime.disposeOnTitleChange = terminal.onTitleChange((title) => {
+      onTitleChangeEvent(title);
     });
     const webtty = new import_webtty.WebTTY(
       { url, sendHeartbeat, heartbeatIntervalMs },
       { cmdArgs, envVars, allocateTty, interactive, username, workdir },
       {
         onStdout: (chunk) => {
-          onStdout?.(chunk);
+          onStdoutEvent(chunk);
           terminal.write(chunk);
         },
         onStdoutEos: () => {
-          onStdoutEos?.();
+          onStdoutEosEvent();
         },
         onStderr: (chunk) => {
-          onStderr?.(chunk);
-          terminal.write(
-            "\x1B[31m" + new TextDecoder().decode(chunk) + "\x1B[0m"
-          );
+          onStderrEvent(chunk);
+          terminal.write("\x1B[31m" + textDecoder.decode(chunk) + "\x1B[0m");
         },
         onStderrEos: () => {
-          onStderrEos?.();
+          onStderrEosEvent();
         },
         onConnect: () => {
-          connected = true;
-          onConnect?.();
+          runtime.connected = true;
+          onConnectEvent();
           terminal.focus();
           fit();
           syncRemoteSize(terminal.rows, terminal.cols);
-          disposeOnData = terminal.onData((data) => {
+          runtime.disposeOnData = terminal.onData((data) => {
             try {
-              webtty.writeStdin(new TextEncoder().encode(data));
+              webtty.writeStdin(textEncoder.encode(data));
             } catch (e) {
               console.error("Cannot writeStdin:", e);
             }
           });
-          disposeOnResize = terminal.onResize((size) => {
+          runtime.disposeOnResize = terminal.onResize((size) => {
             syncRemoteSize(size.rows, size.cols);
           });
         },
         onComplete: (code) => {
-          onComplete?.(code);
+          onCompleteEvent(code);
           terminal.write(`\r
 Process exited with code ${code}.`);
           terminal.write("\x1B[?25l");
           clear();
         },
         onError: (err) => {
-          onError?.(err);
+          onErrorEvent(err);
           terminal.write(`\r
 [ERROR] ${err}`);
           terminal.write("\x1B[?25l");
@@ -195,7 +211,7 @@ Process exited with code ${code}.`);
       }
     );
     webtty.connect();
-    resizeObserver = new ResizeObserver((entries) => {
+    runtime.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (entry.target === ref.current) {
           if (!fit()) return;
@@ -203,7 +219,7 @@ Process exited with code ${code}.`);
         }
       }
     });
-    resizeObserver.observe(ref.current);
+    runtime.resizeObserver.observe(ref.current);
     fit();
     return () => {
       clear();

package/dist/components/index.mjs

@@ -1,6 +1,6 @@
 import {
   WebTTYTerminal
-} from "../chunk-HTAKPV7E.mjs";
+} from "../chunk-5MUU3P7J.mjs";
 export {
   WebTTYTerminal
 };

package/dist/hooks/index.d.mts

@@ -1,4 +1,4 @@
-import { WatchConfig } from '@rstreamlabs/rstream';
+import { WatchConfig } from '@rstreamlabs/tunnels';
 
 /**
  * Configuration for the UseRstream hook.
@@ -30,7 +30,7 @@ interface UseRstreamOptions extends Partial<WatchConfig> {
  * @returns An object with the current error (if any), and arrays of tunnels and clients.
  */
 declare function useRstream(options?: UseRstreamOptions): {
-    state: "disconnected" | "connecting" | "connected";
+    state: "connecting" | "connected" | "disconnected";
     error: {
         message: string;
         type: "warning" | "danger";

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-import { WatchConfig } from '@rstreamlabs/rstream';
+import { WatchConfig } from '@rstreamlabs/tunnels';
 
 /**
  * Configuration for the UseRstream hook.
@@ -30,7 +30,7 @@ interface UseRstreamOptions extends Partial<WatchConfig> {
  * @returns An object with the current error (if any), and arrays of tunnels and clients.
  */
 declare function useRstream(options?: UseRstreamOptions): {
-    state: "disconnected" | "connecting" | "connected";
+    state: "connecting" | "connected" | "disconnected";
     error: {
         message: string;
         type: "warning" | "danger";