@buoy-gg/network 1.7.2

package/lib/commonjs/network/hooks/useNetworkEvents.js

@@ -0,0 +1,320 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FREE_TIER_REQUEST_LIMIT = void 0;
+exports.useNetworkEvents = useNetworkEvents;
+var _react = require("react");
+var _networkEventStore = require("../utils/networkEventStore");
+var _networkListener = require("../utils/networkListener");
+var _formatGraphQLVariables = require("../utils/formatGraphQLVariables");
+/**
+ * Hook for accessing network events and controls
+ * Uses Reactotron-style listener pattern
+ */
+
+/** Free tier limit for network requests */
+const FREE_TIER_REQUEST_LIMIT = exports.FREE_TIER_REQUEST_LIMIT = 25;
+
+/**
+ * Custom hook for accessing network events and controls
+ * 
+ * This hook provides a complete interface for network monitoring, including
+ * event filtering, statistics calculation, and interception control. It uses
+ * the Reactotron-style listener pattern for network event handling.
+ * 
+ * @returns Object containing filtered events, statistics, controls, and utilities
+ * 
+ * @example
+ * ```typescript
+ * function NetworkMonitor() {
+ *   const {
+ *     events,
+ *     stats,
+ *     filter,
+ *     setFilter,
+ *     clearEvents,
+ *     toggleInterception,
+ *     isEnabled
+ *   } = useNetworkEvents();
+ * 
+ *   return (
+ *     <div>
+ *       <p>Total requests: {stats.totalRequests}</p>
+ *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
+ *       <button onClick={toggleInterception}>
+ *         {isEnabled ? 'Stop' : 'Start'} Monitoring
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @performance Uses memoization for expensive filtering and statistics calculations
+ * @performance Optimizes string operations and array processing for large datasets
+ * @performance Includes Set-based lookups for O(1) filter matching
+ *
+ * @param options.isPro - Whether user has Pro access (unlimited events). Defaults to false (limited to FREE_TIER_REQUEST_LIMIT)
+ */
+function useNetworkEvents(options = {}) {
+  const {
+    isPro = false
+  } = options;
+  const [events, setEvents] = (0, _react.useState)([]);
+  const [filter, setFilter] = (0, _react.useState)({});
+  const [isEnabled, setIsEnabled] = (0, _react.useState)(false);
+
+  // Subscribe to event store changes
+  (0, _react.useEffect)(() => {
+    // Subscribe to store changes
+    const unsubscribeStore = _networkEventStore.networkEventStore.subscribe(setEvents);
+
+    // Add listener to network events
+    const unsubscribeListener = (0, _networkListener.addNetworkListener)(event => {
+      // Only log in development and for non-ignored URLs
+      if (__DEV__ && !event.request.url.includes("symbolicate") && !event.request.url.includes(":8081")) {
+        // Network event processed: [event.type] [method] [url] - available for debugging if needed
+      }
+      _networkEventStore.networkEventStore.processNetworkEvent(event);
+    });
+
+    // Check if already listening
+    setIsEnabled((0, _networkListener.networkListener)().isActive);
+
+    // Start listening if not already
+    if (!(0, _networkListener.networkListener)().isActive) {
+      (0, _networkListener.startNetworkListener)();
+      setIsEnabled(true);
+    }
+
+    // Load initial events
+    setEvents(_networkEventStore.networkEventStore.getEvents());
+    return () => {
+      unsubscribeStore();
+      unsubscribeListener();
+    };
+  }, []);
+
+  // Clear all events
+  const clearEvents = (0, _react.useCallback)(() => {
+    _networkEventStore.networkEventStore.clearEvents();
+  }, []);
+
+  // Toggle interception
+  const toggleInterception = (0, _react.useCallback)(() => {
+    if (isEnabled) {
+      (0, _networkListener.stopNetworkListener)();
+      setIsEnabled(false);
+    } else {
+      (0, _networkListener.startNetworkListener)();
+      setIsEnabled(true);
+    }
+  }, [isEnabled]);
+
+  // Memoize search text processing to avoid repeated toLowerCase calls
+  // Performance: Expensive string operations repeated for every event on every filter
+  const searchLower = (0, _react.useMemo)(() => {
+    return filter.searchText ? filter.searchText.toLowerCase() : null;
+  }, [filter.searchText]);
+
+  // Memoize method filter Set for O(1) lookup instead of Array.includes
+  // Performance: Converting array.includes to Set.has for faster lookups with large method lists
+  const methodSet = (0, _react.useMemo)(() => {
+    return filter.method && filter.method.length > 0 ? new Set(filter.method) : null;
+  }, [filter.method]);
+
+  // Memoize content type Set for O(1) lookup
+  // Performance: Converting array.some to Set.has for faster content type matching
+  const contentTypeSet = (0, _react.useMemo)(() => {
+    return filter.contentType && filter.contentType.length > 0 ? new Set(filter.contentType) : null;
+  }, [filter.contentType]);
+
+  // Filter events with optimized string operations and Set lookups
+  // Performance: Complex multi-stage filtering with string operations and content type matching
+  const filteredEvents = (0, _react.useMemo)(() => {
+    let filtered = [...events];
+    if (methodSet) {
+      filtered = filtered.filter(e => methodSet.has(e.method));
+    }
+    if (filter.status && filter.status !== "all") {
+      switch (filter.status) {
+        case "success":
+          filtered = filtered.filter(e => e.status && e.status >= 200 && e.status < 300);
+          break;
+        case "error":
+          filtered = filtered.filter(e => e.error || e.status && e.status >= 400);
+          break;
+        case "pending":
+          filtered = filtered.filter(e => !e.status && !e.error);
+          break;
+      }
+    }
+    if (searchLower) {
+      filtered = filtered.filter(e => e.url.toLowerCase().includes(searchLower) || e.method.toLowerCase().includes(searchLower) || e.path?.toLowerCase().includes(searchLower) || e.host?.toLowerCase().includes(searchLower) || e.error && e.error.toLowerCase().includes(searchLower) ||
+      // Search by GraphQL operation name (e.g., "GetUser", "CreatePost")
+      e.operationName && e.operationName.toLowerCase().includes(searchLower) ||
+      // Search by GraphQL variable values (e.g., "Sandshrew", "123", "true")
+      // This enables finding specific requests like "GetPokemon › Sandshrew" by typing "Sandshrew"
+      (0, _formatGraphQLVariables.searchGraphQLVariables)(e.graphqlVariables, searchLower));
+    }
+    if (filter.host) {
+      filtered = filtered.filter(e => e.host === filter.host);
+    }
+    if (contentTypeSet) {
+      filtered = filtered.filter(e => {
+        const headers = e.responseHeaders || e.requestHeaders;
+        const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
+        for (const type of contentTypeSet) {
+          switch (type) {
+            case "JSON":
+              if (contentType.includes("json")) return true;
+              break;
+            case "XML":
+              if (contentType.includes("xml")) return true;
+              break;
+            case "HTML":
+              if (contentType.includes("html")) return true;
+              break;
+            case "TEXT":
+              if (contentType.includes("text")) return true;
+              break;
+            case "IMAGE":
+              if (contentType.includes("image")) return true;
+              break;
+            case "VIDEO":
+              if (contentType.includes("video")) return true;
+              break;
+            case "AUDIO":
+              if (contentType.includes("audio")) return true;
+              break;
+            case "FORM":
+              if (contentType.includes("form")) return true;
+              break;
+            case "OTHER":
+              if (!contentType || !contentType.includes("json") && !contentType.includes("xml") && !contentType.includes("html") && !contentType.includes("text") && !contentType.includes("image") && !contentType.includes("video") && !contentType.includes("audio") && !contentType.includes("form")) {
+                return true;
+              }
+              break;
+          }
+        }
+        return false;
+      });
+    }
+    return filtered;
+  }, [events, filter, searchLower, methodSet, contentTypeSet]);
+
+  // For free users, determine which events are "locked" (beyond the limit)
+  // Based on original event order, not filtered results - so locked events stay locked even when searching
+  const lockedEventIds = (0, _react.useMemo)(() => {
+    if (isPro) {
+      return new Set();
+    }
+    // Events beyond the limit in the ORIGINAL events array are locked
+    const lockedIds = new Set();
+    events.slice(FREE_TIER_REQUEST_LIMIT).forEach(event => {
+      lockedIds.add(event.id);
+    });
+    return lockedIds;
+  }, [events, isPro]);
+
+  // Check if there are locked events in the current filtered results
+  const lockedEventsInFilter = (0, _react.useMemo)(() => {
+    return filteredEvents.filter(event => lockedEventIds.has(event.id));
+  }, [filteredEvents, lockedEventIds]);
+  const hasLockedEvents = lockedEventsInFilter.length > 0;
+  const lockedEventCount = lockedEventsInFilter.length;
+
+  // Helper to check if a specific event is locked
+  const isEventLocked = (0, _react.useCallback)(eventId => {
+    return lockedEventIds.has(eventId);
+  }, [lockedEventIds]);
+
+  // Memoize expensive statistics calculation by categorizing events in single pass
+  // Performance: Multiple array.filter operations replaced with single loop for better performance
+  const stats = (0, _react.useMemo)(() => {
+    let successful = 0;
+    let failed = 0;
+    let pending = 0;
+    let totalSent = 0;
+    let totalReceived = 0;
+    let durationSum = 0;
+    let durationCount = 0;
+
+    // Single pass through events for all statistics
+    for (const event of events) {
+      // Categorize status
+      if (event.status && event.status >= 200 && event.status < 300) {
+        successful++;
+      } else if (event.error || event.status && event.status >= 400) {
+        failed++;
+      } else if (!event.status && !event.error) {
+        pending++;
+      }
+
+      // Accumulate data sizes
+      totalSent += event.requestSize || 0;
+      totalReceived += event.responseSize || 0;
+
+      // Accumulate durations
+      if (event.duration) {
+        durationSum += event.duration;
+        durationCount++;
+      }
+    }
+    const avgDuration = durationCount > 0 ? durationSum / durationCount : 0;
+    return {
+      totalRequests: events.length,
+      successfulRequests: successful,
+      failedRequests: failed,
+      pendingRequests: pending,
+      totalDataSent: totalSent,
+      totalDataReceived: totalReceived,
+      averageDuration: Math.round(avgDuration)
+    };
+  }, [events]);
+
+  // Memoize unique hosts extraction with single pass instead of map + filter + Set
+  // Performance: Avoiding array.map().filter() chain, using single loop with Set for deduplication
+  const hosts = (0, _react.useMemo)(() => {
+    const hostSet = new Set();
+    for (const event of events) {
+      if (event.host) {
+        hostSet.add(event.host);
+      }
+    }
+    return Array.from(hostSet);
+  }, [events]);
+
+  // Memoize unique methods extraction with single pass
+  // Performance: Avoiding array.map() + Set constructor, using single loop for better performance
+  const methods = (0, _react.useMemo)(() => {
+    const methodSet = new Set();
+    for (const event of events) {
+      methodSet.add(event.method);
+    }
+    return Array.from(methodSet);
+  }, [events]);
+  return {
+    /** Filtered events (all shown, but some may be locked for free users) */
+    events: filteredEvents,
+    /** All events before filtering (for stats) */
+    allEvents: events,
+    stats,
+    filter,
+    setFilter,
+    clearEvents,
+    isEnabled,
+    toggleInterception,
+    hosts,
+    methods,
+    /** Whether there are locked events due to free tier limit */
+    hasLockedEvents,
+    /** Number of events locked due to free tier limit */
+    lockedEventCount,
+    /** Check if a specific event is locked (by ID) */
+    isEventLocked,
+    /** Free tier request limit */
+    requestLimit: FREE_TIER_REQUEST_LIMIT
+  };
+}

package/lib/commonjs/network/hooks/useTickEveryMinute.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TickProvider = TickProvider;
+exports.useTickEveryMinute = useTickEveryMinute;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TickContext = /*#__PURE__*/(0, _react.createContext)(Date.now());
+function TickProvider({
+  children,
+  intervalMs = 60_000
+}) {
+  const [tick, setTick] = (0, _react.useState)(() => Date.now());
+  (0, _react.useEffect)(() => {
+    const id = setInterval(() => {
+      setTick(Date.now());
+    }, intervalMs);
+    return () => {
+      clearInterval(id);
+    };
+  }, [intervalMs]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TickContext.Provider, {
+    value: tick,
+    children: children
+  });
+}
+function useTickEveryMinute() {
+  const tick = (0, _react.useContext)(TickContext);
+
+  // Expose stable object so consumers can memoize on value changes
+  return (0, _react.useMemo)(() => tick, [tick]);
+}

package/lib/commonjs/network/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NetworkEventDetailView", {
+  enumerable: true,
+  get: function () {
+    return _NetworkEventDetailView.NetworkEventDetailView;
+  }
+});
+Object.defineProperty(exports, "NetworkEventItemCompact", {
+  enumerable: true,
+  get: function () {
+    return _NetworkEventItemCompact.NetworkEventItemCompact;
+  }
+});
+Object.defineProperty(exports, "NetworkModal", {
+  enumerable: true,
+  get: function () {
+    return _NetworkModal.NetworkModal;
+  }
+});
+Object.defineProperty(exports, "addNetworkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.addNetworkListener;
+  }
+});
+Object.defineProperty(exports, "formatBytes", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatBytes;
+  }
+});
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatDuration;
+  }
+});
+Object.defineProperty(exports, "formatHttpStatus", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatHttpStatus;
+  }
+});
+Object.defineProperty(exports, "getNetworkListenerCount", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.getNetworkListenerCount;
+  }
+});
+Object.defineProperty(exports, "isNetworkListening", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.isNetworkListening;
+  }
+});
+Object.defineProperty(exports, "networkEventStore", {
+  enumerable: true,
+  get: function () {
+    return _networkEventStore.networkEventStore;
+  }
+});
+Object.defineProperty(exports, "networkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.networkListener;
+  }
+});
+Object.defineProperty(exports, "removeAllNetworkListeners", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.removeAllNetworkListeners;
+  }
+});
+Object.defineProperty(exports, "startNetworkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.startNetworkListener;
+  }
+});
+Object.defineProperty(exports, "stopNetworkListener", {
+  enumerable: true,
+  get: function () {
+    return _networkListener.stopNetworkListener;
+  }
+});
+Object.defineProperty(exports, "useNetworkEvents", {
+  enumerable: true,
+  get: function () {
+    return _useNetworkEvents.useNetworkEvents;
+  }
+});
+var _NetworkModal = require("./components/NetworkModal");
+var _NetworkEventDetailView = require("./components/NetworkEventDetailView");
+var _NetworkEventItemCompact = require("./components/NetworkEventItemCompact");
+var _useNetworkEvents = require("./hooks/useNetworkEvents");
+var _networkListener = require("./utils/networkListener");
+var _networkEventStore = require("./utils/networkEventStore");
+var _formatting = require("./utils/formatting");

package/lib/commonjs/network/types/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/commonjs/network/utils/extractOperationName.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractOperationName = extractOperationName;
+/**
+ * Extract GraphQL operation name from request data
+ *
+ * This utility extracts the operation name from GraphQL requests to enable
+ * searching and filtering by operation name rather than just URL paths.
+ *
+ * For GraphQL, all requests typically go to the same endpoint (e.g., /graphql),
+ * making URL-based search ineffective. This function extracts the actual
+ * operation name (e.g., "GetUser", "CreatePost") from the request payload.
+ *
+ * Extraction Methods (tried in order):
+ * 1. Direct operationName field in request data
+ * 2. Parse from query string using regex pattern
+ *
+ * @param requestData - The request data object (typically GraphQL query payload)
+ * @returns Operation name string or null if not found
+ *
+ * @example
+ * // Method 1: Explicit operationName field
+ * const data1 = {
+ *   operationName: "GetUser",
+ *   query: "query GetUser { user { id name } }"
+ * };
+ * extractOperationName(data1); // Returns "GetUser"
+ *
+ * @example
+ * // Method 2: Parse from query string
+ * const data2 = {
+ *   query: "mutation CreatePost { createPost(title: \"Hello\") { id } }"
+ * };
+ * extractOperationName(data2); // Returns "CreatePost"
+ *
+ * @example
+ * // No operation name (anonymous query)
+ * const data3 = {
+ *   query: "{ user { id name } }"
+ * };
+ * extractOperationName(data3); // Returns null
+ */
+function extractOperationName(requestData) {
+  // Validate input is an object
+  if (!requestData || typeof requestData !== 'object') {
+    return null;
+  }
+
+  // Method 1: Check for explicit operationName field
+  // This is the standard GraphQL request format
+  if ('operationName' in requestData && requestData.operationName) {
+    const opName = requestData.operationName;
+    // Ensure it's a string and not empty
+    if (typeof opName === 'string' && opName.trim().length > 0) {
+      return opName.trim();
+    }
+  }
+
+  // Method 2: Parse from query string
+  // Handles cases where operationName field is missing or null
+  if ('query' in requestData && typeof requestData.query === 'string') {
+    const query = requestData.query;
+
+    // Match: query OperationName or mutation OperationName or subscription OperationName
+    // Pattern explanation:
+    // - (?:query|mutation|subscription) - Match operation type (non-capturing group)
+    // - \s+ - One or more whitespace characters
+    // - (\w+) - Capture operation name (letters, numbers, underscore)
+    const match = query.match(/(?:query|mutation|subscription)\s+(\w+)/);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+
+  // No operation name found
+  return null;
+}