@buoy-gg/network 1.7.2

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

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatGraphQLDisplay = formatGraphQLDisplay;
+exports.formatGraphQLVariables = formatGraphQLVariables;
+exports.searchGraphQLVariables = searchGraphQLVariables;
+/**
+ * Format GraphQL variables for display using arrow notation
+ *
+ * Mimics React Query key display format to provide visual consistency:
+ * - React Query: ["pokemon", "Sandshrew"] → "pokemon › Sandshrew"
+ * - GraphQL: GetPokemon(id: "Sandshrew") → "GetPokemon › Sandshrew"
+ *
+ * Extracts only the values from variables (not keys) and formats them
+ * for clean, compact display in the network request list.
+ */
+
+/**
+ * Format a single variable value for display
+ *
+ * @param value - The variable value to format
+ * @param maxLength - Maximum length for string values (default: 30)
+ * @returns Formatted string or null if value should be skipped
+ */
+function formatValue(value, maxLength = 30) {
+  // Null/undefined - skip
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // Boolean
+  if (typeof value === 'boolean') {
+    return String(value);
+  }
+
+  // Number
+  if (typeof value === 'number') {
+    return String(value);
+  }
+
+  // String
+  if (typeof value === 'string') {
+    // Truncate long strings
+    if (value.length > maxLength) {
+      return value.substring(0, maxLength - 1) + '…';
+    }
+    return value;
+  }
+
+  // Array - take first value or show count
+  if (Array.isArray(value)) {
+    if (value.length === 0) return null;
+    if (value.length === 1) {
+      return formatValue(value[0], maxLength);
+    }
+    // Multiple items - show count
+    return `${value.length} items`;
+  }
+
+  // Object - extract first string/number value
+  if (typeof value === 'object') {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return null;
+
+    // Find first meaningful value
+    for (const [_, v] of entries) {
+      const formatted = formatValue(v, maxLength);
+      if (formatted) {
+        return formatted;
+      }
+    }
+    return null;
+  }
+  return null;
+}
+
+/**
+ * Extract variable values from GraphQL variables object
+ *
+ * Returns an array of formatted values for display with arrow notation.
+ *
+ * @param variables - GraphQL variables object
+ * @param maxValues - Maximum number of values to show (default: 3)
+ * @returns Array of formatted variable values
+ *
+ * @example
+ * formatGraphQLVariables({ id: "pikachu" })
+ * // Returns: ["pikachu"]
+ *
+ * @example
+ * formatGraphQLVariables({ userId: 123, includeProfile: true })
+ * // Returns: ["123", "true"]
+ *
+ * @example
+ * formatGraphQLVariables({ filter: { status: "active" }, limit: 10 })
+ * // Returns: ["active", "10"]
+ */
+function formatGraphQLVariables(variables, maxValues = 3) {
+  if (!variables || typeof variables !== 'object') {
+    return null;
+  }
+  const values = [];
+
+  // Extract values from variables object
+  for (const [_, value] of Object.entries(variables)) {
+    const formatted = formatValue(value);
+    if (formatted) {
+      values.push(formatted);
+    }
+
+    // Stop if we've reached max values
+    if (values.length >= maxValues) {
+      break;
+    }
+  }
+  return values.length > 0 ? values : null;
+}
+
+/**
+ * Combine operation name with variables using arrow notation
+ *
+ * Matches React Query display pattern: "pokemon › Sandshrew"
+ * This provides visual consistency across all dev tools.
+ *
+ * @param operationName - GraphQL operation name (e.g., "GetPokemon")
+ * @param variables - GraphQL variables object
+ * @returns Formatted string with arrow notation
+ *
+ * @example
+ * formatGraphQLDisplay("GetPokemon", { id: "Sandshrew" })
+ * // Returns: "GetPokemon › Sandshrew"
+ *
+ * @example
+ * formatGraphQLDisplay("GetUser", { userId: 123, includeProfile: true })
+ * // Returns: "GetUser › 123 › true"
+ *
+ * @example
+ * formatGraphQLDisplay("GetPosts", { status: "published", limit: 10, offset: 0 })
+ * // Returns: "GetPosts › published › 10 › 0" (first 3 values by default)
+ *
+ * @example
+ * formatGraphQLDisplay("GetCurrentUser", {})
+ * // Returns: "GetCurrentUser" (no variables)
+ */
+function formatGraphQLDisplay(operationName, variables) {
+  const values = formatGraphQLVariables(variables);
+  if (!values || values.length === 0) {
+    // No variables - just operation name
+    return operationName;
+  }
+
+  // Combine: "GetPokemon › Sandshrew" (matches React Query pattern)
+  return [operationName, ...values].join(" › ");
+}
+
+/**
+ * Search GraphQL variables for a given text
+ *
+ * Recursively searches through all variable values to find matches.
+ * Used for filtering GraphQL requests by variable content.
+ *
+ * @param variables - GraphQL variables object
+ * @param searchText - Text to search for (already lowercased)
+ * @returns true if search text found in any variable value
+ *
+ * @example
+ * searchGraphQLVariables({ id: "pikachu" }, "pika")
+ * // Returns: true
+ *
+ * @example
+ * searchGraphQLVariables({ userId: 123, name: "John" }, "123")
+ * // Returns: true
+ */
+function searchGraphQLVariables(variables, searchText) {
+  if (!variables || typeof variables !== 'object') {
+    return false;
+  }
+
+  // Search through all variable values
+  for (const value of Object.values(variables)) {
+    if (searchValue(value, searchText)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Recursively search a value for matching text
+ */
+function searchValue(value, searchText) {
+  // String - direct match
+  if (typeof value === 'string') {
+    return value.toLowerCase().includes(searchText);
+  }
+
+  // Number - convert to string and match
+  if (typeof value === 'number') {
+    return String(value).includes(searchText);
+  }
+
+  // Boolean - convert to string and match
+  if (typeof value === 'boolean') {
+    return String(value).includes(searchText);
+  }
+
+  // Array - search each item
+  if (Array.isArray(value)) {
+    return value.some(item => searchValue(item, searchText));
+  }
+
+  // Object - search nested values
+  if (typeof value === 'object' && value !== null) {
+    return Object.values(value).some(v => searchValue(v, searchText));
+  }
+  return false;
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "formatBytes", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.formatBytes;
+  }
+});
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.formatDuration;
+  }
+});
+Object.defineProperty(exports, "formatHttpStatus", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.formatHttpStatus;
+  }
+});
+Object.defineProperty(exports, "getMethodColor", {
+  enumerable: true,
+  get: function () {
+    return _sharedUi.getMethodColor;
+  }
+});
+var _sharedUi = require("@buoy-gg/shared-ui");

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

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.networkEventStore = void 0;
+var _extractOperationName = require("./extractOperationName");
+/**
+ * Network event store for managing captured network requests
+ * Works with the Reactotron-style network listener
+ */
+
+class NetworkEventStore {
+  events = [];
+  pendingRequests = new Map();
+  listeners = new Set();
+  maxEvents = 500; // Configurable max events to prevent memory issues
+  recentRequests = new Map(); // Track recent requests to detect duplicates
+
+  /**
+   * Process a network listener event
+   */
+  processNetworkEvent(event) {
+    const {
+      request
+    } = event;
+    if (event.type === "request") {
+      // Check for duplicate request based on URL, method, and timing
+      const requestKey = `${request.method}:${request.url}`;
+      const now = Date.now();
+      const lastRequestTime = this.recentRequests.get(requestKey);
+
+      // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
+      if (lastRequestTime && now - lastRequestTime < 50) {
+        return; // Skip duplicate
+      }
+      this.recentRequests.set(requestKey, now);
+
+      // Clean up old entries to prevent memory leak
+      if (this.recentRequests.size > 100) {
+        const cutoff = now - 5000; // Remove entries older than 5 seconds
+        for (const [key, time] of this.recentRequests.entries()) {
+          if (time < cutoff) {
+            this.recentRequests.delete(key);
+          }
+        }
+      }
+
+      // Create new network event for request
+      // Build full URL with query params if present
+      const queryString = request.params ? `?${new URLSearchParams(request.params).toString()}` : "";
+      const fullUrl = `${request.url}${queryString}`;
+
+      // Extract GraphQL operation name and variables for searchability
+      let operationName;
+      let graphqlVariables;
+      if (request.client === 'graphql') {
+        const extracted = (0, _extractOperationName.extractOperationName)(request.data);
+        operationName = extracted || undefined;
+
+        // Extract variables from GraphQL request
+        if (request.data && typeof request.data === 'object' && 'variables' in request.data && request.data.variables && typeof request.data.variables === 'object') {
+          graphqlVariables = request.data.variables;
+        }
+      }
+      const networkEvent = {
+        id: request.id,
+        method: request.method,
+        url: fullUrl,
+        // Store FULL URL with query params
+        host: this.extractHost(request.url),
+        path: this.extractPath(request.url),
+        query: queryString,
+        timestamp: event.timestamp.getTime(),
+        requestHeaders: request.headers || {},
+        requestData: request.data,
+        requestSize: this.getDataSize(request.data),
+        responseHeaders: {},
+        requestClient: request.client,
+        operationName,
+        // GraphQL operation name for search/filter
+        graphqlVariables // GraphQL variables for display and search
+      };
+
+      // Store as pending
+      this.pendingRequests.set(request.id, networkEvent);
+
+      // Add to events list
+      this.events = [networkEvent, ...this.events].slice(0, this.maxEvents);
+      this.notifyListeners();
+    } else if (event.type === "response" || event.type === "error") {
+      // Find and update the pending request
+      const index = this.events.findIndex(e => e.id === request.id);
+      if (index !== -1) {
+        const updatedEvent = {
+          ...this.events[index],
+          duration: event.duration
+        };
+        if (event.response) {
+          updatedEvent.status = event.response.status;
+          updatedEvent.statusText = event.response.statusText;
+          updatedEvent.responseHeaders = event.response.headers || {};
+          updatedEvent.responseData = event.response.body;
+          updatedEvent.responseSize = event.response.size || 0;
+          updatedEvent.responseType = event.response.headers?.["content-type"];
+        }
+        if (event.error) {
+          updatedEvent.error = event.error.message;
+          updatedEvent.status = updatedEvent.status || 0;
+        }
+        this.events[index] = updatedEvent;
+        this.pendingRequests.delete(request.id);
+        this.notifyListeners();
+      }
+    }
+  }
+
+  /**
+   * Extract host from URL
+   */
+  extractHost(url) {
+    try {
+      const urlObj = new URL(url);
+      // @ts-ignore - this does exist on native
+      return urlObj.hostname;
+    } catch {
+      return "";
+    }
+  }
+
+  /**
+   * Extract path from URL
+   */
+  extractPath(url) {
+    try {
+      const urlObj = new URL(url);
+      // @ts-ignore - this does exist on native
+      return urlObj.pathname;
+    } catch {
+      return url;
+    }
+  }
+
+  /**
+   * Get size of data
+   */
+  getDataSize(data) {
+    if (!data) return 0;
+    if (typeof data === "string") return data.length;
+    try {
+      return JSON.stringify(data).length;
+    } catch {
+      return 0;
+    }
+  }
+
+  /**
+   * Get all events
+   */
+  getEvents() {
+    return [...this.events];
+  }
+
+  /**
+   * Get event by ID
+   */
+  getEventById(id) {
+    return this.events.find(e => e.id === id);
+  }
+
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+    this.pendingRequests.clear();
+    this.recentRequests.clear();
+    this.notifyListeners();
+  }
+
+  /**
+   * Subscribe to event changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notify all listeners of changes
+   */
+  notifyListeners() {
+    const events = this.getEvents();
+    this.listeners.forEach(listener => listener(events));
+  }
+
+  /**
+   * Set maximum number of events to store
+   */
+  setMaxEvents(max) {
+    this.maxEvents = max;
+    if (this.events.length > max) {
+      this.events = this.events.slice(0, max);
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Get statistics about network events
+   */
+  getStats() {
+    const total = this.events.length;
+    const successful = this.events.filter(e => e.status && e.status >= 200 && e.status < 300).length;
+    const failed = this.events.filter(e => e.error || e.status && e.status >= 400).length;
+    const pending = this.events.filter(e => !e.status && !e.error).length;
+    const durations = this.events.filter(e => e.duration).map(e => e.duration);
+    const avgDuration = durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+    const totalSent = this.events.reduce((sum, e) => sum + (e.requestSize || 0), 0);
+    const totalReceived = this.events.reduce((sum, e) => sum + (e.responseSize || 0), 0);
+    return {
+      totalRequests: total,
+      successfulRequests: successful,
+      failedRequests: failed,
+      pendingRequests: pending,
+      totalDataSent: totalSent,
+      totalDataReceived: totalReceived,
+      averageDuration: Math.round(avgDuration)
+    };
+  }
+
+  /**
+   * Filter events by criteria
+   */
+  filterEvents(filter) {
+    let filtered = [...this.events];
+    if (filter.method) {
+      filtered = filtered.filter(e => e.method === filter.method);
+    }
+    if (filter.status) {
+      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 (filter.searchText) {
+      const search = filter.searchText.toLowerCase();
+      filtered = filtered.filter(e => e.url.toLowerCase().includes(search) || e.method.toLowerCase().includes(search) || e.error && e.error.toLowerCase().includes(search));
+    }
+    if (filter.host) {
+      filtered = filtered.filter(e => e.host === filter.host);
+    }
+    return filtered;
+  }
+}
+
+/**
+ * Singleton store that aggregates captured network traffic. Components and hooks consume this
+ * store to render histories, derive stats, and subscribe to real-time updates.
+ */
+const networkEventStore = exports.networkEventStore = new NetworkEventStore();