react-render-detective 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunkQQ4VARSD_cjs = require('./chunk-QQ4VARSD.cjs');
-var chunk6YPJQ7M5_cjs = require('./chunk-6YPJQ7M5.cjs');
+var chunkJD4IJ4MN_cjs = require('./chunk-JD4IJ4MN.cjs');
+var chunkDZ3BZ654_cjs = require('./chunk-DZ3BZ654.cjs');
+var chunkH5RG2EPP_cjs = require('./chunk-H5RG2EPP.cjs');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -84,7 +85,7 @@ function printVerbose(event) {
     }
     if (event.trackedState.length > 0) {
       console.log(
-        `State:       ${event.trackedState.map((s) => `${s.name}: ${chunk6YPJQ7M5_cjs.formatInspected(s.previous)} \u2192 ${chunk6YPJQ7M5_cjs.formatInspected(s.current)}`).join(", ")}`
+        `State:       ${event.trackedState.map((s) => `${s.name}: ${chunkDZ3BZ654_cjs.formatInspected(s.previous)} \u2192 ${chunkDZ3BZ654_cjs.formatInspected(s.current)}`).join(", ")}`
       );
     }
     if (event.contextChanges.length > 0) {
@@ -101,11 +102,11 @@ function printVerbose(event) {
 }
 function propLine(c) {
   const head = `${c.key} (${c.valueType}) \u2014 ${describeKind(c)}`;
-  if (c.kind === "added") return `${head}: ${chunk6YPJQ7M5_cjs.formatInspected(c.current)}`;
-  if (c.kind === "removed") return `${head}: was ${chunk6YPJQ7M5_cjs.formatInspected(c.previous)}`;
+  if (c.kind === "added") return `${head}: ${chunkDZ3BZ654_cjs.formatInspected(c.current)}`;
+  if (c.kind === "removed") return `${head}: was ${chunkDZ3BZ654_cjs.formatInspected(c.previous)}`;
   return `${head}
-    previous: ${chunk6YPJQ7M5_cjs.formatInspected(c.previous)}
-    current:  ${chunk6YPJQ7M5_cjs.formatInspected(c.current)}`;
+    previous: ${chunkDZ3BZ654_cjs.formatInspected(c.previous)}
+    current:  ${chunkDZ3BZ654_cjs.formatInspected(c.current)}`;
 }
 function describeKind(c) {
   switch (c.kind) {
@@ -138,10 +139,249 @@ function label(event) {
       return "undetermined";
   }
 }
+
+// src/core/interactions.ts
+var COMMIT_SLACK_MS = 100;
+var FALLBACK_CLOSE_MS = 50;
+var InteractionTracker = class {
+  constructor(capacity = 50) {
+    this.capacity = capacity;
+    this.records = [];
+    this.nextId = 0;
+  }
+  /** Returns false when the browser cannot report event timing. */
+  start() {
+    if (this.observer) return true;
+    const PO = globalThis.PerformanceObserver;
+    const supported = PO?.supportedEntryTypes?.includes("event");
+    if (!PO || !supported) return false;
+    try {
+      const observer = new PO((list) => {
+        for (const entry of list.getEntries()) {
+          const timing = entry;
+          this.record({
+            name: timing.name,
+            startTime: timing.startTime,
+            duration: timing.duration,
+            target: describeTarget(timing.target)
+          });
+        }
+      });
+      observer.observe({ type: "event", buffered: true, durationThreshold: 16 });
+      this.observer = observer;
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  stop() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+  }
+  /** Is the automatic path available in this browser? */
+  get automatic() {
+    return this.observer !== void 0;
+  }
+  /**
+   * Time an interaction by hand.
+   *
+   * The automatic path depends on the Event Timing API, which Safari only
+   * gained in 16.4 and which does not fire for synthetic input at all — so
+   * anything driven by a test harness records nothing. This measures a specific
+   * action instead, up to the paint that follows it, and needs no browser
+   * support beyond `performance.now`.
+   */
+  measure(label2, action) {
+    const startTime = now();
+    let handlerMs = 0;
+    let finished = false;
+    const finish = () => {
+      if (finished) return;
+      finished = true;
+      this.record({ name: label2, startTime, duration: now() - startTime, handlerMs });
+    };
+    let result;
+    try {
+      result = action();
+      handlerMs = now() - startTime;
+    } catch (error) {
+      handlerMs = now() - startTime;
+      finish();
+      throw error;
+    }
+    const raf = globalThis.requestAnimationFrame;
+    if (raf) raf(() => raf(finish));
+    setTimeout(finish, FALLBACK_CLOSE_MS);
+    return result;
+  }
+  /** Exposed for tests and for `measure`. */
+  record(timing) {
+    const record = {
+      id: `interaction_${++this.nextId}`,
+      type: timing.name,
+      target: timing.target,
+      startTime: timing.startTime,
+      durationMs: timing.duration,
+      handlerMs: timing.handlerMs,
+      renders: [],
+      renderTimeMs: 0,
+      avoidableRenderTimeMs: 0
+    };
+    this.records.push(record);
+    if (this.records.length > this.capacity) this.records.shift();
+    return record;
+  }
+  clear() {
+    this.records.length = 0;
+  }
+  /**
+   * Joins render events to interactions by commit time. A render belongs to an
+   * interaction when it committed between the event starting and shortly after
+   * it finished — React commits just after the event handler returns.
+   */
+  attribute(events) {
+    for (const record of this.records) {
+      const from = record.startTime;
+      const to = record.startTime + record.durationMs + COMMIT_SLACK_MS;
+      record.renders = events.filter((e) => e.timings.commitTime >= from && e.timings.commitTime <= to);
+      record.renderTimeMs = record.renders.reduce((a, e) => a + e.timings.selfDuration, 0);
+      record.avoidableRenderTimeMs = record.renders.filter((e) => e.diagnosis.potentiallyAvoidable).reduce((a, e) => a + e.timings.selfDuration, 0);
+    }
+    return [...this.records].sort((a, b) => b.durationMs - a.durationMs);
+  }
+};
+function summarise(record) {
+  const byComponent = /* @__PURE__ */ new Map();
+  for (const event of record.renders) {
+    const entry = byComponent.get(event.component.name) ?? {
+      renders: 0,
+      totalMs: 0,
+      source: event.component.source,
+      cause: event.diagnosis.reason
+    };
+    entry.renders++;
+    entry.totalMs += event.timings.selfDuration;
+    byComponent.set(event.component.name, entry);
+  }
+  const contributors = [...byComponent.entries()].map(([component, v]) => ({ component, source: v.source, renders: v.renders, totalMs: v.totalMs, cause: v.cause })).sort((a, b) => b.totalMs - a.totalMs);
+  const top = contributors[0];
+  const accounted = (record.handlerMs ?? record.durationMs) + record.renderTimeMs;
+  const idleWindow = record.handlerMs !== void 0 && record.durationMs > accounted * 3 && record.durationMs - accounted > 100;
+  const effectiveMs = idleWindow ? accounted : record.durationMs;
+  const share = effectiveMs > 0 ? record.renderTimeMs / effectiveMs : 0;
+  let headline;
+  let nextStep;
+  let confidence = "medium";
+  if (idleWindow) {
+    headline = `${record.type}: ${fmt(record.handlerMs ?? 0)} in the handler and ${fmt(record.renderTimeMs)} rendering. The measured window was ${fmt(record.durationMs)}, but most of that was the page waiting for a frame \u2014 ignore it.`;
+    nextStep = record.renderTimeMs > (record.handlerMs ?? 0) ? `Rendering dominates the real work${top ? `; start with ${top.component}` : ""}.` : "The handler itself costs more than rendering. Profile the handler, not React.";
+    return { interaction: record, contributors, headline, nextStep, confidence: "medium" };
+  }
+  if (record.renders.length === 0) {
+    headline = `${record.type} took ${fmt(record.durationMs)}, and no instrumented component rendered inside it.`;
+    nextStep = "The cost is somewhere other than React rendering \u2014 an event handler, a layout, or an uninstrumented component. Instrument more of the tree to narrow it down.";
+    confidence = "low";
+  } else if (share >= 0.4 && record.avoidableRenderTimeMs > 0) {
+    headline = `${record.type} took ${fmt(record.durationMs)}; ${fmt(record.renderTimeMs)} of it was rendering, and ${fmt(record.avoidableRenderTimeMs)} of that had no input change to explain it.`;
+    nextStep = top ? `Start with ${top.component}${top.source ? ` (${top.source})` : ""} \u2014 ${fmt(top.totalMs)} across ${top.renders} render${top.renders === 1 ? "" : "s"}.` : "Look at the top contributor below.";
+    confidence = "high";
+  } else if (share >= 0.4) {
+    headline = `${record.type} took ${fmt(record.durationMs)}; ${fmt(record.renderTimeMs)} of it was rendering, all of it explained by real input changes.`;
+    nextStep = "This is genuine work. Make the renders cheaper rather than fewer \u2014 or do less of it per interaction.";
+    confidence = "high";
+  } else {
+    headline = `${record.type} took ${fmt(record.durationMs)}, but only ${fmt(record.renderTimeMs)} was React rendering.`;
+    nextStep = "Most of the cost is outside rendering \u2014 event handlers, layout or paint. A browser profile will show more than this tool can.";
+    confidence = "medium";
+  }
+  return { interaction: record, contributors, headline, nextStep, confidence };
+}
+function formatInteraction(summary) {
+  const { interaction: i } = summary;
+  const lines = [
+    `${i.type}${i.target ? ` on ${i.target}` : ""}   ${fmt(i.durationMs)}`,
+    "",
+    summary.headline
+  ];
+  if (summary.contributors.length > 0) {
+    lines.push("", "Rendering inside this interaction");
+    for (const c of summary.contributors.slice(0, 8)) {
+      lines.push(
+        `  ${c.component.padEnd(22)} ${String(c.renders).padStart(4)} render(s)  ${fmt(c.totalMs).padStart(8)}  ${c.cause}`
+      );
+    }
+  }
+  lines.push("", `Next step`, `  ${summary.nextStep}`, "", `Confidence: ${summary.confidence}`);
+  return lines.join("\n");
+}
+function describeTarget(target) {
+  if (!target || typeof target !== "object") return void 0;
+  const el = target;
+  if (!el.tagName) return void 0;
+  const tag = el.tagName.toLowerCase();
+  if (el.id) return `${tag}#${el.id}`;
+  const className = typeof el.className === "string" ? el.className.trim().split(/\s+/)[0] : void 0;
+  if (className) return `${tag}.${className}`;
+  const text = el.textContent?.trim().slice(0, 20);
+  return text ? `${tag} "${text}"` : tag;
+}
+var fmt = (ms) => `${ms.toFixed(1)}ms`;
+var now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+
+// src/core/opportunities.ts
+var DEFAULT_MIN_SAVING_MS = 1;
+function rankOpportunities({ events, lifecycles, minSavingMs = DEFAULT_MIN_SAVING_MS }) {
+  const names = new Set(events.map((e) => e.component.name));
+  const out = [];
+  for (const name of names) {
+    const lifecycle = lifecycles.get(name);
+    const explanation = chunkJD4IJ4MN_cjs.explainEvents(name, events, lifecycle);
+    if (!explanation) continue;
+    const mounts = events.filter((e) => e.component.name === name && e.phase === "mount");
+    const averageMountCost = mounts.length ? mounts.reduce((a, e) => a + e.timings.selfDuration, 0) / mounts.length : 0;
+    const remountSaving = explanation.remounts * averageMountCost;
+    const estimatedSavingMs = explanation.estimatedAvoidableTime + remountSaving;
+    if (estimatedSavingMs < minSavingMs) continue;
+    out.push({
+      component: name,
+      source: explanation.source,
+      estimatedSavingMs,
+      avoidableRenders: explanation.potentiallyAvoidableRenders,
+      remounts: explanation.remounts,
+      averageSelfDuration: explanation.averageSelfDuration,
+      summary: explanation.headline,
+      nextStep: explanation.nextStep,
+      confidence: explanation.confidence
+    });
+  }
+  return out.sort((a, b) => b.estimatedSavingMs - a.estimatedSavingMs);
+}
+function formatOpportunities(opportunities) {
+  if (opportunities.length === 0) {
+    return "React Render Detective\n\nNo measurable render waste found yet. Interact with the app and try again.";
+  }
+  const lines = [
+    "React Render Detective \u2014 where to spend your next hour",
+    "",
+    "Ranked by estimated recoverable time. These are estimates, not promises:",
+    "measure each fix.",
+    ""
+  ];
+  for (const [index, o] of opportunities.entries()) {
+    lines.push(
+      `${String(index + 1).padStart(2)}. ${o.component}${o.source ? `   ${o.source}` : ""}`,
+      `    ~${o.estimatedSavingMs.toFixed(0)}ms recoverable   ${o.avoidableRenders} avoidable render${o.avoidableRenders === 1 ? "" : "s"}${o.remounts > 0 ? `, ${o.remounts}\xD7 rebuilt` : ""}   (confidence: ${o.confidence})`,
+      `    ${o.summary}`,
+      `    \u2192 ${o.nextStep}`,
+      ""
+    );
+  }
+  return lines.join("\n");
+}
 var AncestryContext = React.createContext(void 0);
 AncestryContext.displayName = "RenderDetectiveAncestry";
 function useInstrumentedNode(name, props, source) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   const parent = React.useContext(AncestryContext);
   const [node] = React.useState(
     () => detective.enabled ? detective.createNode(name, parent, source) : void 0
@@ -191,6 +431,7 @@ var IS_WRAPPER = /* @__PURE__ */ Symbol.for("react-render-detective.wrapper");
 function withRenderDetective(Component, options = {}) {
   if (Component[IS_WRAPPER]) return Component;
   const name = options.name ?? componentName(Component);
+  chunkDZ3BZ654_cjs.getDetective().noteDefinition(name, options.source, options.declaredInRender === true);
   function RenderDetected(props) {
     const { node, onRender } = useInstrumentedNode(name, props, options.source);
     return renderInstrumented(node, onRender, /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }));
@@ -206,7 +447,7 @@ function RenderDetective({ name, children }) {
   return renderInstrumented(node, onRender, children);
 }
 function useRenderDiagnostics(name, props) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   const parent = React.useContext(AncestryContext);
   const [node] = React.useState(() => {
     if (!detective.enabled) return void 0;
@@ -241,7 +482,7 @@ function useRenderDiagnostics(name, props) {
 }
 var useOwnerId = typeof React__namespace.useId === "function" ? React__namespace.useId : () => "";
 function useTrackedState(name, initial) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   const node = React.useContext(AncestryContext);
   const ownerId = useOwnerId();
   const [state, setState] = React.useState(initial);
@@ -251,8 +492,8 @@ function useTrackedState(name, initial) {
   if (node && owns && !Object.is(previous.current, state)) {
     detective.recordStateChange(node, {
       name,
-      previous: chunk6YPJQ7M5_cjs.inspect(previous.current, detective.config.inspection),
-      current: chunk6YPJQ7M5_cjs.inspect(state, detective.config.inspection)
+      previous: chunkDZ3BZ654_cjs.inspect(previous.current, detective.config.inspection),
+      current: chunkDZ3BZ654_cjs.inspect(state, detective.config.inspection)
     });
     previous.current = state;
   } else if (!owns) {
@@ -261,7 +502,7 @@ function useTrackedState(name, initial) {
   return [state, setState];
 }
 function useTrackedEffect(name, effect, deps) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   const previous = React.useRef(void 0);
   const changed = React.useRef([]);
   if (detective.enabled) {
@@ -277,7 +518,7 @@ function useTrackedEffect(name, effect, deps) {
   }, deps);
 }
 function useTrackedContextValue(contextName, value) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   const previous = React.useRef(void 0);
   const first = React.useRef(true);
   if (detective.enabled) {
@@ -285,8 +526,8 @@ function useTrackedContextValue(contextName, value) {
       first.current = false;
     } else if (!Object.is(previous.current, value)) {
       const prev = previous.current;
-      const equal = chunk6YPJQ7M5_cjs.shallowEqual(prev, value, detective.config);
-      const changedKeys = isRecord(prev) && isRecord(value) ? chunk6YPJQ7M5_cjs.diffProps(prev, value, detective.config).changed.map((c) => c.key) : [];
+      const equal = chunkDZ3BZ654_cjs.shallowEqual(prev, value, detective.config);
+      const changedKeys = isRecord(prev) && isRecord(value) ? chunkDZ3BZ654_cjs.diffProps(prev, value, detective.config).changed.map((c) => c.key) : [];
       detective.recordContextChange({
         contextName,
         changedKeys,
@@ -304,12 +545,21 @@ function isRecord(v) {
 
 // src/index.ts
 var REPORTER = /* @__PURE__ */ Symbol.for("react-render-detective.reporter");
+var INTERACTIONS = /* @__PURE__ */ Symbol.for("react-render-detective.interactions");
+function tracker() {
+  const g = globalThis;
+  if (!g[INTERACTIONS]) g[INTERACTIONS] = new InteractionTracker();
+  return g[INTERACTIONS];
+}
 function init(options = {}) {
-  const detective = chunk6YPJQ7M5_cjs.getDetective();
+  const detective = chunkDZ3BZ654_cjs.getDetective();
   detective.init(options);
   const g = globalThis;
   g[REPORTER]?.();
   g[REPORTER] = void 0;
+  if (detective.enabled) {
+    tracker().start();
+  }
   if (detective.enabled && detective.config.mode !== "silent") {
     g[REPORTER] = attachConsoleReporter(detective);
   } else if (!detective.enabled) {
@@ -319,41 +569,85 @@ function init(options = {}) {
   }
 }
 function configure(options) {
-  chunk6YPJQ7M5_cjs.getDetective().configure(options);
+  chunkDZ3BZ654_cjs.getDetective().configure(options);
 }
 function getConfig() {
-  return chunk6YPJQ7M5_cjs.getDetective().config;
+  return chunkDZ3BZ654_cjs.getDetective().config;
 }
 function isEnabled() {
-  return chunk6YPJQ7M5_cjs.getDetective().enabled;
+  return chunkDZ3BZ654_cjs.getDetective().enabled;
 }
 function getEvents() {
-  return chunk6YPJQ7M5_cjs.getDetective().getEvents();
+  return chunkDZ3BZ654_cjs.getDetective().getEvents();
 }
 function getStats() {
-  return chunk6YPJQ7M5_cjs.getDetective().getStats();
+  return chunkDZ3BZ654_cjs.getDetective().getStats();
 }
 function getComponentStats(name) {
-  return chunk6YPJQ7M5_cjs.getDetective().getComponentStats(name);
+  return chunkDZ3BZ654_cjs.getDetective().getComponentStats(name);
 }
 function subscribe(listener) {
-  return chunk6YPJQ7M5_cjs.getDetective().subscribe(listener);
+  return chunkDZ3BZ654_cjs.getDetective().subscribe(listener);
 }
 function clear() {
-  chunk6YPJQ7M5_cjs.getDetective().clear();
+  chunkDZ3BZ654_cjs.getDetective().clear();
+  tracker().clear();
 }
 function reset() {
   const g = globalThis;
   g[REPORTER]?.();
   g[REPORTER] = void 0;
-  chunk6YPJQ7M5_cjs.getDetective().reset();
+  g[INTERACTIONS]?.stop();
+  g[INTERACTIONS] = void 0;
+  chunkDZ3BZ654_cjs.getDetective().reset();
 }
 function explain(componentName2) {
-  const explanation = chunkQQ4VARSD_cjs.explainEvents(componentName2, getEvents());
-  return explanation ? chunkQQ4VARSD_cjs.formatExplanation(explanation) : void 0;
+  const explanation = explainStructured(componentName2);
+  return explanation ? chunkJD4IJ4MN_cjs.formatExplanation(explanation) : void 0;
 }
 function explainStructured(componentName2) {
-  return chunkQQ4VARSD_cjs.explainEvents(componentName2, getEvents());
+  return chunkJD4IJ4MN_cjs.explainEvents(componentName2, getEvents(), chunkDZ3BZ654_cjs.getDetective().lifecycleOf(componentName2));
+}
+function getRenderProfile(scenario) {
+  const remounts = {};
+  for (const stats of chunkDZ3BZ654_cjs.getDetective().getComponentStats()) remounts[stats.name] = stats.remountCount;
+  return chunkH5RG2EPP_cjs.profileFromEvents(scenario, getEvents(), remounts);
+}
+function getInteractions() {
+  return tracker().attribute(getEvents());
+}
+function explainInteractionStructured(id) {
+  const records = getInteractions();
+  const record = id ? records.find((r) => r.id === id) : records[0];
+  return record ? summarise(record) : void 0;
+}
+function explainInteraction(id) {
+  const summary = explainInteractionStructured(id);
+  return summary ? formatInteraction(summary) : void 0;
+}
+function printInteractions(limit = 5) {
+  const records = getInteractions().slice(0, limit);
+  if (records.length === 0) {
+    console.log(
+      tracker().automatic ? "No interactions recorded yet. Event timing is working \u2014 nothing has taken longer than 16ms.\nSynthetic clicks from a test harness never produce these entries; use measureInteraction() there." : "This browser does not report event timing (Safari before 16.4, jsdom).\nUse measureInteraction(label, fn) to time interactions by hand."
+    );
+    return;
+  }
+  console.log(records.map((r) => formatInteraction(summarise(r))).join("\n\n"));
+}
+function measureInteraction(label2, action) {
+  return tracker().measure(label2, action);
+}
+function getOpportunities(limit = 10) {
+  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const lifecycles = /* @__PURE__ */ new Map();
+  for (const stats of detective.getComponentStats()) {
+    lifecycles.set(stats.name, { remounts: stats.remountCount });
+  }
+  return rankOpportunities({ events: detective.getEvents(), lifecycles }).slice(0, limit);
+}
+function printOpportunities(limit = 10) {
+  console.log(formatOpportunities(getOpportunities(limit)));
 }
 function printStats() {
   const s = getStats();
@@ -366,6 +660,14 @@ function printStats() {
     `Slow renders             ${s.slowRenders}`,
     `Potentially avoidable    ${s.potentiallyAvoidableRenders}`
   ];
+  const rebuilt = s.mostRendered.filter((c) => c.remountCount >= 2);
+  if (rebuilt.length > 0) {
+    lines.push(
+      "",
+      "Rebuilt rather than re-rendered (state and DOM discarded each time)",
+      ...rebuilt.slice(0, 5).map((c) => `  ${c.name.padEnd(22)} ${String(c.remountCount).padStart(5)}\xD7 remounted`)
+    );
+  }
   if (s.devReplays > 0) {
     lines.push(`Development replays      ${s.devReplays} (StrictMode / discarded \u2014 not counted above)`);
   }
@@ -392,32 +694,53 @@ var ReactRenderDetective = {
   reset,
   explain,
   explainStructured,
+  getOpportunities,
+  printOpportunities,
+  getInteractions,
+  explainInteraction,
+  explainInteractionStructured,
+  printInteractions,
+  measureInteraction,
+  getRenderProfile,
   printStats
 };
 
 Object.defineProperty(exports, "explainEvents", {
   enumerable: true,
-  get: function () { return chunkQQ4VARSD_cjs.explainEvents; }
+  get: function () { return chunkJD4IJ4MN_cjs.explainEvents; }
 });
 Object.defineProperty(exports, "formatExplanation", {
   enumerable: true,
-  get: function () { return chunkQQ4VARSD_cjs.formatExplanation; }
+  get: function () { return chunkJD4IJ4MN_cjs.formatExplanation; }
 });
+exports.InteractionTracker = InteractionTracker;
 exports.ReactRenderDetective = ReactRenderDetective;
 exports.RenderDetective = RenderDetective;
 exports.clear = clear;
 exports.configure = configure;
 exports.explain = explain;
+exports.explainInteraction = explainInteraction;
+exports.explainInteractionStructured = explainInteractionStructured;
 exports.explainStructured = explainStructured;
+exports.formatInteraction = formatInteraction;
+exports.formatOpportunities = formatOpportunities;
 exports.getComponentStats = getComponentStats;
 exports.getConfig = getConfig;
 exports.getEvents = getEvents;
+exports.getInteractions = getInteractions;
+exports.getOpportunities = getOpportunities;
+exports.getRenderProfile = getRenderProfile;
 exports.getStats = getStats;
 exports.init = init;
 exports.isEnabled = isEnabled;
+exports.measureInteraction = measureInteraction;
+exports.printInteractions = printInteractions;
+exports.printOpportunities = printOpportunities;
 exports.printStats = printStats;
+exports.rankOpportunities = rankOpportunities;
 exports.reset = reset;
 exports.subscribe = subscribe;
+exports.summariseInteraction = summarise;
 exports.useRenderDiagnostics = useRenderDiagnostics;
 exports.useTrackedContextValue = useTrackedContextValue;
 exports.useTrackedEffect = useTrackedEffect;