@buoy-gg/events 2.1.1

package/lib/module/utils/autoDiscoverEventSources.js

@@ -0,0 +1,633 @@
+"use strict";
+
+/**
+ * Auto-Discover Event Sources
+ *
+ * Automatically discovers and loads event stores from installed packages.
+ * Uses try-catch pattern to safely handle missing packages - if a tool
+ * isn't installed, it's silently skipped.
+ *
+ * This enables zero-config setup - just install the dev tool packages you
+ * want and they'll automatically appear in the unified events timeline!
+ */
+
+// ============================================================================
+// Types for discovered event sources
+// ============================================================================
+
+/**
+ * Configuration for a discovered event source
+ */
+
+/**
+ * Result of auto-discovery
+ */
+
+// ============================================================================
+// Event transformers (inline to avoid import dependencies)
+// ============================================================================
+
+let eventIdCounter = 0;
+function generateEventId(source) {
+  return `${source}-${Date.now()}-${++eventIdCounter}`;
+}
+
+// ============================================================================
+// Storage Event Source Discovery
+// ============================================================================
+
+function tryLoadStorageSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      storageEventStore
+    } = require("@buoy-gg/storage");
+    return {
+      id: "storage",
+      name: "Storage",
+      eventSources: ["storage-async", "storage-mmkv"],
+      available: true,
+      setup: async () => {
+        await storageEventStore.startCapturing();
+      },
+      subscribe: onEvent => {
+        return storageEventStore.onEvent(event => {
+          const unifiedEvent = transformStorageEvent(event);
+          onEvent(unifiedEvent);
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformStorageEvent(event) {
+  const e = event;
+  const source = e.storageType === "async" ? "storage-async" : "storage-mmkv";
+
+  // Get action label
+  let title = e.action;
+  if (e.storageType === "async") {
+    const labelMap = {
+      setItem: "Set Item",
+      removeItem: "Remove Item",
+      mergeItem: "Merge Item",
+      clear: "Clear All",
+      multiSet: "Multi Set",
+      multiRemove: "Multi Remove",
+      multiMerge: "Multi Merge"
+    };
+    title = labelMap[e.action] || e.action;
+  }
+
+  // Get subtitle
+  let subtitle = "";
+  if (e.storageType === "async") {
+    switch (e.action) {
+      case "setItem":
+      case "removeItem":
+      case "mergeItem":
+        subtitle = e.data?.key || "unknown key";
+        break;
+      case "multiSet":
+      case "multiMerge":
+        {
+          const pairCount = e.data?.pairs?.length || 0;
+          subtitle = `${pairCount} key${pairCount !== 1 ? "s" : ""}`;
+          break;
+        }
+      case "multiRemove":
+        {
+          const keyCount = e.data?.keys?.length || 0;
+          subtitle = `${keyCount} key${keyCount !== 1 ? "s" : ""}`;
+          break;
+        }
+      case "clear":
+        subtitle = "all keys";
+        break;
+    }
+  } else {
+    subtitle = e.data?.key || e.data?.instanceId || "unknown";
+  }
+
+  // Get status
+  let status = "neutral";
+  if (e.action.includes("set") || e.action.includes("Set") || e.action.includes("merge") || e.action.includes("Merge")) {
+    status = "success";
+  }
+  return {
+    id: generateEventId(source),
+    source,
+    timestamp: e.timestamp.getTime(),
+    title,
+    subtitle,
+    status,
+    originalEvent: event
+  };
+}
+
+// ============================================================================
+// Redux Event Source Discovery
+// ============================================================================
+
+function tryLoadReduxSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      reduxActionStore
+    } = require("@buoy-gg/redux");
+    let lastActionId = null;
+    return {
+      id: "redux",
+      name: "Redux",
+      eventSources: ["redux"],
+      available: true,
+      subscribe: onEvent => {
+        return reduxActionStore.subscribe(actions => {
+          if (actions.length > 0) {
+            const latestAction = actions[0];
+            if (latestAction.id !== lastActionId) {
+              lastActionId = latestAction.id;
+              const unifiedEvent = transformReduxAction(latestAction);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformReduxAction(action) {
+  const a = action;
+
+  // Get status
+  let status = "neutral";
+  switch (a.category) {
+    case "fulfilled":
+      status = "success";
+      break;
+    case "rejected":
+      status = "error";
+      break;
+    case "pending":
+      status = "pending";
+      break;
+    default:
+      status = a.hasStateChange ? "success" : "neutral";
+  }
+
+  // Get subtitle
+  let subtitle = "";
+  if (a.payloadPreview) {
+    subtitle = a.payloadPreview;
+  } else if (a.hasStateChange && a.diffSummary) {
+    subtitle = a.diffSummary;
+  } else if (a.duration !== undefined) {
+    subtitle = `${a.duration.toFixed(1)}ms`;
+  } else {
+    subtitle = a.sliceName || "";
+  }
+  return {
+    id: generateEventId("redux"),
+    source: "redux",
+    timestamp: a.timestamp,
+    title: a.type,
+    subtitle,
+    status,
+    originalEvent: action
+  };
+}
+
+// ============================================================================
+// Network Event Source Discovery
+// ============================================================================
+
+function tryLoadNetworkSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      networkEventStore,
+      startNetworkListener,
+      addNetworkListener
+    } = require("@buoy-gg/network");
+
+    // Map network event IDs to unified event IDs for updates
+    const networkEventIdMap = new Map();
+    let storeUnsubscribe = null;
+    let listenerUnsubscribe = null;
+    return {
+      id: "network",
+      name: "Network",
+      eventSources: ["network"],
+      available: true,
+      setup: () => {
+        startNetworkListener();
+      },
+      subscribe: onEvent => {
+        // Add listener to process network events into the store
+        listenerUnsubscribe = addNetworkListener(event => {
+          networkEventStore.processNetworkEvent(event);
+        });
+
+        // Subscribe to network event store
+        storeUnsubscribe = networkEventStore.subscribe(events => {
+          for (const networkEvent of events) {
+            const ne = networkEvent;
+            const existingUnifiedId = networkEventIdMap.get(ne.id);
+            if (!existingUnifiedId) {
+              // New event
+              const unifiedEvent = transformNetworkEvent(networkEvent);
+              networkEventIdMap.set(ne.id, unifiedEvent.id);
+              onEvent(unifiedEvent);
+            } else {
+              // Existing event updated (e.g., pending -> success/error)
+              // Create updated unified event with same ID so store can update it
+              const unifiedEvent = transformNetworkEvent(networkEvent);
+              unifiedEvent.id = existingUnifiedId; // Keep the same unified ID
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+        return () => {
+          listenerUnsubscribe?.();
+          storeUnsubscribe?.();
+          listenerUnsubscribe = null;
+          storeUnsubscribe = null;
+        };
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformNetworkEvent(event) {
+  const e = event;
+
+  // Get status
+  let status = "neutral";
+  if (e.status === undefined) {
+    status = "pending";
+  } else if (e.error || e.status >= 400) {
+    status = "error";
+  } else if (e.status >= 200 && e.status < 400) {
+    status = "success";
+  }
+
+  // Get title
+  const title = e.operationName || `${e.method} ${e.path || e.url}`;
+
+  // Get subtitle
+  const parts = [];
+  if (e.status !== undefined) {
+    parts.push(`${e.status}`);
+  } else if (e.error) {
+    parts.push("Error");
+  } else {
+    parts.push("Pending");
+  }
+  if (e.duration !== undefined) {
+    parts.push(`${e.duration.toFixed(0)}ms`);
+  }
+  if (e.host) {
+    parts.push(e.host);
+  }
+  return {
+    id: generateEventId("network"),
+    source: "network",
+    timestamp: e.timestamp,
+    title,
+    subtitle: parts.join(" · "),
+    status,
+    originalEvent: event
+  };
+}
+
+// ============================================================================
+// React Query Event Source Discovery
+// ============================================================================
+
+function tryLoadReactQuerySource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      reactQueryEventStore
+    } = require("@buoy-gg/react-query");
+    let lastEventId = null;
+    return {
+      id: "react-query",
+      name: "React Query",
+      eventSources: ["react-query", "react-query-query", "react-query-mutation"],
+      available: true,
+      subscribe: onEvent => {
+        return reactQueryEventStore.subscribe(events => {
+          if (events.length > 0) {
+            const latestEvent = events[0];
+            if (latestEvent.id !== lastEventId) {
+              lastEventId = latestEvent.id;
+              const unifiedEvent = transformReactQueryEvent(latestEvent);
+              onEvent(unifiedEvent);
+            }
+          }
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function formatQueryKey(queryKey) {
+  if (!queryKey || queryKey.length === 0) return "unknown";
+  return queryKey.map(part => {
+    if (typeof part === "string") return part;
+    if (typeof part === "number") return String(part);
+    if (typeof part === "object" && part !== null) {
+      const obj = part;
+      const firstValue = Object.values(obj)[0];
+      if (typeof firstValue === "string" || typeof firstValue === "number") {
+        return String(firstValue);
+      }
+      return JSON.stringify(part).slice(0, 20);
+    }
+    return String(part);
+  }).join(" › ");
+}
+function transformReactQueryEvent(event) {
+  const e = event;
+  const isMutation = e.type.startsWith("mutation-");
+  const source = isMutation ? "react-query-mutation" : "react-query-query";
+
+  // Get status
+  let status = "neutral";
+  switch (e.type) {
+    case "query-fetch-start":
+    case "mutation-start":
+      status = "pending";
+      break;
+    case "query-fetch-success":
+    case "mutation-success":
+      status = "success";
+      break;
+    case "query-fetch-error":
+    case "mutation-error":
+      status = "error";
+      break;
+  }
+
+  // Get title
+  let title = "";
+  if (e.queryKey) {
+    title = formatQueryKey(e.queryKey);
+  } else if (e.mutationKey) {
+    title = formatQueryKey(e.mutationKey);
+  } else if (e.mutationId !== undefined) {
+    title = `Mutation #${e.mutationId}`;
+  } else {
+    title = e.type.replace(/-/g, " ");
+  }
+
+  // Get subtitle
+  const parts = [];
+  switch (e.type) {
+    case "query-fetch-start":
+      parts.push("Fetching");
+      break;
+    case "query-fetch-success":
+      parts.push("Success");
+      break;
+    case "query-fetch-error":
+      parts.push("Error");
+      break;
+    case "query-invalidated":
+      parts.push("Invalidated");
+      break;
+    case "mutation-start":
+      parts.push("Mutating");
+      break;
+    case "mutation-success":
+      parts.push("Success");
+      break;
+    case "mutation-error":
+      parts.push("Error");
+      break;
+  }
+  if (e.duration !== undefined) {
+    parts.push(`${e.duration.toFixed(0)}ms`);
+  }
+
+  // Get correlation info
+  let correlationId;
+  if (e.queryHash) {
+    correlationId = `rq-query-${e.queryHash}`;
+  } else if (e.mutationId !== undefined) {
+    correlationId = `rq-mutation-${e.mutationId}`;
+  }
+  let sequenceInGroup = 1;
+  switch (e.type) {
+    case "query-fetch-start":
+    case "mutation-start":
+      sequenceInGroup = 1;
+      break;
+    case "query-fetch-success":
+    case "query-fetch-error":
+    case "mutation-success":
+    case "mutation-error":
+      sequenceInGroup = 2;
+      break;
+    case "query-invalidated":
+      sequenceInGroup = 3;
+      break;
+  }
+  return {
+    id: generateEventId(source),
+    source,
+    timestamp: e.timestamp,
+    title,
+    subtitle: parts.join(" · "),
+    status,
+    originalEvent: event,
+    correlationId,
+    sequenceInGroup
+  };
+}
+
+// ============================================================================
+// Route Events Source Discovery
+// ============================================================================
+
+function tryLoadRouteEventsSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      routeObserver
+    } = require("@buoy-gg/route-events");
+    return {
+      id: "route-events",
+      name: "Routes",
+      eventSources: ["route"],
+      available: true,
+      subscribe: onEvent => {
+        return routeObserver.addListener(event => {
+          const unifiedEvent = transformRouteEvent(event);
+          onEvent(unifiedEvent);
+        });
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformRouteEvent(event) {
+  const e = event;
+
+  // Get status
+  let status = "neutral";
+  if (e.pathname === "/") {
+    status = "success";
+  } else if (Object.keys(e.params).length > 0) {
+    status = "success";
+  }
+
+  // Get subtitle
+  const parts = [];
+  const paramCount = Object.keys(e.params).length;
+  if (paramCount > 0) {
+    parts.push(`${paramCount} param${paramCount !== 1 ? "s" : ""}`);
+  }
+  if (e.timeSincePrevious !== undefined && e.timeSincePrevious > 0) {
+    if (e.timeSincePrevious < 1000) {
+      parts.push(`${e.timeSincePrevious}ms`);
+    } else {
+      parts.push(`${(e.timeSincePrevious / 1000).toFixed(1)}s`);
+    }
+  }
+  if (e.previousPathname && e.previousPathname !== e.pathname) {
+    parts.push(`from ${e.previousPathname}`);
+  }
+  return {
+    id: generateEventId("route"),
+    source: "route",
+    timestamp: e.timestamp,
+    title: e.pathname || "/",
+    subtitle: parts.join(" · ") || "navigation",
+    status,
+    originalEvent: event
+  };
+}
+
+// ============================================================================
+// Main Auto-Discovery Function
+// ============================================================================
+
+/**
+ * Automatically discovers which event source packages are installed.
+ *
+ * This function attempts to load event stores from known dev tool packages.
+ * If a package is installed, its event source will be available.
+ * If a package is not installed, it will be silently skipped.
+ *
+ * @returns Discovery result with all available sources
+ *
+ * @example
+ * ```tsx
+ * const { sources, availableEventSources } = autoDiscoverEventSources();
+ *
+ * // sources contains all available event source configs
+ * // availableEventSources contains the Set of EventSource types available
+ * ```
+ */
+export function autoDiscoverEventSources() {
+  const sources = [];
+  const availableEventSources = new Set();
+
+  // Try to load each source
+  const loaders = [tryLoadStorageSource, tryLoadReduxSource, tryLoadNetworkSource, tryLoadReactQuerySource, tryLoadRouteEventsSource];
+  for (const loader of loaders) {
+    const source = loader();
+    if (source && source.available) {
+      sources.push(source);
+      source.eventSources.forEach(es => availableEventSources.add(es));
+    }
+  }
+  return {
+    sources,
+    availableEventSources
+  };
+}
+
+/**
+ * Get display configuration for an event source.
+ * Returns config even for unavailable sources (for consistent UI).
+ */
+export function getSourceDisplayConfig(source) {
+  const configs = {
+    "storage-async": {
+      label: "Storage",
+      color: "#8B5CF6",
+      icon: "server-outline"
+    },
+    "storage-mmkv": {
+      label: "MMKV",
+      color: "#F59E0B",
+      icon: "flash-outline"
+    },
+    redux: {
+      label: "Redux",
+      color: "#3B82F6",
+      icon: "git-branch-outline"
+    },
+    network: {
+      label: "Network",
+      color: "#10B981",
+      icon: "globe-outline"
+    },
+    "react-query": {
+      label: "Query",
+      color: "#EC4899",
+      icon: "sync-outline"
+    },
+    "react-query-query": {
+      label: "Query",
+      color: "#EC4899",
+      icon: "sync-outline"
+    },
+    "react-query-mutation": {
+      label: "Mutation",
+      color: "#F97316",
+      icon: "flash-outline"
+    },
+    route: {
+      label: "Route",
+      color: "#06B6D4",
+      icon: "navigate-outline"
+    }
+  };
+  return configs[source] || {
+    label: source,
+    color: "#6B7280",
+    icon: "help-outline"
+  };
+}
+
+// Cache for discovered sources (singleton)
+let cachedDiscovery = null;
+
+/**
+ * Get cached discovery result, or run discovery if not cached.
+ * Use this for performance - avoids repeated require() calls.
+ */
+export function getCachedDiscovery() {
+  if (!cachedDiscovery) {
+    cachedDiscovery = autoDiscoverEventSources();
+  }
+  return cachedDiscovery;
+}
+
+/**
+ * Clear the discovery cache (useful for testing or hot reload).
+ */
+export function clearDiscoveryCache() {
+  cachedDiscovery = null;
+}
+//# sourceMappingURL=autoDiscoverEventSources.js.map

package/lib/module/utils/badgeSelectionStorage.js

@@ -0,0 +1,52 @@
+"use strict";
+
+/**
+ * Badge Selection Storage
+ *
+ * Utilities for persisting and restoring the enabled event source badges.
+ * Uses the same storage patterns as other packages (React Query, Network, etc.)
+ */
+
+import { persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+/**
+ * Save the enabled sources to persistent storage
+ */
+export async function saveEnabledSources(sources) {
+  try {
+    const key = devToolsStorageKeys.events.enabledSources();
+    await persistentStorage.setItem(key, JSON.stringify(sources));
+  } catch {
+    // Silently fail - persistence is optional
+  }
+}
+
+/**
+ * Load the enabled sources from persistent storage
+ * Returns null if no saved state exists
+ */
+export async function loadEnabledSources() {
+  try {
+    const key = devToolsStorageKeys.events.enabledSources();
+    const value = await persistentStorage.getItem(key);
+    if (value && value !== "") {
+      return JSON.parse(value);
+    }
+    return null;
+  } catch {
+    // Silently fail - return null to use defaults
+    return null;
+  }
+}
+
+/**
+ * Clear the saved enabled sources
+ */
+export async function clearEnabledSources() {
+  try {
+    const key = devToolsStorageKeys.events.enabledSources();
+    await persistentStorage.removeItem(key);
+  } catch {
+    // Silently fail
+  }
+}
+//# sourceMappingURL=badgeSelectionStorage.js.map