@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/debug-context-host.ts

@@ -0,0 +1,56 @@
+/**
+ * What a host app calls beside `debugContext`: report an error its error boundary caught, and summarise a
+ * TanStack Query cache. Tiny and free of toolbar code, so the npm package and the script tag can both carry it.
+ * The toolbar itself is loaded from the service, so the two talk through one window event.
+ */
+import type { QuerySummary } from "./debug-context-model.js";
+
+export const DEBUG_ERROR_EVENT = "comment-tool:error";
+
+export type DebugErrorDetail = { error: unknown; componentStack: string | null };
+
+/**
+ * Hands an error an error boundary caught to the toolbar's debug context (the `componentStacks` signal), with
+ * React's component stack. Does nothing when the toolbar is not running or the signal is off.
+ *
+ *   <ErrorBoundary onError={(error, info) => reportToolbarError(error, info.componentStack)}>
+ */
+export function reportToolbarError(error: unknown, componentStack?: string | null): void {
+  if (typeof window === "undefined" || typeof CustomEvent !== "function") return;
+  window.dispatchEvent(
+    new CustomEvent<DebugErrorDetail>(DEBUG_ERROR_EVENT, {
+      detail: { error, componentStack: componentStack ?? null },
+    }),
+  );
+}
+
+/** The part of a TanStack Query `QueryClient` this reads. */
+export type QueryCacheLike = {
+  getQueryCache(): {
+    getAll(): ReadonlyArray<{
+      queryKey: unknown;
+      state: { status?: string; fetchStatus?: string; error?: unknown; dataUpdatedAt?: number };
+      getObserversCount?: () => number;
+    }>;
+  };
+};
+
+/**
+ * `debugContext.queries` for a TanStack Query client: each query's key and state, never its data.
+ *
+ *   debugContext={{ signals: { queries: true }, queries: () => queryCacheSummary(queryClient) }}
+ */
+export function queryCacheSummary(client: QueryCacheLike, max = 50): QuerySummary[] {
+  return client
+    .getQueryCache()
+    .getAll()
+    .slice(-max)
+    .map((query) => ({
+      key: query.queryKey,
+      status: query.state.status,
+      fetchStatus: query.state.fetchStatus,
+      error: query.state.error ?? undefined,
+      updatedAt: query.state.dataUpdatedAt,
+      observers: query.getObserversCount?.(),
+    }));
+}