react-render-pulse 0.0.0-stage → 1.0.0

package/dist/transport/transport.d.ts

@@ -0,0 +1,19 @@
+export interface TransportOptions {
+    endpoint: string;
+    /** Failed sends are retried on later flushes, up to this many attempts in total. */
+    maxAttempts: number;
+    /** Most failed bodies kept for retry; the oldest are dropped past this. */
+    maxQueued: number;
+}
+export interface Transport {
+    /**
+     * Sends a serialized payload. With `unloading`, uses `navigator.sendBeacon`
+     * (falling back to `fetch` with `keepalive`), since the page may be gone
+     * before a normal request finishes. Never throws or rejects.
+     */
+    send: (body: string, options: {
+        unloading: boolean;
+    }) => void;
+}
+export declare function createTransport(options: TransportOptions): Transport;
+//# sourceMappingURL=transport.d.ts.map

package/dist/transport/transport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.d.ts","sourceRoot":"","sources":["../../src/transport/transport.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;;;OAIG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC/D;AAOD,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,SAAS,CA+CpE"}

package/dist/types.d.cts

@@ -0,0 +1,120 @@
+/** How render durations are measured. See the "Modes" guide. */
+export type Mode = "profiling" | "lightweight";
+/** `"auto"` starts in lightweight mode and switches to profiling mode once React's profiling build is detected. */
+export type ModeOption = Mode | "auto";
+/** Mirrors the `phase` React's `<Profiler>` reports. */
+export type RenderPhase = "mount" | "update" | "nested-update";
+/** One measured commit of one monitored area. Times are on the `performance.now()` timeline, in milliseconds. */
+export interface RenderEvent {
+    /** The `id` given to `<RenderMonitor>` or `useRenderMonitor`. */
+    area: string;
+    route: string;
+    phase: RenderPhase;
+    duration: number;
+    startTime: number;
+    endTime: number;
+    /** How this measurement was taken: `"profiling"` for `<Profiler>` timings, `"lightweight"` for marks (including every `useRenderMonitor` measurement). */
+    mode: Mode;
+}
+export type LongTaskKind = "longtask" | "long-animation-frame";
+/** A main-thread block reported by a `PerformanceObserver`, tagged with the monitored area that was rendering. */
+export interface LongTaskEvent {
+    kind: LongTaskKind;
+    /**
+     * The area blamed for the block: of the renders that overlapped it, the
+     * innermost one that accounts for at least half of the longest. `null`
+     * when no recent render overlapped it (e.g. work in an event handler).
+     */
+    area: string | null;
+    route: string;
+    startTime: number;
+    duration: number;
+}
+/**
+ * Receives measurements as they happen (`onRender`, `onLongTask`) and the
+ * batch on each flush (`onFlush`). Errors thrown here are caught, so an
+ * exporter can never break the app.
+ */
+export interface Exporter {
+    onRender?: ((event: RenderEvent) => void) | undefined;
+    onLongTask?: ((event: LongTaskEvent) => void) | undefined;
+    onFlush?: ((payload: Payload) => void) | undefined;
+}
+/** Device details from browser APIs. `null` when the browser doesn't expose one. */
+export interface DeviceContext {
+    memoryGb: number | null;
+    cores: number | null;
+    /** `navigator.connection.effectiveType`, e.g. `"4g"`. */
+    connection: string | null;
+    /** `${innerWidth}x${innerHeight}` in CSS pixels. */
+    viewport: string;
+}
+export interface SessionInfo {
+    /** Random per page load and never stored on the device, so it can't identify a user. Lets the collector group batches. */
+    id: string;
+    /** Batch number within the session, starting at 1. */
+    seq: number;
+    mode: Mode;
+    /** The route when the batch was built. */
+    route: string;
+    appVersion: string | null;
+    /** Epoch milliseconds when the session started and when this batch was built. */
+    startedAt: number;
+    sentAt: number;
+}
+/** One of the slowest renders of an area in a batch. */
+export interface WorstCase {
+    ms: number;
+    phase: RenderPhase;
+    /** Milliseconds since the session started. */
+    at: number;
+}
+/** Render timings for one area on one route, for one batch. Durations are in milliseconds. */
+export interface AreaReport {
+    id: string;
+    route: string;
+    renders: number;
+    mounts: number;
+    /** Renders slower than `slowRenderMs`. */
+    slow: number;
+    totalMs: number;
+    /** Fastest render; with `max`, it bounds percentile estimates from merged histograms. */
+    min: number;
+    max: number;
+    p50: number;
+    p75: number;
+    p95: number;
+    /** Render counts per `HISTOGRAM_BOUNDS` bucket, plus a final overflow bucket. Histograms from many batches can be added together. */
+    hist: number[];
+    worst: WorstCase[];
+}
+export interface LongTaskReport {
+    area: string | null;
+    route: string;
+    count: number;
+    totalMs: number;
+    maxMs: number;
+}
+/** Totals for the whole batch, across every area and route. */
+export interface SessionSummary {
+    renders: number;
+    slowRenders: number;
+    longTasks: number;
+    longTaskMs: number;
+    longFrames: number;
+    longFrameMs: number;
+}
+/** What gets sent to the collector. Durations are in milliseconds; no user IDs, IP addresses, or page text. */
+export interface Payload {
+    v: 1;
+    session: SessionInfo;
+    device: DeviceContext;
+    summary: SessionSummary;
+    areas: AreaReport[];
+    longTasks: LongTaskReport[];
+    longFrames: LongTaskReport[];
+    /** Areas left out to respect `maxAreas` or `maxPayloadBytes`. */
+    dropped: {
+        areas: number;
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,121 @@
+/** How render durations are measured. See the "Modes" guide. */
+export type Mode = "profiling" | "lightweight";
+/** `"auto"` starts in lightweight mode and switches to profiling mode once React's profiling build is detected. */
+export type ModeOption = Mode | "auto";
+/** Mirrors the `phase` React's `<Profiler>` reports. */
+export type RenderPhase = "mount" | "update" | "nested-update";
+/** One measured commit of one monitored area. Times are on the `performance.now()` timeline, in milliseconds. */
+export interface RenderEvent {
+    /** The `id` given to `<RenderMonitor>` or `useRenderMonitor`. */
+    area: string;
+    route: string;
+    phase: RenderPhase;
+    duration: number;
+    startTime: number;
+    endTime: number;
+    /** How this measurement was taken: `"profiling"` for `<Profiler>` timings, `"lightweight"` for marks (including every `useRenderMonitor` measurement). */
+    mode: Mode;
+}
+export type LongTaskKind = "longtask" | "long-animation-frame";
+/** A main-thread block reported by a `PerformanceObserver`, tagged with the monitored area that was rendering. */
+export interface LongTaskEvent {
+    kind: LongTaskKind;
+    /**
+     * The area blamed for the block: of the renders that overlapped it, the
+     * innermost one that accounts for at least half of the longest. `null`
+     * when no recent render overlapped it (e.g. work in an event handler).
+     */
+    area: string | null;
+    route: string;
+    startTime: number;
+    duration: number;
+}
+/**
+ * Receives measurements as they happen (`onRender`, `onLongTask`) and the
+ * batch on each flush (`onFlush`). Errors thrown here are caught, so an
+ * exporter can never break the app.
+ */
+export interface Exporter {
+    onRender?: ((event: RenderEvent) => void) | undefined;
+    onLongTask?: ((event: LongTaskEvent) => void) | undefined;
+    onFlush?: ((payload: Payload) => void) | undefined;
+}
+/** Device details from browser APIs. `null` when the browser doesn't expose one. */
+export interface DeviceContext {
+    memoryGb: number | null;
+    cores: number | null;
+    /** `navigator.connection.effectiveType`, e.g. `"4g"`. */
+    connection: string | null;
+    /** `${innerWidth}x${innerHeight}` in CSS pixels. */
+    viewport: string;
+}
+export interface SessionInfo {
+    /** Random per page load and never stored on the device, so it can't identify a user. Lets the collector group batches. */
+    id: string;
+    /** Batch number within the session, starting at 1. */
+    seq: number;
+    mode: Mode;
+    /** The route when the batch was built. */
+    route: string;
+    appVersion: string | null;
+    /** Epoch milliseconds when the session started and when this batch was built. */
+    startedAt: number;
+    sentAt: number;
+}
+/** One of the slowest renders of an area in a batch. */
+export interface WorstCase {
+    ms: number;
+    phase: RenderPhase;
+    /** Milliseconds since the session started. */
+    at: number;
+}
+/** Render timings for one area on one route, for one batch. Durations are in milliseconds. */
+export interface AreaReport {
+    id: string;
+    route: string;
+    renders: number;
+    mounts: number;
+    /** Renders slower than `slowRenderMs`. */
+    slow: number;
+    totalMs: number;
+    /** Fastest render; with `max`, it bounds percentile estimates from merged histograms. */
+    min: number;
+    max: number;
+    p50: number;
+    p75: number;
+    p95: number;
+    /** Render counts per `HISTOGRAM_BOUNDS` bucket, plus a final overflow bucket. Histograms from many batches can be added together. */
+    hist: number[];
+    worst: WorstCase[];
+}
+export interface LongTaskReport {
+    area: string | null;
+    route: string;
+    count: number;
+    totalMs: number;
+    maxMs: number;
+}
+/** Totals for the whole batch, across every area and route. */
+export interface SessionSummary {
+    renders: number;
+    slowRenders: number;
+    longTasks: number;
+    longTaskMs: number;
+    longFrames: number;
+    longFrameMs: number;
+}
+/** What gets sent to the collector. Durations are in milliseconds; no user IDs, IP addresses, or page text. */
+export interface Payload {
+    v: 1;
+    session: SessionInfo;
+    device: DeviceContext;
+    summary: SessionSummary;
+    areas: AreaReport[];
+    longTasks: LongTaskReport[];
+    longFrames: LongTaskReport[];
+    /** Areas left out to respect `maxAreas` or `maxPayloadBytes`. */
+    dropped: {
+        areas: number;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,131 @@
 {
   "name": "react-render-pulse",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Real-user render performance monitoring for React, at the component level.",
+  "keywords": [
+    "react",
+    "hooks",
+    "performance",
+    "profiler",
+    "render",
+    "rum",
+    "real-user-monitoring",
+    "monitoring",
+    "long-tasks",
+    "opentelemetry",
+    "observability"
+  ],
+  "author": "Amal M",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Amalmktk/react-render-pulse.git",
+    "directory": "packages/client"
+  },
+  "bugs": {
+    "url": "https://github.com/Amalmktk/react-render-pulse/issues"
+  },
+  "homepage": "https://github.com/Amalmktk/react-render-pulse#readme",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core.d.ts",
+        "default": "./dist/core.js"
+      },
+      "require": {
+        "types": "./dist/core.d.cts",
+        "default": "./dist/core.cjs"
+      }
+    },
+    "./otel": {
+      "import": {
+        "types": "./dist/otel.d.ts",
+        "default": "./dist/otel.js"
+      },
+      "require": {
+        "types": "./dist/otel.d.cts",
+        "default": "./dist/otel.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "core": [
+        "./dist/core.d.ts"
+      ],
+      "otel": [
+        "./dist/otel.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "size-limit": [
+    {
+      "name": "full client (initRenderPulse + RenderMonitor + hook)",
+      "path": "dist/index.js",
+      "import": "{ initRenderPulse, RenderMonitor, useRenderMonitor }",
+      "ignore": [
+        "react"
+      ],
+      "limit": "3.75 kB"
+    },
+    {
+      "name": "otel exporter",
+      "path": "dist/otel.js",
+      "import": "{ createOtelExporter }",
+      "limit": "600 B"
+    }
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@size-limit/preset-small-lib": "^14.3.0",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@vitest/coverage-v8": "^4.1.12",
+    "jsdom": "^25.0.1",
+    "publint": "^0.3.25",
+    "react": "^19.2.8",
+    "react-dom": "^19.3.1",
+    "size-limit": "^14.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.12"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json && node scripts/cjs-types.mjs",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit",
+    "check:package": "publint && attw --pack . --profile node16"
+  }
 }