@rstreamlabs/react 1.3.0 → 1.5.0

package/dist/index.js

@@ -28,12 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
+  RstreamProvider: () => RstreamProvider,
   WebTTYTerminal: () => WebTTYTerminal,
-  useRstream: () => useRstream
+  useRstream: () => useRstream,
+  useRstreamContext: () => useRstreamContext
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/webtty.tsx
 var import_xterm = require("@xterm/xterm/css/xterm.css");
@@ -150,15 +152,15 @@ function WebTTYTerminal(props) {
         onComplete: (code) => {
           onComplete?.(code);
           terminal.write(`\r
-Process exited with code ${code}\r
-`);
+Process exited with code ${code}.`);
+          terminal.write("\x1B[?25l");
           clear();
         },
         onError: (err) => {
           onError?.(err);
           terminal.write(`\r
-[ERROR] ${err}\r
-`);
+[ERROR] ${err}`);
+          terminal.write("\x1B[?25l");
           clear();
         }
       }
@@ -174,15 +176,19 @@ Process exited with code ${code}\r
     resizeObserver.observe(ref.current);
     return () => {
       clear();
+      webtty.disconnect();
       terminal.dispose();
     };
-  });
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: { height: "100%", width: "100%" } });
 }
 
 // src/hooks/use-rstream.ts
 var import_rstream = require("@rstreamlabs/rstream");
 var React2 = __toESM(require("react"));
+function hasAuth(options) {
+  return !!options && !!options.auth;
+}
 function useRstream(options) {
   const [state, setState] = React2.useState("disconnected");
   const [error, setError] = React2.useState(null);
@@ -190,72 +196,79 @@ function useRstream(options) {
   const [clients, setClients] = React2.useState([]);
   const [tunnels, setTunnels] = React2.useState([]);
   React2.useEffect(() => {
-    if (!options?.auth) return;
+    if (!hasAuth(options)) return;
     let active = true;
     let watch = null;
     let timeout = null;
+    const schedule = () => {
+      if (!active) return;
+      if (timeout) return;
+      setState("connecting");
+      timeout = setTimeout(() => {
+        if (!active) return;
+        timeout = null;
+        run();
+      }, reconnectTimeout);
+    };
     const run = async () => {
-      if (!options?.auth) return;
+      if (!hasAuth(options)) return;
       setState("connecting");
-      watch = new import_rstream.Watch(
-        { auth: options.auth },
-        {
-          onEvent: (event) => {
-            if (!active) return;
-            if (event.type.startsWith("client")) {
-              setClients((previous) => {
-                if (event.type === "client.created") {
-                  return [...previous, event.object];
-                } else if (event.type === "client.updated") {
-                  return previous.map((client) => {
-                    if (client.id === event.object.id) {
-                      return event.object;
-                    }
-                    return client;
-                  });
-                } else if (event.type === "client.deleted") {
-                  return previous.filter(
-                    (client) => client.id !== event.object.id
-                  );
-                }
-                return previous;
-              });
-            } else if (event.type.startsWith("tunnel")) {
-              setTunnels((previous) => {
-                if (event.type === "tunnel.created") {
-                  return [...previous, event.object];
-                } else if (event.type === "tunnel.updated") {
-                  return previous.map((tunnel) => {
-                    if (tunnel.id === event.object.id) {
-                      return event.object;
-                    }
-                    return tunnel;
-                  });
-                } else if (event.type === "tunnel.deleted") {
-                  return previous.filter(
-                    (tunnel) => tunnel.id !== event.object.id
-                  );
-                }
-                return previous;
-              });
-            }
-          },
-          onConnect: () => {
-            if (!active) return;
-            setState("connected");
-          },
-          onClose: () => {
-            if (!active) return;
-            watch = null;
-            setState("connecting");
-            timeout = setTimeout(() => {
-              if (!active) return;
-              timeout = null;
-              run();
-            }, reconnectTimeout);
+      watch = new import_rstream.Watch(options, {
+        onEvent: (event) => {
+          if (!active) return;
+          if (event.type.startsWith("client")) {
+            setClients((previous) => {
+              if (event.type === "client.created") {
+                return [...previous, event.object];
+              } else if (event.type === "client.updated") {
+                return previous.map((client) => {
+                  if (client.id === event.object.id) {
+                    return event.object;
+                  }
+                  return client;
+                });
+              } else if (event.type === "client.deleted") {
+                return previous.filter(
+                  (client) => client.id !== event.object.id
+                );
+              }
+              return previous;
+            });
+          } else if (event.type.startsWith("tunnel")) {
+            setTunnels((previous) => {
+              if (event.type === "tunnel.created") {
+                return [...previous, event.object];
+              } else if (event.type === "tunnel.updated") {
+                return previous.map((tunnel) => {
+                  if (tunnel.id === event.object.id) {
+                    return event.object;
+                  }
+                  return tunnel;
+                });
+              } else if (event.type === "tunnel.deleted") {
+                return previous.filter(
+                  (tunnel) => tunnel.id !== event.object.id
+                );
+              }
+              return previous;
+            });
           }
+        },
+        onConnect: () => {
+          if (!active) return;
+          setState("connected");
+        },
+        onClose: () => {
+          if (!active) return;
+          watch = null;
+          schedule();
         }
-      );
+      });
+      try {
+        await watch.connect();
+      } catch {
+        schedule();
+      }
     };
     run();
     return () => {
@@ -298,8 +311,31 @@ function useRstream(options) {
   }, [options, state]);
   return { error, tunnels, clients };
 }
+
+// src/providers/rstream.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RstreamContext = React3.createContext(
+  void 0
+);
+function useRstreamContext() {
+  const ctx = React3.useContext(RstreamContext);
+  if (!ctx)
+    throw new Error("useRstreamContext must be used within a RstreamProvider");
+  return ctx;
+}
+function RstreamProvider({ options, children }) {
+  const { error, tunnels, clients } = useRstream(options);
+  const value = React3.useMemo(
+    () => ({ error, tunnels, clients }),
+    [error, tunnels, clients]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RstreamContext.Provider, { value, children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  RstreamProvider,
   WebTTYTerminal,
-  useRstream
+  useRstream,
+  useRstreamContext
 });

package/dist/index.mjs

@@ -1,269 +1,17 @@
-// src/components/webtty.tsx
-import "@xterm/xterm/css/xterm.css";
-import { FitAddon } from "@xterm/addon-fit";
-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 * 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
-  } = props;
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    let disposeOnData = null;
-    let disposeOnResize = null;
-    let resizeObserver = null;
-    const clear = () => {
-      disposeOnData?.dispose();
-      disposeOnData = null;
-      disposeOnResize?.dispose();
-      disposeOnResize = null;
-      resizeObserver?.disconnect();
-      resizeObserver = null;
-    };
-    const terminal = new Terminal({
-      allowProposedApi: true,
-      cursorBlink: false,
-      scrollback: 1e4,
-      ...terminalOptions
-    });
-    const fitAddon = new FitAddon();
-    terminal.loadAddon(fitAddon);
-    terminal.loadAddon(new WebLinksAddon());
-    terminal.loadAddon(new Unicode11Addon());
-    try {
-      terminal.loadAddon(new WebglAddon());
-    } catch (err) {
-      console.warn("WebGL addon could not be loaded:", err);
-    }
-    terminal.open(ref.current);
-    onTerminalCreated?.(terminal);
-    const webtty = new WebTTY(
-      { url, sendHeartbeat, heartbeatIntervalMs },
-      { cmdArgs, envVars, allocateTty, interactive, username, workdir },
-      {
-        onStdout: (chunk) => {
-          onStdout?.(chunk);
-          terminal.write(chunk);
-        },
-        onStdoutEos: () => {
-          onStdoutEos?.();
-        },
-        onStderr: (chunk) => {
-          onStderr?.(chunk);
-          terminal.write(
-            "\x1B[31m" + new TextDecoder().decode(chunk) + "\x1B[0m"
-          );
-        },
-        onStderrEos: () => {
-          onStderrEos?.();
-        },
-        onConnect: () => {
-          onConnect?.();
-          terminal.focus();
-          try {
-            webtty.resize(terminal.rows, terminal.cols);
-          } catch (e) {
-            console.error("Cannot resize remote TTY:", e);
-          }
-          disposeOnData = terminal.onData((data) => {
-            try {
-              webtty.writeStdin(new TextEncoder().encode(data));
-            } catch (e) {
-              console.error("Cannot writeStdin:", e);
-            }
-          });
-          disposeOnResize = terminal.onResize((size) => {
-            try {
-              webtty.resize(size.rows, size.cols);
-            } catch (e) {
-              console.error("Cannot resize remote TTY:", e);
-            }
-          });
-        },
-        onComplete: (code) => {
-          onComplete?.(code);
-          terminal.write(`\r
-Process exited with code ${code}\r
-`);
-          clear();
-        },
-        onError: (err) => {
-          onError?.(err);
-          terminal.write(`\r
-[ERROR] ${err}\r
-`);
-          clear();
-        }
-      }
-    );
-    webtty.connect();
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === ref.current) {
-          fitAddon.fit();
-        }
-      }
-    });
-    resizeObserver.observe(ref.current);
-    return () => {
-      clear();
-      terminal.dispose();
-    };
-  });
-  return /* @__PURE__ */ jsx("div", { ref, style: { height: "100%", width: "100%" } });
-}
-
-// src/hooks/use-rstream.ts
-import { Watch } from "@rstreamlabs/rstream";
-import * as React2 from "react";
-function useRstream(options) {
-  const [state, setState] = React2.useState("disconnected");
-  const [error, setError] = React2.useState(null);
-  const { reconnectTimeout = 1e3, errorTimeout = 5e3 } = options || {};
-  const [clients, setClients] = React2.useState([]);
-  const [tunnels, setTunnels] = React2.useState([]);
-  React2.useEffect(() => {
-    if (!options?.auth) return;
-    let active = true;
-    let watch = null;
-    let timeout = null;
-    const run = async () => {
-      if (!options?.auth) return;
-      setState("connecting");
-      watch = new Watch(
-        { auth: options.auth },
-        {
-          onEvent: (event) => {
-            if (!active) return;
-            if (event.type.startsWith("client")) {
-              setClients((previous) => {
-                if (event.type === "client.created") {
-                  return [...previous, event.object];
-                } else if (event.type === "client.updated") {
-                  return previous.map((client) => {
-                    if (client.id === event.object.id) {
-                      return event.object;
-                    }
-                    return client;
-                  });
-                } else if (event.type === "client.deleted") {
-                  return previous.filter(
-                    (client) => client.id !== event.object.id
-                  );
-                }
-                return previous;
-              });
-            } else if (event.type.startsWith("tunnel")) {
-              setTunnels((previous) => {
-                if (event.type === "tunnel.created") {
-                  return [...previous, event.object];
-                } else if (event.type === "tunnel.updated") {
-                  return previous.map((tunnel) => {
-                    if (tunnel.id === event.object.id) {
-                      return event.object;
-                    }
-                    return tunnel;
-                  });
-                } else if (event.type === "tunnel.deleted") {
-                  return previous.filter(
-                    (tunnel) => tunnel.id !== event.object.id
-                  );
-                }
-                return previous;
-              });
-            }
-          },
-          onConnect: () => {
-            if (!active) return;
-            setState("connected");
-          },
-          onClose: () => {
-            if (!active) return;
-            watch = null;
-            setState("connecting");
-            timeout = setTimeout(() => {
-              if (!active) return;
-              timeout = null;
-              run();
-            }, reconnectTimeout);
-          }
-        }
-      );
-    };
-    run();
-    return () => {
-      active = false;
-      if (watch) {
-        watch.disconnect();
-        watch = null;
-      }
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-    };
-  }, [options, reconnectTimeout]);
-  React2.useEffect(() => {
-    if (options?.auth) {
-      if (error && error.type === "danger") return;
-      if (state !== "connected") {
-        const timeout = setTimeout(() => {
-          setError({
-            message: "Failed to fetch rstream ressources. Retrying...",
-            type: "warning"
-          });
-        }, errorTimeout);
-        return () => {
-          clearTimeout(timeout);
-        };
-      } else if (state === "connected") {
-        setError(null);
-      }
-    } else {
-      setError(null);
-    }
-  }, [options, state, error, errorTimeout]);
-  React2.useEffect(() => {
-    if (options?.auth === void 0 || state !== "connected") {
-      setClients([]);
-      setTunnels([]);
-    }
-  }, [options, state]);
-  return { error, tunnels, clients };
-}
+  WebTTYTerminal
+} from "./chunk-JW275FK7.mjs";
+import "./chunk-2JFL7TS5.mjs";
+import {
+  RstreamProvider,
+  useRstreamContext
+} from "./chunk-TAYPWKHF.mjs";
+import {
+  useRstream
+} from "./chunk-2WDUPTYY.mjs";
 export {
+  RstreamProvider,
   WebTTYTerminal,
-  useRstream
+  useRstream,
+  useRstreamContext
 };

package/dist/providers/index.d.mts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { UseRstreamOptions } from '../hooks/index.mjs';
+import '@rstreamlabs/rstream';
+
+declare function useRstreamContext(): {
+    error: {
+        message: string;
+        type: "warning" | "danger";
+    } | null;
+    tunnels: {
+        status: "online" | "offline";
+        client_id: string;
+        user_id: string;
+        id: string;
+        type?: "bytestream" | "datagram" | undefined;
+        name?: string | undefined;
+        creation_date?: Date | undefined;
+        publish?: boolean | undefined;
+        protocol?: "tls" | "dtls" | "quic" | "http" | undefined;
+        labels?: Record<string, string | undefined> | undefined;
+        geo_ip?: string[] | undefined;
+        trusted_ips?: string[] | undefined;
+        host?: string | undefined;
+        tls_mode?: "passthrough" | "terminated" | undefined;
+        tls_alpns?: string[] | undefined;
+        tls_min_version?: string | undefined;
+        tls_ciphers?: string[] | undefined;
+        mtls?: boolean | undefined;
+        mtls_ca_cert_pem?: string | undefined;
+        http_version?: "http/1.1" | "h2c" | "h3" | undefined;
+        http_use_tls?: boolean | undefined;
+        token_auth?: boolean | undefined;
+        sso?: boolean | undefined;
+        sso_providers?: string[] | undefined;
+        email_whitelist?: string[] | undefined;
+        email_blacklist?: string[] | undefined;
+        challenge?: boolean | undefined;
+    }[];
+    clients: {
+        status: "online" | "offline";
+        user_id: string;
+        id: string;
+        labels?: Record<string, string | undefined> | undefined;
+        details?: {
+            agent?: string | undefined;
+            os?: string | undefined;
+            version?: string | undefined;
+            protocol_version?: string | undefined;
+        } | undefined;
+    }[];
+};
+interface RstreamProviderProps {
+    options?: UseRstreamOptions;
+    children?: React.ReactNode;
+}
+declare function RstreamProvider({ options, children }: RstreamProviderProps): react_jsx_runtime.JSX.Element;
+
+export { RstreamProvider, useRstreamContext };

package/dist/providers/index.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { UseRstreamOptions } from '../hooks/index.js';
+import '@rstreamlabs/rstream';
+
+declare function useRstreamContext(): {
+    error: {
+        message: string;
+        type: "warning" | "danger";
+    } | null;
+    tunnels: {
+        status: "online" | "offline";
+        client_id: string;
+        user_id: string;
+        id: string;
+        type?: "bytestream" | "datagram" | undefined;
+        name?: string | undefined;
+        creation_date?: Date | undefined;
+        publish?: boolean | undefined;
+        protocol?: "tls" | "dtls" | "quic" | "http" | undefined;
+        labels?: Record<string, string | undefined> | undefined;
+        geo_ip?: string[] | undefined;
+        trusted_ips?: string[] | undefined;
+        host?: string | undefined;
+        tls_mode?: "passthrough" | "terminated" | undefined;
+        tls_alpns?: string[] | undefined;
+        tls_min_version?: string | undefined;
+        tls_ciphers?: string[] | undefined;
+        mtls?: boolean | undefined;
+        mtls_ca_cert_pem?: string | undefined;
+        http_version?: "http/1.1" | "h2c" | "h3" | undefined;
+        http_use_tls?: boolean | undefined;
+        token_auth?: boolean | undefined;
+        sso?: boolean | undefined;
+        sso_providers?: string[] | undefined;
+        email_whitelist?: string[] | undefined;
+        email_blacklist?: string[] | undefined;
+        challenge?: boolean | undefined;
+    }[];
+    clients: {
+        status: "online" | "offline";
+        user_id: string;
+        id: string;
+        labels?: Record<string, string | undefined> | undefined;
+        details?: {
+            agent?: string | undefined;
+            os?: string | undefined;
+            version?: string | undefined;
+            protocol_version?: string | undefined;
+        } | undefined;
+    }[];
+};
+interface RstreamProviderProps {
+    options?: UseRstreamOptions;
+    children?: React.ReactNode;
+}
+declare function RstreamProvider({ options, children }: RstreamProviderProps): react_jsx_runtime.JSX.Element;
+
+export { RstreamProvider, useRstreamContext };