@rozenite/network-activity-plugin 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/ui/network-toolbar.module.css

@@ -1,9 +0,0 @@
-.recordingButton {
-  margin-right: 8px;
-}
-
-.requestCount {
-  margin-left: auto;
-  font-size: 12px;
-  color: #666;
-} 

package/src/ui/network-toolbar.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Button, Toolbar } from './components';
-import styles from './network-toolbar.module.css';
-
-interface NetworkToolbarProps {
-  isRecording: boolean;
-  onToggleRecording: () => void;
-  onClear: () => void;
-  requestCount: number;
-}
-
-export const NetworkToolbar: React.FC<NetworkToolbarProps> = ({
-  isRecording,
-  onToggleRecording,
-  onClear,
-  requestCount,
-}) => {
-  return (
-    <Toolbar>
-      <Button
-        onClick={onToggleRecording}
-        variant={isRecording ? 'danger' : 'success'}
-        size="small"
-        className={styles.recordingButton}
-      >
-        {isRecording ? 'Stop' : 'Start'} Recording
-      </Button>
-      <Button onClick={onClear} variant="secondary" size="small">
-        Clear
-      </Button>
-      <div className={styles.requestCount}>{requestCount} requests</div>
-    </Toolbar>
-  );
-};

package/src/ui/panel.module.css

@@ -1,67 +0,0 @@
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.mainContent {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.networkListContainer {
-  width: 60%;
-  border-right: 1px solid #e0e0e0;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.listContent {
-  flex: 1;
-}
-
-.detailsContainer {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.headerStatus {
-  width: 60px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.headerMethod {
-  width: 80px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.headerName {
-  flex: 1;
-  min-width: 0;
-}
-
-.headerType {
-  width: 100px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.headerTime {
-  width: 80px;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.headerSize {
-  width: 80px;
-  text-align: right;
-  flex-shrink: 0;
-} 

package/src/ui/panel.tsx

@@ -1,318 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import {
-  NetworkActivityEventMap,
-  NetworkRequestId,
-  NetworkResourceType,
-} from '../types/client';
-import { 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';
-
-// Enhanced network entry with CDP data
-type EnhancedNetworkEntry = NetworkEntry & {
-  // CDP specific fields
-  loaderId?: string;
-  documentURL?: string;
-  type?: NetworkResourceType;
-  initiator?: {
-    type: string;
-    url?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-  };
-  // Request details
-  request?: {
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    postData?: string;
-    hasPostData?: boolean;
-  };
-  // Response details
-  response?: {
-    url: string;
-    status: number;
-    statusText: string;
-    headers: Record<string, string>;
-    mimeType: string;
-    encodedDataLength: number;
-    responseTime: number;
-  };
-  // Response body
-  responseBody?: {
-    body: string;
-    base64Encoded: boolean;
-  };
-  // Timing and data
-  dataLength?: number;
-  // Error details
-  blockedReason?: string;
-  corsErrorStatus?: any;
-};
-
-export default function NetworkActivityPanel() {
-  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
-    pluginId: '@rozenite/network-activity-plugin',
-  });
-
-  const [networkEntries, setNetworkEntries] = useState<
-    Map<string, EnhancedNetworkEntry>
-  >(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) {
-      client.send('network-enable', {});
-    } else {
-      client.send('network-disable', {});
-    }
-  }, [client, isRecording]);
-
-  useEffect(() => {
-    if (!client) return;
-
-    const subscriptions: Array<{ remove: () => void }> = [];
-
-    // Subscribe to CDP Network events
-    subscriptions.push(
-      client.onMessage('Network.requestWillBeSent', (payload) => {
-        setNetworkEntries((prev) => {
-          const newMap = new Map(prev);
-          const existing = newMap.get(payload.requestId);
-
-          newMap.set(payload.requestId, {
-            requestId: payload.requestId,
-            loaderId: payload.loaderId,
-            documentURL: payload.documentURL,
-            url: payload.request.url,
-            method: payload.request.method,
-            headers: payload.request.headers,
-            postData: payload.request.postData,
-            hasPostData: payload.request.hasPostData,
-            status: 'pending',
-            startTime: payload.timestamp,
-            type: payload.type,
-            initiator: payload.initiator,
-            request: payload.request,
-            // Preserve existing response data if this is a redirect
-            ...(existing && {
-              response: existing.response,
-              status: existing.status,
-              endTime: existing.endTime,
-              duration: existing.duration,
-              encodedDataLength: existing.encodedDataLength,
-              dataLength: existing.dataLength,
-              errorText: existing.errorText,
-              canceled: existing.canceled,
-            }),
-          });
-          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.response,
-              status: 'loading',
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.dataReceived', (payload) => {
-        setNetworkEntries((prev) => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            newMap.set(payload.requestId, {
-              ...entry,
-              dataLength: payload.dataLength,
-              encodedDataLength: payload.encodedDataLength,
-            });
-          }
-          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;
-
-            newMap.set(payload.requestId, {
-              ...entry,
-              status: 'finished',
-              endTime,
-              duration,
-              encodedDataLength: payload.encodedDataLength,
-            });
-          }
-          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;
-
-            newMap.set(payload.requestId, {
-              ...entry,
-              status: 'failed',
-              endTime,
-              duration,
-              errorText: payload.errorText,
-              canceled: payload.canceled,
-            });
-          }
-          return newMap;
-        });
-      })
-    );
-
-    subscriptions.push(
-      client.onMessage('Network.responseBodyReceived', (payload) => {
-        setNetworkEntries((prev) => {
-          const newMap = new Map(prev);
-          const entry = newMap.get(payload.requestId);
-          if (entry) {
-            newMap.set(payload.requestId, {
-              ...entry,
-              responseBody: {
-                body: payload.body,
-                base64Encoded: payload.base64Encoded,
-              },
-            });
-          }
-          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);
-  };
-
-  const requestResponseBody = (requestId: string) => {
-    if (client) {
-      client.send('Network.getResponseBody', { 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.headerType}>Type</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}
-            onRequestResponseBody={requestResponseBody}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/tanstack-query.tsx

@@ -1,204 +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>
-  );
-}