npm - @rozenite/network-activity-plugin - Versions diffs - 1.8.0 → 1.9.0 - Mend

@rozenite/network-activity-plugin 1.8.0 → 1.9.0

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 (17) hide show

package/CHANGELOG.md +22 -0
package/dist/devtools/App.html +1 -1
package/dist/devtools/assets/{App-B3xlUjs6.js → App-hSoryVpJ.js} +11 -1
package/dist/react-native/chunks/boot-recording.cjs +19 -15
package/dist/react-native/chunks/boot-recording.js +19 -15
package/dist/react-native/chunks/get-nitro-module.cjs +9 -0
package/dist/react-native/chunks/get-nitro-module.js +10 -0
package/dist/react-native/index.d.ts +2 -2
package/dist/rozenite.json +1 -1
package/package.json +6 -6
package/src/react-native/http/http-utils.ts +3 -2
package/src/react-native/nitro-fetch/get-nitro-module.ts +9 -0
package/src/react-native/nitro-fetch/nitro-network-inspector.ts +2 -9
package/src/ui/tabs/ResponseTab.tsx +2 -1
package/src/utils/__tests__/getContentTypeMimeType.test.ts +31 -0
package/src/utils/getContentTypeMimeType.ts +14 -0
package/vite.config.ts +4 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,27 @@
 # @rozenite/network-activity-plugin
+## 1.9.0
+### Patch Changes
+- [#240](https://github.com/callstackincubator/rozenite/pull/240) [`0e2a4db`](https://github.com/callstackincubator/rozenite/commit/0e2a4db7943f004b7f52422fbe23b679829e5b57) Thanks [@V3RON](https://github.com/V3RON)! - Rozenite now treats `application/*+json` responses as JSON in Network Activity, so vendor-specific JSON payloads render correctly instead of falling back to plain text.
+- [#260](https://github.com/callstackincubator/rozenite/pull/260) [`9cea370`](https://github.com/callstackincubator/rozenite/commit/9cea370c441595eba266f800901656370bb608f8) Thanks [@V3RON](https://github.com/V3RON)! - Fix `react-native-nitro-fetch` not being resolved correctly in Metro by isolating the optional dependency import into its own bundle chunk. This ensures the network inspector works reliably even when `react-native-nitro-fetch` is not installed.
+- Updated dependencies []:
+  - @rozenite/agent-bridge@1.9.0
+  - @rozenite/agent-shared@1.9.0
+  - @rozenite/plugin-bridge@1.9.0
+## 1.8.1
+### Patch Changes
+- Updated dependencies []:
+  - @rozenite/agent-bridge@1.8.1
+  - @rozenite/agent-shared@1.8.1
+  - @rozenite/plugin-bridge@1.8.1
 ## 1.8.0
 ### Minor Changes

package/dist/devtools/App.html CHANGED Viewed

@@ -22,7 +22,7 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="../devtools/assets/App-B3xlUjs6.js"></script>
+    <script type="module" crossorigin src="../devtools/assets/App-hSoryVpJ.js"></script>
     <link rel="stylesheet" crossorigin href="../devtools/assets/App-m6xge0az.css">
   </head>
   <body>

package/dist/devtools/assets/{App-B3xlUjs6.js → App-hSoryVpJ.js} RENAMED Viewed

@@ -20772,6 +20772,9 @@ function getHttpHeader(headers, name) {
   }
   return void 0;
 }
+function normalizeContentType(contentType) {
+  return contentType.split(";")[0].trim().toLowerCase();
+}
 function getContentTypeMime(headers) {
   const contentType = getHttpHeader(headers, "content-type");
   if (!contentType) {
@@ -20781,6 +20784,13 @@ function getContentTypeMime(headers) {
   const actualValue = Array.isArray(value) ? value[0] : value;
   return actualValue.split(";")[0].trim();
 }
+function isJsonContentType(contentType) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === "application/json" || mimeType.endsWith("+json");
+}
 function inferContentTypeFromPostData(postData) {
   if (postData?.type === "form-data") {
     return "multipart/form-data";
@@ -35330,7 +35340,7 @@ const ResponseTab = ({
         }
       );
     }
-    if (type.startsWith("application/json")) {
+    if (isJsonContentType(type)) {
       let bodyContent;
       try {
         const jsonData = JSON.parse(data);

package/dist/react-native/chunks/boot-recording.cjs CHANGED Viewed

@@ -3,6 +3,7 @@ const nanoevents = require("nanoevents");
 const eventSource = require("./event-source.cjs");
 const reactNative = require("react-native");
 const WebSocketInterceptor = require("react-native/Libraries/WebSocket/WebSocketInterceptor");
+const getNitroModule = require("./get-nitro-module.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const WebSocketInterceptor__default = /* @__PURE__ */ _interopDefault(WebSocketInterceptor);
 const REQUEST_TTL = 1e3 * 60 * 5;
@@ -184,10 +185,6 @@ function safeStringify(data) {
 const getStringSizeInBytes = (value) => {
   return new TextEncoder().encode(value).length;
 };
-const isBlob = (value) => value instanceof Blob;
-const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
-const isFormData = (value) => value instanceof FormData;
-const isNullOrUndefined = (value) => value === null || value === void 0;
 function getHttpHeader(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
@@ -197,6 +194,9 @@ function getHttpHeader(headers, name) {
   }
   return void 0;
 }
+function normalizeContentType(contentType) {
+  return contentType.split(";")[0].trim().toLowerCase();
+}
 function getContentTypeMime(headers) {
   const contentType = getHttpHeader(headers, "content-type");
   if (!contentType) {
@@ -206,6 +206,17 @@ function getContentTypeMime(headers) {
   const actualValue = Array.isArray(value) ? value[0] : value;
   return actualValue.split(";")[0].trim();
 }
+function isJsonContentType(contentType) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === "application/json" || mimeType.endsWith("+json");
+}
+const isBlob = (value) => value instanceof Blob;
+const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+const isFormData = (value) => value instanceof FormData;
+const isNullOrUndefined = (value) => value === null || value === void 0;
 const getContentType$1 = (request) => {
   const responseHeaders = request.responseHeaders;
   const responseType = request.responseType;
@@ -323,7 +334,7 @@ const getResponseBody = async (request) => {
   }
   if (responseType === "blob") {
     const contentType = request.getResponseHeader("Content-Type") || "";
-    if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
+    if (contentType.startsWith("text/") || isJsonContentType(contentType)) {
       return new Promise((resolve) => {
         const reader = new FileReader();
         reader.onload = () => {
@@ -367,7 +378,7 @@ const setupRequestOverride = (overridesRegistry, request) => {
       Object.defineProperty(request, "response", { writable: true });
       Object.defineProperty(request, "responseText", { writable: true });
       const contentType = getContentType$1(request);
-      if (contentType === "application/json") {
+      if (isJsonContentType(contentType)) {
         request.responseType = "json";
       } else if (contentType === "text/plain") {
         request.responseType = "text";
@@ -1026,13 +1037,6 @@ const NITRO_NETWORK_EVENTS = [
   "websocket-message-received",
   "websocket-error"
 ];
-const loadNitroModule = () => {
-  try {
-    return require("react-native-nitro-fetch");
-  } catch {
-    return null;
-  }
-};
 const timestampOrigin = typeof performance !== "undefined" && typeof performance.timeOrigin === "number" ? performance.timeOrigin : Date.now() - performance.now();
 const toEpochTime = (timestamp) => Math.round(timestampOrigin + timestamp);
 const toHeaders = (headers) => {
@@ -1062,7 +1066,7 @@ const getContentType = (headers) => {
   return headers.find((header) => header.key.toLowerCase() === "content-type")?.value ?? "text/plain";
 };
 const normalizeReadyState = (readyState) => readyState.toUpperCase();
-const createNitroNetworkInspector = (getNitroModule = loadNitroModule) => {
+const createNitroNetworkInspector = (getNitroModule$1 = getNitroModule.getNitroModule) => {
   const eventEmitter = nanoevents.createNanoEvents();
   const previousEntries = /* @__PURE__ */ new Map();
   const responseBodies = /* @__PURE__ */ new Map();
@@ -1209,7 +1213,7 @@ const createNitroNetworkInspector = (getNitroModule = loadNitroModule) => {
       if (unsubscribe) {
         return;
       }
-      nitroModule = getNitroModule();
+      nitroModule = getNitroModule$1();
       if (!nitroModule) {
         return;
       }

package/dist/react-native/chunks/boot-recording.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { createNanoEvents } from "nanoevents";
 import { g as getEventSource } from "./event-source.js";
 import { Platform } from "react-native";
 import WebSocketInterceptor from "react-native/Libraries/WebSocket/WebSocketInterceptor";
+import { g as getNitroModule } from "./get-nitro-module.js";
 const REQUEST_TTL = 1e3 * 60 * 5;
 const getNetworkRequestsRegistry = () => {
   const registry = /* @__PURE__ */ new Map();
@@ -181,10 +182,6 @@ function safeStringify(data) {
 const getStringSizeInBytes = (value) => {
   return new TextEncoder().encode(value).length;
 };
-const isBlob = (value) => value instanceof Blob;
-const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
-const isFormData = (value) => value instanceof FormData;
-const isNullOrUndefined = (value) => value === null || value === void 0;
 function getHttpHeader(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
@@ -194,6 +191,9 @@ function getHttpHeader(headers, name) {
   }
   return void 0;
 }
+function normalizeContentType(contentType) {
+  return contentType.split(";")[0].trim().toLowerCase();
+}
 function getContentTypeMime(headers) {
   const contentType = getHttpHeader(headers, "content-type");
   if (!contentType) {
@@ -203,6 +203,17 @@ function getContentTypeMime(headers) {
   const actualValue = Array.isArray(value) ? value[0] : value;
   return actualValue.split(";")[0].trim();
 }
+function isJsonContentType(contentType) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === "application/json" || mimeType.endsWith("+json");
+}
+const isBlob = (value) => value instanceof Blob;
+const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+const isFormData = (value) => value instanceof FormData;
+const isNullOrUndefined = (value) => value === null || value === void 0;
 const getContentType$1 = (request) => {
   const responseHeaders = request.responseHeaders;
   const responseType = request.responseType;
@@ -320,7 +331,7 @@ const getResponseBody = async (request) => {
   }
   if (responseType === "blob") {
     const contentType = request.getResponseHeader("Content-Type") || "";
-    if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
+    if (contentType.startsWith("text/") || isJsonContentType(contentType)) {
       return new Promise((resolve) => {
         const reader = new FileReader();
         reader.onload = () => {
@@ -364,7 +375,7 @@ const setupRequestOverride = (overridesRegistry, request) => {
       Object.defineProperty(request, "response", { writable: true });
       Object.defineProperty(request, "responseText", { writable: true });
       const contentType = getContentType$1(request);
-      if (contentType === "application/json") {
+      if (isJsonContentType(contentType)) {
         request.responseType = "json";
       } else if (contentType === "text/plain") {
         request.responseType = "text";
@@ -1023,13 +1034,6 @@ const NITRO_NETWORK_EVENTS = [
   "websocket-message-received",
   "websocket-error"
 ];
-const loadNitroModule = () => {
-  try {
-    return require("react-native-nitro-fetch");
-  } catch {
-    return null;
-  }
-};
 const timestampOrigin = typeof performance !== "undefined" && typeof performance.timeOrigin === "number" ? performance.timeOrigin : Date.now() - performance.now();
 const toEpochTime = (timestamp) => Math.round(timestampOrigin + timestamp);
 const toHeaders = (headers) => {
@@ -1059,7 +1063,7 @@ const getContentType = (headers) => {
   return headers.find((header) => header.key.toLowerCase() === "content-type")?.value ?? "text/plain";
 };
 const normalizeReadyState = (readyState) => readyState.toUpperCase();
-const createNitroNetworkInspector = (getNitroModule = loadNitroModule) => {
+const createNitroNetworkInspector = (getNitroModule$1 = getNitroModule) => {
   const eventEmitter = createNanoEvents();
   const previousEntries = /* @__PURE__ */ new Map();
   const responseBodies = /* @__PURE__ */ new Map();
@@ -1206,7 +1210,7 @@ const createNitroNetworkInspector = (getNitroModule = loadNitroModule) => {
       if (unsubscribe) {
         return;
       }
-      nitroModule = getNitroModule();
+      nitroModule = getNitroModule$1();
       if (!nitroModule) {
         return;
       }

package/dist/react-native/chunks/get-nitro-module.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+"use strict";
+const getNitroModule = () => {
+  try {
+    return require("react-native-nitro-fetch");
+  } catch {
+    return null;
+  }
+};
+exports.getNitroModule = getNitroModule;

package/dist/react-native/chunks/get-nitro-module.js ADDED Viewed

@@ -0,0 +1,10 @@
+const getNitroModule = () => {
+  try {
+    return require("react-native-nitro-fetch");
+  } catch {
+    return null;
+  }
+};
+export {
+  getNitroModule as g
+};

package/dist/react-native/index.d.ts CHANGED Viewed

@@ -216,7 +216,7 @@ declare type SSERequestId = string;
 declare type Timestamp = number;
-export declare let useNetworkActivityDevTools: useNetworkActivityDevTools_2;
+export declare let useNetworkActivityDevTools: typeof useNetworkActivityDevTools_2;
 declare const useNetworkActivityDevTools_2: (config?: NetworkActivityDevToolsConfig) => RozeniteDevToolsClient<NetworkActivityEventMap> | null;
@@ -298,7 +298,7 @@ declare type WebSocketOpenEvent = {
     source?: NetworkEventSource;
 };
-export declare let withOnBootNetworkActivityRecording: withOnBootNetworkActivityRecording_2;
+export declare let withOnBootNetworkActivityRecording: typeof withOnBootNetworkActivityRecording_2;
 /**
  * Enable network activity recording during app boot, before DevTools connects.

package/dist/rozenite.json CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native/index.cjs",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/agent-shared": "1.8.0",
-    "@rozenite/agent-bridge": "1.8.0",
-    "@rozenite/plugin-bridge": "1.8.0"
+    "@rozenite/agent-shared": "1.9.0",
+    "@rozenite/agent-bridge": "1.9.0",
+    "@rozenite/plugin-bridge": "1.9.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -49,8 +49,8 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "zustand": "^5.0.6",
-    "@rozenite/vite-plugin": "1.8.0",
-    "rozenite": "1.8.0"
+    "@rozenite/vite-plugin": "1.9.0",
+    "rozenite": "1.9.0"
   },
   "peerDependencies": {
     "react-native-nitro-fetch": "*",

package/src/react-native/http/http-utils.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import {
 } from '../../shared/client';
 import { safeStringify } from '../../utils/safeStringify';
 import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
+import { isJsonContentType } from '../../utils/getContentTypeMimeType';
 import {
   isBlob,
   isArrayBuffer,
@@ -129,7 +130,7 @@ export const getResponseBody = async (
     if (
       contentType.startsWith('text/') ||
-      contentType.startsWith('application/json')
+      isJsonContentType(contentType)
     ) {
       // It looks like a text blob, let's read it and forward it to the client.
       return new Promise((resolve) => {
@@ -195,7 +196,7 @@ export const setupRequestOverride = (
       Object.defineProperty(request, 'responseText', { writable: true });
       const contentType = getContentType(request);
-      if (contentType === 'application/json') {
+      if (isJsonContentType(contentType)) {
         request.responseType = 'json';
       } else if (contentType === 'text/plain') {
         request.responseType = 'text';

package/src/react-native/nitro-fetch/get-nitro-module.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { NitroModule } from './nitro-network-inspector';
+export const getNitroModule = (): NitroModule | null => {
+  try {
+    return require('react-native-nitro-fetch') as NitroModule;
+  } catch {
+    return null;
+  }
+};

package/src/react-native/nitro-fetch/nitro-network-inspector.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import type {
 } from '../../shared/client';
 import type { WebSocketEventMap } from '../../shared/websocket-events';
 import type { Inspector } from '../inspector';
+import { getNitroModule as loadNitroModule } from './get-nitro-module';
 type NitroHttpHeader = {
   key: string;
@@ -62,7 +63,7 @@ type NitroWebSocketEntry = {
 type NitroInspectorEntry = NitroHttpEntry | NitroWebSocketEntry;
-type NitroModule = {
+export type NitroModule = {
   NetworkInspector: {
     enable: () => void;
     disable: () => void;
@@ -107,14 +108,6 @@ export const NITRO_NETWORK_EVENTS: (keyof NitroNetworkEventMap)[] = [
   'websocket-error',
 ];
-const loadNitroModule = (): NitroModule | null => {
-  try {
-    return require('react-native-nitro-fetch') as NitroModule;
-  } catch {
-    return null;
-  }
-};
 const timestampOrigin =
   typeof performance !== 'undefined' &&
   typeof performance.timeOrigin === 'number'

package/src/ui/tabs/ResponseTab.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import { RequestOverride } from '../../shared/client';
 import { OverrideResponse } from '../components/OverrideResponse';
 import { Button } from '../components/Button';
 import { Pencil } from 'lucide-react';
+import { isJsonContentType } from '../../utils/getContentTypeMimeType';
 export type ResponseTabProps = {
   selectedRequest: HttpNetworkEntry;
@@ -110,7 +111,7 @@ export const ResponseTab = ({
       );
     }
-    if (type.startsWith('application/json')) {
+    if (isJsonContentType(type)) {
       let bodyContent;
       try {

package/src/utils/__tests__/getContentTypeMimeType.test.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getContentTypeMime,
+  isJsonContentType,
+} from '../getContentTypeMimeType';
+describe('getContentTypeMimeType', () => {
+  it('recognizes application/json content types with parameters', () => {
+    expect(isJsonContentType('application/json; charset=utf-8')).toBe(true);
+  });
+  it('recognizes RFC 6839 +json content types', () => {
+    expect(isJsonContentType('application/vnd.geo+json; charset=utf-8')).toBe(
+      true,
+    );
+    expect(isJsonContentType('Application/LD+JSON')).toBe(true);
+  });
+  it('rejects non-json content types', () => {
+    expect(isJsonContentType('text/plain')).toBe(false);
+    expect(isJsonContentType(undefined)).toBe(false);
+  });
+  it('keeps the extracted mime type display-friendly', () => {
+    expect(
+      getContentTypeMime({
+        'content-type': 'Application/LD+JSON; charset=utf-8',
+      }),
+    ).toBe('Application/LD+JSON');
+  });
+});

package/src/utils/getContentTypeMimeType.ts CHANGED Viewed

@@ -1,6 +1,10 @@
 import { HttpHeaders } from '../shared/client';
 import { getHttpHeader } from './getHttpHeader';
+export function normalizeContentType(contentType: string) {
+  return contentType.split(';')[0].trim().toLowerCase();
+}
 export function getContentTypeMime(headers: HttpHeaders) {
   const contentType = getHttpHeader(headers, 'content-type');
@@ -15,3 +19,13 @@ export function getContentTypeMime(headers: HttpHeaders) {
   return actualValue.split(';')[0].trim();
 }
+export function isJsonContentType(contentType: string | null | undefined) {
+  if (!contentType) {
+    return false;
+  }
+  const mimeType = normalizeContentType(contentType);
+  return mimeType === 'application/json' || mimeType.endsWith('+json');
+}

package/vite.config.ts CHANGED Viewed

@@ -27,6 +27,10 @@ export default defineConfig({
             return 'event-source';
           }
+          if (id.includes('get-nitro-module.ts')) {
+            return 'get-nitro-module';
+          }
           return undefined;
         },
       },