react-render-pulse 0.0.0-stage → 1.0.1

package/dist/index.js

@@ -0,0 +1,602 @@
+"use client";// src/aggregate/histogram.ts
+var HISTOGRAM_BOUNDS = [1, 2, 4, 8, 12, 16, 24, 33, 50, 75, 100, 150, 250, 500, 1e3];
+function createHistogram() {
+  return new Array(HISTOGRAM_BOUNDS.length + 1).fill(0);
+}
+function bucketIndex(ms) {
+  for (let i = 0; i < HISTOGRAM_BOUNDS.length; i++) {
+    if (ms <= (HISTOGRAM_BOUNDS[i] ?? 0)) return i;
+  }
+  return HISTOGRAM_BOUNDS.length;
+}
+function histogramPercentile(hist, p, max, min = 0) {
+  const total = hist.reduce((sum2, n) => sum2 + n, 0);
+  if (total === 0) return 0;
+  const target = Math.max(p / 100 * total, Number.MIN_VALUE);
+  let seen = 0;
+  for (let i = 0; i < hist.length; i++) {
+    const count = hist[i] ?? 0;
+    if (count === 0) continue;
+    if (seen + count >= target) {
+      const upper = Math.min(HISTOGRAM_BOUNDS[i] ?? max, max);
+      const lower = Math.min(Math.max(i === 0 ? 0 : HISTOGRAM_BOUNDS[i - 1] ?? 0, min), upper);
+      const fraction = (target - seen) / count;
+      return round(Math.min(lower + (upper - lower) * fraction, max));
+    }
+    seen += count;
+  }
+  return round(max);
+}
+function round(ms) {
+  return Math.round(ms * 10) / 10;
+}
+
+// src/aggregate/aggregator.ts
+function createAggregator(options) {
+  let areas = /* @__PURE__ */ new Map();
+  let longTasks = /* @__PURE__ */ new Map();
+  let longFrames = /* @__PURE__ */ new Map();
+  let droppedAreas = 0;
+  function addRender(event) {
+    const key = `${event.route}\0${event.area}`;
+    let area = areas.get(key);
+    if (!area) {
+      if (areas.size >= options.maxAreas) {
+        droppedAreas++;
+        return;
+      }
+      area = {
+        id: event.area,
+        route: event.route,
+        renders: 0,
+        mounts: 0,
+        slow: 0,
+        totalMs: 0,
+        min: Infinity,
+        max: 0,
+        hist: createHistogram(),
+        worst: []
+      };
+      areas.set(key, area);
+    }
+    const ms = event.duration;
+    area.renders++;
+    if (event.phase === "mount") area.mounts++;
+    if (ms > options.slowRenderMs) area.slow++;
+    area.totalMs += ms;
+    area.min = Math.min(area.min, ms);
+    area.max = Math.max(area.max, ms);
+    const bucket = bucketIndex(ms);
+    area.hist[bucket] = (area.hist[bucket] ?? 0) + 1;
+    addWorstCase(area.worst, { ms, phase: event.phase, at: event.startTime - options.sessionStart });
+  }
+  function addWorstCase(worst, candidate) {
+    if (worst.length < options.worstCases) {
+      worst.push(candidate);
+    } else {
+      const fastest = worst.reduce((min, w, i) => w.ms < (worst[min]?.ms ?? 0) ? i : min, 0);
+      if (candidate.ms <= (worst[fastest]?.ms ?? 0)) return;
+      worst[fastest] = candidate;
+    }
+  }
+  function addLongTask(event) {
+    const target = event.kind === "longtask" ? longTasks : longFrames;
+    const key = `${event.route}\0${event.area ?? ""}`;
+    let entry = target.get(key);
+    if (!entry) {
+      entry = { area: event.area, route: event.route, count: 0, totalMs: 0, maxMs: 0 };
+      target.set(key, entry);
+    }
+    entry.count++;
+    entry.totalMs += event.duration;
+    entry.maxMs = Math.max(entry.maxMs, event.duration);
+  }
+  function drain() {
+    const areaReports = Array.from(areas.values(), toAreaReport);
+    const taskReports = Array.from(longTasks.values(), toLongTaskReport);
+    const frameReports = Array.from(longFrames.values(), toLongTaskReport);
+    const batch = {
+      summary: {
+        renders: sum(areaReports, (a) => a.renders),
+        slowRenders: sum(areaReports, (a) => a.slow),
+        longTasks: sum(taskReports, (t) => t.count),
+        longTaskMs: round(sum(taskReports, (t) => t.totalMs)),
+        longFrames: sum(frameReports, (t) => t.count),
+        longFrameMs: round(sum(frameReports, (t) => t.totalMs))
+      },
+      areas: areaReports,
+      longTasks: taskReports,
+      longFrames: frameReports,
+      droppedAreas
+    };
+    areas = /* @__PURE__ */ new Map();
+    longTasks = /* @__PURE__ */ new Map();
+    longFrames = /* @__PURE__ */ new Map();
+    droppedAreas = 0;
+    return batch;
+  }
+  return {
+    addRender,
+    addLongTask,
+    isEmpty: () => areas.size === 0 && longTasks.size === 0 && longFrames.size === 0 && droppedAreas === 0,
+    drain
+  };
+}
+function toAreaReport(area) {
+  return {
+    id: area.id,
+    route: area.route,
+    renders: area.renders,
+    mounts: area.mounts,
+    slow: area.slow,
+    totalMs: round(area.totalMs),
+    min: round(area.min),
+    max: round(area.max),
+    p50: histogramPercentile(area.hist, 50, area.max, area.min),
+    p75: histogramPercentile(area.hist, 75, area.max, area.min),
+    p95: histogramPercentile(area.hist, 95, area.max, area.min),
+    hist: area.hist,
+    worst: area.worst.sort((a, b) => b.ms - a.ms).map((w) => ({ ms: round(w.ms), phase: w.phase, at: Math.round(w.at) }))
+  };
+}
+function toLongTaskReport(entry) {
+  return { ...entry, totalMs: round(entry.totalMs), maxMs: round(entry.maxMs) };
+}
+function sum(items, pick) {
+  return items.reduce((total, item) => total + pick(item), 0);
+}
+
+// src/context/device.ts
+function getDeviceContext() {
+  const nav = typeof navigator === "undefined" ? {} : navigator;
+  return {
+    memoryGb: typeof nav.deviceMemory === "number" ? nav.deviceMemory : null,
+    cores: typeof nav.hardwareConcurrency === "number" ? nav.hardwareConcurrency : null,
+    connection: nav.connection?.effectiveType ?? null,
+    viewport: typeof window === "undefined" ? "0x0" : `${window.innerWidth}x${window.innerHeight}`
+  };
+}
+
+// src/context/route.ts
+function defaultGetRoute() {
+  if (typeof location === "undefined") return "/";
+  return location.pathname.replace(/\/\d+(?=\/|$)/g, "/:id");
+}
+function createRouteReader(getRoute) {
+  let lastHref = null;
+  let lastRoute = "/";
+  return () => {
+    const href = typeof location === "undefined" ? "" : location.href;
+    if (href !== lastHref) {
+      lastHref = href;
+      lastRoute = getRoute();
+    }
+    return lastRoute;
+  };
+}
+
+// src/export/console.ts
+function createConsoleExporter() {
+  return {
+    onFlush(payload) {
+      if (typeof console === "undefined") return;
+      const rows = [...payload.areas].sort((a, b) => b.p75 - a.p75).map((a) => ({
+        area: a.id,
+        route: a.route,
+        renders: a.renders,
+        slow: a.slow,
+        p50: a.p50,
+        p75: a.p75,
+        p95: a.p95,
+        max: a.max
+      }));
+      console.groupCollapsed(
+        `[render-pulse] batch ${payload.session.seq} (${payload.session.mode}): ${payload.summary.renders} renders, ${payload.summary.longTasks} long tasks`
+      );
+      if (rows.length > 0) console.table(rows);
+      if (payload.longTasks.length > 0) console.table(payload.longTasks);
+      if (payload.longFrames.length > 0) console.table(payload.longFrames);
+      console.groupEnd();
+    }
+  };
+}
+
+// src/modes/detect.ts
+function createModeDetector(option) {
+  let mode = option === "profiling" ? "profiling" : "lightweight";
+  return {
+    current: () => mode,
+    measuresWithMarks: () => mode === "lightweight",
+    profilerFired() {
+      if (option === "auto") mode = "profiling";
+    }
+  };
+}
+
+// src/observe/longtasks.ts
+function observeLongTasks(thresholdMs, onEntry) {
+  if (typeof PerformanceObserver === "undefined") return () => {
+  };
+  const supported = PerformanceObserver.supportedEntryTypes ?? [];
+  const observers = [];
+  for (const kind of ["longtask", "long-animation-frame"]) {
+    if (!supported.includes(kind)) continue;
+    try {
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.duration < thresholdMs) continue;
+          onEntry({ kind, startTime: entry.startTime, duration: entry.duration });
+        }
+      });
+      observer.observe({ type: kind, buffered: true });
+      observers.push(observer);
+    } catch {
+    }
+  }
+  return () => {
+    for (const observer of observers) observer.disconnect();
+  };
+}
+
+// src/observe/renderWindows.ts
+function createRenderWindows(size = 200) {
+  const windows = new Array(size);
+  let next = 0;
+  return {
+    add(area, start2, end, duration) {
+      windows[next] = { area, start: start2, end, duration };
+      next = (next + 1) % size;
+    },
+    findArea(start2, end) {
+      const overlapping = windows.filter((w) => w !== void 0 && w.end >= start2 && w.start <= end);
+      if (overlapping.length === 0) return null;
+      const longest = Math.max(...overlapping.map((w) => w.duration));
+      let best = null;
+      for (const window2 of overlapping) {
+        if (window2.duration < longest / 2) continue;
+        if (!best || window2.duration < best.duration) best = window2;
+      }
+      return best?.area ?? null;
+    }
+  };
+}
+
+// src/sample/sample.ts
+function shouldSample(sampleRate, random = Math.random) {
+  if (!(sampleRate > 0)) return false;
+  if (sampleRate >= 1) return true;
+  return random() < sampleRate;
+}
+function createSessionId() {
+  try {
+    const cryptoApi = globalThis.crypto;
+    if (cryptoApi && typeof cryptoApi.randomUUID === "function") return cryptoApi.randomUUID();
+  } catch {
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+// src/transport/payload.ts
+function byteLength(text) {
+  return typeof TextEncoder === "undefined" ? text.length * 3 : new TextEncoder().encode(text).length;
+}
+function serializePayload(payload, maxBytes) {
+  let json = JSON.stringify(payload);
+  if (byteLength(json) <= maxBytes) return json;
+  let trimmed = { ...payload, areas: payload.areas.map((a) => ({ ...a, worst: [] })) };
+  json = JSON.stringify(trimmed);
+  if (byteLength(json) > maxBytes) {
+    const areas = [...trimmed.areas].sort((a, b) => b.renders - a.renders);
+    let dropped = trimmed.dropped.areas;
+    while (areas.length > 0 && byteLength(json) > maxBytes) {
+      const remove = Math.max(1, Math.floor(areas.length / 2));
+      areas.splice(areas.length - remove, remove);
+      dropped += remove;
+      trimmed = { ...trimmed, areas: [...areas], dropped: { areas: dropped } };
+      json = JSON.stringify(trimmed);
+    }
+  }
+  return byteLength(json) <= maxBytes ? json : null;
+}
+
+// src/transport/transport.ts
+function createTransport(options) {
+  const queue = [];
+  function enqueue(item) {
+    if (item.attempts >= options.maxAttempts) return;
+    queue.push(item);
+    if (queue.length > options.maxQueued) queue.shift();
+  }
+  function beacon(body) {
+    try {
+      return typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function" ? navigator.sendBeacon(options.endpoint, body) : false;
+    } catch {
+      return false;
+    }
+  }
+  function post(item) {
+    if (typeof fetch !== "function") return;
+    const attempt = { body: item.body, attempts: item.attempts + 1 };
+    try {
+      fetch(options.endpoint, { method: "POST", body: item.body, keepalive: true }).then((response) => {
+        if (response.status >= 500 || response.status === 429) enqueue(attempt);
+      }).catch(() => enqueue(attempt));
+    } catch {
+      enqueue(attempt);
+    }
+  }
+  return {
+    send(body, { unloading }) {
+      const items = [...queue.splice(0), { body, attempts: 0 }];
+      for (const item of items) {
+        if (unloading && beacon(item.body)) continue;
+        post(item);
+      }
+    }
+  };
+}
+
+// src/runtime/guard.ts
+var debug = false;
+function setDebug(value) {
+  debug = value;
+}
+function guard(fn, fallback) {
+  try {
+    return fn();
+  } catch (error) {
+    if (debug && typeof console !== "undefined") console.warn("[render-pulse]", error);
+    return fallback;
+  }
+}
+
+// src/runtime/runtime.ts
+var KEY = /* @__PURE__ */ Symbol.for("react-render-pulse.runtime");
+function getRuntime() {
+  return globalThis[KEY] ?? null;
+}
+function setRuntime(runtime) {
+  globalThis[KEY] = runtime;
+}
+
+// src/runtime/initRenderPulse.ts
+var INERT = { sampled: false, mode: "lightweight", flush: () => null, destroy: () => {
+} };
+var active = null;
+function initRenderPulse(options = {}) {
+  if (typeof window === "undefined") return INERT;
+  return guard(() => start(options), INERT);
+}
+function start(options) {
+  active?.destroy();
+  const {
+    endpoint,
+    sampleRate = 1,
+    mode: modeOption = "auto",
+    slowRenderMs = 16,
+    longTaskMs = 50,
+    flushIntervalMs = 18e4,
+    debug: debug2 = !endpoint
+  } = options;
+  const maxPayloadBytes = clamp(options.maxPayloadBytes ?? 6e4, 1e3, 65536);
+  const maxAreas = clamp(options.maxAreas ?? 200, 1, 1e3);
+  const worstCases = clamp(options.worstCases ?? 5, 0, 50);
+  const appVersion = options.appVersion?.slice(0, 100);
+  setDebug(debug2);
+  const sampled = shouldSample(sampleRate);
+  const now = () => performance.now();
+  const sessionStart = now();
+  const startedAt = Date.now();
+  const sessionId = createSessionId();
+  let seq = 0;
+  const detector = createModeDetector(modeOption);
+  const readRoute = createRouteReader(options.getRoute ?? defaultGetRoute);
+  const route = () => guard(readRoute, "/").slice(0, 500);
+  const areaId = (id) => id ? id.slice(0, 200) : "(unnamed)";
+  const exporters = [...options.exporters ?? [], ...debug2 ? [createConsoleExporter()] : []];
+  const aggregator = createAggregator({ slowRenderMs, maxAreas, worstCases, sessionStart });
+  const windows = createRenderWindows();
+  const transport = endpoint ? createTransport({ endpoint, maxAttempts: 3, maxQueued: 5 }) : null;
+  function record(event) {
+    aggregator.addRender(event);
+    windows.add(event.area, event.startTime, event.endTime, event.duration);
+    for (const exporter of exporters) guard(() => exporter.onRender?.(event), void 0);
+  }
+  function recordLongTask(event) {
+    aggregator.addLongTask(event);
+    for (const exporter of exporters) guard(() => exporter.onLongTask?.(event), void 0);
+  }
+  const runtime = {
+    sampled,
+    now,
+    measuresWithMarks: () => sampled && detector.measuresWithMarks(),
+    recordMarks(area, phase, startTime, endTime) {
+      if (!sampled) return;
+      guard(() => {
+        const duration = endTime - startTime;
+        record({ area: areaId(area), route: route(), phase, duration, startTime, endTime, mode: "lightweight" });
+      }, void 0);
+    },
+    recordProfiler(area, phase, actualDuration, startTime, commitTime) {
+      if (!sampled) return false;
+      return guard(() => {
+        detector.profilerFired();
+        if (detector.current() !== "profiling") return false;
+        record({
+          area: areaId(area),
+          route: route(),
+          phase,
+          duration: actualDuration,
+          startTime,
+          endTime: commitTime,
+          mode: "profiling"
+        });
+        return true;
+      }, false);
+    }
+  };
+  function flush(unloading) {
+    if (!sampled || aggregator.isEmpty()) return null;
+    return guard(() => {
+      const batch = aggregator.drain();
+      const payload = {
+        v: 1,
+        session: {
+          id: sessionId,
+          seq: ++seq,
+          mode: detector.current(),
+          route: route(),
+          appVersion: appVersion ?? null,
+          startedAt,
+          sentAt: Date.now()
+        },
+        device: getDeviceContext(),
+        summary: batch.summary,
+        areas: batch.areas,
+        longTasks: batch.longTasks,
+        longFrames: batch.longFrames,
+        dropped: { areas: batch.droppedAreas }
+      };
+      for (const exporter of exporters) guard(() => exporter.onFlush?.(payload), void 0);
+      if (transport) {
+        const body = serializePayload(payload, maxPayloadBytes);
+        if (body) transport.send(body, { unloading });
+      }
+      return payload;
+    }, null);
+  }
+  const cleanups = [];
+  if (sampled) {
+    cleanups.push(
+      observeLongTasks(
+        longTaskMs,
+        (task) => guard(() => {
+          const area = windows.findArea(task.startTime, task.startTime + task.duration);
+          recordLongTask({ ...task, area, route: route() });
+        }, void 0)
+      )
+    );
+    const onHidden = () => {
+      if (document.visibilityState === "hidden") flush(true);
+    };
+    const onPageHide = () => flush(true);
+    document.addEventListener("visibilitychange", onHidden);
+    window.addEventListener("pagehide", onPageHide);
+    cleanups.push(() => {
+      document.removeEventListener("visibilitychange", onHidden);
+      window.removeEventListener("pagehide", onPageHide);
+    });
+    if (flushIntervalMs > 0) {
+      const timer = setInterval(() => flush(false), flushIntervalMs);
+      cleanups.push(() => clearInterval(timer));
+    }
+  }
+  setRuntime(runtime);
+  const instance = {
+    destroy() {
+      for (const cleanup of cleanups.splice(0)) guard(cleanup, void 0);
+      if (getRuntime() === runtime) setRuntime(null);
+      if (active === instance) active = null;
+    }
+  };
+  active = instance;
+  return {
+    sampled,
+    get mode() {
+      return detector.current();
+    },
+    flush: () => flush(false),
+    destroy: instance.destroy
+  };
+}
+function clamp(value, min, max) {
+  return Number.isFinite(value) ? Math.min(max, Math.max(min, Math.floor(value))) : min;
+}
+
+// src/components/RenderMonitor.tsx
+import { Profiler, useCallback, useRef } from "react";
+
+// src/runtime/useIsomorphicLayoutEffect.ts
+import { useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+// src/components/RenderMonitor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RenderMonitor({ id, children }) {
+  const stateRef = useRef(null);
+  if (stateRef.current === null) {
+    stateRef.current = { id, mounted: false, start: 0, end: 0, recordedStart: -1, pending: null };
+  }
+  const state = stateRef.current;
+  state.id = id;
+  const onRender = useCallback(
+    (_id, phase, actualDuration, _baseDuration, startTime, commitTime) => {
+      if (getRuntime()?.recordProfiler(state.id, phase, actualDuration, startTime, commitTime) && state.pending) {
+        state.pending.superseded = true;
+      }
+    },
+    [state]
+  );
+  return /* @__PURE__ */ jsxs(Profiler, { id, onRender, children: [
+    /* @__PURE__ */ jsx(StartMarker, { state }),
+    children,
+    /* @__PURE__ */ jsx(EndMarker, { state })
+  ] });
+}
+function StartMarker({ state }) {
+  const runtime = getRuntime();
+  if (runtime?.measuresWithMarks()) state.start = runtime.now();
+  return null;
+}
+function EndMarker({ state }) {
+  const runtime = getRuntime();
+  if (runtime?.measuresWithMarks()) state.end = runtime.now();
+  useIsomorphicLayoutEffect(() => {
+    guard(() => {
+      const current = getRuntime();
+      if (!current?.measuresWithMarks() || state.start === state.recordedStart || state.end < state.start) return;
+      state.recordedStart = state.start;
+      const measurement = {
+        start: state.start,
+        end: state.end,
+        phase: state.mounted ? "update" : "mount",
+        superseded: false
+      };
+      state.pending = measurement;
+      state.mounted = true;
+      queueMicrotask(() => {
+        if (state.pending === measurement) state.pending = null;
+        if (!measurement.superseded) {
+          getRuntime()?.recordMarks(state.id, measurement.phase, measurement.start, measurement.end);
+        }
+      });
+    }, void 0);
+  });
+  return null;
+}
+
+// src/hooks/useRenderMonitor.ts
+import { useRef as useRef2 } from "react";
+function useRenderMonitor(id) {
+  const state = useRef2({ start: 0, recordedStart: -1, mounted: false }).current;
+  const runtime = getRuntime();
+  if (runtime?.sampled) state.start = runtime.now();
+  useIsomorphicLayoutEffect(() => {
+    guard(() => {
+      const current = getRuntime();
+      if (!current?.sampled || state.start === state.recordedStart) return;
+      state.recordedStart = state.start;
+      current.recordMarks(id, state.mounted ? "update" : "mount", state.start, current.now());
+      state.mounted = true;
+    }, void 0);
+  });
+}
+export {
+  HISTOGRAM_BOUNDS,
+  RenderMonitor,
+  createConsoleExporter,
+  histogramPercentile,
+  initRenderPulse,
+  useRenderMonitor
+};
+//# sourceMappingURL=index.js.map