@rozenite/performance-monitor-plugin 1.0.0-alpha.11

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Szymon Chmal
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+![rozenite-banner](https://www.rozenite.dev/rozenite-banner.jpg)
+
+### A Rozenite plugin that provides real-time React Native performance monitoring and metrics visualization in DevTools.
+
+[![mit licence][license-badge]][license] [![npm downloads][npm-downloads-badge]][npm-downloads] [![Chat][chat-badge]][chat] [![PRs Welcome][prs-welcome-badge]][prs-welcome]
+
+The Rozenite Performance Monitor Plugin offers comprehensive real-time monitoring of React Native performance metrics within your DevTools environment. It tracks performance marks, measures, and metrics to help you identify bottlenecks and optimize your app's performance.
+
+## Features
+
+- **Real-time Performance Monitoring**: Live tracking of performance marks, measures, and metrics
+- **Session Management**: Start/stop monitoring sessions with real-time duration tracking
+- **Performance Measures**: Track custom performance measurements with details
+- **Performance Marks**: Monitor key performance milestones and events
+- **Performance Metrics**: Real-time metrics with values and details
+- **Data Export**: Export performance data for analysis
+- **Bidirectional Communication**: Real-time sync between device and DevTools
+- **Production Safety**: Automatically disabled in production builds
+
+## Installation
+
+Install the Performance Monitor plugin as a dependency:
+
+```bash
+npm install @rozenite/performance-monitor-plugin
+```
+
+## Quick Start
+
+### 1. Install the Plugin
+
+```bash
+npm install @rozenite/performance-monitor-plugin
+```
+
+### 2. Integrate with Your React Native App
+
+Add the DevTools hook to your React Native app:
+
+```typescript
+// App.tsx
+import { usePerformanceMonitorDevTools } from '@rozenite/performance-monitor-plugin';
+
+function App() {
+  // Enable Performance Monitor DevTools in development
+  usePerformanceMonitorDevTools();
+
+  return (
+    // Your app components
+  );
+}
+```
+
+### 3. Access DevTools
+
+Start your development server and open React Native DevTools. You'll find the "Performance Monitor" panel in the DevTools interface.
+
+## Usage
+
+### Basic Integration
+
+The plugin automatically integrates with your existing React Native setup:
+
+```typescript
+import { usePerformanceMonitorDevTools } from '@rozenite/performance-monitor-plugin';
+
+function App() {
+  // DevTools are automatically enabled in development
+  usePerformanceMonitorDevTools();
+
+  return <YourApp />;
+}
+```
+
+### Using Performance API
+
+The plugin works with React Native's Performance API. You can add custom performance marks and measures:
+
+```typescript
+import performance from 'react-native-performance';
+
+// Add performance marks
+performance.mark('app-start');
+performance.mark('data-loaded');
+
+// Measure performance between marks
+performance.measure('app-initialization', 'app-start', 'data-loaded');
+
+// Add custom metrics
+performance.metric('custom-metric', 42, { detail: 'Additional info' });
+```
+
+## Performance Data Types
+
+### Performance Marks
+
+- **Purpose**: Mark specific points in time for performance analysis
+- **Use Cases**: App startup, data loading, user interactions
+- **Example**: `performance.mark('user-login-complete')`
+
+### Performance Measures
+
+- **Purpose**: Measure duration between two marks or specific time periods
+- **Details**: Can include additional context information
+- **Example**: `performance.measure('login-duration', 'login-start', 'login-end')`
+
+### Performance Metrics
+
+- **Purpose**: Track specific performance indicators
+- **Values**: Can be strings or numbers
+- **Details**: Can include additional context information
+- **Example**: `performance.metric('memory-usage', 1024, { unit: 'MB' })`
+
+## Made with ❤️ at Callstack
+
+`rozenite` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.
+
+[Callstack][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!
+
+Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥
+
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love
+[license-badge]: https://img.shields.io/npm/l/rozenite?style=for-the-badge
+[license]: https://github.com/callstackincubator/rozenite/blob/main/LICENSE
+[npm-downloads-badge]: https://img.shields.io/npm/dm/rozenite?style=for-the-badge
+[npm-downloads]: https://www.npmjs.com/package/@rozenite/performance-monitor-plugin
+[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

package/dist/App.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>App Panel</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        overflow: hidden;
+      }
+
+      #root {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+    <script>
+      var __ROZENITE_PANEL__ = true;
+    </script>
+    <script type="module" crossorigin src="./assets/App-C1ubeKf9.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/App-DRvEE1L4.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>