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

package/dist/react-native.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.usePerformanceMonitorDevTools=void 0;process.env.NODE_ENV!=="production"?exports.usePerformanceMonitorDevTools=require("./usePerformanceMonitorDevTools.cjs").usePerformanceMonitorDevTools:exports.usePerformanceMonitorDevTools=()=>null;

package/dist/react-native.d.ts

@@ -0,0 +1 @@
+export declare let usePerformanceMonitorDevTools: typeof import('./src/react-native/usePerformanceMonitorDevTools').usePerformanceMonitorDevTools;

package/dist/react-native.js

@@ -0,0 +1,5 @@
+let e;
+process.env.NODE_ENV !== "production" ? e = require("./usePerformanceMonitorDevTools.js").usePerformanceMonitorDevTools : e = () => null;
+export {
+  e as usePerformanceMonitorDevTools
+};

package/dist/rozenite.config.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    panels: {
+        name: string;
+        source: string;
+    }[];
+};
+export default _default;

package/dist/rozenite.json

@@ -0,0 +1 @@
+{"name":"@rozenite/performance-monitor-plugin","version":"1.0.0-alpha.10","description":"Performance Monitor for Rozenite.","panels":[{"name":"Performance Monitor","source":"/App.html"}]}

package/dist/src/react-native/asserts.d.ts

@@ -0,0 +1,4 @@
+import { PerformanceMark, PerformanceMeasure, PerformanceMetric } from 'react-native-performance';
+export declare function assertPerformanceMark(entry: PerformanceEntry): asserts entry is PerformanceMark;
+export declare function assertPerformanceMeasure(entry: PerformanceEntry): asserts entry is PerformanceMeasure;
+export declare function assertPerformanceMetric(entry: PerformanceEntry): asserts entry is PerformanceMetric;

package/dist/src/react-native/helpers.d.ts

@@ -0,0 +1 @@
+export declare const toDateTimestamp: (origin: number, startTime: number) => number;

package/dist/src/react-native/performance-monitor.d.ts

@@ -0,0 +1,8 @@
+import { PerformanceMonitorDevToolsClient } from '../shared/types';
+export type PerformanceMonitor = {
+    enable: () => void;
+    disable: () => void;
+    isEnabled: () => boolean;
+    dispose: () => void;
+};
+export declare const getPerformanceMonitor: (client: PerformanceMonitorDevToolsClient) => PerformanceMonitor;

package/dist/src/react-native/usePerformanceMonitorDevTools.d.ts

@@ -0,0 +1 @@
+export declare const usePerformanceMonitorDevTools: () => void;

package/dist/src/shared/types.d.ts

@@ -0,0 +1,39 @@
+import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+export type SharedPerformanceEntryProperties = {
+    name: string;
+    startTime: number;
+    duration: number;
+};
+export type SerializedPerformanceMeasure = SharedPerformanceEntryProperties & {
+    entryType: 'measure';
+    detail?: unknown;
+};
+export type SerializedPerformanceMark = SharedPerformanceEntryProperties & {
+    entryType: 'mark';
+    detail?: unknown;
+};
+export type SerializedPerformanceMetric = SharedPerformanceEntryProperties & {
+    entryType: 'metric';
+    value: string | number;
+    detail?: unknown;
+};
+export type SerializedPerformanceEntry = SerializedPerformanceMeasure | SerializedPerformanceMark | SerializedPerformanceMetric;
+export type PerformanceMonitorEventMap = {
+    setEnabled: {
+        enabled: boolean;
+    };
+    setSession: {
+        sessionStartedAt: number;
+        timeOrigin: number;
+    };
+    appendMeasures: {
+        measures: SerializedPerformanceMeasure[];
+    };
+    appendMarks: {
+        marks: SerializedPerformanceMark[];
+    };
+    setMetrics: {
+        metrics: SerializedPerformanceMetric[];
+    };
+};
+export type PerformanceMonitorDevToolsClient = RozeniteDevToolsClient<PerformanceMonitorEventMap>;

package/dist/src/ui/App.d.ts

@@ -0,0 +1 @@
+export default function PerformanceMonitorPanel(): import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/DataTable.d.ts

@@ -0,0 +1,8 @@
+import { ColumnDef } from '@tanstack/react-table';
+export type DataTableProps<TData> = {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    onRowClick?: (item: TData) => void;
+    emptyMessage?: string;
+};
+export declare const DataTable: <TData>({ data, columns, onRowClick, emptyMessage, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/DetailsDisplay.d.ts

@@ -0,0 +1,4 @@
+export type DetailsDisplayProps = {
+    details?: unknown;
+};
+export declare const DetailsDisplay: ({ details }: DetailsDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/DetailsSidebar.d.ts

@@ -0,0 +1,6 @@
+import { SerializedPerformanceEntry } from '../../shared/types';
+export type DetailsSidebarProps = {
+    selectedItem: SerializedPerformanceEntry | null;
+    onClose: () => void;
+};
+export declare const DetailsSidebar: ({ selectedItem, onClose, }: DetailsSidebarProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/ui/components/ExportModal.d.ts

@@ -0,0 +1,9 @@
+import { SerializedPerformanceMeasure, SerializedPerformanceMark, SerializedPerformanceMetric } from '../../shared/types';
+export type ExportModalProps = {
+    measures: SerializedPerformanceMeasure[];
+    metrics: SerializedPerformanceMetric[];
+    marks: SerializedPerformanceMark[];
+    sessionStartedAt: number;
+    clockShift: number;
+};
+export declare function ExportModal({ measures, metrics, marks, sessionStartedAt, clockShift, }: ExportModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/JsonTree.d.ts

@@ -0,0 +1,4 @@
+export type JsonTreeProps = {
+    data: unknown;
+};
+export declare const JsonTree: ({ data }: JsonTreeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MarkDetails.d.ts

@@ -0,0 +1,5 @@
+import { SerializedPerformanceMark } from '../../shared/types';
+export type MarkDetailsProps = {
+    mark: SerializedPerformanceMark;
+};
+export declare const MarkDetails: ({ mark }: MarkDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MarksTable.d.ts

@@ -0,0 +1,6 @@
+import { SerializedPerformanceMark } from '../../shared/types';
+export type MarksTableProps = {
+    marks: SerializedPerformanceMark[];
+    onRowClick?: (mark: SerializedPerformanceMark) => void;
+};
+export declare const MarksTable: ({ marks, onRowClick }: MarksTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MeasureDetails.d.ts

@@ -0,0 +1,5 @@
+import { SerializedPerformanceMeasure } from '../../shared/types';
+export type MeasureDetailsProps = {
+    measure: SerializedPerformanceMeasure;
+};
+export declare const MeasureDetails: ({ measure }: MeasureDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MeasuresTable.d.ts

@@ -0,0 +1,6 @@
+import { SerializedPerformanceMeasure } from '../../shared/types';
+export type MeasuresTableProps = {
+    measures: SerializedPerformanceMeasure[];
+    onRowClick?: (measure: SerializedPerformanceMeasure) => void;
+};
+export declare const MeasuresTable: ({ measures, onRowClick }: MeasuresTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MetricDetails.d.ts

@@ -0,0 +1,5 @@
+import { SerializedPerformanceMetric } from '../../shared/types';
+export type MetricDetailsProps = {
+    metric: SerializedPerformanceMetric;
+};
+export declare const MetricDetails: ({ metric }: MetricDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/MetricsTable.d.ts

@@ -0,0 +1,6 @@
+import { SerializedPerformanceMetric } from '../../shared/types';
+export type MetricsTableProps = {
+    metrics: SerializedPerformanceMetric[];
+    onRowClick?: (metric: SerializedPerformanceMetric) => void;
+};
+export declare const MetricsTable: ({ metrics, onRowClick }: MetricsTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/SessionDuration.d.ts

@@ -0,0 +1,5 @@
+export type SessionDurationProps = {
+    isActive: boolean;
+    sessionStartedAt: number;
+};
+export declare const SessionDuration: ({ isActive, sessionStartedAt, }: SessionDurationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const downloadFile: (data: unknown, filename: string) => Promise<void>;
+export declare const formatTime: (timestamp: number) => string;

package/dist/usePerformanceMonitorDevTools.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("@rozenite/plugin-bridge"),g=require("react"),M=require("react-native-performance"),E=e=>e&&e.__esModule?e:{default:e},a=E(M),m=(e,s)=>e-a.default.timeOrigin+s;function v(e){if(e.entryType!=="mark")throw new Error("Entry is not a PerformanceMark")}function P(e){if(e.entryType!=="measure")throw new Error("Entry is not a PerformanceMeasure")}function k(e){if(e.entryType!=="metric")throw new Error("Entry is not a PerformanceMetric")}const w=e=>{let s=[],o=0,n=0,d=!1;const f=(i,l)=>{const u=new M.PerformanceObserver(i);u.observe(l),s.push(u)},b=()=>{d=!0,n=Date.now(),o=m(n,a.default.now()),e.send("setSession",{sessionStartedAt:o,timeOrigin:a.default.timeOrigin});const i=t=>{e.send("appendMeasures",{measures:t})},l=t=>{e.send("appendMarks",{marks:t})},u=t=>{e.send("setMetrics",{metrics:t})};f(t=>{const r=t.getEntries().map(c=>(v(c),{name:c.name,startTime:m(n,c.startTime),duration:c.duration,entryType:"mark"}));l(r)},{type:"mark",buffered:!0}),f(t=>{i(t.getEntries().map(r=>(P(r),{name:r.name,startTime:m(n,r.startTime),duration:r.duration,entryType:"measure",detail:r.detail})))},{type:"measure",buffered:!0}),f(t=>{u(t.getEntries().map(r=>(k(r),{name:r.name,startTime:m(n,r.startTime),duration:r.duration,entryType:"metric",value:r.value,detail:r.detail})))},{type:"metric",buffered:!0})},p=()=>{s.forEach(i=>{i.disconnect()}),a.default.clearMarks(),a.default.clearMeasures(),a.default.clearMetrics(),s=[],d=!1,o=0,n=0};return{enable:b,disable:p,isEnabled:()=>d,dispose:()=>{p()}}},y=()=>{const e=T.useRozeniteDevToolsClient({pluginId:"@rozenite/performance-monitor-plugin"});g.useEffect(()=>{if(!e)return;const s=w(e),o=e.onMessage("setEnabled",({enabled:n})=>{n?s.enable():s.disable()});return()=>{o.remove(),s.dispose()}},[e])};exports.usePerformanceMonitorDevTools=y;

package/dist/usePerformanceMonitorDevTools.js

@@ -0,0 +1,118 @@
+import { useRozeniteDevToolsClient as b } from "@rozenite/plugin-bridge";
+import { useEffect as T } from "react";
+import a, { PerformanceObserver as E } from "react-native-performance";
+const u = (e, s) => e - a.timeOrigin + s;
+function g(e) {
+  if (e.entryType !== "mark")
+    throw new Error("Entry is not a PerformanceMark");
+}
+function v(e) {
+  if (e.entryType !== "measure")
+    throw new Error("Entry is not a PerformanceMeasure");
+}
+function k(e) {
+  if (e.entryType !== "metric")
+    throw new Error("Entry is not a PerformanceMetric");
+}
+const w = (e) => {
+  let s = [], o = 0, n = 0, p = !1;
+  const d = (i, f) => {
+    const m = new E(i);
+    m.observe(f), s.push(m);
+  }, M = () => {
+    p = !0, n = Date.now(), o = u(n, a.now()), e.send("setSession", {
+      sessionStartedAt: o,
+      timeOrigin: a.timeOrigin
+    });
+    const i = (t) => {
+      e.send("appendMeasures", {
+        measures: t
+      });
+    }, f = (t) => {
+      e.send("appendMarks", {
+        marks: t
+      });
+    }, m = (t) => {
+      e.send("setMetrics", {
+        metrics: t
+      });
+    };
+    d(
+      (t) => {
+        const r = t.getEntries().map((c) => (g(c), {
+          name: c.name,
+          startTime: u(n, c.startTime),
+          duration: c.duration,
+          entryType: "mark"
+        }));
+        f(r);
+      },
+      {
+        type: "mark",
+        buffered: !0
+      }
+    ), d(
+      (t) => {
+        i(
+          t.getEntries().map((r) => (v(r), {
+            name: r.name,
+            startTime: u(n, r.startTime),
+            duration: r.duration,
+            entryType: "measure",
+            detail: r.detail
+          }))
+        );
+      },
+      {
+        type: "measure",
+        buffered: !0
+      }
+    ), d(
+      (t) => {
+        m(
+          t.getEntries().map((r) => (k(r), {
+            name: r.name,
+            startTime: u(n, r.startTime),
+            duration: r.duration,
+            entryType: "metric",
+            value: r.value,
+            detail: r.detail
+          }))
+        );
+      },
+      {
+        type: "metric",
+        buffered: !0
+      }
+    );
+  }, l = () => {
+    s.forEach((i) => {
+      i.disconnect();
+    }), a.clearMarks(), a.clearMeasures(), a.clearMetrics(), s = [], p = !1, o = 0, n = 0;
+  };
+  return {
+    enable: M,
+    disable: l,
+    isEnabled: () => p,
+    dispose: () => {
+      l();
+    }
+  };
+}, z = () => {
+  const e = b({
+    pluginId: "@rozenite/performance-monitor-plugin"
+  });
+  T(() => {
+    if (!e)
+      return;
+    const s = w(e), o = e.onMessage("setEnabled", ({ enabled: n }) => {
+      n ? s.enable() : s.disable();
+    });
+    return () => {
+      o.remove(), s.dispose();
+    };
+  }, [e]);
+};
+export {
+  z as usePerformanceMonitorDevTools
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@rozenite/performance-monitor-plugin",
+  "version": "1.0.0-alpha.11",
+  "description": "Performance Monitor for Rozenite.",
+  "type": "module",
+  "main": "./dist/react-native.cjs",
+  "module": "./dist/react-native.js",
+  "types": "./dist/react-native.d.ts",
+  "dependencies": {
+    "@rozenite/plugin-bridge": "1.0.0-alpha.11"
+  },
+  "devDependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/themes": "^3.2.1",
+    "@tanstack/react-table": "^8.21.3",
+    "react-virtuoso": "^4.6.0",
+    "@types/react": "~18.3.12",
+    "react": "18.3.1",
+    "react-dom": "18.3.0",
+    "react-json-tree": "^0.20.0",
+    "react-native": "0.76.0",
+    "react-native-performance": "5.1.4",
+    "react-native-web": "0.21.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "@rozenite/vite-plugin": "1.0.0-alpha.11",
+    "rozenite": "1.0.0-alpha.11"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-performance": "*"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rozenite build",
+    "dev": "rozenite dev"
+  }
+}

package/project.json

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

package/react-native.ts

@@ -0,0 +1,8 @@
+export let usePerformanceMonitorDevTools: typeof import('./src/react-native/usePerformanceMonitorDevTools').usePerformanceMonitorDevTools;
+
+if (process.env.NODE_ENV !== 'production') {
+  usePerformanceMonitorDevTools =
+    require('./src/react-native/usePerformanceMonitorDevTools').usePerformanceMonitorDevTools;
+} else {
+  usePerformanceMonitorDevTools = () => null;
+}

package/rozenite.config.ts

@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'Performance Monitor',
+      source: './src/ui/App.tsx',
+    },
+  ],
+};

package/src/react-native/asserts.ts

@@ -0,0 +1,29 @@
+import type {
+  PerformanceMark,
+  PerformanceMeasure,
+  PerformanceMetric,
+} from 'react-native-performance';
+
+export function assertPerformanceMark(
+  entry: PerformanceEntry
+): asserts entry is PerformanceMark {
+  if (entry.entryType !== 'mark') {
+    throw new Error('Entry is not a PerformanceMark');
+  }
+}
+
+export function assertPerformanceMeasure(
+  entry: PerformanceEntry
+): asserts entry is PerformanceMeasure {
+  if (entry.entryType !== 'measure') {
+    throw new Error('Entry is not a PerformanceMeasure');
+  }
+}
+
+export function assertPerformanceMetric(
+  entry: PerformanceEntry
+): asserts entry is PerformanceMetric {
+  if (entry.entryType !== 'metric') {
+    throw new Error('Entry is not a PerformanceMetric');
+  }
+}

package/src/react-native/helpers.ts

@@ -0,0 +1,4 @@
+import performance from 'react-native-performance';
+
+export const toDateTimestamp = (origin: number, startTime: number): number =>
+  origin - performance.timeOrigin + startTime;

package/src/react-native/performance-monitor.ts

@@ -0,0 +1,171 @@
+import performance, {
+  EntryType,
+  PerformanceEntry,
+  PerformanceObserver,
+} from 'react-native-performance';
+import type {
+  PerformanceMonitorDevToolsClient,
+  SerializedPerformanceMark,
+  SerializedPerformanceMeasure,
+  SerializedPerformanceMetric,
+} from '../shared/types';
+import { toDateTimestamp } from './helpers';
+import {
+  assertPerformanceMark,
+  assertPerformanceMeasure,
+  assertPerformanceMetric,
+} from './asserts';
+
+type PerformanceObserverOptions = { type: EntryType; buffered?: boolean };
+
+type PerformanceObserverEntryList = {
+  entries: PerformanceEntry[];
+  getEntries(): PerformanceEntry[];
+  getEntriesByType(type: EntryType): PerformanceEntry[];
+  getEntriesByName(name: string, type?: EntryType): PerformanceEntry[];
+};
+
+type PerformanceObserverCallback = (
+  list: PerformanceObserverEntryList,
+  observer: PerformanceObserver
+) => void;
+
+export type PerformanceMonitor = {
+  enable: () => void;
+  disable: () => void;
+  isEnabled: () => boolean;
+  dispose: () => void;
+};
+
+export const getPerformanceMonitor = (
+  client: PerformanceMonitorDevToolsClient
+): PerformanceMonitor => {
+  let observers: PerformanceObserver[] = [];
+  let sessionStartedAt = 0;
+  let origin = 0;
+  let isObserving = false;
+
+  const addObserver = (
+    callback: PerformanceObserverCallback,
+    options: PerformanceObserverOptions
+  ) => {
+    const observer = new PerformanceObserver(callback);
+    observer.observe(options);
+    observers.push(observer);
+  };
+
+  const enable = (): void => {
+    isObserving = true;
+    origin = Date.now();
+    sessionStartedAt = toDateTimestamp(origin, performance.now());
+    client.send('setSession', {
+      sessionStartedAt,
+      timeOrigin: performance.timeOrigin,
+    });
+
+    const appendMeasures = (measures: SerializedPerformanceMeasure[]) => {
+      client.send('appendMeasures', {
+        measures,
+      });
+    };
+
+    const appendMarks = (marks: SerializedPerformanceMark[]) => {
+      client.send('appendMarks', {
+        marks,
+      });
+    };
+
+    const setMetrics = (metrics: SerializedPerformanceMetric[]) => {
+      client.send('setMetrics', {
+        metrics,
+      });
+    };
+
+    addObserver(
+      (list) => {
+        const marks = list.getEntries().map((entry) => {
+          assertPerformanceMark(entry);
+
+          return {
+            name: entry.name,
+            startTime: toDateTimestamp(origin, entry.startTime),
+            duration: entry.duration,
+            entryType: 'mark' as const,
+          };
+        });
+
+        appendMarks(marks);
+      },
+      {
+        type: 'mark',
+        buffered: true,
+      }
+    );
+    addObserver(
+      (list) => {
+        appendMeasures(
+          list.getEntries().map((entry) => {
+            assertPerformanceMeasure(entry);
+
+            return {
+              name: entry.name,
+              startTime: toDateTimestamp(origin, entry.startTime),
+              duration: entry.duration,
+              entryType: 'measure' as const,
+              detail: entry.detail,
+            };
+          })
+        );
+      },
+      {
+        type: 'measure',
+        buffered: true,
+      }
+    );
+    addObserver(
+      (list) => {
+        setMetrics(
+          list.getEntries().map((entry) => {
+            assertPerformanceMetric(entry);
+
+            return {
+              name: entry.name,
+              startTime: toDateTimestamp(origin, entry.startTime),
+              duration: entry.duration,
+              entryType: 'metric' as const,
+              value: entry.value,
+              detail: entry.detail,
+            };
+          })
+        );
+      },
+      {
+        type: 'metric',
+        buffered: true,
+      }
+    );
+  };
+  const disable = (): void => {
+    observers.forEach((observer) => {
+      observer.disconnect();
+    });
+    performance.clearMarks();
+    performance.clearMeasures();
+    performance.clearMetrics();
+    observers = [];
+    isObserving = false;
+    sessionStartedAt = 0;
+    origin = 0;
+  };
+  const isEnabled = (): boolean => isObserving;
+  const dispose = (): void => {
+    disable();
+  };
+
+  return {
+    enable,
+    disable,
+    isEnabled,
+    dispose,
+  };
+};

package/src/react-native/usePerformanceMonitorDevTools.ts

@@ -0,0 +1,31 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { useEffect } from 'react';
+import { getPerformanceMonitor } from './performance-monitor';
+import { PerformanceMonitorEventMap } from '../shared/types';
+
+export const usePerformanceMonitorDevTools = () => {
+  const client = useRozeniteDevToolsClient<PerformanceMonitorEventMap>({
+    pluginId: '@rozenite/performance-monitor-plugin',
+  });
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const performanceMonitor = getPerformanceMonitor(client);
+
+    const subscription = client.onMessage('setEnabled', ({ enabled }) => {
+      if (enabled) {
+        performanceMonitor.enable();
+      } else {
+        performanceMonitor.disable();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+      performanceMonitor.dispose();
+    };
+  }, [client]);
+};