react-websocket 4.0.0 → 4.18.0

package/dist/devtools.cjs

@@ -0,0 +1,186 @@
+'use client';
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+//#region src/devtools.ts
+const INSPECT = Symbol.for("react-websocket.inspect");
+const REGISTRY = Symbol.for("react-websocket.registry");
+const isClient = (value) => typeof value?.acquire === "function" && typeof value.send === "function" && "socket" in value;
+const COLORS = {
+	idle: "#9ca3af",
+	connecting: "#60a5fa",
+	open: "#34d399",
+	reconnecting: "#fbbf24",
+	closed: "#f87171"
+};
+/** Every client to show, with what the sources say about it. */
+function collect(sources) {
+	const rows = /* @__PURE__ */ new Map();
+	const row = (client) => {
+		if (!rows.has(client)) rows.set(client, {
+			client,
+			topics: [],
+			feeds: []
+		});
+		return rows.get(client);
+	};
+	const shared = globalThis[REGISTRY];
+	for (const client of shared?.values() ?? []) row(client);
+	for (const source of sources) {
+		if (isClient(source)) {
+			row(source);
+			continue;
+		}
+		if (!isClient(source?.client)) continue;
+		const entry = row(source.client);
+		if (typeof source.position === "function") for (const topic of source.active()) entry.feeds.push(`${topic} @${source.position(topic) ?? "–"}`);
+		else if (typeof source.active === "function") entry.topics.push(...source.active());
+		else if (typeof source.add === "function") entry.waiting = source.getSnapshot().length;
+		else if (typeof source.leave === "function") entry.peers = source.getSnapshot().length;
+		else if (typeof source.start === "function" && typeof source.list === "function") {
+			const runs = source.list();
+			entry.runs = `${runs.filter((run) => run.status === "streaming").length} streaming, ${runs.length} in all`;
+		} else if (typeof source.getSnapshot === "function" && "rtt" in source.getSnapshot()) entry.latency = source.getSnapshot();
+	}
+	return [...rows.values()];
+}
+const panel = {
+	position: "fixed",
+	zIndex: 2147483647,
+	font: "12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+	color: "#e5e7eb",
+	background: "#111827",
+	border: "1px solid #374151",
+	borderRadius: 8,
+	boxShadow: "0 8px 24px rgb(0 0 0 / 0.3)"
+};
+const dot = (status) => ({
+	display: "inline-block",
+	width: 8,
+	height: 8,
+	borderRadius: 4,
+	marginRight: 6,
+	background: COLORS[status]
+});
+const noopSubscribe = () => () => {};
+function Client({ row, received }) {
+	const { client } = row;
+	const { status, attempt } = client.getSnapshot();
+	const inspect = client[INSPECT];
+	const facts = [
+		["status", attempt ? `${status} (attempt ${attempt})` : status],
+		["queued", inspect?.().queued ?? "–"],
+		["buffered", `${client.socket?.bufferedAmount ?? 0} B`],
+		["received", received]
+	];
+	if (row.latency) {
+		const { rtt } = row.latency;
+		facts.push(["rtt", rtt === void 0 ? "–" : `${Math.round(rtt)} ms`]);
+	}
+	if (row.waiting !== void 0) facts.push(["outbox", `${row.waiting} waiting`]);
+	if (row.peers !== void 0) facts.push(["presence", `${row.peers} peer${row.peers === 1 ? "" : "s"}`]);
+	if (row.runs) facts.push(["runs", row.runs]);
+	if (row.topics.length) facts.push(["topics", row.topics.join(", ")]);
+	if (row.feeds.length) facts.push(["feeds", row.feeds.join(", ")]);
+	const url = typeof client.url === "string" ? client.url : client.socket?.url ?? "url()";
+	return (0, react.createElement)("section", { style: {
+		padding: "8px 12px",
+		borderTop: "1px solid #374151"
+	} }, (0, react.createElement)("div", { style: {
+		fontWeight: 600,
+		wordBreak: "break-all"
+	} }, (0, react.createElement)("span", { style: dot(status) }), url), (0, react.createElement)("dl", { style: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		gap: "2px 12px",
+		margin: "6px 0 0"
+	} }, facts.flatMap(([name, value]) => [(0, react.createElement)("dt", {
+		key: `${name}-t`,
+		style: { color: "#9ca3af" }
+	}, name), (0, react.createElement)("dd", {
+		key: `${name}-d`,
+		style: {
+			margin: 0,
+			wordBreak: "break-all"
+		}
+	}, String(value))])));
+}
+/**
+* A panel in a corner of the page that shows each WebSocket client: its status and attempts,
+* what's queued and buffered, how many messages it received, and the round-trip time, topics,
+* feeds, outbox, presence and runs of the `sources` that use it. For development: render it only
+* there, for example behind `import.meta.env.DEV`.
+*
+* @example
+* ```tsx
+* import { WebSocketDevtools } from 'react-websocket/devtools';
+*
+* {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}
+* ```
+*/
+function WebSocketDevtools({ sources = [], open: initiallyOpen = false, position = "bottom-right" }) {
+	const [open, setOpen] = (0, react.useState)(initiallyOpen);
+	const [, tick] = (0, react.useReducer)((n) => n + 1, 0);
+	const [received] = (0, react.useState)(() => /* @__PURE__ */ new WeakMap());
+	const browser = (0, react.useSyncExternalStore)(noopSubscribe, () => true, () => false);
+	const rows = browser ? collect(sources) : [];
+	const clients = rows.map((row) => row.client);
+	(0, react.useEffect)(() => {
+		const timer = setInterval(tick, 500);
+		return () => clearInterval(timer);
+	}, []);
+	const [listening] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	(0, react.useEffect)(() => {
+		for (const client of clients) {
+			if (listening.has(client)) continue;
+			listening.set(client, client.on("message", () => received.set(client, (received.get(client) ?? 0) + 1)));
+		}
+	});
+	(0, react.useEffect)(() => () => {
+		for (const off of listening.values()) off();
+		listening.clear();
+	}, [listening]);
+	if (!browser) return null;
+	const [vertical, horizontal] = position.split("-");
+	const worst = [
+		"closed",
+		"reconnecting",
+		"connecting",
+		"open",
+		"idle"
+	].find((status) => clients.some((client) => client.getSnapshot().status === status));
+	return (0, react.createElement)("div", { style: {
+		...panel,
+		[vertical]: 12,
+		[horizontal]: 12,
+		maxWidth: 420
+	} }, (0, react.createElement)("button", {
+		type: "button",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open),
+		style: {
+			all: "unset",
+			cursor: "pointer",
+			display: "block",
+			padding: "6px 12px",
+			fontWeight: 600
+		}
+	}, (0, react.createElement)("span", { style: dot(worst ?? "idle") }), `WebSocket · ${clients.length} client${clients.length === 1 ? "" : "s"}`), open && (0, react.createElement)("div", {
+		role: "region",
+		"aria-label": "WebSocket clients",
+		style: {
+			maxHeight: "60vh",
+			overflow: "auto"
+		}
+	}, rows.length ? rows.map((row, i) => (0, react.createElement)(Client, {
+		key: i,
+		row,
+		received: received.get(row.client) ?? 0
+	})) : (0, react.createElement)("p", { style: {
+		margin: 0,
+		padding: "8px 12px"
+	} }, "No clients yet.")));
+}
+//#endregion
+exports.WebSocketDevtools = WebSocketDevtools;
+
+//# sourceMappingURL=devtools.cjs.map

package/dist/devtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.cjs","names":["h","useState","useReducer","useSyncExternalStore"],"sources":["../src/devtools.ts"],"sourcesContent":["import {\n  createElement as h,\n  useEffect,\n  useReducer,\n  useState,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactElement\n} from 'react';\n// Types only: the built entry imports nothing from the library at runtime.\nimport type { Latency, Status, WebSocketClient } from './core';\n\n/** Props for {@link WebSocketDevtools}. */\nexport interface WebSocketDevtoolsProps {\n  /**\n   * What to show: clients from `createWebSocket`, and the topics, feeds, latency trackers,\n   * outboxes, presence and runs created on them, which are shown with their client. The clients\n   * `useWebSocket(url)` shares are listed by themselves, in development.\n   */\n  sources?: readonly unknown[];\n  /** Start with the panel open. @default false */\n  open?: boolean;\n  /** Which corner of the window it sits in. @default 'bottom-right' */\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n}\n\ntype AnyClient = WebSocketClient<any, any>;\n\ninterface Row {\n  client: AnyClient;\n  topics: string[];\n  feeds: string[];\n  latency?: Latency;\n  waiting?: number;\n  peers?: number;\n  runs?: string;\n}\n\nconst INSPECT = Symbol.for('react-websocket.inspect');\nconst REGISTRY = Symbol.for('react-websocket.registry');\n\nconst isClient = (value: any): value is AnyClient =>\n  typeof value?.acquire === 'function' && typeof value.send === 'function' && 'socket' in value;\n\nconst COLORS: Record<Status, string> = {\n  idle: '#9ca3af',\n  connecting: '#60a5fa',\n  open: '#34d399',\n  reconnecting: '#fbbf24',\n  closed: '#f87171'\n};\n\n/** Every client to show, with what the sources say about it. */\nfunction collect(sources: readonly unknown[]): Row[] {\n  const rows = new Map<AnyClient, Row>();\n  const row = (client: AnyClient) => {\n    if (!rows.has(client)) rows.set(client, { client, topics: [], feeds: [] });\n    return rows.get(client)!;\n  };\n  const shared = (globalThis as Record<symbol, Map<string, AnyClient> | undefined>)[REGISTRY];\n  for (const client of shared?.values() ?? []) row(client);\n  for (const source of sources as any[]) {\n    if (isClient(source)) {\n      row(source);\n      continue;\n    }\n    if (!isClient(source?.client)) continue;\n    const entry = row(source.client);\n    if (typeof source.position === 'function') {\n      for (const topic of source.active())\n        entry.feeds.push(`${topic} @${source.position(topic) ?? '–'}`);\n    } else if (typeof source.active === 'function') entry.topics.push(...source.active());\n    else if (typeof source.add === 'function') entry.waiting = source.getSnapshot().length;\n    else if (typeof source.leave === 'function') entry.peers = source.getSnapshot().length;\n    else if (typeof source.start === 'function' && typeof source.list === 'function') {\n      const runs = source.list() as { status: string }[];\n      entry.runs = `${runs.filter(run => run.status === 'streaming').length} streaming, ${runs.length} in all`;\n    } else if (typeof source.getSnapshot === 'function' && 'rtt' in source.getSnapshot()) {\n      entry.latency = source.getSnapshot();\n    }\n  }\n  return [...rows.values()];\n}\n\nconst panel: CSSProperties = {\n  position: 'fixed',\n  zIndex: 2147483647,\n  font: '12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace',\n  color: '#e5e7eb',\n  background: '#111827',\n  border: '1px solid #374151',\n  borderRadius: 8,\n  boxShadow: '0 8px 24px rgb(0 0 0 / 0.3)'\n};\n\nconst dot = (status: Status): CSSProperties => ({\n  display: 'inline-block',\n  width: 8,\n  height: 8,\n  borderRadius: 4,\n  marginRight: 6,\n  background: COLORS[status]\n});\n\nconst noopSubscribe = () => () => {};\n\nfunction Client({ row, received }: { row: Row; received: number }) {\n  const { client } = row;\n  const { status, attempt } = client.getSnapshot();\n  const inspect = (client as unknown as Record<symbol, (() => { queued: number }) | undefined>)[\n    INSPECT\n  ];\n  const facts: [string, string | number][] = [\n    ['status', attempt ? `${status} (attempt ${attempt})` : status],\n    ['queued', inspect?.().queued ?? '–'],\n    ['buffered', `${client.socket?.bufferedAmount ?? 0} B`],\n    ['received', received]\n  ];\n  if (row.latency) {\n    const { rtt } = row.latency;\n    facts.push(['rtt', rtt === undefined ? '–' : `${Math.round(rtt)} ms`]);\n  }\n  if (row.waiting !== undefined) facts.push(['outbox', `${row.waiting} waiting`]);\n  if (row.peers !== undefined) {\n    facts.push(['presence', `${row.peers} peer${row.peers === 1 ? '' : 's'}`]);\n  }\n  if (row.runs) facts.push(['runs', row.runs]);\n  if (row.topics.length) facts.push(['topics', row.topics.join(', ')]);\n  if (row.feeds.length) facts.push(['feeds', row.feeds.join(', ')]);\n  const url = typeof client.url === 'string' ? client.url : (client.socket?.url ?? 'url()');\n  return h(\n    'section',\n    { style: { padding: '8px 12px', borderTop: '1px solid #374151' } },\n    h(\n      'div',\n      { style: { fontWeight: 600, wordBreak: 'break-all' } },\n      h('span', { style: dot(status) }),\n      url\n    ),\n    h(\n      'dl',\n      {\n        style: {\n          display: 'grid',\n          gridTemplateColumns: 'auto 1fr',\n          gap: '2px 12px',\n          margin: '6px 0 0'\n        }\n      },\n      facts.flatMap(([name, value]) => [\n        h('dt', { key: `${name}-t`, style: { color: '#9ca3af' } }, name),\n        h('dd', { key: `${name}-d`, style: { margin: 0, wordBreak: 'break-all' } }, String(value))\n      ])\n    )\n  );\n}\n\n/**\n * A panel in a corner of the page that shows each WebSocket client: its status and attempts,\n * what's queued and buffered, how many messages it received, and the round-trip time, topics,\n * feeds, outbox, presence and runs of the `sources` that use it. For development: render it only\n * there, for example behind `import.meta.env.DEV`.\n *\n * @example\n * ```tsx\n * import { WebSocketDevtools } from 'react-websocket/devtools';\n *\n * {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}\n * ```\n */\nexport function WebSocketDevtools({\n  sources = [],\n  open: initiallyOpen = false,\n  position = 'bottom-right'\n}: WebSocketDevtoolsProps): ReactElement | null {\n  const [open, setOpen] = useState(initiallyOpen);\n  const [, tick] = useReducer((n: number) => n + 1, 0);\n  const [received] = useState(() => new WeakMap<AnyClient, number>());\n  // Nothing on the server, so hydration matches.\n  const browser = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  );\n  const rows = browser ? collect(sources) : [];\n  const clients = rows.map(row => row.client);\n\n  // Refresh twice a second: what it shows changes faster than it's worth re-rendering for.\n  useEffect(() => {\n    const timer = setInterval(tick, 500);\n    return () => clearInterval(timer);\n  }, []);\n  // After every render, count the messages of clients that appeared since, such as a URL that\n  // a component started using.\n  const [listening] = useState(() => new Map<AnyClient, () => void>());\n  useEffect(() => {\n    for (const client of clients) {\n      if (listening.has(client)) continue;\n      listening.set(\n        client,\n        client.on('message', () => received.set(client, (received.get(client) ?? 0) + 1))\n      );\n    }\n  });\n  useEffect(\n    () => () => {\n      for (const off of listening.values()) off();\n      listening.clear();\n    },\n    [listening]\n  );\n\n  if (!browser) return null;\n  const [vertical, horizontal] = position.split('-') as ['top' | 'bottom', 'left' | 'right'];\n  const worst = (['closed', 'reconnecting', 'connecting', 'open', 'idle'] as Status[]).find(\n    status => clients.some(client => client.getSnapshot().status === status)\n  );\n  return h(\n    'div',\n    { style: { ...panel, [vertical]: 12, [horizontal]: 12, maxWidth: 420 } },\n    h(\n      'button',\n      {\n        type: 'button',\n        'aria-expanded': open,\n        onClick: () => setOpen(!open),\n        style: {\n          all: 'unset',\n          cursor: 'pointer',\n          display: 'block',\n          padding: '6px 12px',\n          fontWeight: 600\n        }\n      },\n      h('span', { style: dot(worst ?? 'idle') }),\n      `WebSocket · ${clients.length} client${clients.length === 1 ? '' : 's'}`\n    ),\n    open &&\n      h(\n        'div',\n        {\n          role: 'region',\n          'aria-label': 'WebSocket clients',\n          style: { maxHeight: '60vh', overflow: 'auto' }\n        },\n        rows.length\n          ? rows.map((row, i) =>\n              h(Client, { key: i, row, received: received.get(row.client) ?? 0 })\n            )\n          : h('p', { style: { margin: 0, padding: '8px 12px' } }, 'No clients yet.')\n      )\n  );\n}\n"],"mappings":"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"}

package/dist/devtools.d.cts

@@ -0,0 +1,32 @@
+
+import { ReactElement } from "react";
+//#region src/devtools.d.ts
+/** Props for {@link WebSocketDevtools}. */
+export interface WebSocketDevtoolsProps {
+  /**
+   * What to show: clients from `createWebSocket`, and the topics, feeds, latency trackers,
+   * outboxes, presence and runs created on them, which are shown with their client. The clients
+   * `useWebSocket(url)` shares are listed by themselves, in development.
+   */
+  sources?: readonly unknown[];
+  /** Start with the panel open. @default false */
+  open?: boolean;
+  /** Which corner of the window it sits in. @default 'bottom-right' */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+/**
+ * A panel in a corner of the page that shows each WebSocket client: its status and attempts,
+ * what's queued and buffered, how many messages it received, and the round-trip time, topics,
+ * feeds, outbox, presence and runs of the `sources` that use it. For development: render it only
+ * there, for example behind `import.meta.env.DEV`.
+ *
+ * @example
+ * ```tsx
+ * import { WebSocketDevtools } from 'react-websocket/devtools';
+ *
+ * {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}
+ * ```
+ */
+export declare function WebSocketDevtools({ sources, open: initiallyOpen, position }: WebSocketDevtoolsProps): ReactElement | null;
+//#endregion
+//# sourceMappingURL=devtools.d.cts.map

package/dist/devtools.d.ts

@@ -0,0 +1,32 @@
+
+import { ReactElement } from "react";
+//#region src/devtools.d.ts
+/** Props for {@link WebSocketDevtools}. */
+export interface WebSocketDevtoolsProps {
+  /**
+   * What to show: clients from `createWebSocket`, and the topics, feeds, latency trackers,
+   * outboxes, presence and runs created on them, which are shown with their client. The clients
+   * `useWebSocket(url)` shares are listed by themselves, in development.
+   */
+  sources?: readonly unknown[];
+  /** Start with the panel open. @default false */
+  open?: boolean;
+  /** Which corner of the window it sits in. @default 'bottom-right' */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+/**
+ * A panel in a corner of the page that shows each WebSocket client: its status and attempts,
+ * what's queued and buffered, how many messages it received, and the round-trip time, topics,
+ * feeds, outbox, presence and runs of the `sources` that use it. For development: render it only
+ * there, for example behind `import.meta.env.DEV`.
+ *
+ * @example
+ * ```tsx
+ * import { WebSocketDevtools } from 'react-websocket/devtools';
+ *
+ * {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}
+ * ```
+ */
+export declare function WebSocketDevtools({ sources, open: initiallyOpen, position }: WebSocketDevtoolsProps): ReactElement | null;
+//#endregion
+//# sourceMappingURL=devtools.d.ts.map

package/dist/devtools.js

@@ -0,0 +1,185 @@
+'use client';
+import { createElement, useEffect, useReducer, useState, useSyncExternalStore } from "react";
+//#region src/devtools.ts
+const INSPECT = Symbol.for("react-websocket.inspect");
+const REGISTRY = Symbol.for("react-websocket.registry");
+const isClient = (value) => typeof value?.acquire === "function" && typeof value.send === "function" && "socket" in value;
+const COLORS = {
+	idle: "#9ca3af",
+	connecting: "#60a5fa",
+	open: "#34d399",
+	reconnecting: "#fbbf24",
+	closed: "#f87171"
+};
+/** Every client to show, with what the sources say about it. */
+function collect(sources) {
+	const rows = /* @__PURE__ */ new Map();
+	const row = (client) => {
+		if (!rows.has(client)) rows.set(client, {
+			client,
+			topics: [],
+			feeds: []
+		});
+		return rows.get(client);
+	};
+	const shared = globalThis[REGISTRY];
+	for (const client of shared?.values() ?? []) row(client);
+	for (const source of sources) {
+		if (isClient(source)) {
+			row(source);
+			continue;
+		}
+		if (!isClient(source?.client)) continue;
+		const entry = row(source.client);
+		if (typeof source.position === "function") for (const topic of source.active()) entry.feeds.push(`${topic} @${source.position(topic) ?? "–"}`);
+		else if (typeof source.active === "function") entry.topics.push(...source.active());
+		else if (typeof source.add === "function") entry.waiting = source.getSnapshot().length;
+		else if (typeof source.leave === "function") entry.peers = source.getSnapshot().length;
+		else if (typeof source.start === "function" && typeof source.list === "function") {
+			const runs = source.list();
+			entry.runs = `${runs.filter((run) => run.status === "streaming").length} streaming, ${runs.length} in all`;
+		} else if (typeof source.getSnapshot === "function" && "rtt" in source.getSnapshot()) entry.latency = source.getSnapshot();
+	}
+	return [...rows.values()];
+}
+const panel = {
+	position: "fixed",
+	zIndex: 2147483647,
+	font: "12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+	color: "#e5e7eb",
+	background: "#111827",
+	border: "1px solid #374151",
+	borderRadius: 8,
+	boxShadow: "0 8px 24px rgb(0 0 0 / 0.3)"
+};
+const dot = (status) => ({
+	display: "inline-block",
+	width: 8,
+	height: 8,
+	borderRadius: 4,
+	marginRight: 6,
+	background: COLORS[status]
+});
+const noopSubscribe = () => () => {};
+function Client({ row, received }) {
+	const { client } = row;
+	const { status, attempt } = client.getSnapshot();
+	const inspect = client[INSPECT];
+	const facts = [
+		["status", attempt ? `${status} (attempt ${attempt})` : status],
+		["queued", inspect?.().queued ?? "–"],
+		["buffered", `${client.socket?.bufferedAmount ?? 0} B`],
+		["received", received]
+	];
+	if (row.latency) {
+		const { rtt } = row.latency;
+		facts.push(["rtt", rtt === void 0 ? "–" : `${Math.round(rtt)} ms`]);
+	}
+	if (row.waiting !== void 0) facts.push(["outbox", `${row.waiting} waiting`]);
+	if (row.peers !== void 0) facts.push(["presence", `${row.peers} peer${row.peers === 1 ? "" : "s"}`]);
+	if (row.runs) facts.push(["runs", row.runs]);
+	if (row.topics.length) facts.push(["topics", row.topics.join(", ")]);
+	if (row.feeds.length) facts.push(["feeds", row.feeds.join(", ")]);
+	const url = typeof client.url === "string" ? client.url : client.socket?.url ?? "url()";
+	return createElement("section", { style: {
+		padding: "8px 12px",
+		borderTop: "1px solid #374151"
+	} }, createElement("div", { style: {
+		fontWeight: 600,
+		wordBreak: "break-all"
+	} }, createElement("span", { style: dot(status) }), url), createElement("dl", { style: {
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		gap: "2px 12px",
+		margin: "6px 0 0"
+	} }, facts.flatMap(([name, value]) => [createElement("dt", {
+		key: `${name}-t`,
+		style: { color: "#9ca3af" }
+	}, name), createElement("dd", {
+		key: `${name}-d`,
+		style: {
+			margin: 0,
+			wordBreak: "break-all"
+		}
+	}, String(value))])));
+}
+/**
+* A panel in a corner of the page that shows each WebSocket client: its status and attempts,
+* what's queued and buffered, how many messages it received, and the round-trip time, topics,
+* feeds, outbox, presence and runs of the `sources` that use it. For development: render it only
+* there, for example behind `import.meta.env.DEV`.
+*
+* @example
+* ```tsx
+* import { WebSocketDevtools } from 'react-websocket/devtools';
+*
+* {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}
+* ```
+*/
+function WebSocketDevtools({ sources = [], open: initiallyOpen = false, position = "bottom-right" }) {
+	const [open, setOpen] = useState(initiallyOpen);
+	const [, tick] = useReducer((n) => n + 1, 0);
+	const [received] = useState(() => /* @__PURE__ */ new WeakMap());
+	const browser = useSyncExternalStore(noopSubscribe, () => true, () => false);
+	const rows = browser ? collect(sources) : [];
+	const clients = rows.map((row) => row.client);
+	useEffect(() => {
+		const timer = setInterval(tick, 500);
+		return () => clearInterval(timer);
+	}, []);
+	const [listening] = useState(() => /* @__PURE__ */ new Map());
+	useEffect(() => {
+		for (const client of clients) {
+			if (listening.has(client)) continue;
+			listening.set(client, client.on("message", () => received.set(client, (received.get(client) ?? 0) + 1)));
+		}
+	});
+	useEffect(() => () => {
+		for (const off of listening.values()) off();
+		listening.clear();
+	}, [listening]);
+	if (!browser) return null;
+	const [vertical, horizontal] = position.split("-");
+	const worst = [
+		"closed",
+		"reconnecting",
+		"connecting",
+		"open",
+		"idle"
+	].find((status) => clients.some((client) => client.getSnapshot().status === status));
+	return createElement("div", { style: {
+		...panel,
+		[vertical]: 12,
+		[horizontal]: 12,
+		maxWidth: 420
+	} }, createElement("button", {
+		type: "button",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open),
+		style: {
+			all: "unset",
+			cursor: "pointer",
+			display: "block",
+			padding: "6px 12px",
+			fontWeight: 600
+		}
+	}, createElement("span", { style: dot(worst ?? "idle") }), `WebSocket · ${clients.length} client${clients.length === 1 ? "" : "s"}`), open && createElement("div", {
+		role: "region",
+		"aria-label": "WebSocket clients",
+		style: {
+			maxHeight: "60vh",
+			overflow: "auto"
+		}
+	}, rows.length ? rows.map((row, i) => createElement(Client, {
+		key: i,
+		row,
+		received: received.get(row.client) ?? 0
+	})) : createElement("p", { style: {
+		margin: 0,
+		padding: "8px 12px"
+	} }, "No clients yet.")));
+}
+//#endregion
+export { WebSocketDevtools };
+
+//# sourceMappingURL=devtools.js.map

package/dist/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","names":["h"],"sources":["../src/devtools.ts"],"sourcesContent":["import {\n  createElement as h,\n  useEffect,\n  useReducer,\n  useState,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactElement\n} from 'react';\n// Types only: the built entry imports nothing from the library at runtime.\nimport type { Latency, Status, WebSocketClient } from './core';\n\n/** Props for {@link WebSocketDevtools}. */\nexport interface WebSocketDevtoolsProps {\n  /**\n   * What to show: clients from `createWebSocket`, and the topics, feeds, latency trackers,\n   * outboxes, presence and runs created on them, which are shown with their client. The clients\n   * `useWebSocket(url)` shares are listed by themselves, in development.\n   */\n  sources?: readonly unknown[];\n  /** Start with the panel open. @default false */\n  open?: boolean;\n  /** Which corner of the window it sits in. @default 'bottom-right' */\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n}\n\ntype AnyClient = WebSocketClient<any, any>;\n\ninterface Row {\n  client: AnyClient;\n  topics: string[];\n  feeds: string[];\n  latency?: Latency;\n  waiting?: number;\n  peers?: number;\n  runs?: string;\n}\n\nconst INSPECT = Symbol.for('react-websocket.inspect');\nconst REGISTRY = Symbol.for('react-websocket.registry');\n\nconst isClient = (value: any): value is AnyClient =>\n  typeof value?.acquire === 'function' && typeof value.send === 'function' && 'socket' in value;\n\nconst COLORS: Record<Status, string> = {\n  idle: '#9ca3af',\n  connecting: '#60a5fa',\n  open: '#34d399',\n  reconnecting: '#fbbf24',\n  closed: '#f87171'\n};\n\n/** Every client to show, with what the sources say about it. */\nfunction collect(sources: readonly unknown[]): Row[] {\n  const rows = new Map<AnyClient, Row>();\n  const row = (client: AnyClient) => {\n    if (!rows.has(client)) rows.set(client, { client, topics: [], feeds: [] });\n    return rows.get(client)!;\n  };\n  const shared = (globalThis as Record<symbol, Map<string, AnyClient> | undefined>)[REGISTRY];\n  for (const client of shared?.values() ?? []) row(client);\n  for (const source of sources as any[]) {\n    if (isClient(source)) {\n      row(source);\n      continue;\n    }\n    if (!isClient(source?.client)) continue;\n    const entry = row(source.client);\n    if (typeof source.position === 'function') {\n      for (const topic of source.active())\n        entry.feeds.push(`${topic} @${source.position(topic) ?? '–'}`);\n    } else if (typeof source.active === 'function') entry.topics.push(...source.active());\n    else if (typeof source.add === 'function') entry.waiting = source.getSnapshot().length;\n    else if (typeof source.leave === 'function') entry.peers = source.getSnapshot().length;\n    else if (typeof source.start === 'function' && typeof source.list === 'function') {\n      const runs = source.list() as { status: string }[];\n      entry.runs = `${runs.filter(run => run.status === 'streaming').length} streaming, ${runs.length} in all`;\n    } else if (typeof source.getSnapshot === 'function' && 'rtt' in source.getSnapshot()) {\n      entry.latency = source.getSnapshot();\n    }\n  }\n  return [...rows.values()];\n}\n\nconst panel: CSSProperties = {\n  position: 'fixed',\n  zIndex: 2147483647,\n  font: '12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace',\n  color: '#e5e7eb',\n  background: '#111827',\n  border: '1px solid #374151',\n  borderRadius: 8,\n  boxShadow: '0 8px 24px rgb(0 0 0 / 0.3)'\n};\n\nconst dot = (status: Status): CSSProperties => ({\n  display: 'inline-block',\n  width: 8,\n  height: 8,\n  borderRadius: 4,\n  marginRight: 6,\n  background: COLORS[status]\n});\n\nconst noopSubscribe = () => () => {};\n\nfunction Client({ row, received }: { row: Row; received: number }) {\n  const { client } = row;\n  const { status, attempt } = client.getSnapshot();\n  const inspect = (client as unknown as Record<symbol, (() => { queued: number }) | undefined>)[\n    INSPECT\n  ];\n  const facts: [string, string | number][] = [\n    ['status', attempt ? `${status} (attempt ${attempt})` : status],\n    ['queued', inspect?.().queued ?? '–'],\n    ['buffered', `${client.socket?.bufferedAmount ?? 0} B`],\n    ['received', received]\n  ];\n  if (row.latency) {\n    const { rtt } = row.latency;\n    facts.push(['rtt', rtt === undefined ? '–' : `${Math.round(rtt)} ms`]);\n  }\n  if (row.waiting !== undefined) facts.push(['outbox', `${row.waiting} waiting`]);\n  if (row.peers !== undefined) {\n    facts.push(['presence', `${row.peers} peer${row.peers === 1 ? '' : 's'}`]);\n  }\n  if (row.runs) facts.push(['runs', row.runs]);\n  if (row.topics.length) facts.push(['topics', row.topics.join(', ')]);\n  if (row.feeds.length) facts.push(['feeds', row.feeds.join(', ')]);\n  const url = typeof client.url === 'string' ? client.url : (client.socket?.url ?? 'url()');\n  return h(\n    'section',\n    { style: { padding: '8px 12px', borderTop: '1px solid #374151' } },\n    h(\n      'div',\n      { style: { fontWeight: 600, wordBreak: 'break-all' } },\n      h('span', { style: dot(status) }),\n      url\n    ),\n    h(\n      'dl',\n      {\n        style: {\n          display: 'grid',\n          gridTemplateColumns: 'auto 1fr',\n          gap: '2px 12px',\n          margin: '6px 0 0'\n        }\n      },\n      facts.flatMap(([name, value]) => [\n        h('dt', { key: `${name}-t`, style: { color: '#9ca3af' } }, name),\n        h('dd', { key: `${name}-d`, style: { margin: 0, wordBreak: 'break-all' } }, String(value))\n      ])\n    )\n  );\n}\n\n/**\n * A panel in a corner of the page that shows each WebSocket client: its status and attempts,\n * what's queued and buffered, how many messages it received, and the round-trip time, topics,\n * feeds, outbox, presence and runs of the `sources` that use it. For development: render it only\n * there, for example behind `import.meta.env.DEV`.\n *\n * @example\n * ```tsx\n * import { WebSocketDevtools } from 'react-websocket/devtools';\n *\n * {import.meta.env.DEV && <WebSocketDevtools sources={[live, topics, latency]} />}\n * ```\n */\nexport function WebSocketDevtools({\n  sources = [],\n  open: initiallyOpen = false,\n  position = 'bottom-right'\n}: WebSocketDevtoolsProps): ReactElement | null {\n  const [open, setOpen] = useState(initiallyOpen);\n  const [, tick] = useReducer((n: number) => n + 1, 0);\n  const [received] = useState(() => new WeakMap<AnyClient, number>());\n  // Nothing on the server, so hydration matches.\n  const browser = useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false\n  );\n  const rows = browser ? collect(sources) : [];\n  const clients = rows.map(row => row.client);\n\n  // Refresh twice a second: what it shows changes faster than it's worth re-rendering for.\n  useEffect(() => {\n    const timer = setInterval(tick, 500);\n    return () => clearInterval(timer);\n  }, []);\n  // After every render, count the messages of clients that appeared since, such as a URL that\n  // a component started using.\n  const [listening] = useState(() => new Map<AnyClient, () => void>());\n  useEffect(() => {\n    for (const client of clients) {\n      if (listening.has(client)) continue;\n      listening.set(\n        client,\n        client.on('message', () => received.set(client, (received.get(client) ?? 0) + 1))\n      );\n    }\n  });\n  useEffect(\n    () => () => {\n      for (const off of listening.values()) off();\n      listening.clear();\n    },\n    [listening]\n  );\n\n  if (!browser) return null;\n  const [vertical, horizontal] = position.split('-') as ['top' | 'bottom', 'left' | 'right'];\n  const worst = (['closed', 'reconnecting', 'connecting', 'open', 'idle'] as Status[]).find(\n    status => clients.some(client => client.getSnapshot().status === status)\n  );\n  return h(\n    'div',\n    { style: { ...panel, [vertical]: 12, [horizontal]: 12, maxWidth: 420 } },\n    h(\n      'button',\n      {\n        type: 'button',\n        'aria-expanded': open,\n        onClick: () => setOpen(!open),\n        style: {\n          all: 'unset',\n          cursor: 'pointer',\n          display: 'block',\n          padding: '6px 12px',\n          fontWeight: 600\n        }\n      },\n      h('span', { style: dot(worst ?? 'idle') }),\n      `WebSocket · ${clients.length} client${clients.length === 1 ? '' : 's'}`\n    ),\n    open &&\n      h(\n        'div',\n        {\n          role: 'region',\n          'aria-label': 'WebSocket clients',\n          style: { maxHeight: '60vh', overflow: 'auto' }\n        },\n        rows.length\n          ? rows.map((row, i) =>\n              h(Client, { key: i, row, received: received.get(row.client) ?? 0 })\n            )\n          : h('p', { style: { margin: 0, padding: '8px 12px' } }, 'No clients yet.')\n      )\n  );\n}\n"],"mappings":"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"}