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

package/README.md

@@ -1,4 +1,4 @@
-![rozenite-baner](https://github.com/user-attachments/assets/6d21839f-e624-4d8b-85a2-5f7ef1600b28)
+![rozenite-banner](https://www.rozenite.dev/rozenite-banner.jpg)
 
 ### A Rozenite plugin that provides comprehensive network activity monitoring for React Native applications.
 
@@ -44,9 +44,7 @@ function App() {
   // Enable Network Activity DevTools in development
   useNetworkActivityDevTools();
 
-  return (
-    <YourApp />
-  );
+  return <YourApp />;
 }
 ```
 
@@ -70,4 +68,4 @@ Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_camp
 [prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
 [prs-welcome]: https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md
 [chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge
-[chat]: https://discord.gg/xgGt7KAjxv
+[chat]: https://discord.gg/xgGt7KAjxv

package/dist/assets/{panel-CU9Fj1Ml.js → panel-BNxB_KsS.js}

@@ -1187,22 +1187,6 @@ function requireCreatePrefixer() {
 }
 var createPrefixerExports = requireCreatePrefixer();
 const createPrefixer = /* @__PURE__ */ getDefaultExportFromCjs(createPrefixerExports);
-var backgroundClip$1 = {};
-var hasRequiredBackgroundClip;
-function requireBackgroundClip() {
-  if (hasRequiredBackgroundClip) return backgroundClip$1;
-  hasRequiredBackgroundClip = 1;
-  Object.defineProperty(backgroundClip$1, "__esModule", {
-    value: true
-  });
-  backgroundClip$1.default = backgroundClip2;
-  function backgroundClip2() {
-    return null;
-  }
-  return backgroundClip$1;
-}
-var backgroundClipExports = requireBackgroundClip();
-const backgroundClip = /* @__PURE__ */ getDefaultExportFromCjs(backgroundClipExports);
 var crossFade$1 = {};
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -1429,56 +1413,6 @@ function requireCrossFade() {
 }
 var crossFadeExports = requireCrossFade();
 const crossFade = /* @__PURE__ */ getDefaultExportFromCjs(crossFadeExports);
-var cursor$1 = {};
-var hasRequiredCursor;
-function requireCursor() {
-  if (hasRequiredCursor) return cursor$1;
-  hasRequiredCursor = 1;
-  Object.defineProperty(cursor$1, "__esModule", {
-    value: true
-  });
-  cursor$1.default = cursor2;
-  var prefixes2 = ["-webkit-", "-moz-", ""];
-  var values = {
-    "zoom-in": true,
-    "zoom-out": true,
-    grab: true,
-    grabbing: true
-  };
-  function cursor2(property, value) {
-    if (property === "cursor" && values.hasOwnProperty(value)) {
-      return prefixes2.map(function(prefix) {
-        return prefix + value;
-      });
-    }
-  }
-  return cursor$1;
-}
-var cursorExports = requireCursor();
-const cursor = /* @__PURE__ */ getDefaultExportFromCjs(cursorExports);
-var filter$1 = {};
-var hasRequiredFilter;
-function requireFilter() {
-  if (hasRequiredFilter) return filter$1;
-  hasRequiredFilter = 1;
-  Object.defineProperty(filter$1, "__esModule", {
-    value: true
-  });
-  filter$1.default = filter2;
-  var _cssInJsUtils = require$$0$1;
-  var FILTER_REGEX = /filter\(/g;
-  var prefixes2 = ["-webkit-", ""];
-  function filter2(property, value) {
-    if (typeof value === "string" && !(0, _cssInJsUtils.isPrefixedValue)(value) && value.indexOf("filter(") !== -1) {
-      return prefixes2.map(function(prefix) {
-        return value.replace(FILTER_REGEX, prefix + "filter(");
-      });
-    }
-  }
-  return filter$1;
-}
-var filterExports = requireFilter();
-const filter = /* @__PURE__ */ getDefaultExportFromCjs(filterExports);
 var imageSet$1 = {};
 var isPrefixedValue = {};
 var hasRequiredIsPrefixedValue;
@@ -1728,7 +1662,7 @@ var wm = ["Webkit", "Moz"];
 var wms = ["Webkit", "ms"];
 var wmms = ["Webkit", "Moz", "ms"];
 const staticData = {
-  plugins: [backgroundClip, crossFade, cursor, filter, imageSet, logical, position, sizing, transition],
+  plugins: [crossFade, imageSet, logical, position, sizing, transition],
   prefixMap: {
     appearance: wmms,
     userSelect: wm,
@@ -2080,7 +2014,7 @@ function createAtomicRules(identifier, property, value) {
           var _block3 = createDeclarationBlock({
             pointerEvents: "auto"
           });
-          rules.push(selector + ">*" + _block3);
+          rules.push(selector + " * " + _block3);
         }
       }
       var _block4 = createDeclarationBlock({
@@ -2436,6 +2370,21 @@ var createTextShadowValue = (style) => {
     return offsetX + " " + offsetY + " " + blurRadius + " " + color;
   }
 };
+var mapBoxShadow = (boxShadow) => {
+  if (typeof boxShadow === "string") {
+    return boxShadow;
+  }
+  var offsetX = normalizeValueWithProperty(boxShadow.offsetX) || 0;
+  var offsetY = normalizeValueWithProperty(boxShadow.offsetY) || 0;
+  var blurRadius = normalizeValueWithProperty(boxShadow.blurRadius) || 0;
+  var spreadDistance = normalizeValueWithProperty(boxShadow.spreadDistance) || 0;
+  var color = normalizeColor(boxShadow.color) || "black";
+  var position2 = boxShadow.inset ? "inset " : "";
+  return "" + position2 + offsetX + " " + offsetY + " " + blurRadius + " " + spreadDistance + " " + color;
+};
+var createBoxShadowArrayValue = (value) => {
+  return value.map(mapBoxShadow).join(", ");
+};
 var mapTransform = (transform) => {
   var type = Object.keys(transform)[0];
   var value = transform[type];
@@ -2449,6 +2398,9 @@ var mapTransform = (transform) => {
 var createTransformValue = (value) => {
   return value.map(mapTransform).join(" ");
 };
+var createTransformOriginValue = (value) => {
+  return value.map((v2) => normalizeValueWithProperty(v2)).join(" ");
+};
 var PROPERTIES_STANDARD = {
   borderBottomEndRadius: "borderEndEndRadius",
   borderBottomStartRadius: "borderEndStartRadius",
@@ -2485,18 +2437,16 @@ var preprocess = function preprocess2(originalStyle, options) {
   var nextStyle = {};
   if (options.shadow === true, style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
     var boxShadowValue = createBoxShadowValue(style);
-    if (boxShadowValue != null && nextStyle.boxShadow == null) {
-      var boxShadow = style.boxShadow;
-      var value = boxShadow ? boxShadow + ", " + boxShadowValue : boxShadowValue;
-      nextStyle.boxShadow = value;
+    if (boxShadowValue != null) {
+      nextStyle.boxShadow = boxShadowValue;
     }
   }
   if (options.textShadow === true, style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
     var textShadowValue = createTextShadowValue(style);
     if (textShadowValue != null && nextStyle.textShadow == null) {
       var textShadow = style.textShadow;
-      var _value = textShadow ? textShadow + ", " + textShadowValue : textShadowValue;
-      nextStyle.textShadow = _value;
+      var value = textShadow ? textShadow + ", " + textShadowValue : textShadowValue;
+      nextStyle.textShadow = value;
     }
   }
   for (var originalProp in style) {
@@ -2508,28 +2458,39 @@ var preprocess = function preprocess2(originalStyle, options) {
     }
     var originalValue = style[originalProp];
     var prop = PROPERTIES_STANDARD[originalProp] || originalProp;
-    var _value2 = originalValue;
+    var _value = originalValue;
     if (!Object.prototype.hasOwnProperty.call(style, originalProp) || prop !== originalProp && style[prop] != null) {
       continue;
     }
-    if (prop === "aspectRatio" && typeof _value2 === "number") {
-      nextStyle[prop] = _value2.toString();
+    if (prop === "aspectRatio" && typeof _value === "number") {
+      nextStyle[prop] = _value.toString();
+    } else if (prop === "boxShadow") {
+      if (Array.isArray(_value)) {
+        _value = createBoxShadowArrayValue(_value);
+      }
+      var boxShadow = nextStyle.boxShadow;
+      nextStyle.boxShadow = boxShadow ? _value + ", " + boxShadow : _value;
     } else if (prop === "fontVariant") {
-      if (Array.isArray(_value2) && _value2.length > 0) {
-        _value2 = _value2.join(" ");
+      if (Array.isArray(_value) && _value.length > 0) {
+        _value = _value.join(" ");
       }
-      nextStyle[prop] = _value2;
+      nextStyle[prop] = _value;
     } else if (prop === "textAlignVertical") {
       if (style.verticalAlign == null) {
-        nextStyle.verticalAlign = _value2 === "center" ? "middle" : _value2;
+        nextStyle.verticalAlign = _value === "center" ? "middle" : _value;
       }
     } else if (prop === "transform") {
-      if (Array.isArray(_value2)) {
-        _value2 = createTransformValue(_value2);
+      if (Array.isArray(_value)) {
+        _value = createTransformValue(_value);
+      }
+      nextStyle.transform = _value;
+    } else if (prop === "transformOrigin") {
+      if (Array.isArray(_value)) {
+        _value = createTransformOriginValue(_value);
       }
-      nextStyle.transform = _value2;
+      nextStyle.transformOrigin = _value;
     } else {
-      nextStyle[prop] = _value2;
+      nextStyle[prop] = _value;
     }
   }
   return nextStyle;
@@ -3440,6 +3401,7 @@ var createElement = (component, props, options) => {
   }) : element;
   return elementWithLocaleProvider;
 };
+var client = {};
 var reactDom = { exports: {} };
 var reactDom_production_min = {};
 var scheduler = { exports: {} };
@@ -10027,11 +9989,11 @@ function requireReactDom_production_min() {
   };
   Gb = Qk;
   Hb = Rk;
-  var sl = { usingClientEntryPoint: false, Events: [Cb, ue, Db, Eb, Fb, Qk] }, tl = { findFiberByHostInstance: Wc, bundleType: 0, version: "18.3.1", rendererPackageName: "react-dom" };
+  var sl = { usingClientEntryPoint: false, Events: [Cb, ue, Db, Eb, Fb, Qk] }, tl = { findFiberByHostInstance: Wc, bundleType: 0, version: "18.3.0", rendererPackageName: "react-dom" };
   var ul = { bundleType: tl.bundleType, version: tl.version, rendererPackageName: tl.rendererPackageName, rendererConfig: tl.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, overrideProps: null, overridePropsDeletePath: null, overridePropsRenamePath: null, setErrorHandler: null, setSuspenseHandler: null, scheduleUpdate: null, currentDispatcherRef: ua.ReactCurrentDispatcher, findHostInstanceByFiber: function(a) {
     a = Zb(a);
     return null === a ? null : a.stateNode;
-  }, findFiberByHostInstance: tl.findFiberByHostInstance || jl, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, reconcilerVersion: "18.3.1-next-f1338f8080-20240426" };
+  }, findFiberByHostInstance: tl.findFiberByHostInstance || jl, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, reconcilerVersion: "18.3.0-next-8a015b68cc-20240425" };
   if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
     var vl = __REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!vl.isDisabled && vl.supportsFiber) try {
@@ -10106,7 +10068,7 @@ function requireReactDom_production_min() {
     if (null == a || void 0 === a._reactInternals) throw Error(p(38));
     return rl(a, b, c, false, d);
   };
-  reactDom_production_min.version = "18.3.1-next-f1338f8080-20240426";
+  reactDom_production_min.version = "18.3.0-next-8a015b68cc-20240425";
   return reactDom_production_min;
 }
 var hasRequiredReactDom;
@@ -10129,8 +10091,6 @@ function requireReactDom() {
   }
   return reactDom.exports;
 }
-var reactDomExports = requireReactDom();
-var client = {};
 var hasRequiredClient;
 function requireClient() {
   if (hasRequiredClient) return client;
@@ -10143,7 +10103,6 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
-const unmountComponentAtNode = reactDomExports.unmountComponentAtNode;
 function hydrate(element, root) {
   createSheet(root);
   return clientExports.hydrateRoot(root, element);
@@ -10154,23 +10113,9 @@ function render(element, root) {
   reactRoot.render(element);
   return reactRoot;
 }
-function hydrateLegacy(element, root, callback) {
-  createSheet(root);
-  reactDomExports.hydrate(element, root, callback);
-  return {
-    unmount: function unmount() {
-      return unmountComponentAtNode(root);
-    }
-  };
-}
-function renderLegacy(element, root, callback) {
-  createSheet(root);
-  reactDomExports.render(element, root, callback);
-  return {
-    unmount: function unmount() {
-      return unmountComponentAtNode(root);
-    }
-  };
+function unmountComponentAtNode(rootTag) {
+  rootTag.unmount();
+  return true;
 }
 var getBoundingClientRect$1 = (node) => {
   if (node != null) {
@@ -11496,6 +11441,7 @@ var View = /* @__PURE__ */ reactExports.forwardRef((props, forwardedRef) => {
 View.displayName = "View";
 var styles$6 = stylesheet.create({
   view$raw: {
+    alignContent: "flex-start",
     alignItems: "stretch",
     backgroundColor: "transparent",
     border: "0 solid black",
@@ -11572,8 +11518,8 @@ var styles$5 = stylesheet.create({
   }
 });
 function renderApplication(RootComponent, WrapperComponent, callback, options) {
-  var shouldHydrate = options.hydrate, initialProps = options.initialProps, mode = options.mode, rootTag = options.rootTag;
-  var renderFn = shouldHydrate ? mode === "concurrent" ? hydrate : hydrateLegacy : mode === "concurrent" ? render : renderLegacy;
+  var shouldHydrate = options.hydrate, initialProps = options.initialProps, rootTag = options.rootTag;
+  var renderFn = shouldHydrate ? hydrate : render;
   invariant(rootTag, "Expect to have a valid rootTag, instead got ", rootTag);
   return renderFn(/* @__PURE__ */ React.createElement(AppContainer, {
     WrapperComponent,
@@ -11656,6 +11602,7 @@ class AppRegistry {
     unmountComponentAtNode(rootTag);
   }
 }
+var reactDomExports = requireReactDom();
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -12223,7 +12170,7 @@ var isContentEditable = function isContentEditable2(node) {
   var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, "contenteditable");
   return attValue === "" || attValue === "true";
 };
-var getCandidates = function getCandidates2(el, includeContainer, filter2) {
+var getCandidates = function getCandidates2(el, includeContainer, filter) {
   if (isInert(el)) {
     return [];
   }
@@ -12231,7 +12178,7 @@ var getCandidates = function getCandidates2(el, includeContainer, filter2) {
   if (includeContainer && matches.call(el, candidateSelector)) {
     candidates.unshift(el);
   }
-  candidates = candidates.filter(filter2);
+  candidates = candidates.filter(filter);
   return candidates;
 };
 var getCandidatesIteratively = function getCandidatesIteratively2(elements, includeContainer, options) {
@@ -16505,7 +16452,6 @@ function NetworkActivityPanel() {
     }
     if (isRecording) {
       client2.send("network-enable", {});
-      console.log("enabling!");
     } else {
       client2.send("network-disable", {});
     }

package/dist/panel.html

@@ -22,7 +22,7 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="./assets/panel-CU9Fj1Ml.js"></script>
+    <script type="module" crossorigin src="./assets/panel-BNxB_KsS.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/panel-DXGMsavf.css">
   </head>
   <body>

package/dist/rozenite.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -9,19 +9,22 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.0.0",
     "@floating-ui/react": "^0.26.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.3"
+    "@rozenite/plugin-bridge": "1.0.0-alpha.5"
   },
   "devDependencies": {
-    "typescript": "^5.7.3",
     "vite": "^6.0.0",
-    "react": "*",
-    "react-native": "*",
-    "@rozenite/vite-plugin": "1.0.0-alpha.3",
-    "rozenite": "1.0.0-alpha.3"
+    "typescript": "^5.7.3",
+    "react-native-web": "0.21.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.0",
+    "react-native": "0.76.0",
+    "@types/react": "~18.3.12",
+    "@rozenite/vite-plugin": "1.0.0-alpha.5",
+    "rozenite": "1.0.0-alpha.5"
   },
   "peerDependencies": {
-    "react": ">= 17.0.0",
-    "react-native": ">= 0.74.0"
+    "react": "*",
+    "react-native": "*"
   },
   "license": "MIT",
   "scripts": {

package/project.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "@rozenite/network-activity-plugin",
+  "targets": {
+    "build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["{projectRoot}/src/**/*"],
+      "outputs": ["{projectRoot}/dist"]
+    }
+  }
+}

package/src/ui/panel.tsx

@@ -87,7 +87,6 @@ export default function NetworkActivityPanel() {
 
     if (isRecording) {
       client.send('network-enable', {});
-      console.log('enabling!');
     } else {
       client.send('network-disable', {});
     }

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/css-modules.d.ts","./src/react-native/network-inspector.ts","./src/react-native/network-requests-registry.ts","./src/react-native/usenetworkactivitydevtools.ts","./src/react-native/xhr-interceptor.ts","./src/react-native/xml-request.d.ts","./src/types/client.ts","./src/types/network.ts","./src/ui/components.tsx","./src/ui/network-details.tsx","./src/ui/network-list.tsx","./src/ui/network-toolbar.tsx","./src/ui/panel.tsx","./src/ui/tanstack-query.tsx","./src/ui/utils.ts","./react-native.ts","./rozenite.config.ts"],"errors":true,"version":"5.8.3"}