@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0-alpha.9
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.
- package/dist/App.html +2 -2
- package/dist/assets/{App-lNMijPJ4.js → App-CA1Fbh0I.js} +11995 -10804
- package/dist/assets/{App-R2ZMH9wJ.css → App-DoHQsY5s.css} +46 -0
- package/dist/event-source.cjs +22 -0
- package/dist/event-source.js +23 -0
- package/dist/rozenite.json +1 -1
- package/dist/src/react-native/{network-inspector.d.ts → http/network-inspector.d.ts} +1 -1
- package/dist/src/react-native/sse/event-source.d.ts +2 -0
- package/dist/src/react-native/sse/sse-inspector.d.ts +9 -0
- package/dist/src/react-native/sse/sse-interceptor.d.ts +36 -0
- package/dist/src/react-native/sse/types.d.ts +6 -0
- package/dist/src/react-native/utils.d.ts +6 -0
- package/dist/src/react-native/websocket/websocket-inspector.d.ts +9 -0
- package/dist/src/react-native/websocket/websocket-interceptor.d.ts +74 -0
- package/dist/src/shared/client.d.ts +5 -2
- package/dist/src/shared/sse-events.d.ts +35 -0
- package/dist/src/shared/websocket-events.d.ts +60 -0
- package/dist/src/ui/components/Badge.d.ts +1 -1
- package/dist/src/ui/components/Button.d.ts +1 -1
- package/dist/src/ui/components/JsonTreeCopyableItem.d.ts +7 -0
- package/dist/src/ui/components/RequestList.d.ts +6 -26
- package/dist/src/ui/components/SidePanel.d.ts +1 -0
- package/dist/src/ui/components/Toolbar.d.ts +1 -0
- package/dist/src/ui/hooks/useCopyToClipboard.d.ts +4 -0
- package/dist/src/ui/state/derived.d.ts +5 -0
- package/dist/src/ui/state/hooks.d.ts +17 -0
- package/dist/src/ui/state/model.d.ts +98 -0
- package/dist/src/ui/state/store.d.ts +24 -0
- package/dist/src/ui/tabs/CookiesTab.d.ts +3 -6
- package/dist/src/ui/tabs/HeadersTab.d.ts +3 -15
- package/dist/src/ui/tabs/MessagesTab.d.ts +5 -0
- package/dist/src/ui/tabs/RequestTab.d.ts +2 -7
- package/dist/src/ui/tabs/ResponseTab.d.ts +2 -8
- package/dist/src/ui/tabs/SSEMessagesTab.d.ts +5 -0
- package/dist/src/ui/tabs/TimingTab.d.ts +3 -5
- package/dist/src/ui/types.d.ts +4 -1
- package/dist/src/ui/utils/assert.d.ts +1 -0
- package/dist/src/ui/utils/copyToClipboard.d.ts +1 -0
- package/dist/src/ui/utils/getId.d.ts +1 -0
- package/dist/src/ui/utils/getStatusColor.d.ts +1 -0
- package/dist/useNetworkActivityDevTools.cjs +423 -34
- package/dist/useNetworkActivityDevTools.js +421 -34
- package/package.json +19 -8
- package/src/react-native/{network-inspector.ts → http/network-inspector.ts} +13 -34
- package/src/react-native/{xml-request.d.ts → http/xml-request.d.ts} +1 -0
- package/src/react-native/sse/event-source.ts +25 -0
- package/src/react-native/sse/sse-inspector.ts +117 -0
- package/src/react-native/sse/sse-interceptor.ts +162 -0
- package/src/react-native/sse/types.ts +9 -0
- package/src/react-native/useNetworkActivityDevTools.ts +75 -1
- package/src/react-native/utils.ts +43 -0
- package/src/react-native/websocket/websocket-inspector.ts +180 -0
- package/src/react-native/websocket/websocket-interceptor.d.ts +4 -0
- package/src/react-native/websocket/websocket-interceptor.ts +166 -0
- package/src/shared/client.ts +6 -2
- package/src/shared/sse-events.ts +44 -0
- package/src/shared/websocket-events.ts +79 -0
- package/src/ui/components/JsonTree.tsx +13 -0
- package/src/ui/components/JsonTreeCopyableItem.tsx +33 -0
- package/src/ui/components/RequestList.tsx +42 -124
- package/src/ui/components/SidePanel.tsx +323 -0
- package/src/ui/components/Tabs.tsx +1 -1
- package/src/ui/components/Toolbar.tsx +45 -0
- package/src/ui/hooks/useCopyToClipboard.ts +28 -0
- package/src/ui/state/derived.ts +112 -0
- package/src/ui/state/hooks.ts +44 -0
- package/src/ui/state/model.ts +129 -0
- package/src/ui/state/store.ts +559 -0
- package/src/ui/tabs/CookiesTab.tsx +162 -176
- package/src/ui/tabs/HeadersTab.tsx +23 -30
- package/src/ui/tabs/MessagesTab.tsx +276 -0
- package/src/ui/tabs/RequestTab.tsx +8 -13
- package/src/ui/tabs/ResponseTab.tsx +6 -10
- package/src/ui/tabs/SSEMessagesTab.tsx +213 -0
- package/src/ui/tabs/TimingTab.tsx +30 -43
- package/src/ui/types.ts +4 -1
- package/src/ui/utils/assert.ts +5 -0
- package/src/ui/utils/copyToClipboard.ts +3 -0
- package/src/ui/utils/getId.ts +10 -0
- package/src/ui/utils/getStatusColor.ts +15 -0
- package/src/ui/views/InspectorView.tsx +24 -320
- package/tailwind.config.ts +3 -0
- package/vite.config.ts +12 -0
- /package/dist/src/react-native/{network-requests-registry.d.ts → http/network-requests-registry.d.ts} +0 -0
- /package/dist/src/react-native/{xhr-interceptor.d.ts → http/xhr-interceptor.d.ts} +0 -0
- /package/src/react-native/{network-requests-registry.ts → http/network-requests-registry.ts} +0 -0
- /package/src/react-native/{xhr-interceptor.ts → http/xhr-interceptor.ts} +0 -0
|
@@ -553,6 +553,9 @@ video {
|
|
|
553
553
|
.z-10 {
|
|
554
554
|
z-index: 10;
|
|
555
555
|
}
|
|
556
|
+
.-m-2 {
|
|
557
|
+
margin: -0.5rem;
|
|
558
|
+
}
|
|
556
559
|
.m-0 {
|
|
557
560
|
margin: 0px;
|
|
558
561
|
}
|
|
@@ -562,9 +565,18 @@ video {
|
|
|
562
565
|
.mb-3 {
|
|
563
566
|
margin-bottom: 0.75rem;
|
|
564
567
|
}
|
|
568
|
+
.ml-0 {
|
|
569
|
+
margin-left: 0px;
|
|
570
|
+
}
|
|
571
|
+
.ml-2 {
|
|
572
|
+
margin-left: 0.5rem;
|
|
573
|
+
}
|
|
565
574
|
.mt-2 {
|
|
566
575
|
margin-top: 0.5rem;
|
|
567
576
|
}
|
|
577
|
+
.inline-block {
|
|
578
|
+
display: inline-block;
|
|
579
|
+
}
|
|
568
580
|
.flex {
|
|
569
581
|
display: flex;
|
|
570
582
|
}
|
|
@@ -613,6 +625,12 @@ video {
|
|
|
613
625
|
.h-screen {
|
|
614
626
|
height: 100vh;
|
|
615
627
|
}
|
|
628
|
+
.max-h-96 {
|
|
629
|
+
max-height: 24rem;
|
|
630
|
+
}
|
|
631
|
+
.min-h-0 {
|
|
632
|
+
min-height: 0px;
|
|
633
|
+
}
|
|
616
634
|
.w-1\/2 {
|
|
617
635
|
width: 50%;
|
|
618
636
|
}
|
|
@@ -649,12 +667,19 @@ video {
|
|
|
649
667
|
.min-w-0 {
|
|
650
668
|
min-width: 0px;
|
|
651
669
|
}
|
|
670
|
+
.max-w-xs {
|
|
671
|
+
max-width: 20rem;
|
|
672
|
+
}
|
|
652
673
|
.flex-1 {
|
|
653
674
|
flex: 1 1 0%;
|
|
654
675
|
}
|
|
655
676
|
.shrink-0 {
|
|
656
677
|
flex-shrink: 0;
|
|
657
678
|
}
|
|
679
|
+
.translate-y-0\.75 {
|
|
680
|
+
--tw-translate-y: 0.1875rem;
|
|
681
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
682
|
+
}
|
|
658
683
|
@keyframes spin {
|
|
659
684
|
|
|
660
685
|
to {
|
|
@@ -712,6 +737,11 @@ video {
|
|
|
712
737
|
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
713
738
|
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
|
714
739
|
}
|
|
740
|
+
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
741
|
+
--tw-space-y-reverse: 0;
|
|
742
|
+
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
743
|
+
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
744
|
+
}
|
|
715
745
|
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
|
716
746
|
--tw-space-y-reverse: 0;
|
|
717
747
|
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
@@ -731,6 +761,9 @@ video {
|
|
|
731
761
|
.overflow-x-auto {
|
|
732
762
|
overflow-x: auto;
|
|
733
763
|
}
|
|
764
|
+
.overflow-y-auto {
|
|
765
|
+
overflow-y: auto;
|
|
766
|
+
}
|
|
734
767
|
.truncate {
|
|
735
768
|
overflow: hidden;
|
|
736
769
|
text-overflow: ellipsis;
|
|
@@ -961,6 +994,9 @@ video {
|
|
|
961
994
|
.font-semibold {
|
|
962
995
|
font-weight: 600;
|
|
963
996
|
}
|
|
997
|
+
.capitalize {
|
|
998
|
+
text-transform: capitalize;
|
|
999
|
+
}
|
|
964
1000
|
.italic {
|
|
965
1001
|
font-style: italic;
|
|
966
1002
|
}
|
|
@@ -1057,6 +1093,9 @@ video {
|
|
|
1057
1093
|
.underline-offset-4 {
|
|
1058
1094
|
text-underline-offset: 4px;
|
|
1059
1095
|
}
|
|
1096
|
+
.opacity-0 {
|
|
1097
|
+
opacity: 0;
|
|
1098
|
+
}
|
|
1060
1099
|
.outline {
|
|
1061
1100
|
outline-style: solid;
|
|
1062
1101
|
}
|
|
@@ -1149,6 +1188,10 @@ video {
|
|
|
1149
1188
|
--tw-text-opacity: 1;
|
|
1150
1189
|
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
|
|
1151
1190
|
}
|
|
1191
|
+
.hover\:text-gray-300:hover {
|
|
1192
|
+
--tw-text-opacity: 1;
|
|
1193
|
+
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
|
|
1194
|
+
}
|
|
1152
1195
|
.hover\:text-red-300:hover {
|
|
1153
1196
|
--tw-text-opacity: 1;
|
|
1154
1197
|
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
|
|
@@ -1195,6 +1238,9 @@ video {
|
|
|
1195
1238
|
.disabled\:opacity-50:disabled {
|
|
1196
1239
|
opacity: 0.5;
|
|
1197
1240
|
}
|
|
1241
|
+
.group:hover .group-hover\:opacity-100 {
|
|
1242
|
+
opacity: 1;
|
|
1243
|
+
}
|
|
1198
1244
|
.data-\[state\=active\]\:bg-background[data-state="active"] {
|
|
1199
1245
|
background-color: hsl(var(--background));
|
|
1200
1246
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const NOOP = () => {
|
|
3
|
+
};
|
|
4
|
+
const MOCK_EVENT_SOURCE = class {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.open = NOOP;
|
|
7
|
+
this.close = NOOP;
|
|
8
|
+
this.addEventListener = NOOP;
|
|
9
|
+
this.removeEventListener = NOOP;
|
|
10
|
+
this.dispatch = NOOP;
|
|
11
|
+
this.removeAllEventListeners = NOOP;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const getEventSource = () => {
|
|
15
|
+
try {
|
|
16
|
+
const { default: EventSource } = require("react-native-sse");
|
|
17
|
+
return EventSource;
|
|
18
|
+
} catch {
|
|
19
|
+
return MOCK_EVENT_SOURCE;
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
exports.getEventSource = getEventSource;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const NOOP = () => {
|
|
2
|
+
};
|
|
3
|
+
const MOCK_EVENT_SOURCE = class {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.open = NOOP;
|
|
6
|
+
this.close = NOOP;
|
|
7
|
+
this.addEventListener = NOOP;
|
|
8
|
+
this.removeEventListener = NOOP;
|
|
9
|
+
this.dispatch = NOOP;
|
|
10
|
+
this.removeAllEventListeners = NOOP;
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const getEventSource = () => {
|
|
14
|
+
try {
|
|
15
|
+
const { default: EventSource } = require("react-native-sse");
|
|
16
|
+
return EventSource;
|
|
17
|
+
} catch {
|
|
18
|
+
return MOCK_EVENT_SOURCE;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
getEventSource as g
|
|
23
|
+
};
|
package/dist/rozenite.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.
|
|
1
|
+
{"name":"@rozenite/network-activity-plugin","version":"1.0.0-alpha.8","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SSEEventMap } from '../../shared/sse-events';
|
|
2
|
+
export type SSEInspector = {
|
|
3
|
+
enable: () => void;
|
|
4
|
+
disable: () => void;
|
|
5
|
+
isEnabled: () => boolean;
|
|
6
|
+
dispose: () => void;
|
|
7
|
+
on: <TEventType extends keyof SSEEventMap>(event: TEventType, callback: (data: SSEEventMap[TEventType]) => void) => () => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const getSSEInspector: () => SSEInspector;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { default as EventSource, MessageEvent, ErrorEvent, OpenEvent, CloseEvent, TimeoutEvent, ExceptionEvent } from 'react-native-sse';
|
|
2
|
+
export type SSEInterceptorConnectCallback = (url: string, request: EventSource) => void;
|
|
3
|
+
export type SSEInterceptorMessageCallback = (event: MessageEvent, request: EventSource) => void;
|
|
4
|
+
export type SSEInterceptorErrorCallback = (error: ErrorEvent | TimeoutEvent | ExceptionEvent, request: EventSource) => void;
|
|
5
|
+
export type SSEInterceptorOpenEventCallback = (event: OpenEvent, request: EventSource) => void;
|
|
6
|
+
export type SSEInterceptorCloseCallback = (event: CloseEvent, request: EventSource) => void;
|
|
7
|
+
/**
|
|
8
|
+
* A network interceptor which monkey-patches EventSource open method
|
|
9
|
+
* to gather all SSE connections and events, in order to show their
|
|
10
|
+
* information in the Network Activity panel.
|
|
11
|
+
*/
|
|
12
|
+
export declare const SSEInterceptor: {
|
|
13
|
+
/**
|
|
14
|
+
* Invoked when EventSource.open() is called (connection attempt starting).
|
|
15
|
+
*/
|
|
16
|
+
setConnectCallback(callback: SSEInterceptorConnectCallback): void;
|
|
17
|
+
/**
|
|
18
|
+
* Invoked when a message event is received.
|
|
19
|
+
*/
|
|
20
|
+
setMessageCallback(callback: SSEInterceptorMessageCallback): void;
|
|
21
|
+
/**
|
|
22
|
+
* Invoked when an error event occurs.
|
|
23
|
+
*/
|
|
24
|
+
setErrorCallback(callback: SSEInterceptorErrorCallback): void;
|
|
25
|
+
/**
|
|
26
|
+
* Invoked when the connection is successfully opened (open event fired).
|
|
27
|
+
*/
|
|
28
|
+
setOpenEventCallback(callback: SSEInterceptorOpenEventCallback): void;
|
|
29
|
+
/**
|
|
30
|
+
* Invoked when the connection is closed.
|
|
31
|
+
*/
|
|
32
|
+
setCloseCallback(callback: SSEInterceptorCloseCallback): void;
|
|
33
|
+
isInterceptorEnabled(): boolean;
|
|
34
|
+
enableInterception(): void;
|
|
35
|
+
disableInterception(): void;
|
|
36
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as EventSource } from 'react-native-sse';
|
|
2
|
+
export interface EventSourceWithInternals<E extends string = never> extends EventSource<E> {
|
|
3
|
+
url: string;
|
|
4
|
+
/** Used internally to mark the underlying XHR to skip it in XHR interceptor. */
|
|
5
|
+
_xhr?: XMLHttpRequest;
|
|
6
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
|
2
|
+
type LastOf<T> = UnionToIntersection<T extends unknown ? () => T : never> extends () => infer R ? R : never;
|
|
3
|
+
type Push<T extends unknown[], V> = [...T, V];
|
|
4
|
+
export type UnionToTuple<T, L = LastOf<T>> = [T] extends [never] ? [] : Push<UnionToTuple<Exclude<T, L>>, L>;
|
|
5
|
+
export declare const getContentType: (request: XMLHttpRequest) => string;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { WebSocketEventMap } from '../../shared/websocket-events';
|
|
2
|
+
export type WebSocketInspector = {
|
|
3
|
+
enable: () => void;
|
|
4
|
+
disable: () => void;
|
|
5
|
+
isEnabled: () => boolean;
|
|
6
|
+
dispose: () => void;
|
|
7
|
+
on: <TEventType extends keyof WebSocketEventMap>(event: TEventType, callback: (data: WebSocketEventMap[TEventType]) => void) => () => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const getWebSocketInspector: () => WebSocketInspector;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { default as WebSocketInterceptor } from 'react-native/Libraries/WebSocket/WebSocketInterceptor';
|
|
2
|
+
export interface WebSocketInterceptor {
|
|
3
|
+
/**
|
|
4
|
+
* Invoked when RCTWebSocketModule.close(...) is called.
|
|
5
|
+
*/
|
|
6
|
+
setCloseCallback(callback: (code: number | null, reason: string | null, socketId: number) => void): void;
|
|
7
|
+
/**
|
|
8
|
+
* Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
|
|
9
|
+
*/
|
|
10
|
+
setSendCallback(callback: (data: string, socketId: number) => void): void;
|
|
11
|
+
/**
|
|
12
|
+
* Invoked when RCTWebSocketModule.connect(...) is called.
|
|
13
|
+
*/
|
|
14
|
+
setConnectCallback(callback: (url: string, protocols: string[] | null, options: string[], socketId: number) => void): void;
|
|
15
|
+
/**
|
|
16
|
+
* Invoked when event "websocketOpen" happens.
|
|
17
|
+
*/
|
|
18
|
+
setOnOpenCallback(callback: (socketId: number) => void): void;
|
|
19
|
+
/**
|
|
20
|
+
* Invoked when event "websocketMessage" happens.
|
|
21
|
+
*/
|
|
22
|
+
setOnMessageCallback(callback: (data: string, socketId: number) => void): void;
|
|
23
|
+
/**
|
|
24
|
+
* Invoked when event "websocketFailed" happens.
|
|
25
|
+
*/
|
|
26
|
+
setOnErrorCallback(callback: (error: string, socketId: number) => void): void;
|
|
27
|
+
/**
|
|
28
|
+
* Invoked when event "websocketClosed" happens.
|
|
29
|
+
*/
|
|
30
|
+
setOnCloseCallback(callback: (error: {
|
|
31
|
+
code: number;
|
|
32
|
+
reason?: string;
|
|
33
|
+
}, socketId: number) => void): void;
|
|
34
|
+
isInterceptorEnabled(): boolean;
|
|
35
|
+
enableInterception(): void;
|
|
36
|
+
disableInterception(): void;
|
|
37
|
+
}
|
|
38
|
+
export interface WebSocketInterceptorPreRN079 {
|
|
39
|
+
/**
|
|
40
|
+
* Invoked when RCTWebSocketModule.close(...) is called.
|
|
41
|
+
*/
|
|
42
|
+
setCloseCallback(callback: (code: number | null, reason: string | null, socketId: number) => void): void;
|
|
43
|
+
/**
|
|
44
|
+
* Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
|
|
45
|
+
*/
|
|
46
|
+
setSendCallback(callback: (data: string, socketId: number) => void): void;
|
|
47
|
+
/**
|
|
48
|
+
* Invoked when RCTWebSocketModule.connect(...) is called.
|
|
49
|
+
*/
|
|
50
|
+
setConnectCallback(callback: (url: string, protocols: string[] | null, options: string[], socketId: number) => void): void;
|
|
51
|
+
/**
|
|
52
|
+
* Invoked when event "websocketOpen" happens.
|
|
53
|
+
*/
|
|
54
|
+
setOnOpenCallback(callback: (socketId: number) => void): void;
|
|
55
|
+
/**
|
|
56
|
+
* Invoked when event "websocketMessage" happens.
|
|
57
|
+
*/
|
|
58
|
+
setOnMessageCallback(callback: (socketId: number, data: string) => void): void;
|
|
59
|
+
/**
|
|
60
|
+
* Invoked when event "websocketFailed" happens.
|
|
61
|
+
*/
|
|
62
|
+
setOnErrorCallback(callback: (socketId: number, error: string) => void): void;
|
|
63
|
+
/**
|
|
64
|
+
* Invoked when event "websocketClosed" happens.
|
|
65
|
+
*/
|
|
66
|
+
setOnCloseCallback(callback: (socketId: number, error: {
|
|
67
|
+
code: number;
|
|
68
|
+
reason?: string;
|
|
69
|
+
}) => void): void;
|
|
70
|
+
isInterceptorEnabled(): boolean;
|
|
71
|
+
enableInterception(): void;
|
|
72
|
+
disableInterception(): void;
|
|
73
|
+
}
|
|
74
|
+
export declare const getWebSocketInterceptor: () => WebSocketInterceptor;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
|
|
2
|
+
import { WebSocketEventMap } from './websocket-events';
|
|
3
|
+
import { SSEEventMap } from './sse-events';
|
|
2
4
|
export type HttpHeaders = Record<string, string>;
|
|
5
|
+
export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
|
|
3
6
|
export type RequestId = string;
|
|
4
7
|
export type Timestamp = number;
|
|
5
8
|
export type Request = {
|
|
6
9
|
url: string;
|
|
7
|
-
method:
|
|
10
|
+
method: HttpMethod;
|
|
8
11
|
headers: HttpHeaders;
|
|
9
12
|
postData?: string;
|
|
10
13
|
};
|
|
@@ -61,5 +64,5 @@ export type NetworkActivityEventMap = {
|
|
|
61
64
|
requestId: RequestId;
|
|
62
65
|
body: string | null;
|
|
63
66
|
};
|
|
64
|
-
};
|
|
67
|
+
} & WebSocketEventMap & SSEEventMap;
|
|
65
68
|
export type NetworkActivityDevToolsClient = RozeniteDevToolsClient<NetworkActivityEventMap>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Response } from './client';
|
|
2
|
+
export type SSEConnectionStatus = 'connecting' | 'open' | 'closed';
|
|
3
|
+
export type SSERequestId = string;
|
|
4
|
+
export type SSEOpenEvent = {
|
|
5
|
+
type: 'sse-open';
|
|
6
|
+
requestId: SSERequestId;
|
|
7
|
+
timestamp: number;
|
|
8
|
+
response: Response;
|
|
9
|
+
};
|
|
10
|
+
export type SSEMessageEvent = {
|
|
11
|
+
type: 'sse-message';
|
|
12
|
+
requestId: SSERequestId;
|
|
13
|
+
timestamp: number;
|
|
14
|
+
data: string;
|
|
15
|
+
};
|
|
16
|
+
export type SSEErrorEvent = {
|
|
17
|
+
type: 'sse-error';
|
|
18
|
+
requestId: SSERequestId;
|
|
19
|
+
timestamp: number;
|
|
20
|
+
error: {
|
|
21
|
+
type: 'error' | 'timeout' | 'exception';
|
|
22
|
+
message: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export type SSECloseEvent = {
|
|
26
|
+
type: 'sse-close';
|
|
27
|
+
requestId: SSERequestId;
|
|
28
|
+
timestamp: number;
|
|
29
|
+
};
|
|
30
|
+
export type SSEEvent = SSEOpenEvent | SSEMessageEvent | SSEErrorEvent | SSECloseEvent;
|
|
31
|
+
export type SSEEventMap = {
|
|
32
|
+
[K in SSEEvent['type']]: Extract<SSEEvent, {
|
|
33
|
+
type: K;
|
|
34
|
+
}>;
|
|
35
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export type WebSocketMessageType = 'text' | 'binary';
|
|
2
|
+
export type WebSocketConnectionStatus = 'connecting' | 'open' | 'closing' | 'closed';
|
|
3
|
+
export type WebSocketConnectEvent = {
|
|
4
|
+
type: 'websocket-connect';
|
|
5
|
+
url: string;
|
|
6
|
+
socketId: number;
|
|
7
|
+
timestamp: number;
|
|
8
|
+
protocols: string[] | null;
|
|
9
|
+
options: string[];
|
|
10
|
+
};
|
|
11
|
+
export type WebSocketOpenEvent = {
|
|
12
|
+
type: 'websocket-open';
|
|
13
|
+
url: string;
|
|
14
|
+
socketId: number;
|
|
15
|
+
timestamp: number;
|
|
16
|
+
};
|
|
17
|
+
export type WebSocketCloseEvent = {
|
|
18
|
+
type: 'websocket-close';
|
|
19
|
+
url: string;
|
|
20
|
+
socketId: number;
|
|
21
|
+
timestamp: number;
|
|
22
|
+
code: number;
|
|
23
|
+
reason?: string;
|
|
24
|
+
};
|
|
25
|
+
export type WebSocketMessageSentEvent = {
|
|
26
|
+
type: 'websocket-message-sent';
|
|
27
|
+
url: string;
|
|
28
|
+
socketId: number;
|
|
29
|
+
timestamp: number;
|
|
30
|
+
data: string;
|
|
31
|
+
messageType: WebSocketMessageType;
|
|
32
|
+
};
|
|
33
|
+
export type WebSocketMessageReceivedEvent = {
|
|
34
|
+
type: 'websocket-message-received';
|
|
35
|
+
url: string;
|
|
36
|
+
socketId: number;
|
|
37
|
+
timestamp: number;
|
|
38
|
+
data: string;
|
|
39
|
+
messageType: WebSocketMessageType;
|
|
40
|
+
};
|
|
41
|
+
export type WebSocketErrorEvent = {
|
|
42
|
+
type: 'websocket-error';
|
|
43
|
+
url: string;
|
|
44
|
+
socketId: number;
|
|
45
|
+
timestamp: number;
|
|
46
|
+
error: string;
|
|
47
|
+
};
|
|
48
|
+
export type WebSocketConnectionStatusChangedEvent = {
|
|
49
|
+
type: 'websocket-connection-status-changed';
|
|
50
|
+
url: string;
|
|
51
|
+
socketId: number;
|
|
52
|
+
timestamp: number;
|
|
53
|
+
status: WebSocketConnectionStatus;
|
|
54
|
+
};
|
|
55
|
+
export type WebSocketEvent = WebSocketConnectEvent | WebSocketOpenEvent | WebSocketCloseEvent | WebSocketMessageSentEvent | WebSocketMessageReceivedEvent | WebSocketErrorEvent | WebSocketConnectionStatusChangedEvent;
|
|
56
|
+
export type WebSocketEventMap = {
|
|
57
|
+
[K in WebSocketEvent['type']]: Extract<WebSocketEvent, {
|
|
58
|
+
type: K;
|
|
59
|
+
}>;
|
|
60
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "default" | "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
6
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "default" | "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
type JsonTreeCopyableItemProps = PropsWithChildren<{
|
|
3
|
+
getCopyableValue: () => string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}>;
|
|
6
|
+
export declare const JsonTreeCopyableItem: ({ children, getCopyableValue, className }: JsonTreeCopyableItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1,31 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ProcessedRequest } from '../state/model';
|
|
2
2
|
import { RequestId } from '../../shared/client';
|
|
3
|
-
import * as React from 'react';
|
|
4
3
|
type NetworkRequest = {
|
|
5
|
-
id:
|
|
4
|
+
id: RequestId;
|
|
6
5
|
name: string;
|
|
7
|
-
status: number;
|
|
6
|
+
status: string | number;
|
|
8
7
|
method: string;
|
|
9
8
|
domain: string;
|
|
10
9
|
path: string;
|
|
11
10
|
size: string;
|
|
12
11
|
time: string;
|
|
13
12
|
type: string;
|
|
14
|
-
initiator: string;
|
|
15
13
|
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
14
|
};
|
|
30
15
|
declare const formatSize: (bytes: number) => string;
|
|
31
16
|
declare const formatDuration: (duration: number) => string;
|
|
@@ -35,11 +20,6 @@ declare const extractDomainAndPath: (url: string) => {
|
|
|
35
20
|
path: string;
|
|
36
21
|
};
|
|
37
22
|
declare const generateName: (url: string) => string;
|
|
38
|
-
declare const
|
|
39
|
-
declare const
|
|
40
|
-
|
|
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 };
|
|
23
|
+
declare const processNetworkRequests: (processedRequests: ProcessedRequest[]) => NetworkRequest[];
|
|
24
|
+
export declare const RequestList: () => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export { formatSize, formatDuration, formatStartTime, extractDomainAndPath, generateName, processNetworkRequests, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SidePanel: () => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Toolbar: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { NetworkActivityState } from './store';
|
|
2
|
+
import { ProcessedRequest } from './model';
|
|
3
|
+
export declare const getProcessedRequests: (obj: NetworkActivityState) => ProcessedRequest[];
|
|
4
|
+
export declare const getSelectedRequest: (obj: NetworkActivityState) => import('./model').NetworkEntry | null;
|
|
5
|
+
export declare const getRequestSummary: (requestId: string) => ((state: NetworkActivityState) => ProcessedRequest | null);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { NetworkActivityState } from './store';
|
|
2
|
+
export declare const useNetworkActivityStore: <T>(selector: (state: NetworkActivityState) => T) => T;
|
|
3
|
+
export declare const useProcessedRequests: () => import('./model').ProcessedRequest[];
|
|
4
|
+
export declare const useSelectedRequest: () => import('./model').NetworkEntry | null;
|
|
5
|
+
export declare const useHasSelectedRequest: () => boolean;
|
|
6
|
+
export declare const useSelectedRequestId: () => string | null;
|
|
7
|
+
export declare const useIsRecording: () => boolean;
|
|
8
|
+
export declare const useNetworkActivityActions: () => {
|
|
9
|
+
setRecording: (isRecording: boolean) => void;
|
|
10
|
+
setSelectedRequest: (requestId: import('../../shared/client').RequestId | null) => void;
|
|
11
|
+
clearRequests: () => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const useNetworkActivityClientManagement: () => {
|
|
14
|
+
setupClient: (client: import('../../shared/client').NetworkActivityDevToolsClient) => void;
|
|
15
|
+
cleanupClient: () => void;
|
|
16
|
+
};
|
|
17
|
+
export declare const useWebSocketMessages: (requestId: string) => import('./model').WebSocketMessage[];
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { Initiator, ResourceType } from '../../shared/client';
|
|
2
|
+
export type RequestId = string;
|
|
3
|
+
export type Timestamp = number;
|
|
4
|
+
export type SocketId = number;
|
|
5
|
+
export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
|
|
6
|
+
export type NetworkEntryType = 'http' | 'websocket' | 'sse';
|
|
7
|
+
export type HttpData = {
|
|
8
|
+
type: string;
|
|
9
|
+
data: string;
|
|
10
|
+
};
|
|
11
|
+
export type HttpRequest = {
|
|
12
|
+
url: string;
|
|
13
|
+
method: HttpMethod;
|
|
14
|
+
headers: Record<string, string>;
|
|
15
|
+
body?: HttpData;
|
|
16
|
+
};
|
|
17
|
+
export type HttpResponse = {
|
|
18
|
+
url: string;
|
|
19
|
+
status: number;
|
|
20
|
+
statusText: string;
|
|
21
|
+
headers: Record<string, string>;
|
|
22
|
+
contentType: string;
|
|
23
|
+
size: number;
|
|
24
|
+
responseTime: Timestamp;
|
|
25
|
+
body?: HttpData;
|
|
26
|
+
};
|
|
27
|
+
export type HttpStatus = 'pending' | 'loading' | 'finished' | 'failed';
|
|
28
|
+
export type HttpNetworkEntry = {
|
|
29
|
+
id: RequestId;
|
|
30
|
+
type: 'http';
|
|
31
|
+
timestamp: Timestamp;
|
|
32
|
+
duration?: number;
|
|
33
|
+
request: HttpRequest;
|
|
34
|
+
response?: HttpResponse;
|
|
35
|
+
status: HttpStatus;
|
|
36
|
+
error?: string;
|
|
37
|
+
canceled?: boolean;
|
|
38
|
+
ttfb?: number;
|
|
39
|
+
size?: number;
|
|
40
|
+
initiator?: Initiator;
|
|
41
|
+
resourceType?: ResourceType;
|
|
42
|
+
};
|
|
43
|
+
export type SSEMessage = {
|
|
44
|
+
id: string;
|
|
45
|
+
data: string;
|
|
46
|
+
timestamp: Timestamp;
|
|
47
|
+
};
|
|
48
|
+
export type SSEStatus = 'connecting' | 'open' | 'closed' | 'error';
|
|
49
|
+
export type SSENetworkEntry = {
|
|
50
|
+
id: RequestId;
|
|
51
|
+
type: 'sse';
|
|
52
|
+
timestamp: Timestamp;
|
|
53
|
+
duration?: number;
|
|
54
|
+
request: HttpRequest;
|
|
55
|
+
response?: HttpResponse;
|
|
56
|
+
status: SSEStatus;
|
|
57
|
+
messages: SSEMessage[];
|
|
58
|
+
error?: string;
|
|
59
|
+
initiator?: Initiator;
|
|
60
|
+
resourceType?: ResourceType;
|
|
61
|
+
};
|
|
62
|
+
export type WebSocketConnection = {
|
|
63
|
+
url: string;
|
|
64
|
+
socketId: SocketId;
|
|
65
|
+
protocols?: string[];
|
|
66
|
+
options?: string[];
|
|
67
|
+
};
|
|
68
|
+
export type WebSocketMessage = {
|
|
69
|
+
id: string;
|
|
70
|
+
direction: 'sent' | 'received';
|
|
71
|
+
data: string;
|
|
72
|
+
messageType: 'text' | 'binary';
|
|
73
|
+
timestamp: Timestamp;
|
|
74
|
+
};
|
|
75
|
+
export type WebSocketStatus = 'connecting' | 'open' | 'closing' | 'closed' | 'error';
|
|
76
|
+
export type WebSocketNetworkEntry = {
|
|
77
|
+
id: RequestId;
|
|
78
|
+
type: 'websocket';
|
|
79
|
+
timestamp: Timestamp;
|
|
80
|
+
duration?: number;
|
|
81
|
+
connection: WebSocketConnection;
|
|
82
|
+
status: WebSocketStatus;
|
|
83
|
+
error?: string;
|
|
84
|
+
closeCode?: number;
|
|
85
|
+
closeReason?: string;
|
|
86
|
+
};
|
|
87
|
+
export type NetworkEntry = HttpNetworkEntry | WebSocketNetworkEntry | SSENetworkEntry;
|
|
88
|
+
export type ProcessedRequest = {
|
|
89
|
+
id: RequestId;
|
|
90
|
+
type: NetworkEntryType;
|
|
91
|
+
name: string;
|
|
92
|
+
status: HttpStatus | WebSocketStatus | SSEStatus;
|
|
93
|
+
timestamp: Timestamp;
|
|
94
|
+
duration?: number;
|
|
95
|
+
size?: number;
|
|
96
|
+
method: HttpMethod | 'WS' | 'SSE';
|
|
97
|
+
httpStatus?: number;
|
|
98
|
+
};
|