@rozenite/network-activity-plugin 1.0.0-alpha.9 → 1.1.0

package/src/react-native/utils/getFormDataEntries.ts

@@ -0,0 +1,32 @@
+/**
+ * Extracts form data parts from a FormData object.
+ * Handles both the standard FormData API and the React Native FormData format.
+ *
+ * ```
+ * // node_modules/react-native/Libraries/Network/FormData.js
+ *
+ * class FormData {
+ *   _parts: Array<FormDataNameValuePair>;
+ *
+ *   constructor() {
+ *     this._parts = [];
+ *   }
+ *
+ * ...
+ * ```
+ */
+export function getFormDataEntries(formData: any): [string, unknown][] {
+  if (!formData || typeof formData !== 'object') {
+    return [];
+  }
+
+  if (typeof formData.entries === 'function') {
+    return formData.entries();
+  }
+
+  if (Array.isArray(formData._parts)) {
+    return formData._parts;
+  }
+
+  return [];
+}

package/src/react-native/utils.ts

@@ -1,4 +1,4 @@
-import { getHttpHeaderValue } from '../ui/utils/getHttpHeaderValue';
+import { getContentTypeMime } from '../utils/getContentTypeMimeType';
 
 type UnionToIntersection<U> = (
   U extends unknown ? (k: U) => void : never
@@ -22,10 +22,10 @@ export const getContentType = (request: XMLHttpRequest): string => {
   const responseHeaders = request.responseHeaders;
   const responseType = request.responseType;
 
-  const contentType = getHttpHeaderValue(responseHeaders || {}, 'content-type');
+  const contentType = getContentTypeMime(responseHeaders || {});
 
   if (contentType) {
-    return contentType.split(';')[0].trim();
+    return contentType;
   }
 
   switch (responseType) {

package/src/shared/client.ts

@@ -2,17 +2,67 @@ import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
 
-export type HttpHeaders = Record<string, string>;
+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?: string;
+  postData?: RequestPostData;
 };
 
 export type Response = {
@@ -21,7 +71,7 @@ export type Response = {
   statusText: string;
   headers: HttpHeaders;
   contentType: string;
-  size: number;
+  size: number | null;
   responseTime: Timestamp;
 };
 
@@ -34,11 +84,26 @@ export type Initiator = {
 
 export type ResourceType = 'XHR' | 'Fetch' | 'Other';
 
+export type RequestOverride = {
+  status?: number;
+  body?: string;
+};
+
+export type NetworkActivityClientUISettings = {
+  showUrlAsName?: boolean;
+};
+
 export type NetworkActivityEventMap = {
   // Control events
   'network-enable': unknown;
   'network-disable': unknown;
 
+  // Client UI settings events
+  'get-client-ui-settings': unknown;
+  'client-ui-settings': {
+    settings?: NetworkActivityClientUISettings;
+  };
+
   // Network request events
   'request-sent': {
     requestId: RequestId;
@@ -59,7 +124,7 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     timestamp: Timestamp;
     duration: number;
-    size: number;
+    size: number | null;
     ttfb: number;
   };
 
@@ -71,6 +136,14 @@ export type NetworkActivityEventMap = {
     canceled: boolean;
   };
 
+  'request-progress': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
+
   'get-response-body': {
     requestId: RequestId;
   };
@@ -79,6 +152,10 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     body: string | null;
   };
+
+  'set-overrides': {
+    overrides: [string, RequestOverride][];
+  };
 } & WebSocketEventMap &
   SSEEventMap;
 

package/src/shared/sse-events.ts

@@ -14,7 +14,10 @@ export type SSEMessageEvent = {
   type: 'sse-message';
   requestId: SSERequestId;
   timestamp: number;
-  data: string;
+  payload: {
+    type: string;
+    data: string;
+  };
 };
 
 export type SSEErrorEvent = {

package/src/ui/components/Button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded-md px-2 text-xs',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',

package/src/ui/components/CodeBlock.tsx

@@ -0,0 +1,19 @@
+import { HTMLProps } from 'react';
+import { cn } from '../utils/cn';
+
+export type CodeBlockProps = HTMLProps<HTMLPreElement>;
+
+const codeBlockClassNames =
+  'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere';
+
+export const CodeBlock = ({
+  children,
+  className,
+  ...props
+}: CodeBlockProps) => {
+  return (
+    <pre className={cn(codeBlockClassNames, className)} {...props}>
+      {children}
+    </pre>
+  );
+};

package/src/ui/components/CodeEditor.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+export type CodeEditorProps = {
+  data: string | undefined;
+  onInput?: (event: React.FormEvent<HTMLPreElement>) => void;
+};
+
+export const CodeEditor = forwardRef<HTMLPreElement, CodeEditorProps>(
+  ({ data, onInput }, ref) => {
+    return (
+      <pre
+        ref={ref}
+        contentEditable
+        suppressContentEditableWarning
+        className={
+          'w-full text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere ring-offset-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+        }
+        onInput={onInput}
+      >
+        {data}
+      </pre>
+    );
+  }
+);
+
+CodeEditor.displayName = 'CodeEditor';

package/src/ui/components/CookieCard.tsx

@@ -0,0 +1,64 @@
+import { Badge } from './Badge';
+import { Cookie } from '../../shared/client';
+import { cn } from '../utils/cn';
+
+type CookieCardProps = {
+  cookie: Cookie;
+  keyClassName?: string;
+};
+
+export const CookieCard = ({ cookie, keyClassName }: CookieCardProps) => (
+  <div className="bg-gray-800 border border-gray-700 rounded p-3">
+    <div className="flex items-center justify-between mb-2">
+      <span className={cn('text-sm font-medium', keyClassName)}>
+        {cookie.name}
+      </span>
+      <div className="flex items-center gap-2">
+        {cookie.secure && (
+          <Badge
+            variant="outline"
+            className="text-xs text-yellow-400 border-yellow-400"
+          >
+            Secure
+          </Badge>
+        )}
+        {cookie.httpOnly && (
+          <Badge
+            variant="outline"
+            className="text-xs text-purple-400 border-purple-400"
+          >
+            HttpOnly
+          </Badge>
+        )}
+      </div>
+    </div>
+    <div className="text-sm text-gray-300 mb-2 break-all">{cookie.value}</div>
+    <div className="grid grid-cols-2 gap-4 text-xs text-gray-400">
+      {cookie.domain && (
+        <div>
+          <span className="font-medium">Domain:</span> {cookie.domain}
+        </div>
+      )}
+      {cookie.path && (
+        <div>
+          <span className="font-medium">Path:</span> {cookie.path}
+        </div>
+      )}
+      {cookie.expires && (
+        <div>
+          <span className="font-medium">Expires:</span> {cookie.expires}
+        </div>
+      )}
+      {cookie.maxAge && (
+        <div>
+          <span className="font-medium">Max-Age:</span> {cookie.maxAge}
+        </div>
+      )}
+      {cookie.sameSite && (
+        <div>
+          <span className="font-medium">SameSite:</span> {cookie.sameSite}
+        </div>
+      )}
+    </div>
+  </div>
+);

package/src/ui/components/CopyRequestDropdown.tsx

@@ -0,0 +1,95 @@
+import { useCallback } from 'react';
+import { Copy, Check, ChevronDown } from 'lucide-react';
+import { Button } from './Button';
+import { generateFetchCall } from '../utils/generateFetchCall';
+import { generateCurlCommand } from '../utils/generateCurlCommand';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './DropdownMenu';
+import { checkRequestBodyBinary } from '../utils/checkRequestBodyBinary';
+
+type NetworkEntry = HttpNetworkEntry | SSENetworkEntry;
+
+type CopyDropdownProps = {
+  selectedRequest: NetworkEntry;
+};
+
+type CopyOption = {
+  id: string;
+  label: string;
+  generate: (request: NetworkEntry) => string;
+  isEnabled: (request: NetworkEntry) => boolean;
+};
+
+const copyOptions: CopyOption[] = [
+  {
+    id: 'fetch',
+    label: 'fetch',
+    generate: generateFetchCall,
+    isEnabled: (request) => !checkRequestBodyBinary(request),
+  },
+  {
+    id: 'curl',
+    label: 'cURL',
+    generate: generateCurlCommand,
+    isEnabled: (request) =>
+      !checkRequestBodyBinary(request) || request.type === 'sse',
+  },
+];
+
+export const CopyRequestDropdown = ({ selectedRequest }: CopyDropdownProps) => {
+  const { isCopied, copy } = useCopyToClipboard();
+
+  const handleCopy = useCallback(
+    async (option: CopyOption) => {
+      if (!selectedRequest) return;
+
+      try {
+        const content = await option.generate(selectedRequest);
+
+        await copy(content);
+      } catch (error) {
+        console.error(`Failed to copy ${option.label}:`, error);
+      }
+    },
+    [selectedRequest, copy]
+  );
+
+  const filteredCopyOptions = copyOptions.filter((option) =>
+    option.isEnabled(selectedRequest)
+  );
+
+  if (filteredCopyOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="xs" className="border border-gray-700">
+          {isCopied ? <Check size={16} /> : <Copy size={16} />}
+          Copy as ...
+          <ChevronDown size={12} className="ml-1" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {filteredCopyOptions.map((option) => {
+          return (
+            <DropdownMenuItem
+              onClick={() => handleCopy(option)}
+              className="cursor-pointer"
+              key={option.id}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/ui/components/DropdownMenu.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../utils/cn';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-gray-700 focus:text-gray-100 data-[state=open]:bg-gray-700 data-[state=open]:text-gray-100',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-800 p-1 text-gray-100 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-800 p-1 text-gray-100 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <polyline points="20,6 9,17 4,12" />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg className="h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
+          <circle cx="4" cy="4" r="3" />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold text-gray-300',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-gray-600', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-gray-400', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};