@rozenite/network-activity-plugin 1.0.0 → 1.2.0

package/dist/react-native.cjs

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 exports.useNetworkActivityDevTools = void 0;
+exports.withOnBootNetworkActivityRecording = void 0;
 const isWeb = typeof window !== "undefined" && window.navigator.product !== "ReactNative";
 const isDev = process.env.NODE_ENV !== "production";
 const isServer = typeof window === "undefined";
 if (isDev && !isWeb && !isServer) {
   exports.useNetworkActivityDevTools = require("./useNetworkActivityDevTools.cjs").useNetworkActivityDevTools;
+  exports.withOnBootNetworkActivityRecording = require("./boot-recording.cjs").withOnBootNetworkActivityRecording;
 } else {
   exports.useNetworkActivityDevTools = () => null;
+  exports.withOnBootNetworkActivityRecording = (options) => null;
 }

package/dist/react-native.d.ts

@@ -1 +1,4 @@
 export declare let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+export declare let withOnBootNetworkActivityRecording: typeof import('./src/react-native/boot-recording').withOnBootNetworkActivityRecording;
+export type { NetworkActivityDevToolsConfig } from './src/react-native/config';
+export type { BootRecordingOptions } from './src/react-native/boot-recording';

package/dist/react-native.js

@@ -1,12 +1,16 @@
 let useNetworkActivityDevTools;
+let withOnBootNetworkActivityRecording;
 const isWeb = typeof window !== "undefined" && window.navigator.product !== "ReactNative";
 const isDev = process.env.NODE_ENV !== "production";
 const isServer = typeof window === "undefined";
 if (isDev && !isWeb && !isServer) {
   useNetworkActivityDevTools = require("./useNetworkActivityDevTools.js").useNetworkActivityDevTools;
+  withOnBootNetworkActivityRecording = require("./boot-recording.js").withOnBootNetworkActivityRecording;
 } else {
   useNetworkActivityDevTools = () => null;
+  withOnBootNetworkActivityRecording = (options) => null;
 }
 export {
-  useNetworkActivityDevTools
+  useNetworkActivityDevTools,
+  withOnBootNetworkActivityRecording
 };

package/dist/rozenite.json

@@ -1 +1 @@
-{"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.16","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
+{"name":"@rozenite/network-activity-plugin","version":"1.1.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}

package/dist/src/react-native/boot-recording.d.ts

@@ -0,0 +1,41 @@
+import { NetworkActivityEventMap } from '../shared/client';
+import { createEventsListener, EventsListenerOptions } from './events-listener';
+import { NetworkInspector } from './network-inspector';
+import { NetworkInspectorConfig } from './config';
+type InspectorsConfiguration = {
+    eventsListener: ReturnType<typeof createEventsListener<NetworkActivityEventMap>>;
+    networkInspector: NetworkInspector;
+};
+export type BootRecordingOptions = NetworkInspectorConfig & EventsListenerOptions & {
+    /**
+     * Enable queuing of events during boot before DevTools connects.
+     * When true, network activity is captured and queued until DevTools is ready.
+     * When false, nothing is queued and inspectors are not even set up.
+     * @default true
+     */
+    enableBootRecording?: boolean;
+};
+/**
+ *
+ * @internal
+ */
+export declare const createNetworkInspectorsConfiguration: (options?: BootRecordingOptions) => InspectorsConfiguration;
+/**
+ * Enable network activity recording during app boot, before DevTools connects.
+ * Call this at the root of your app to capture early network requests.
+ *
+ * @example
+ * ```tsx
+ * import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
+ *
+ * // At app entry point, before any network requests
+ * withOnBootNetworkActivityRecording();
+ *
+ * function App() {
+ *   useNetworkActivityDevTools();
+ *   // ...
+ * }
+ * ```
+ */
+export declare const withOnBootNetworkActivityRecording: (options?: BootRecordingOptions) => void;
+export {};

package/dist/src/react-native/config.d.ts

@@ -1,13 +1,16 @@
 export type InspectorType = 'http' | 'websocket' | 'sse';
-export type NetworkActivityDevToolsConfig = {
+export type InspectorsConfig = {
+    [key in InspectorType]?: boolean;
+};
+export type NetworkInspectorConfig = {
     /**
      * Specifies which network inspectors are enabled.
      * Set to `false` to disable monitoring for a specific type of network traffic.
      * @default { http: true, websocket: true, sse: true }
      */
-    inspectors?: {
-        [key in InspectorType]?: boolean;
-    };
+    inspectors?: InspectorsConfig;
+};
+export type NetworkActivityDevToolsConfig = NetworkInspectorConfig & {
     clientUISettings?: {
         /**
          * If true, display the entire relative URL as the request name in the UI instead of only the last path segment.

package/dist/src/react-native/events-listener.d.ts

@@ -0,0 +1,44 @@
+type QueuedMessage<TEventMap extends Record<string, unknown>> = {
+    type: keyof TEventMap;
+    data: TEventMap[keyof TEventMap];
+};
+type SendFunction<TEventMap extends Record<string, unknown>> = <K extends keyof TEventMap>(type: K, data: TEventMap[K]) => void;
+/**
+ * Generic events listener that queues messages until a send function is registered.
+ * This allows capturing events before the DevTools client connects and so be boot compliant.
+ */
+export declare class EventsListener<TEventMap extends Record<string, unknown>> {
+    private messageQueue;
+    private sendFunction;
+    private maxQueueSize;
+    private isQueuing;
+    setMaxQueueSize(size: number): void;
+    /**
+     * Enable queuing mode to capture events before client is connected
+     */
+    enableQueuing(): void;
+    /**
+     * Connect the actual send function and automatically flush queued messages
+     */
+    connect(sendFn: SendFunction<TEventMap>, filterFn?: (message: QueuedMessage<TEventMap>) => boolean): void;
+    isInQueueMode(): boolean;
+    /**
+     * Send a message (queued if not connected, sent directly if connected)
+     */
+    send<K extends keyof TEventMap>(type: K, data: TEventMap[K]): void;
+    private enqueueMessage;
+    private flushQueue;
+}
+export type EventsListenerOptions = {
+    /**
+     * Maximum number of messages to queue before DevTools connects.
+     * @default 200
+     */
+    maxQueueSize?: number;
+};
+/**
+ * Create a new events listener instance for a specific event map.
+ * This factory can be used to create listeners for different protocols or plugins.
+ */
+export declare const createEventsListener: <TEventMap extends Record<string, unknown>>() => EventsListener<TEventMap>;
+export {};

package/dist/src/react-native/http/http-inspector.d.ts

@@ -0,0 +1,10 @@
+import { getNetworkRequestsRegistry } from './network-requests-registry';
+import { HttpEventMap } from '../../shared/http-events';
+import { Inspector } from '../inspector';
+export type { HttpEventMap };
+export declare const HTTP_EVENTS: (keyof HttpEventMap)[];
+export declare const isHttpEvent: (type: string) => type is keyof HttpEventMap;
+export type HTTPInspector = Inspector<HttpEventMap> & {
+    getNetworkRequestsRegistry: () => ReturnType<typeof getNetworkRequestsRegistry>;
+};
+export declare const getHTTPInspector: () => HTTPInspector;

package/dist/src/react-native/http/http-utils.d.ts

@@ -0,0 +1,15 @@
+import { XHRPostData, RequestPostData } from '../../shared/client';
+import { OverridesRegistry } from './overrides-registry';
+export declare const getRequestBody: (body: XHRPostData) => RequestPostData;
+export declare const getResponseSize: (request: XMLHttpRequest) => number | null;
+export declare const getResponseBody: (request: XMLHttpRequest) => Promise<string | null>;
+export declare const getInitiatorFromStack: () => {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+};
+/**
+ * Applies override body and status to XMLHttpRequest objects.
+ */
+export declare const setupRequestOverride: (overridesRegistry: OverridesRegistry, request: XMLHttpRequest) => void;

package/dist/src/react-native/inspector.d.ts

@@ -0,0 +1,7 @@
+export interface Inspector<TEventMap> {
+    enable: () => void;
+    disable: () => void;
+    isEnabled: () => boolean;
+    dispose: () => void;
+    on<TEventType extends keyof TEventMap>(type: TEventType, callback: (event: TEventMap[TEventType]) => void): () => void;
+}

package/dist/src/react-native/network-inspector.d.ts

@@ -0,0 +1,16 @@
+import { HTTPInspector } from './http/http-inspector';
+import { SSEInspector } from './sse/sse-inspector';
+import { WebSocketInspector } from './websocket/websocket-inspector';
+import { EventsListener } from './events-listener';
+import { NetworkActivityEventMap } from '../shared/client';
+import { InspectorsConfig } from './config';
+export type NetworkInspector = {
+    readonly http: HTTPInspector;
+    readonly sse: SSEInspector;
+    readonly websocket: WebSocketInspector;
+    setup: (eventsListener: EventsListener<NetworkActivityEventMap>) => void;
+    enable: (config?: InspectorsConfig) => void;
+    disable: () => void;
+    dispose: () => void;
+};
+export declare const getNetworkInspector: () => NetworkInspector;

package/dist/src/react-native/sse/sse-inspector.d.ts

@@ -1,9 +1,6 @@
 import { SSEEventMap } from '../../shared/sse-events';
-export type SSEInspector = {
-    enable: () => void;
-    disable: () => void;
-    isEnabled: () => boolean;
-    dispose: () => void;
-    on: <TEventType extends keyof SSEEventMap>(event: TEventType, callback: (data: SSEEventMap[TEventType]) => void) => () => void;
-};
+import { Inspector } from '../inspector';
+export type SSEInspector = Inspector<SSEEventMap>;
+export declare const SSE_EVENTS: (keyof SSEEventMap)[];
+export declare const isSSEEvent: (type: string) => type is keyof SSEEventMap;
 export declare const getSSEInspector: () => SSEInspector;

package/dist/src/react-native/useHttpInspector.d.ts

@@ -0,0 +1,3 @@
+import { HTTPInspector } from './http/http-inspector';
+import { NetworkActivityDevToolsClient } from '../shared/client';
+export declare const useHttpInspector: (client: NetworkActivityDevToolsClient | null, httpInspector: HTTPInspector, isEnabled: boolean, isRecordingEnabled: boolean) => void;

package/dist/src/react-native/useSSEInspector.d.ts

@@ -0,0 +1,3 @@
+import { SSEInspector } from './sse/sse-inspector';
+import { NetworkActivityDevToolsClient } from '../shared/client';
+export declare const useSSEInspector: (client: NetworkActivityDevToolsClient | null, sseInspector: SSEInspector, isEnabled: boolean, isRecordingEnabled: boolean) => void;

package/dist/src/react-native/useWebSocketInspector.d.ts

@@ -0,0 +1,3 @@
+import { WebSocketInspector } from './websocket/websocket-inspector';
+import { NetworkActivityDevToolsClient } from '../shared/client';
+export declare const useWebSocketInspector: (client: NetworkActivityDevToolsClient | null, websocketInspector: WebSocketInspector, isEnabled: boolean, isRecordingEnabled: boolean) => void;

package/dist/src/react-native/websocket/websocket-inspector.d.ts

@@ -1,9 +1,6 @@
 import { WebSocketEventMap } from '../../shared/websocket-events';
-export type WebSocketInspector = {
-    enable: () => void;
-    disable: () => void;
-    isEnabled: () => boolean;
-    dispose: () => void;
-    on: <TEventType extends keyof WebSocketEventMap>(event: TEventType, callback: (data: WebSocketEventMap[TEventType]) => void) => () => void;
-};
+import { Inspector } from '../inspector';
+export type WebSocketInspector = Inspector<WebSocketEventMap>;
+export declare const WEBSOCKET_EVENTS: (keyof WebSocketEventMap)[];
+export declare const isWebSocketEvent: (type: string) => type is keyof WebSocketEventMap;
 export declare const getWebSocketInspector: () => WebSocketInspector;

package/dist/src/shared/client.d.ts

@@ -1,66 +1,8 @@
 import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
-export type HttpHeaders = Record<string, string | string[]>;
-export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
-export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
-export type RequestId = string;
-export type Timestamp = number;
-export type XHRPostData = string | Blob | FormData | ArrayBuffer | ArrayBufferView | unknown | null | undefined;
-export type RequestTextPostData = {
-    type: 'text';
-    value: string;
-};
-export type RequestBinaryPostData = {
-    type: 'binary';
-    value: {
-        size: number;
-        type?: string;
-        name?: string;
-    };
-};
-export type RequestFormDataPostData = {
-    type: 'form-data';
-    value: Record<string, RequestTextPostData | RequestBinaryPostData>;
-};
-export type RequestPostData = RequestTextPostData | RequestFormDataPostData | RequestBinaryPostData | null | undefined;
-export type Cookie = {
-    name: string;
-    value: string;
-    domain?: string;
-    path?: string;
-    expires?: string;
-    maxAge?: string;
-    secure?: boolean;
-    httpOnly?: boolean;
-    sameSite?: string;
-};
-export type Request = {
-    url: string;
-    method: HttpMethod;
-    headers: HttpHeaders;
-    postData?: RequestPostData;
-};
-export type Response = {
-    url: string;
-    status: number;
-    statusText: string;
-    headers: HttpHeaders;
-    contentType: string;
-    size: number | null;
-    responseTime: Timestamp;
-};
-export type Initiator = {
-    type: string;
-    url?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-};
-export type ResourceType = 'XHR' | 'Fetch' | 'Other';
-export type RequestOverride = {
-    status?: number;
-    body?: string;
-};
+import { HttpEventMap } from './http-events';
+export * from './http-events';
 export type NetworkActivityClientUISettings = {
     showUrlAsName?: boolean;
 };
@@ -71,42 +13,5 @@ export type NetworkActivityEventMap = {
     'client-ui-settings': {
         settings?: NetworkActivityClientUISettings;
     };
-    'request-sent': {
-        requestId: RequestId;
-        request: Request;
-        timestamp: Timestamp;
-        initiator: Initiator;
-        type: ResourceType;
-    };
-    'response-received': {
-        requestId: RequestId;
-        timestamp: Timestamp;
-        type: ResourceType;
-        response: Response;
-    };
-    'request-completed': {
-        requestId: RequestId;
-        timestamp: Timestamp;
-        duration: number;
-        size: number | null;
-        ttfb: number;
-    };
-    'request-failed': {
-        requestId: RequestId;
-        timestamp: Timestamp;
-        type: ResourceType;
-        error: string;
-        canceled: boolean;
-    };
-    'get-response-body': {
-        requestId: RequestId;
-    };
-    'response-body': {
-        requestId: RequestId;
-        body: string | null;
-    };
-    'set-overrides': {
-        overrides: [string, RequestOverride][];
-    };
-} & WebSocketEventMap & SSEEventMap;
+} & HttpEventMap & WebSocketEventMap & SSEEventMap;
 export type NetworkActivityDevToolsClient = RozeniteDevToolsClient<NetworkActivityEventMap>;

package/dist/src/shared/http-events.d.ts

@@ -0,0 +1,106 @@
+export type HttpHeaders = Record<string, string | string[]>;
+export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
+export type RequestId = string;
+export type Timestamp = number;
+export type XHRPostData = string | Blob | FormData | ArrayBuffer | ArrayBufferView | unknown | null | undefined;
+export type RequestTextPostData = {
+    type: 'text';
+    value: string;
+};
+export type RequestBinaryPostData = {
+    type: 'binary';
+    value: {
+        size: number;
+        type?: string;
+        name?: string;
+    };
+};
+export type RequestFormDataPostData = {
+    type: 'form-data';
+    value: Record<string, RequestTextPostData | RequestBinaryPostData>;
+};
+export type RequestPostData = RequestTextPostData | RequestFormDataPostData | RequestBinaryPostData | null | undefined;
+export type Cookie = {
+    name: string;
+    value: string;
+    domain?: string;
+    path?: string;
+    expires?: string;
+    maxAge?: string;
+    secure?: boolean;
+    httpOnly?: boolean;
+    sameSite?: string;
+};
+export type Request = {
+    url: string;
+    method: HttpMethod;
+    headers: HttpHeaders;
+    postData?: RequestPostData;
+};
+export type Response = {
+    url: string;
+    status: number;
+    statusText: string;
+    headers: HttpHeaders;
+    contentType: string;
+    size: number | null;
+    responseTime: Timestamp;
+};
+export type Initiator = {
+    type: string;
+    url?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+};
+export type ResourceType = 'XHR' | 'Fetch' | 'Other';
+export type RequestOverride = {
+    status?: number;
+    body?: string;
+};
+export type HttpEventMap = {
+    'request-sent': {
+        requestId: RequestId;
+        request: Request;
+        timestamp: Timestamp;
+        initiator: Initiator;
+        type: ResourceType;
+    };
+    'response-received': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        type: ResourceType;
+        response: Response;
+    };
+    'request-completed': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        duration: number;
+        size: number | null;
+        ttfb: number;
+    };
+    'request-failed': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        type: ResourceType;
+        error: string;
+        canceled: boolean;
+    };
+    'request-progress': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
+    'get-response-body': {
+        requestId: RequestId;
+    };
+    'response-body': {
+        requestId: RequestId;
+        body: string | null;
+    };
+    'set-overrides': {
+        overrides: [string, RequestOverride][];
+    };
+};

package/dist/src/shared/sse-events.d.ts

@@ -1,4 +1,4 @@
-import { Response } from './client';
+import { Response } from './http-events';
 export type SSEConnectionStatus = 'connecting' | 'open' | 'closed';
 export type SSERequestId = string;
 export type SSEOpenEvent = {

package/dist/src/ui/state/hooks.d.ts

@@ -7,9 +7,9 @@ export declare const useSelectedRequestId: () => string | null;
 export declare const useIsRecording: () => boolean;
 export declare const useNetworkActivityActions: () => {
     setRecording: (isRecording: boolean) => void;
-    setSelectedRequest: (requestId: import('../../shared/client').RequestId | null) => void;
+    setSelectedRequest: (requestId: import('../../shared/http-events').RequestId | null) => void;
     clearRequests: () => void;
-    addOverride: (requestUrl: string, override: import('../../shared/client').RequestOverride) => void;
+    addOverride: (requestUrl: string, override: import('../../shared/http-events').RequestOverride) => void;
     clearOverride: (requestUrl: string) => void;
 };
 export declare const useNetworkActivityClientManagement: () => {
@@ -17,5 +17,5 @@ export declare const useNetworkActivityClientManagement: () => {
     cleanupClient: () => void;
 };
 export declare const useWebSocketMessages: (requestId: string) => import('./model').WebSocketMessage[];
-export declare const useOverrides: () => Map<string, import('../../shared/client').RequestOverride>;
+export declare const useOverrides: () => Map<string, import('../../shared/http-events').RequestOverride>;
 export declare const useClientUISettings: () => import('../../shared/client').NetworkActivityClientUISettings | null;

package/dist/src/ui/state/model.d.ts

@@ -43,6 +43,11 @@ export type HttpNetworkEntry = {
     size?: number;
     initiator?: Initiator;
     resourceType?: ResourceType;
+    progress?: {
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
 };
 export type SSEMessage = {
     id: string;
@@ -100,4 +105,9 @@ export type ProcessedRequest = {
     size: number | null;
     method: HttpMethod | 'WS' | 'SSE';
     httpStatus?: number;
+    progress?: {
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
 };