@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/ui/panel.tsx

@@ -1,201 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
-import { NetworkEventMap, NetworkEntry } from '../types/network';
-import styles from './panel.module.css';
-import { NetworkToolbar } from './network-toolbar';
-import { PanelHeader } from './components';
-import { NetworkList } from './network-list';
-import { NetworkDetails } from './network-details';
-
-export default function NetworkActivityPanel() {
-  const client = useRozeniteDevToolsClient<NetworkEventMap>({
-    pluginId: '@rozenite/network-activity-plugin',
-  });
-
-  const [networkEntries, setNetworkEntries] = useState<Map<string, NetworkEntry>>(new Map());
-  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
-  const [isRecording, setIsRecording] = useState(true);
-  const [containerHeight, setContainerHeight] = useState(0);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  // Convert Map to sorted array for rendering
-  const sortedEntries = useMemo(() => {
-    return Array.from(networkEntries.values())
-      .sort((a, b) => b.startTime - a.startTime);
-  }, [networkEntries]);
-
-  const selectedEntry = selectedRequestId ? networkEntries.get(selectedRequestId) || null : null;
-
-  useEffect(() => {
-    if (!client) return;
-    if (!isRecording) return;
-
-    const subscriptions: Array<{ remove: () => void }> = [];
-
-    // Subscribe to Network events
-    subscriptions.push(
-      client.onMessage('Network.requestWillBeSent', (payload) => {
-        setNetworkEntries(prev => {
-          const newMap = new Map(prev);
-          newMap.set(payload.requestId, {
-            requestId: payload.requestId,
-            request: payload,
-            status: 'pending',
-            startTime: payload.timestamp,
-          });
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.requestWillBeSentExtraInfo', (payload) => {
-        setNetworkEntries(prev => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            newMap.set(payload.requestId, {
-              ...entry,
-              extraInfo: payload,
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.responseReceived', (payload) => {
-        setNetworkEntries(prev => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            newMap.set(payload.requestId, {
-              ...entry,
-              response: payload,
-              status: 'loading',
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.loadingFinished', (payload) => {
-        setNetworkEntries(prev => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            const endTime = payload.timestamp;
-            const duration = (endTime - entry.startTime) * 1000; // Convert to milliseconds
-            newMap.set(payload.requestId, {
-              ...entry,
-              loadingFinished: payload,
-              status: 'finished',
-              endTime,
-              duration,
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.loadingFailed', (payload) => {
-        setNetworkEntries(prev => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            const endTime = payload.timestamp;
-            const duration = (endTime - entry.startTime) * 1000; // Convert to milliseconds
-            newMap.set(payload.requestId, {
-              ...entry,
-              loadingFailed: payload,
-              status: 'failed',
-              endTime,
-              duration,
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    return () => {
-      subscriptions.forEach(sub => sub.remove());
-    };
-  }, [client, isRecording]);
-
-  const clearNetworkLog = () => {
-    setNetworkEntries(new Map());
-    setSelectedRequestId(null);
-  };
-
-  const toggleRecording = () => {
-    setIsRecording(!isRecording);
-  };
-
-  const handleSelectRequest = (requestId: string) => {
-    setSelectedRequestId(requestId);
-  };
-
-  // Update container height on mount and resize
-  useEffect(() => {
-    const updateHeight = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        setContainerHeight(rect.height - 120); // Subtract toolbar and header height
-      }
-    };
-
-    updateHeight();
-    window.addEventListener('resize', updateHeight);
-    return () => window.removeEventListener('resize', updateHeight);
-  }, []);
-
-  return (
-    <div 
-      ref={containerRef}
-      className={styles.container}
-    >
-      {/* Toolbar */}
-      <NetworkToolbar
-        isRecording={isRecording}
-        onToggleRecording={toggleRecording}
-        onClear={clearNetworkLog}
-        requestCount={sortedEntries.length}
-      />
-
-      {/* Main Content */}
-      <div className={styles.mainContent}>
-        {/* Network List */}
-        <div className={styles.networkListContainer}>
-          {/* List Header */}
-          <PanelHeader>
-            <div className={styles.headerStatus}>Status</div>
-            <div className={styles.headerMethod}>Method</div>
-            <div className={styles.headerName}>Name</div>
-            <div className={styles.headerTime}>Time</div>
-            <div className={styles.headerSize}>Size</div>
-          </PanelHeader>
-
-           <div className={styles.listContent}>
-             <NetworkList
-               entries={sortedEntries}
-               selectedRequestId={selectedRequestId}
-               onSelect={handleSelectRequest}
-               height={containerHeight}
-             />
-           </div>
-        </div>
-
-        {/* Details Panel */}
-        <div className={styles.detailsContainer}>
-          <NetworkDetails entry={selectedEntry} />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/tanstack-query.tsx

@@ -1,197 +0,0 @@
-import { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, QueryClientProvider, Query, Mutation } from '@tanstack/react-query';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
-import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useRef } from 'react';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      queryFn: async () => {
-        // Prevent refetch from throwing an error
-        return Promise.resolve(null);
-      },
-    },
-  },
-});
-
-type DevToolsEventMap = {
-  "DEVTOOLS_TO_DEVICE": unknown;
-  "DEVICE_TO_DEVTOOLS": QueryCacheNotifyEvent | MutationCacheNotifyEvent;
-  "DEVICE_TO_DEVTOOLS_ACK": { requestId: string; success: boolean };
-  "DEVICE_TO_DEVTOOLS_INITIAL_DATA": { queries: Query[]; mutations: Mutation[] };
-  "DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST": unknown;
-}
-
-const Wrapped = () => {
-  const client = useRozeniteDevToolsClient<DevToolsEventMap>({
-    pluginId: '@rozenite/tanstack-query-plugin',
-  })
-
-  // Track pending acknowledgments to prevent feedback loops
-  const pendingAcknowledgment = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (!client) return;
-    client.send("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", null);
-  }, [client]);
-
-  useEffect(() => {
-    if (!client) return;
-
-    const handleEvent = (event: Event) => {
-      const detail = (event as CustomEvent).detail;
-      
-      // Generate a unique request ID for this DevTools action
-      const requestId = `devtools-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-      
-      // Mark that we're waiting for acknowledgment
-      pendingAcknowledgment.current.add(requestId);
-      
-      // Add the request ID to the event detail
-      const eventWithRequestId = {
-        ...detail,
-        requestId,
-      };
-      
-      client.send("DEVTOOLS_TO_DEVICE", eventWithRequestId);
-    };
-
-    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
-    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
-  }, [client])
-
-  useEffect(() => {
-    if (!client) return;
-
-    const ackSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_ACK", (ack) => {
-      // Remove the request from pending acknowledgments
-      pendingAcknowledgment.current.delete(ack.requestId);
-    });
-
-    const subscription = client.onMessage("DEVICE_TO_DEVTOOLS", (event) => {
-      // Don't reflect events if we're waiting for acknowledgments
-      if (pendingAcknowledgment.current.size > 0) {
-        return;
-      }
-      
-      if ('query' in event) {
-        const { query, type } = event as QueryCacheNotifyEvent;
-        const queryCache = queryClient.getQueryCache();
-        
-        if (type === 'updated') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            existingQuery.setState(query.state);
-          } else {
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'added') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (!existingQuery) {
-            // Only add if it doesn't already exist
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'removed') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            queryCache.remove(existingQuery);
-          }
-        }
-      } else if ('mutation' in event) {
-        const { mutation, type } = event as MutationCacheNotifyEvent;
-        const mutationCache = queryClient.getMutationCache();
-        
-        if (type === 'added') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
-
-          mutationCache.build(
-            queryClient,
-            mutation.options,
-            mutation.state
-          );
-        } else if (type === 'removed') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
-        } else if (type === 'updated') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-            mutationCache.build(
-              queryClient,
-              mutation.options,
-              mutation.state
-            );
-          }
-        }
-      }
-    })
-
-    const initialDataSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_INITIAL_DATA", (event) => {
-      // Clear existing data first
-      queryClient.clear();
-      queryClient.getMutationCache().clear();
-      
-      // Restore queries
-      const queryCache = queryClient.getQueryCache();
-      event.queries.forEach(query => {
-        queryCache.build(
-          queryClient,
-          {
-            queryKey: query.queryKey,
-            queryHash: query.queryHash,
-          },
-          query.state
-        );
-      });
-      
-      // Restore mutations
-      const mutationCache = queryClient.getMutationCache();
-      event.mutations.forEach(mutation => {
-        mutationCache.build(
-          queryClient,
-          mutation.options,
-          mutation.state
-        );
-      });
-    });
-
-    return () => {
-      subscription.remove();
-      ackSubscription.remove();
-      initialDataSubscription.remove();
-    };
-  }, [client, queryClient])
-
-
-  return (
-    <ReactQueryDevtoolsPanel />
-  )
-}
-
-export default function TanStackQueryPanel() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Wrapped />
-    </QueryClientProvider>
-  )
-}

package/src/ui/utils.ts

@@ -1,89 +0,0 @@
-// Utility functions for formatting and styling
-
-export const formatTime = (timestamp: number): string => {
-  const date = new Date(timestamp * 1000);
-  return date.toLocaleTimeString();
-};
-
-export const formatDuration = (duration: number): string => {
-  if (duration < 1000) return `${Math.round(duration)}ms`;
-  return `${(duration / 1000).toFixed(2)}s`;
-};
-
-export const getStatusColor = (status: number): string => {
-  if (status >= 200 && status < 300) return '#4caf50';
-  if (status >= 300 && status < 400) return '#ff9800';
-  if (status >= 400 && status < 500) return '#f44336';
-  if (status >= 500) return '#9c27b0';
-  return '#757575';
-};
-
-export const getMethodColor = (method: string): string => {
-  switch (method.toUpperCase()) {
-    case 'GET': return '#61affe';
-    case 'POST': return '#49cc90';
-    case 'PUT': return '#fca130';
-    case 'DELETE': return '#f93e3e';
-    case 'PATCH': return '#50e3c2';
-    default: return '#757575';
-  }
-};
-
-export const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-};
-
-export const parseUrl = (url: string) => {
-  try {
-    const urlObj = new URL(url);
-    return {
-      domain: urlObj.hostname,
-      path: urlObj.pathname + urlObj.search,
-      protocol: urlObj.protocol,
-    };
-  } catch {
-    return {
-      domain: 'Invalid URL',
-      path: url,
-      protocol: 'unknown',
-    };
-  }
-};
-
-export const truncateText = (text: string, maxLength: number): string => {
-  if (text.length <= maxLength) return text;
-  return text.substring(0, maxLength) + '...';
-};
-
-export const formatLongUrl = (url: string, maxLength = 80): string => {
-  if (url.length <= maxLength) return url;
-  
-  try {
-    const urlObj = new URL(url);
-    const protocol = urlObj.protocol;
-    const hostname = urlObj.hostname;
-    const pathname = urlObj.pathname;
-    const search = urlObj.search;
-    
-    // Keep protocol and hostname, truncate path if needed
-    const baseLength = protocol.length + hostname.length + 3; // +3 for "://"
-    const remainingLength = maxLength - baseLength - 3; // -3 for "..."
-    
-    if (remainingLength <= 0) {
-      return `${protocol}//${hostname}...`;
-    }
-    
-    const fullPath = pathname + search;
-    if (fullPath.length <= remainingLength) {
-      return url;
-    }
-    
-    return `${protocol}//${hostname}${fullPath.substring(0, remainingLength)}...`;
-  } catch {
-    return truncateText(url, maxLength);
-  }
-};