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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/{panel.html → App.html} +3 -3
  2. package/dist/assets/App-CIflVb88.js +24164 -0
  3. package/dist/assets/App-Czu6Vt2P.css +1233 -0
  4. package/dist/react-native.cjs +1 -1
  5. package/dist/react-native.d.ts +1 -90
  6. package/dist/rozenite.config.d.ts +7 -0
  7. package/dist/rozenite.json +1 -1
  8. package/dist/src/react-native/network-inspector.d.ts +8 -0
  9. package/dist/src/react-native/network-requests-registry.d.ts +6 -0
  10. package/dist/src/react-native/useNetworkActivityDevTools.d.ts +2 -0
  11. package/dist/src/react-native/xhr-interceptor.d.ts +38 -0
  12. package/dist/src/shared/client.d.ts +64 -0
  13. package/dist/src/ui/App.d.ts +1 -0
  14. package/dist/src/ui/components/Badge.d.ts +9 -0
  15. package/dist/src/ui/components/Button.d.ts +11 -0
  16. package/dist/src/ui/components/Input.d.ts +3 -0
  17. package/dist/src/ui/components/JsonTree.d.ts +5 -0
  18. package/dist/src/ui/components/RequestList.d.ts +45 -0
  19. package/dist/src/ui/components/ScrollArea.d.ts +4 -0
  20. package/dist/src/ui/components/Separator.d.ts +3 -0
  21. package/dist/src/ui/tabs/CookiesTab.d.ts +8 -0
  22. package/dist/src/ui/tabs/HeadersTab.d.ts +17 -0
  23. package/dist/src/ui/tabs/RequestTab.d.ts +10 -0
  24. package/dist/src/ui/tabs/ResponseTab.d.ts +12 -0
  25. package/dist/src/ui/tabs/TimingTab.d.ts +7 -0
  26. package/dist/src/ui/types.d.ts +23 -0
  27. package/dist/src/ui/utils.d.ts +2 -0
  28. package/dist/src/ui/views/InspectorView.d.ts +5 -0
  29. package/dist/src/ui/views/LoadingView.d.ts +1 -0
  30. package/dist/useNetworkActivityDevTools.cjs +360 -0
  31. package/dist/useNetworkActivityDevTools.js +108 -236
  32. package/package.json +23 -16
  33. package/postcss.config.js +6 -0
  34. package/rozenite.config.ts +1 -1
  35. package/src/react-native/network-inspector.ts +113 -260
  36. package/src/react-native/network-requests-registry.ts +7 -77
  37. package/src/react-native/useNetworkActivityDevTools.ts +1 -1
  38. package/src/react-native/xhr-interceptor.ts +2 -2
  39. package/src/react-native/xml-request.d.ts +11 -1
  40. package/src/shared/client.ts +80 -0
  41. package/src/ui/App.tsx +19 -0
  42. package/src/ui/components/Badge.tsx +36 -0
  43. package/src/ui/components/Button.tsx +56 -0
  44. package/src/ui/components/Input.tsx +22 -0
  45. package/src/ui/components/JsonTree.tsx +37 -0
  46. package/src/ui/components/RequestList.tsx +376 -0
  47. package/src/ui/components/ScrollArea.tsx +48 -0
  48. package/src/ui/components/Separator.tsx +31 -0
  49. package/src/ui/components/Tabs.tsx +55 -0
  50. package/src/ui/globals.css +90 -0
  51. package/src/ui/tabs/CookiesTab.tsx +290 -0
  52. package/src/ui/tabs/HeadersTab.tsx +117 -0
  53. package/src/ui/tabs/RequestTab.tsx +72 -0
  54. package/src/ui/tabs/ResponseTab.tsx +140 -0
  55. package/src/ui/tabs/TimingTab.tsx +71 -0
  56. package/src/ui/types.ts +30 -0
  57. package/src/ui/utils.ts +5 -97
  58. package/src/ui/views/InspectorView.tsx +349 -0
  59. package/src/ui/views/LoadingView.tsx +19 -0
  60. package/tailwind.config.ts +93 -0
  61. package/dist/assets/panel-BNxB_KsS.js +0 -16663
  62. package/dist/assets/panel-DXGMsavf.css +0 -555
  63. package/src/types/client.ts +0 -111
  64. package/src/types/network.ts +0 -32
  65. package/src/ui/components.module.css +0 -158
  66. package/src/ui/components.tsx +0 -241
  67. package/src/ui/network-details.module.css +0 -197
  68. package/src/ui/network-details.tsx +0 -345
  69. package/src/ui/network-list.module.css +0 -128
  70. package/src/ui/network-list.tsx +0 -240
  71. package/src/ui/network-toolbar.module.css +0 -9
  72. package/src/ui/network-toolbar.tsx +0 -34
  73. package/src/ui/panel.module.css +0 -67
  74. package/src/ui/panel.tsx +0 -318
  75. package/src/ui/tanstack-query.tsx +0 -204
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  exports.useNetworkActivityDevTools = void 0;
4
4
  if (process.env.NODE_ENV !== "production") {
5
- exports.useNetworkActivityDevTools = require("./useNetworkActivityDevTools.js").useNetworkActivityDevTools;
5
+ exports.useNetworkActivityDevTools = require("./useNetworkActivityDevTools.cjs").useNetworkActivityDevTools;
6
6
  } else {
7
7
  exports.useNetworkActivityDevTools = () => null;
8
8
  }
@@ -1,90 +1 @@
1
- import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
2
-
3
- declare type NetworkActivityEventMap = {
4
- 'network-enable': unknown;
5
- 'network-disable': unknown;
6
- 'Network.requestWillBeSent': {
7
- requestId: NetworkRequestId;
8
- loaderId: NetworkLoaderId;
9
- documentURL: string;
10
- request: NetworkRequest;
11
- timestamp: NetworkMonotonicTime;
12
- wallTime: NetworkTimeSinceEpoch;
13
- initiator: NetworkInitiator;
14
- type?: NetworkResourceType;
15
- };
16
- 'Network.responseReceived': {
17
- requestId: NetworkRequestId;
18
- loaderId: NetworkLoaderId;
19
- timestamp: NetworkMonotonicTime;
20
- type: NetworkResourceType;
21
- response: NetworkResponse;
22
- };
23
- 'Network.dataReceived': {
24
- requestId: NetworkRequestId;
25
- timestamp: NetworkMonotonicTime;
26
- dataLength: number;
27
- encodedDataLength: number;
28
- };
29
- 'Network.loadingFinished': {
30
- requestId: NetworkRequestId;
31
- timestamp: NetworkMonotonicTime;
32
- encodedDataLength: number;
33
- };
34
- 'Network.loadingFailed': {
35
- requestId: NetworkRequestId;
36
- timestamp: NetworkMonotonicTime;
37
- type: NetworkResourceType;
38
- errorText: string;
39
- canceled?: boolean;
40
- };
41
- 'Network.getResponseBody': {
42
- requestId: NetworkRequestId;
43
- };
44
- 'Network.responseBodyReceived': {
45
- requestId: NetworkRequestId;
46
- body: string;
47
- base64Encoded: boolean;
48
- };
49
- };
50
-
51
- declare type NetworkInitiator = {
52
- type: string;
53
- url?: string;
54
- lineNumber?: number;
55
- columnNumber?: number;
56
- };
57
-
58
- declare type NetworkLoaderId = string;
59
-
60
- declare type NetworkMonotonicTime = number;
61
-
62
- declare type NetworkRequest = {
63
- url: string;
64
- method: string;
65
- headers: Record<string, string>;
66
- postData?: string;
67
- hasPostData?: boolean;
68
- };
69
-
70
- declare type NetworkRequestId = string;
71
-
72
- declare type NetworkResourceType = 'Document' | 'Stylesheet' | 'Image' | 'Media' | 'Font' | 'Script' | 'XHR' | 'Fetch' | 'EventSource' | 'WebSocket' | 'Manifest' | 'Other' | 'Ping' | 'CSPViolationReport' | 'Preflight' | 'Subresource';
73
-
74
- declare type NetworkResponse = {
75
- url: string;
76
- status: number;
77
- statusText: string;
78
- headers: Record<string, string>;
79
- mimeType: string;
80
- encodedDataLength: number;
81
- responseTime: NetworkTimeSinceEpoch;
82
- };
83
-
84
- declare type NetworkTimeSinceEpoch = number;
85
-
86
- export declare let useNetworkActivityDevTools: useNetworkActivityDevTools_2;
87
-
88
- declare const useNetworkActivityDevTools_2: () => RozeniteDevToolsClient<NetworkActivityEventMap> | null;
89
-
90
- export { }
1
+ export declare let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
@@ -0,0 +1,7 @@
1
+ declare const _default: {
2
+ panels: {
3
+ name: string;
4
+ source: string;
5
+ }[];
6
+ };
7
+ export default _default;
@@ -1 +1 @@
1
- {"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.4","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/panel.html"}]}
1
+ {"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.6","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
@@ -0,0 +1,8 @@
1
+ import { NetworkActivityDevToolsClient } from '../shared/client';
2
+ export type NetworkInspector = {
3
+ enable: () => void;
4
+ disable: () => void;
5
+ isEnabled: () => boolean;
6
+ dispose: () => void;
7
+ };
8
+ export declare const getNetworkInspector: (pluginClient: NetworkActivityDevToolsClient) => NetworkInspector;
@@ -0,0 +1,6 @@
1
+ export type NetworkRequestRegistry = {
2
+ addEntry: (id: string, request: XMLHttpRequest) => void;
3
+ getEntry: (id: string) => XMLHttpRequest | null;
4
+ clear: () => void;
5
+ };
6
+ export declare const getNetworkRequestsRegistry: () => NetworkRequestRegistry;
@@ -0,0 +1,2 @@
1
+ import { NetworkActivityEventMap } from '../shared/client';
2
+ export declare const useNetworkActivityDevTools: () => import('@rozenite/plugin-bridge').RozeniteDevToolsClient<NetworkActivityEventMap> | null;
@@ -0,0 +1,38 @@
1
+ type XHRInterceptorOpenCallback = (method: string, url: string, request: XMLHttpRequest) => void;
2
+ type XHRInterceptorSendCallback = (data: string, request: XMLHttpRequest) => void;
3
+ type XHRInterceptorRequestHeaderCallback = (header: string, value: string, request: XMLHttpRequest) => void;
4
+ type XHRInterceptorHeaderReceivedCallback = (responseContentType: string | undefined, responseSize: number | undefined, allHeaders: string, request: XMLHttpRequest) => void;
5
+ type XHRInterceptorResponseCallback = (status: number, timeout: number, response: string, responseURL: string, responseType: string, request: XMLHttpRequest) => void;
6
+ /**
7
+ * A network interceptor which monkey-patches XMLHttpRequest methods
8
+ * to gather all network requests/responses, in order to show their
9
+ * information in the React Native inspector development tool.
10
+ * This supports interception with XMLHttpRequest API, including Fetch API
11
+ * and any other third party libraries that depend on XMLHttpRequest.
12
+ */
13
+ export declare const XHRInterceptor: {
14
+ /**
15
+ * Invoked before XMLHttpRequest.open(...) is called.
16
+ */
17
+ setOpenCallback(callback: XHRInterceptorOpenCallback): void;
18
+ /**
19
+ * Invoked before XMLHttpRequest.send(...) is called.
20
+ */
21
+ setSendCallback(callback: XHRInterceptorSendCallback): void;
22
+ /**
23
+ * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
24
+ */
25
+ setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback): void;
26
+ /**
27
+ * Invoked after xhr's readyState becomes xhr.DONE.
28
+ */
29
+ setResponseCallback(callback: XHRInterceptorResponseCallback): void;
30
+ /**
31
+ * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
32
+ */
33
+ setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback): void;
34
+ isInterceptorEnabled(): boolean;
35
+ enableInterception(): void;
36
+ disableInterception(): void;
37
+ };
38
+ export {};
@@ -0,0 +1,64 @@
1
+ import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
2
+ export type RequestId = string;
3
+ export type Timestamp = number;
4
+ export type Request = {
5
+ url: string;
6
+ method: string;
7
+ headers: Record<string, string>;
8
+ postData?: string;
9
+ };
10
+ export type Response = {
11
+ url: string;
12
+ status: number;
13
+ statusText: string;
14
+ headers: Record<string, string>;
15
+ contentType: string;
16
+ size: number;
17
+ responseTime: Timestamp;
18
+ };
19
+ export type Initiator = {
20
+ type: string;
21
+ url?: string;
22
+ lineNumber?: number;
23
+ columnNumber?: number;
24
+ };
25
+ export type ResourceType = 'XHR' | 'Fetch' | 'Other';
26
+ export type NetworkActivityEventMap = {
27
+ 'network-enable': unknown;
28
+ 'network-disable': unknown;
29
+ 'request-sent': {
30
+ requestId: RequestId;
31
+ request: Request;
32
+ timestamp: Timestamp;
33
+ initiator: Initiator;
34
+ type: ResourceType;
35
+ };
36
+ 'response-received': {
37
+ requestId: RequestId;
38
+ timestamp: Timestamp;
39
+ type: ResourceType;
40
+ response: Response;
41
+ };
42
+ 'request-completed': {
43
+ requestId: RequestId;
44
+ timestamp: Timestamp;
45
+ duration: number;
46
+ size: number;
47
+ ttfb: number;
48
+ };
49
+ 'request-failed': {
50
+ requestId: RequestId;
51
+ timestamp: Timestamp;
52
+ type: ResourceType;
53
+ error: string;
54
+ canceled: boolean;
55
+ };
56
+ 'get-response-body': {
57
+ requestId: RequestId;
58
+ };
59
+ 'response-body': {
60
+ requestId: RequestId;
61
+ body: string | null;
62
+ };
63
+ };
64
+ export type NetworkActivityDevToolsClient = RozeniteDevToolsClient<NetworkActivityEventMap>;
@@ -0,0 +1 @@
1
+ export default function NetworkActivityPanel(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,9 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ import * as React from 'react';
3
+ declare const badgeVariants: (props?: ({
4
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
5
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
+ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
7
+ }
8
+ declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
9
+ export { Badge, badgeVariants };
@@ -0,0 +1,11 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ import * as React from 'react';
3
+ declare const buttonVariants: (props?: ({
4
+ variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
5
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
6
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
8
+ asChild?: boolean;
9
+ }
10
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
11
+ export { Button, buttonVariants };
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
3
+ export { Input };
@@ -0,0 +1,5 @@
1
+ export type JsonTreeProps = {
2
+ data: unknown;
3
+ shouldExpandNodeInitially?: () => boolean;
4
+ };
5
+ export declare const JsonTree: ({ data, shouldExpandNodeInitially, }: JsonTreeProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,45 @@
1
+ import { NetworkEntry } from '../types';
2
+ import { RequestId } from '../../shared/client';
3
+ import * as React from 'react';
4
+ type NetworkRequest = {
5
+ id: string;
6
+ name: string;
7
+ status: number;
8
+ method: string;
9
+ domain: string;
10
+ path: string;
11
+ size: string;
12
+ time: string;
13
+ type: string;
14
+ initiator: string;
15
+ startTime: string;
16
+ requestBody?: {
17
+ type: string;
18
+ data: string;
19
+ };
20
+ responseBody?: {
21
+ type: string;
22
+ data: string | null;
23
+ };
24
+ };
25
+ type RequestListProps = {
26
+ networkEntries: Map<RequestId, NetworkEntry>;
27
+ selectedRequestId: RequestId | null;
28
+ onRequestSelect: (requestId: RequestId) => void;
29
+ };
30
+ declare const formatSize: (bytes: number) => string;
31
+ declare const formatDuration: (duration: number) => string;
32
+ declare const formatStartTime: (startTime: number) => string;
33
+ declare const extractDomainAndPath: (url: string) => {
34
+ domain: string;
35
+ path: string;
36
+ };
37
+ declare const generateName: (url: string) => string;
38
+ declare const formatInitiator: (initiator: any) => string;
39
+ declare const mapResourceType: (type: string) => string;
40
+ declare const getTypeColor: (type: string) => string;
41
+ declare const getStatusColor: (status: number) => "text-gray-400" | "text-green-400" | "text-yellow-400" | "text-red-400";
42
+ declare const processNetworkEntries: (networkEntries: Map<RequestId, NetworkEntry>) => NetworkRequest[];
43
+ export declare const RequestList: React.FC<RequestListProps>;
44
+ export { formatSize, formatDuration, formatStartTime, extractDomainAndPath, generateName, formatInitiator, mapResourceType, getTypeColor, getStatusColor, processNetworkEntries, };
45
+ export type { NetworkRequest };
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ declare const ScrollArea: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
3
+ declare const ScrollBar: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
4
+ export { ScrollArea, ScrollBar };
@@ -0,0 +1,3 @@
1
+ import * as React from 'react';
2
+ declare const Separator: React.ForwardRefExoticComponent<React.RefAttributes<never>>;
3
+ export { Separator };
@@ -0,0 +1,8 @@
1
+ import { NetworkEntry } from '../types';
2
+ export type CookiesTabProps = {
3
+ selectedRequest: {
4
+ id: string;
5
+ };
6
+ networkEntries: Map<string, NetworkEntry>;
7
+ };
8
+ export declare const CookiesTab: ({ selectedRequest, networkEntries, }: CookiesTabProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,17 @@
1
+ import { NetworkEntry } from '../types';
2
+ export type HeadersTabProps = {
3
+ selectedRequest: {
4
+ id: string;
5
+ domain: string;
6
+ path: string;
7
+ method: string;
8
+ status: number;
9
+ requestBody?: {
10
+ type: string;
11
+ data: string;
12
+ };
13
+ };
14
+ networkEntries: Map<string, NetworkEntry>;
15
+ getStatusColor: (status: number) => string;
16
+ };
17
+ export declare const HeadersTab: ({ selectedRequest, networkEntries, getStatusColor, }: HeadersTabProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,10 @@
1
+ export type RequestTabProps = {
2
+ selectedRequest: {
3
+ method: string;
4
+ requestBody?: {
5
+ type: string;
6
+ data: string;
7
+ };
8
+ };
9
+ };
10
+ export declare const RequestTab: ({ selectedRequest }: RequestTabProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ export type ResponseTabProps = {
2
+ selectedRequest: {
3
+ id: string;
4
+ type: string;
5
+ responseBody?: {
6
+ type: string;
7
+ data: string | null;
8
+ };
9
+ };
10
+ onRequestResponseBody: (requestId: string) => void;
11
+ };
12
+ export declare const ResponseTab: ({ selectedRequest, onRequestResponseBody, }: ResponseTabProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { NetworkRequest } from '../components/RequestList';
2
+ import { NetworkEntry } from '../types';
3
+ export type TimingTabProps = {
4
+ selectedRequest: NetworkRequest | null;
5
+ networkEntries: Map<string, NetworkEntry>;
6
+ };
7
+ export declare const TimingTab: ({ selectedRequest, networkEntries, }: TimingTabProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { RequestId, Request, Response, Initiator, ResourceType } from '../shared/client';
2
+ export type NetworkEntry = {
3
+ requestId: RequestId;
4
+ url: string;
5
+ method: string;
6
+ headers: Record<string, string>;
7
+ postData?: string;
8
+ status: 'pending' | 'loading' | 'finished' | 'failed';
9
+ startTime: number;
10
+ endTime?: number;
11
+ duration?: number;
12
+ ttfb?: number;
13
+ type?: ResourceType;
14
+ initiator?: Initiator;
15
+ request?: Request;
16
+ response?: Response;
17
+ responseBody?: {
18
+ body: string | null;
19
+ };
20
+ error?: string;
21
+ canceled?: boolean;
22
+ size?: number;
23
+ };
@@ -0,0 +1,2 @@
1
+ import { ClassValue } from 'clsx';
2
+ export declare function cn(...inputs: ClassValue[]): string;
@@ -0,0 +1,5 @@
1
+ import { NetworkActivityDevToolsClient } from '../../shared/client';
2
+ export type InspectorViewProps = {
3
+ client: NetworkActivityDevToolsClient;
4
+ };
5
+ export declare const InspectorView: ({ client }: InspectorViewProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const LoadingView: () => import("react/jsx-runtime").JSX.Element;