@buoy-gg/events 2.1.2 → 2.1.3

package/lib/module/stores/unifiedEventStore.js

@@ -9,7 +9,7 @@
  * Uses auto-discovery to find installed tool packages - no hard dependencies required!
  */
 
-import { getCachedDiscovery } from "../utils/autoDiscoverEventSources";
+import { getCachedDiscovery, getAggregatedSubscriberCounts } from "../utils/autoDiscoverEventSources";
 const MAX_EVENTS = 200;
 class UnifiedEventStore {
   events = [];
@@ -55,18 +55,21 @@ class UnifiedEventStore {
     if (this.sourceUnsubscribers.has(source.id)) {
       return; // Already subscribed
     }
+    try {
+      // Run setup if needed
+      if (source.setup) {
+        await source.setup();
+      }
 
-    // Run setup if needed
-    if (source.setup) {
-      await source.setup();
-    }
-
-    // Subscribe and track the unsubscriber
-    const unsubscribe = await source.subscribe(event => {
-      this.addEvent(event);
-    });
-    if (unsubscribe) {
-      this.sourceUnsubscribers.set(source.id, unsubscribe);
+      // Subscribe and track the unsubscriber
+      const unsubscribe = await source.subscribe(event => {
+        this.addEvent(event);
+      });
+      if (unsubscribe) {
+        this.sourceUnsubscribers.set(source.id, unsubscribe);
+      }
+    } catch {
+      // Silently fail - source may not be available
     }
   }
 
@@ -143,7 +146,8 @@ class UnifiedEventStore {
   unsubscribeFromNetwork() {
     this.unsubscribeFromSource("network");
     this.activeSources.delete("network");
-    this.networkEventIdMap.clear();
+    // Don't clear networkEventIdMap - it's needed to deduplicate events
+    // when resubscribing while requests are still in flight
   }
 
   /**
@@ -190,6 +194,27 @@ class UnifiedEventStore {
     this.activeSources.delete("route");
   }
 
+  /**
+   * Subscribe to render events (if @buoy-gg/highlight-updates is installed)
+   */
+  subscribeToRender() {
+    const {
+      sources
+    } = getCachedDiscovery();
+    const renderSource = sources.find(s => s.id === "render");
+    if (renderSource) {
+      this.subscribeToSource(renderSource);
+    }
+  }
+
+  /**
+   * Unsubscribe from render events
+   */
+  unsubscribeFromRender() {
+    this.unsubscribeFromSource("render");
+    this.activeSources.delete("render");
+  }
+
   /**
    * Add an event to the store
    */
@@ -253,7 +278,8 @@ class UnifiedEventStore {
       "react-query": 0,
       "react-query-query": 0,
       "react-query-mutation": 0,
-      route: 0
+      route: 0,
+      render: 0
     };
     for (const event of this.events) {
       counts[event.source]++;
@@ -306,7 +332,7 @@ class UnifiedEventStore {
    */
   unsubscribeAll() {
     // Unsubscribe from all tracked sources
-    for (const [sourceId, unsubscribe] of this.sourceUnsubscribers) {
+    for (const [, unsubscribe] of this.sourceUnsubscribers) {
       unsubscribe();
     }
     this.sourceUnsubscribers.clear();
@@ -334,6 +360,8 @@ class UnifiedEventStore {
         return this.sourceUnsubscribers.has("react-query");
       case "route":
         return this.sourceUnsubscribers.has("route-events");
+      case "render":
+        return this.sourceUnsubscribers.has("render");
       default:
         return false;
     }
@@ -351,9 +379,18 @@ class UnifiedEventStore {
       "react-query": this.sourceUnsubscribers.has("react-query"),
       "react-query-query": this.sourceUnsubscribers.has("react-query"),
       "react-query-mutation": this.sourceUnsubscribers.has("react-query"),
-      route: this.sourceUnsubscribers.has("route-events")
+      route: this.sourceUnsubscribers.has("route-events"),
+      render: this.sourceUnsubscribers.has("render")
     };
   }
+
+  /**
+   * Get subscriber counts from all underlying event stores.
+   * Useful for debugging the event system.
+   */
+  getSubscriberCounts() {
+    return getAggregatedSubscriberCounts();
+  }
 }
 
 // Singleton instance
@@ -370,6 +407,8 @@ export const subscribeToReactQuery = () => unifiedEventStore.subscribeToReactQue
 export const unsubscribeFromReactQuery = () => unifiedEventStore.unsubscribeFromReactQuery();
 export const subscribeToRoutes = () => unifiedEventStore.subscribeToRoutes();
 export const unsubscribeFromRoutes = () => unifiedEventStore.unsubscribeFromRoutes();
+export const subscribeToRender = () => unifiedEventStore.subscribeToRender();
+export const unsubscribeFromRender = () => unifiedEventStore.unsubscribeFromRender();
 export const getEvents = enabledSources => unifiedEventStore.getEvents(enabledSources);
 export const getActiveSources = () => unifiedEventStore.getActiveSources();
 export const getSourceCounts = () => unifiedEventStore.getSourceCounts();
@@ -384,4 +423,7 @@ export const unsubscribeAll = () => unifiedEventStore.unsubscribeAll();
 export const getDiscoveredSources = () => unifiedEventStore.getDiscoveredSources();
 export const getAvailableEventSources = () => unifiedEventStore.getAvailableEventSources();
 export const subscribeToAll = () => unifiedEventStore.subscribeToAll();
+export const getSubscriberCounts = () => unifiedEventStore.getSubscriberCounts();
+
+// Re-export type for convenience
 //# sourceMappingURL=unifiedEventStore.js.map

package/lib/module/types/copySettings.js

@@ -160,6 +160,30 @@ export const COPY_PRESETS = {
     reduxChangedOnly: true,
     showStorageDiff: false,
     stripVerboseFields: true
+  },
+  /**
+   * Mermaid Diagram - Visual sequence diagram for flow visualization
+   */
+  mermaid: {
+    timestampFormat: "relative",
+    includeSource: true,
+    includeStatus: true,
+    includeTitle: true,
+    includeSubtitle: false,
+    includeCorrelation: true,
+    includeDuration: true,
+    includeSummaryHeader: false,
+    includeTotalDuration: false,
+    includeEventData: false,
+    dataSizeThreshold: 1,
+    format: "mermaid",
+    filterMode: "all",
+    filterSources: [],
+    compactMode: false,
+    smartJsonParsing: true,
+    reduxChangedOnly: true,
+    showStorageDiff: true,
+    stripVerboseFields: true
   }
 };
 /**
@@ -210,6 +234,11 @@ export const PRESET_METADATA = {
     label: "Minimal",
     description: "Quick reference",
     color: "#6B7280" // Gray
+  },
+  mermaid: {
+    label: "Diagram",
+    description: "Visual flow",
+    color: "#A855F7" // Purple
   }
 };
 //# sourceMappingURL=copySettings.js.map

package/lib/module/utils/autoDiscoverEventSources.js

@@ -47,9 +47,7 @@ function tryLoadStorageSource() {
       name: "Storage",
       eventSources: ["storage-async", "storage-mmkv"],
       available: true,
-      setup: async () => {
-        await storageEventStore.startCapturing();
-      },
+      // No setup needed - onEvent() auto-starts capturing via Subscribable pattern
       subscribe: onEvent => {
         return storageEventStore.onEvent(event => {
           const unifiedEvent = transformStorageEvent(event);
@@ -207,55 +205,55 @@ function transformReduxAction(action) {
 function tryLoadNetworkSource() {
   try {
     // @ts-ignore - Dynamic import that may not exist
+    // Note: We use networkListener (the getter) instead of startNetworkListener
+    // because startNetworkListener is not exported from the main package
     const {
       networkEventStore,
-      startNetworkListener,
+      networkListener,
       addNetworkListener
     } = require("@buoy-gg/network");
 
-    // Map network event IDs to unified event IDs for updates
+    // Map network event IDs to unified event IDs for updates (request -> response)
     const networkEventIdMap = new Map();
-    let storeUnsubscribe = null;
-    let listenerUnsubscribe = null;
     return {
       id: "network",
       name: "Network",
       eventSources: ["network"],
       available: true,
       setup: () => {
-        startNetworkListener();
+        // Get the network listener singleton and start it if not already active
+        const listener = networkListener();
+        if (!listener.isActive) {
+          listener.startListening();
+        }
+
+        // Ensure events flow into the store. The network panel does this via
+        // addNetworkListener, but if events package loads first, we need to
+        // set it up ourselves.
+        if (listener.listenerCount === 0) {
+          addNetworkListener(event => {
+            networkEventStore.processNetworkEvent(event);
+          });
+        }
       },
       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);
-            }
+        // Use onEvent() pattern - same as storage
+        // This fires for each individual event (request or response/error update)
+        return networkEventStore.onEvent(event => {
+          const ne = event;
+          const existingUnifiedId = networkEventIdMap.get(ne.id);
+          if (!existingUnifiedId) {
+            // New event (request started)
+            const unifiedEvent = transformNetworkEvent(event);
+            networkEventIdMap.set(ne.id, unifiedEvent.id);
+            onEvent(unifiedEvent);
+          } else {
+            // Existing event updated (response received or error)
+            const unifiedEvent = transformNetworkEvent(event);
+            unifiedEvent.id = existingUnifiedId; // Keep the same unified ID
+            onEvent(unifiedEvent);
           }
         });
-        return () => {
-          listenerUnsubscribe?.();
-          storeUnsubscribe?.();
-          listenerUnsubscribe = null;
-          storeUnsubscribe = null;
-        };
       }
     };
   } catch {
@@ -460,15 +458,16 @@ function tryLoadRouteEventsSource() {
   try {
     // @ts-ignore - Dynamic import that may not exist
     const {
-      routeObserver
+      routeEventStore
     } = require("@buoy-gg/route-events");
     return {
       id: "route-events",
       name: "Routes",
       eventSources: ["route"],
       available: true,
+      // No setup needed - onEvent() auto-starts listening via Subscribable pattern
       subscribe: onEvent => {
-        return routeObserver.addListener(event => {
+        return routeEventStore.onEvent(event => {
           const unifiedEvent = transformRouteEvent(event);
           onEvent(unifiedEvent);
         });
@@ -516,6 +515,134 @@ function transformRouteEvent(event) {
   };
 }
 
+// ============================================================================
+// Render Events Source Discovery (Highlight Updates)
+// ============================================================================
+
+function tryLoadHighlightUpdatesSource() {
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const highlightUpdates = require("@buoy-gg/highlight-updates");
+
+    // Verify the required exports exist
+    if (!highlightUpdates.RenderTracker || !highlightUpdates.HighlightUpdatesController) {
+      return null;
+    }
+    return {
+      id: "render",
+      name: "Render",
+      eventSources: ["render"],
+      available: true,
+      setup: () => {
+        // @ts-ignore
+        const {
+          HighlightUpdatesController
+        } = require("@buoy-gg/highlight-updates");
+        // Enable background tracking (NOT the visual toggle) - this sets up render
+        // interception without affecting the user's visual highlight toggle state
+        if (HighlightUpdatesController) {
+          HighlightUpdatesController.enableBackgroundTracking();
+        }
+      },
+      subscribe: onEvent => {
+        // @ts-ignore
+        const {
+          RenderTracker,
+          HighlightUpdatesController
+        } = require("@buoy-gg/highlight-updates");
+
+        // Ensure background tracking is enabled (separate from visual toggle)
+        if (HighlightUpdatesController && !HighlightUpdatesController.isBackgroundTrackingEnabled()) {
+          HighlightUpdatesController.enableBackgroundTracking();
+        }
+        const unsubscribeCallback = RenderTracker.onRenderEvent((event, render) => {
+          const unifiedEvent = transformRenderEvent(event, render);
+          onEvent(unifiedEvent);
+        });
+
+        // Return a wrapped unsubscribe that also disables background tracking
+        return () => {
+          unsubscribeCallback();
+          HighlightUpdatesController.disableBackgroundTracking();
+        };
+      }
+    };
+  } catch {
+    return null;
+  }
+}
+function transformRenderEvent(event, render) {
+  const e = event;
+  const r = render;
+
+  // Use component name if available, otherwise display name (View, Text, etc.)
+  const title = r.componentName || r.displayName || r.viewType;
+
+  // Build subtitle from cause info
+  const subtitleParts = [];
+
+  // Add cause type
+  const causeLabels = {
+    mount: "mounted",
+    props: "props changed",
+    state: "state changed",
+    hooks: "hooks changed",
+    context: "context changed",
+    parent: "parent re-rendered",
+    unknown: "re-rendered"
+  };
+  subtitleParts.push(causeLabels[e.cause.type] || e.cause.type);
+
+  // Add changed keys if props changed
+  if (e.cause.type === "props" && e.cause.changedKeys?.length) {
+    const keys = e.cause.changedKeys.slice(0, 3).join(", ");
+    const more = e.cause.changedKeys.length > 3 ? ` +${e.cause.changedKeys.length - 3}` : "";
+    subtitleParts.push(`[${keys}${more}]`);
+  }
+
+  // Add hook change description if available
+  if (e.cause.hookChanges?.length) {
+    const firstChange = e.cause.hookChanges[0];
+    if (firstChange.description) {
+      subtitleParts.push(firstChange.description);
+    }
+  }
+
+  // Add render number
+  subtitleParts.push(`#${e.renderNumber}`);
+
+  // Determine status based on cause type
+  let status = "neutral";
+  switch (e.cause.type) {
+    case "mount":
+      status = "neutral"; // First render is expected
+      break;
+    case "props":
+    case "state":
+    case "hooks":
+    case "context":
+      status = "success"; // Intentional re-renders
+      break;
+    case "parent":
+      status = "pending"; // Potentially wasteful (yellow highlight)
+      break;
+    default:
+      status = "neutral";
+  }
+  return {
+    id: generateEventId("render"),
+    source: "render",
+    timestamp: e.timestamp,
+    title,
+    subtitle: subtitleParts.join(" · "),
+    status,
+    originalEvent: {
+      event: e,
+      render: r
+    }
+  };
+}
+
 // ============================================================================
 // Main Auto-Discovery Function
 // ============================================================================
@@ -542,7 +669,7 @@ export function autoDiscoverEventSources() {
   const availableEventSources = new Set();
 
   // Try to load each source
-  const loaders = [tryLoadStorageSource, tryLoadReduxSource, tryLoadNetworkSource, tryLoadReactQuerySource, tryLoadRouteEventsSource];
+  const loaders = [tryLoadStorageSource, tryLoadReduxSource, tryLoadNetworkSource, tryLoadReactQuerySource, tryLoadRouteEventsSource, tryLoadHighlightUpdatesSource];
   for (const loader of loaders) {
     const source = loader();
     if (source && source.available) {
@@ -601,6 +728,11 @@ export function getSourceDisplayConfig(source) {
       label: "Route",
       color: "#06B6D4",
       icon: "navigate-outline"
+    },
+    render: {
+      label: "Render",
+      color: "#F472B6",
+      icon: "layers-outline"
     }
   };
   return configs[source] || {
@@ -630,4 +762,93 @@ export function getCachedDiscovery() {
 export function clearDiscoveryCache() {
   cachedDiscovery = null;
 }
+
+// ============================================================================
+// Subscriber Count Aggregation
+// ============================================================================
+
+/**
+ * Get subscriber counts from all discovered event stores.
+ * Useful for debugging and monitoring the event system.
+ */
+export function getAggregatedSubscriberCounts() {
+  const sources = [];
+  let totalSubscribers = 0;
+
+  // Try to get counts from storage store
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      storageEventStore
+    } = require("@buoy-gg/storage");
+    const counts = storageEventStore.getSubscriberCounts();
+    sources.push({
+      sourceId: "storage",
+      counts
+    });
+    totalSubscribers += counts.total;
+  } catch {
+    // Package not installed
+  }
+
+  // Try to get counts from network store
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      networkEventStore
+    } = require("@buoy-gg/network");
+    const counts = networkEventStore.getSubscriberCounts();
+    sources.push({
+      sourceId: "network",
+      counts
+    });
+    totalSubscribers += counts.total;
+  } catch {
+    // Package not installed
+  }
+
+  // Try to get counts from route events store
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      routeEventStore
+    } = require("@buoy-gg/route-events");
+    const counts = routeEventStore.getSubscriberCounts();
+    sources.push({
+      sourceId: "route-events",
+      counts
+    });
+    totalSubscribers += counts.total;
+  } catch {
+    // Package not installed
+  }
+
+  // Try to get counts from render tracker (highlight-updates)
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const {
+      RenderTracker,
+      HighlightUpdatesController
+    } = require("@buoy-gg/highlight-updates");
+    const callbackCount = RenderTracker.getRenderEventCallbackCount();
+    // Also count the visual highlight tool as a subscriber when enabled
+    const visualToolEnabled = HighlightUpdatesController?.isEnabled?.() ? 1 : 0;
+    const counts = {
+      eventCallbacks: callbackCount,
+      arrayListeners: visualToolEnabled,
+      total: callbackCount + visualToolEnabled
+    };
+    sources.push({
+      sourceId: "render",
+      counts
+    });
+    totalSubscribers += counts.total;
+  } catch {
+    // Package not installed
+  }
+  return {
+    sources,
+    totalSubscribers
+  };
+}
 //# sourceMappingURL=autoDiscoverEventSources.js.map

package/lib/module/utils/badgeSelectionStorage.js

@@ -49,4 +49,34 @@ export async function clearEnabledSources() {
     // Silently fail
   }
 }
+
+/**
+ * Save the capturing state to persistent storage
+ */
+export async function saveCapturingState(isCapturing) {
+  try {
+    const key = devToolsStorageKeys.events.isCapturing();
+    await persistentStorage.setItem(key, JSON.stringify(isCapturing));
+  } catch {
+    // Silently fail - persistence is optional
+  }
+}
+
+/**
+ * Load the capturing state from persistent storage
+ * Returns null if no saved state exists (defaults to true on first load)
+ */
+export async function loadCapturingState() {
+  try {
+    const key = devToolsStorageKeys.events.isCapturing();
+    const value = await persistentStorage.getItem(key);
+    if (value !== null && value !== "") {
+      return JSON.parse(value);
+    }
+    return null;
+  } catch {
+    // Silently fail - return null to use defaults
+    return null;
+  }
+}
 //# sourceMappingURL=badgeSelectionStorage.js.map