react-render-detective 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/babel.cjs +2 -2
- package/dist/babel.js +1 -1
- package/dist/{chunk-6YPJQ7M5.cjs → chunk-DZ3BZ654.cjs} +88 -4
- package/dist/chunk-DZ3BZ654.cjs.map +1 -0
- package/dist/{chunk-LSIXHWQD.js → chunk-HOTY7J3X.js} +14 -4
- package/dist/chunk-HOTY7J3X.js.map +1 -0
- package/dist/{chunk-QQ4VARSD.cjs → chunk-JD4IJ4MN.cjs} +14 -4
- package/dist/chunk-JD4IJ4MN.cjs.map +1 -0
- package/dist/{chunk-PSCFSJ65.js → chunk-MCIQMYNR.js} +12 -5
- package/dist/chunk-MCIQMYNR.js.map +1 -0
- package/dist/{chunk-BPNLNIHU.cjs → chunk-PHYYA67T.cjs} +12 -5
- package/dist/chunk-PHYYA67T.cjs.map +1 -0
- package/dist/{chunk-MSISKPST.js → chunk-QOGTEVBP.js} +88 -4
- package/dist/chunk-QOGTEVBP.js.map +1 -0
- package/dist/core.cjs +18 -18
- package/dist/core.d.cts +38 -2
- package/dist/core.d.ts +38 -2
- package/dist/core.js +1 -1
- package/dist/index.cjs +40 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +13 -3
- package/dist/index.d.ts +13 -3
- package/dist/index.js +14 -5
- package/dist/index.js.map +1 -1
- package/dist/overlay.cjs +6 -6
- package/dist/overlay.cjs.map +1 -1
- package/dist/overlay.js +4 -4
- package/dist/overlay.js.map +1 -1
- package/dist/{types-BWVaQPHb.d.cts → types-gl13xwmN.d.cts} +5 -0
- package/dist/{types-BWVaQPHb.d.ts → types-gl13xwmN.d.ts} +5 -0
- package/dist/vite.cjs +9 -6
- package/dist/vite.cjs.map +1 -1
- package/dist/vite.js +8 -5
- package/dist/vite.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-6YPJQ7M5.cjs.map +0 -1
- package/dist/chunk-BPNLNIHU.cjs.map +0 -1
- package/dist/chunk-LSIXHWQD.js.map +0 -1
- package/dist/chunk-MSISKPST.js.map +0 -1
- package/dist/chunk-PSCFSJ65.js.map +0 -1
- package/dist/chunk-QQ4VARSD.cjs.map +0 -1
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/console/reporter.ts","../src/react/ancestry.ts","../src/react/instrument.tsx","../src/react/withRenderDetective.tsx","../src/react/RenderDetective.tsx","../src/react/hooks.ts","../src/index.ts"],"names":["jsx","useContext","useState","componentName"],"mappings":"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","file":"index.js","sourcesContent":["import { formatInspected } from \"../core/inspect.js\";\nimport type { Detective } from \"../core/store.js\";\nimport type { PropChange, RenderEvent } from \"../core/types.js\";\n\nconst ICON: Record<string, string> = {\n normal: \"·\",\n monitor: \"•\",\n slow: \"▲\",\n \"very-slow\": \"▲▲\",\n critical: \"■\",\n};\n\n/** Attaches console output. Returns an unsubscribe so init() stays idempotent. */\nexport function attachConsoleReporter(detective: Detective): () => void {\n return detective.subscribe((event) => {\n const mode = detective.config.mode;\n if (mode === \"silent\") return;\n try {\n if (mode === \"verbose\") printVerbose(event);\n else printConcise(event, detective.config.slowRenderThreshold);\n } catch {\n /* ignore */\n }\n });\n}\n\nfunction printConcise(event: RenderEvent, slowThreshold: number): void {\n const { diagnosis, timings, component } = event;\n const changed = event.changedProps.map((c) => c.key).join(\", \");\n const parts = [\n `[RRD] ${component.name} #${event.renderNumber}`,\n `Reason: ${label(event)}`,\n changed ? `Changed: ${changed}` : undefined,\n timings.subtreeDuration > 0 ? `Duration: ${timings.selfDuration.toFixed(1)}ms` : undefined,\n ].filter(Boolean);\n\n const line = `${ICON[diagnosis.severity] ?? \"·\"} ${parts.join(\" \")}`;\n const slow = timings.selfDuration >= slowThreshold;\n if (slow) console.warn(line);\n else console.log(line);\n}\n\nfunction printVerbose(event: RenderEvent): void {\n const { diagnosis, timings } = event;\n const header = `[RRD] ${event.component.name} #${event.renderNumber} — ${diagnosis.summary}`;\n\n const group = diagnosis.severity === \"normal\" ? console.groupCollapsed : console.group;\n group.call(console, header);\n try {\n console.log(`Cause: ${label(event)} (confidence: ${diagnosis.confidence})`);\n if (event.component.source) console.log(`Source: ${event.component.source}`);\n if (event.parent) {\n console.log(\n `Parent: ${event.parent.name}${event.parent.source ? ` (${event.parent.source})` : \"\"}` +\n `${event.parentRendered ? \" — re-rendered in this commit\" : \" — did not re-render\"}`,\n );\n }\n console.log(\n `Cost: self ${timings.selfDuration.toFixed(1)}ms · subtree ${timings.subtreeDuration.toFixed(1)}ms` +\n (timings.accountedDescendantDuration > 0\n ? ` (${timings.accountedDescendantDuration.toFixed(1)}ms in instrumented children)`\n : \"\"),\n );\n\n if (event.changedProps.length > 0) {\n console.groupCollapsed(`Props changed (${event.changedProps.length})`);\n for (const c of event.changedProps) console.log(propLine(c));\n console.groupEnd();\n }\n if (event.unchangedProps.length > 0) {\n console.log(`Props same: ${event.unchangedProps.join(\", \")}`);\n }\n if (event.trackedState.length > 0) {\n console.log(\n `State: ${event.trackedState\n .map((s) => `${s.name}: ${formatInspected(s.previous)} → ${formatInspected(s.current)}`)\n .join(\", \")}`,\n );\n }\n if (event.contextChanges.length > 0) {\n console.log(`Context: ${event.contextChanges.map((c) => c.contextName).join(\", \")} changed in this commit`);\n }\n\n console.groupCollapsed(\"Evidence\");\n for (const line of diagnosis.evidence) console.log(`• ${line}`);\n console.groupEnd();\n\n if (diagnosis.suggestion) console.log(`Next step: ${diagnosis.suggestion}`);\n if (diagnosis.potentiallyAvoidable) console.log(\"Flag: potentially avoidable render\");\n } finally {\n console.groupEnd();\n }\n}\n\nfunction propLine(c: PropChange): string {\n const head = `${c.key} (${c.valueType}) — ${describeKind(c)}`;\n if (c.kind === \"added\") return `${head}: ${formatInspected(c.current)}`;\n if (c.kind === \"removed\") return `${head}: was ${formatInspected(c.previous)}`;\n return `${head}\\n previous: ${formatInspected(c.previous)}\\n current: ${formatInspected(c.current)}`;\n}\n\nfunction describeKind(c: PropChange): string {\n switch (c.kind) {\n case \"added\":\n return \"added\";\n case \"removed\":\n return \"removed\";\n case \"value\":\n return \"value changed\";\n case \"reference\":\n if (c.valueType === \"function\") return c.sourceEqual ? \"new function, identical source\" : \"new function reference\";\n return c.shallowEqual === true ? \"reference changed, contents identical\" : \"reference changed\";\n }\n}\n\nfunction label(event: RenderEvent): string {\n switch (event.diagnosis.reason) {\n case \"mount\":\n return \"mount\";\n case \"props\":\n return event.changedProps.every((c) => c.kind === \"reference\") ? \"prop changed (reference only)\" : \"prop changed\";\n case \"parent\":\n return \"parent rendered\";\n case \"context\":\n return \"context update\";\n case \"state\":\n return \"state changed\";\n case \"state-or-external\":\n return \"state or external store\";\n case \"unknown\":\n return \"undetermined\";\n }\n}\n","import { createContext } from \"react\";\nimport type { NodeRecord } from \"../core/store.js\";\n\n/**\n * Carries the nearest instrumented ancestor down the tree.\n *\n * The value is the node object, created once per mounted instance and **never\n * replaced**. That is deliberate: a context value that changed per render would\n * force every instrumented descendant to re-render, defeating `React.memo` and\n * changing the behaviour of the very app we are measuring.\n */\nexport const AncestryContext = createContext<NodeRecord | undefined>(undefined);\nAncestryContext.displayName = \"RenderDetectiveAncestry\";\n","import { Profiler, useCallback, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ProfilerOnRenderCallback, ReactNode } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport type { NodeRecord } from \"../core/store.js\";\nimport type { RenderPhase } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\nexport interface TrackOptions {\n /** Overrides the inferred component name. Required for anonymous components. */\n name?: string;\n /**\n * `path/to/File.tsx:12:2`. Supplied automatically by the build plugin; there\n * is no runtime way to obtain it.\n */\n source?: string;\n}\n\n/**\n * Registers the current component, records this render attempt, and returns the\n * node plus a Profiler callback. All of it is a no-op when disabled.\n */\nexport function useInstrumentedNode(\n name: string,\n props: Record<string, unknown>,\n source?: string,\n): { node: NodeRecord | undefined; onRender: ProfilerOnRenderCallback } {\n const detective = getDetective();\n const parent = useContext(AncestryContext);\n\n // The active/inactive decision is frozen per instance so the element tree\n // shape never changes underneath a mounted component.\n const [node] = useState<NodeRecord | undefined>(() =>\n detective.enabled ? detective.createNode(name, parent, source) : undefined,\n );\n\n useLayoutEffect(() => {\n if (!node) return;\n detective.attach(node);\n return () => detective.detach(node);\n }, [detective, node]);\n\n if (node) {\n try {\n detective.recordAttempt(node, props);\n } catch {\n /* never break the app being debugged (§46) */\n }\n }\n\n const onRender = useCallback<ProfilerOnRenderCallback>(\n (_id, phase, actualDuration, baseDuration, startTime, commitTime) => {\n if (!node) return;\n try {\n detective.recordCommit(node, {\n phase: phase as RenderPhase,\n subtreeDuration: actualDuration,\n baseDuration,\n startTime,\n commitTime,\n });\n } catch {\n /* ignore */\n }\n },\n [detective, node],\n );\n\n return { node, onRender };\n}\n\nexport function renderInstrumented(\n node: NodeRecord | undefined,\n onRender: ProfilerOnRenderCallback,\n children: ReactNode,\n): ReactNode {\n if (!node) return children;\n return (\n <Profiler id={node.id} onRender={onRender}>\n <AncestryContext.Provider value={node}>{children}</AncestryContext.Provider>\n </Profiler>\n );\n}\n\nexport function componentName(component: unknown, fallback = \"Anonymous\"): string {\n const c = component as { displayName?: string; name?: string; type?: unknown } | null;\n if (!c) return fallback;\n if (typeof c.displayName === \"string\" && c.displayName) return c.displayName;\n if (typeof c.name === \"string\" && c.name) return c.name;\n // React.memo / forwardRef wrappers keep the real component on `.type`.\n if (c.type) return componentName(c.type, fallback);\n return fallback;\n}\n","import type { ComponentType } from \"react\";\n\n/** Marks a component as one of ours, so it is never wrapped twice. */\nconst IS_WRAPPER = Symbol.for(\"react-render-detective.wrapper\");\nimport { componentName, renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\nimport type { TrackOptions } from \"./instrument.js\";\n\n/**\n * Wraps a component with full instrumentation: render counting, prop diffing,\n * parent attribution and Profiler timings.\n *\n * This is the most accurate integration mode — the wrapper's render function\n * runs exactly when the wrapped component re-renders, and it receives the same\n * props, so every diagnosis has first-hand evidence.\n *\n * Ref note: on React 19 `ref` is an ordinary prop and passes through the spread.\n * On React 18 and below, wrap with `forwardRef` yourself if the component needs\n * a ref.\n */\nexport function withRenderDetective<P extends object>(\n Component: ComponentType<P>,\n options: TrackOptions = {},\n): ComponentType<P> {\n /*\n * Wrapping a wrapper would make it render itself. That is unreachable through\n * careful hand-wrapping but trivially reachable once a build plugin is\n * wrapping everything, and the failure mode is a stack overflow before first\n * paint — so return the existing wrapper instead.\n */\n if ((Component as { [IS_WRAPPER]?: boolean })[IS_WRAPPER]) return Component;\n\n const name = options.name ?? componentName(Component);\n\n function RenderDetected(props: P) {\n const { node, onRender } = useInstrumentedNode(name, props as Record<string, unknown>, options.source);\n return renderInstrumented(node, onRender, <Component {...props} />);\n }\n\n RenderDetected.displayName = `RenderDetective(${name})`;\n (RenderDetected as { [IS_WRAPPER]?: boolean })[IS_WRAPPER] = true;\n return RenderDetected;\n}\n","import type { ReactNode } from \"react\";\nimport { renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\n\nexport interface RenderDetectiveProps {\n name: string;\n children: ReactNode;\n}\n\n/**\n * Zero-refactor integration: drop it around a subtree.\n *\n * <RenderDetective name=\"UserProfile\"><UserProfile /></RenderDetective>\n *\n * Accuracy note: this boundary only sees the `children` **element**, not the\n * wrapped component's props. It therefore reports timings, parent propagation\n * and children-element churn accurately, but it cannot attribute a render to an\n * individual prop. Use `withRenderDetective` when you want per-prop diagnosis.\n */\nexport function RenderDetective({ name, children }: RenderDetectiveProps): ReactNode {\n const { node, onRender } = useInstrumentedNode(name, { children });\n return renderInstrumented(node, onRender, children);\n}\n","import * as React from \"react\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport { inspect } from \"../core/inspect.js\";\nimport { diffProps, shallowEqual } from \"../core/compare.js\";\nimport type { RenderEvent } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\n/**\n * In-component diagnostics without wrapping.\n *\n * Limitation, by design: a hook cannot install a `<Profiler>` around its own\n * component, so **no duration is available in this mode** — timings are\n * reported as 0. Everything else (render count, prop diffing, parent\n * attribution) is as accurate as the HOC.\n */\nexport function useRenderDiagnostics(name: string, props?: Record<string, unknown>): RenderEvent | undefined {\n const detective = getDetective();\n const parent = useContext(AncestryContext);\n const [node] = useState(() => {\n if (!detective.enabled) return undefined;\n const created = detective.createNode(name, parent);\n if (created) detective.hookModeNodes.add(created);\n return created;\n });\n const last = useRef<RenderEvent | undefined>(undefined);\n\n useEffect(() => {\n if (!node) return;\n detective.attach(node);\n const unsubscribe = detective.subscribe((event) => {\n if (event.component.id === node.id) last.current = event;\n });\n return () => {\n unsubscribe();\n detective.detach(node);\n };\n }, [detective, node]);\n\n if (node) {\n const isMount = !node.seenCommit;\n detective.recordAttempt(node, props ?? {});\n // No Profiler in hook mode: enqueue with a sentinel commit time, which the\n // flush pass resolves to the next real commit that follows this render.\n detective.recordCommit(node, {\n phase: isMount ? \"mount\" : \"update\",\n subtreeDuration: 0,\n baseDuration: 0,\n startTime: 0,\n commitTime: -1,\n });\n }\n\n return last.current;\n}\n\n/**\n * React 18+. Used only to identify *which* component under an instrumented node\n * owns the tracked state; `useId` is stable across StrictMode's double render,\n * which a `useRef` token would not be. Older React simply loses the guard.\n */\nconst useOwnerId: () => string =\n typeof (React as { useId?: () => string }).useId === \"function\"\n ? (React as unknown as { useId: () => string }).useId\n : () => \"\";\n\n/**\n * `useState` with a label. The only reliable way to attribute a render to a\n * specific piece of local state without React internals.\n *\n * **Call this inside a component that is itself instrumented** (wrapped with\n * `withRenderDetective`, or using `useRenderDiagnostics`). A hook cannot see\n * which component called it, only the nearest instrumented ancestor — so state\n * named in an uninstrumented descendant would be reported as the ancestor's.\n * The first caller under a given node claims it and later callers are ignored,\n * which stops a descendant from stealing the attribution, but it cannot rescue\n * the case where the ancestor never tracks state of its own.\n */\nexport function useTrackedState<S>(name: string, initial: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {\n const detective = getDetective();\n const node = useContext(AncestryContext);\n const ownerId = useOwnerId();\n const [state, setState] = useState<S>(initial);\n const previous = useRef<S>(state);\n\n if (node && node.stateOwner === undefined) node.stateOwner = ownerId;\n const owns = !node || node.stateOwner === ownerId;\n\n if (node && owns && !Object.is(previous.current, state)) {\n detective.recordStateChange(node, {\n name,\n previous: inspect(previous.current, detective.config.inspection),\n current: inspect(state, detective.config.inspection),\n });\n previous.current = state;\n } else if (!owns) {\n previous.current = state;\n }\n\n return [state, setState];\n}\n\n/**\n * `useEffect` that reports which of **its own declared** dependencies changed.\n *\n * This does not analyse whether the dependency list is correct — that needs\n * static analysis, not runtime observation (see docs/FEASIBILITY.md §9).\n */\nexport function useTrackedEffect(\n name: string,\n effect: () => void | (() => void),\n deps: unknown[],\n): void {\n const detective = getDetective();\n const previous = useRef<unknown[] | undefined>(undefined);\n const changed = useRef<number[]>([]);\n\n if (detective.enabled) {\n const prev = previous.current;\n changed.current = prev\n ? deps.map((d, i) => (Object.is(d, prev[i]) ? -1 : i)).filter((i) => i >= 0)\n : [];\n previous.current = deps;\n }\n\n useEffect(() => {\n if (detective.enabled && detective.config.mode !== \"silent\" && changed.current.length > 0) {\n // eslint-disable-next-line no-console\n console.debug(`[RRD] effect ${name} ran — deps changed at index ${changed.current.join(\", \")}`);\n }\n return effect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n}\n\n/**\n * Reports when a context value changes, from inside the provider.\n * Returns the value untouched.\n */\nexport function useTrackedContextValue<T>(contextName: string, value: T): T {\n const detective = getDetective();\n const previous = useRef<T | undefined>(undefined);\n const first = useRef(true);\n\n if (detective.enabled) {\n if (first.current) {\n first.current = false;\n } else if (!Object.is(previous.current, value)) {\n const prev = previous.current;\n const equal = shallowEqual(prev, value, detective.config);\n const changedKeys =\n isRecord(prev) && isRecord(value)\n ? diffProps(prev, value, detective.config).changed.map((c) => c.key)\n : [];\n detective.recordContextChange({\n contextName,\n changedKeys,\n referenceOnly: equal === true,\n commitTime: -1,\n });\n }\n previous.current = value;\n }\n\n return value;\n}\n\nfunction isRecord(v: unknown): v is Record<string, unknown> {\n return typeof v === \"object\" && v !== null && !Array.isArray(v);\n}\n","import { attachConsoleReporter } from \"./console/reporter.js\";\nimport { explainEvents, formatExplanation } from \"./core/explain.js\";\nimport { getDetective } from \"./core/store.js\";\nimport type {\n AppStats,\n ComponentStats,\n DetectiveConfig,\n DetectiveOptions,\n RenderEvent,\n} from \"./core/types.js\";\n\nconst REPORTER = Symbol.for(\"react-render-detective.reporter\");\ntype Global = typeof globalThis & { [REPORTER]?: () => void };\n\n/**\n * Enable diagnostics. Safe to call repeatedly — Fast Refresh, duplicate module\n * copies and re-entrant setup all reconfigure the single instance rather than\n * stacking listeners (§47).\n */\nexport function init(options: DetectiveOptions = {}): void {\n const detective = getDetective();\n detective.init(options);\n\n const g = globalThis as Global;\n g[REPORTER]?.();\n g[REPORTER] = undefined;\n\n if (detective.enabled && detective.config.mode !== \"silent\") {\n g[REPORTER] = attachConsoleReporter(detective);\n } else if (!detective.enabled) {\n // Never fail silently: a disabled detective looks identical to a broken one.\n console.info(\n \"[RRD] Diagnostics are disabled\" +\n (detective.config.enabled === false ? \" (enabled: false, or a production build was detected).\" : \".\"),\n );\n }\n}\n\n/** Update configuration without re-initialising. */\nexport function configure(options: DetectiveOptions): void {\n getDetective().configure(options);\n}\n\nexport function getConfig(): Readonly<DetectiveConfig> {\n return getDetective().config;\n}\n\nexport function isEnabled(): boolean {\n return getDetective().enabled;\n}\n\n/** Oldest → newest, bounded by `maxEvents`. */\nexport function getEvents(): RenderEvent[] {\n return getDetective().getEvents();\n}\n\nexport function getStats(): AppStats {\n return getDetective().getStats();\n}\n\nexport function getComponentStats(name?: string): ComponentStats[] {\n return getDetective().getComponentStats(name);\n}\n\n/** Live event stream. Returns an unsubscribe function. */\nexport function subscribe(listener: (event: RenderEvent) => void): () => void {\n return getDetective().subscribe(listener);\n}\n\n/** Clears recorded events and statistics; instrumentation stays attached. */\nexport function clear(): void {\n getDetective().clear();\n}\n\n/** Full teardown, including configuration. Mainly for tests and HMR disposal. */\nexport function reset(): void {\n const g = globalThis as Global;\n g[REPORTER]?.();\n g[REPORTER] = undefined;\n getDetective().reset();\n}\n\n/**\n * The flagship answer: aggregate every recorded render of one component into a\n * single, human explanation. Returns `undefined` if nothing was recorded.\n */\nexport function explain(componentName: string): string | undefined {\n const explanation = explainEvents(componentName, getEvents());\n return explanation ? formatExplanation(explanation) : undefined;\n}\n\n/** Structured form of `explain`, for building UIs on top. */\nexport function explainStructured(componentName: string) {\n return explainEvents(componentName, getEvents());\n}\n\n/** Prints the application-level dashboard (§53). */\nexport function printStats(): void {\n const s = getStats();\n const lines = [\n \"React Render Detective\",\n \"\",\n `Components ${s.components}`,\n `Total renders ${s.totalRenders}`,\n `Total render time ${s.totalRenderTime.toFixed(1)}ms`,\n `Slow renders ${s.slowRenders}`,\n `Potentially avoidable ${s.potentiallyAvoidableRenders}`,\n ];\n if (s.devReplays > 0) {\n lines.push(`Development replays ${s.devReplays} (StrictMode / discarded — not counted above)`);\n }\n if (s.mostExpensive.length > 0) {\n lines.push(\"\", \"Top by cumulative render time\");\n for (const [i, c] of s.mostExpensive.slice(0, 5).entries()) {\n lines.push(\n `${String(i + 1).padStart(2)}. ${c.name.padEnd(22)} ${String(c.renderCount).padStart(6)} renders ${c.totalSelfDuration\n .toFixed(1)\n .padStart(8)}ms (avg ${c.averageSelfDuration.toFixed(1)}ms, p95 ${c.p95SelfDuration.toFixed(1)}ms)`,\n );\n }\n }\n console.log(lines.join(\"\\n\"));\n}\n\n/** Namespaced form, matching the documented `ReactRenderDetective.init()` usage. */\nexport const ReactRenderDetective = {\n init,\n configure,\n getConfig,\n isEnabled,\n getEvents,\n getStats,\n getComponentStats,\n subscribe,\n clear,\n reset,\n explain,\n explainStructured,\n printStats,\n};\n\nexport { withRenderDetective } from \"./react/withRenderDetective.js\";\nexport { RenderDetective } from \"./react/RenderDetective.js\";\nexport type { RenderDetectiveProps } from \"./react/RenderDetective.js\";\nexport {\n useRenderDiagnostics,\n useTrackedState,\n useTrackedEffect,\n useTrackedContextValue,\n} from \"./react/hooks.js\";\nexport type { TrackOptions } from \"./react/instrument.js\";\nexport { explainEvents, formatExplanation } from \"./core/explain.js\";\nexport type { Explanation } from \"./core/explain.js\";\nexport type * from \"./core/types.js\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/console/reporter.ts","../src/react/ancestry.ts","../src/react/instrument.tsx","../src/react/withRenderDetective.tsx","../src/react/RenderDetective.tsx","../src/react/hooks.ts","../src/index.ts"],"names":["jsx","useContext","useState","componentName"],"mappings":"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","file":"index.js","sourcesContent":["import { formatInspected } from \"../core/inspect.js\";\nimport type { Detective } from \"../core/store.js\";\nimport type { PropChange, RenderEvent } from \"../core/types.js\";\n\nconst ICON: Record<string, string> = {\n normal: \"·\",\n monitor: \"•\",\n slow: \"▲\",\n \"very-slow\": \"▲▲\",\n critical: \"■\",\n};\n\n/** Attaches console output. Returns an unsubscribe so init() stays idempotent. */\nexport function attachConsoleReporter(detective: Detective): () => void {\n return detective.subscribe((event) => {\n const mode = detective.config.mode;\n if (mode === \"silent\") return;\n try {\n if (mode === \"verbose\") printVerbose(event);\n else printConcise(event, detective.config.slowRenderThreshold);\n } catch {\n /* ignore */\n }\n });\n}\n\nfunction printConcise(event: RenderEvent, slowThreshold: number): void {\n const { diagnosis, timings, component } = event;\n const changed = event.changedProps.map((c) => c.key).join(\", \");\n const parts = [\n `[RRD] ${component.name} #${event.renderNumber}`,\n `Reason: ${label(event)}`,\n changed ? `Changed: ${changed}` : undefined,\n timings.subtreeDuration > 0 ? `Duration: ${timings.selfDuration.toFixed(1)}ms` : undefined,\n ].filter(Boolean);\n\n const line = `${ICON[diagnosis.severity] ?? \"·\"} ${parts.join(\" \")}`;\n const slow = timings.selfDuration >= slowThreshold;\n if (slow) console.warn(line);\n else console.log(line);\n}\n\nfunction printVerbose(event: RenderEvent): void {\n const { diagnosis, timings } = event;\n const header = `[RRD] ${event.component.name} #${event.renderNumber} — ${diagnosis.summary}`;\n\n const group = diagnosis.severity === \"normal\" ? console.groupCollapsed : console.group;\n group.call(console, header);\n try {\n console.log(`Cause: ${label(event)} (confidence: ${diagnosis.confidence})`);\n if (event.component.source) console.log(`Source: ${event.component.source}`);\n if (event.parent) {\n console.log(\n `Parent: ${event.parent.name}${event.parent.source ? ` (${event.parent.source})` : \"\"}` +\n `${event.parentRendered ? \" — re-rendered in this commit\" : \" — did not re-render\"}`,\n );\n }\n console.log(\n `Cost: self ${timings.selfDuration.toFixed(1)}ms · subtree ${timings.subtreeDuration.toFixed(1)}ms` +\n (timings.accountedDescendantDuration > 0\n ? ` (${timings.accountedDescendantDuration.toFixed(1)}ms in instrumented children)`\n : \"\"),\n );\n\n if (event.changedProps.length > 0) {\n console.groupCollapsed(`Props changed (${event.changedProps.length})`);\n for (const c of event.changedProps) console.log(propLine(c));\n console.groupEnd();\n }\n if (event.unchangedProps.length > 0) {\n console.log(`Props same: ${event.unchangedProps.join(\", \")}`);\n }\n if (event.trackedState.length > 0) {\n console.log(\n `State: ${event.trackedState\n .map((s) => `${s.name}: ${formatInspected(s.previous)} → ${formatInspected(s.current)}`)\n .join(\", \")}`,\n );\n }\n if (event.contextChanges.length > 0) {\n console.log(`Context: ${event.contextChanges.map((c) => c.contextName).join(\", \")} changed in this commit`);\n }\n\n console.groupCollapsed(\"Evidence\");\n for (const line of diagnosis.evidence) console.log(`• ${line}`);\n console.groupEnd();\n\n if (diagnosis.suggestion) console.log(`Next step: ${diagnosis.suggestion}`);\n if (diagnosis.potentiallyAvoidable) console.log(\"Flag: potentially avoidable render\");\n } finally {\n console.groupEnd();\n }\n}\n\nfunction propLine(c: PropChange): string {\n const head = `${c.key} (${c.valueType}) — ${describeKind(c)}`;\n if (c.kind === \"added\") return `${head}: ${formatInspected(c.current)}`;\n if (c.kind === \"removed\") return `${head}: was ${formatInspected(c.previous)}`;\n return `${head}\\n previous: ${formatInspected(c.previous)}\\n current: ${formatInspected(c.current)}`;\n}\n\nfunction describeKind(c: PropChange): string {\n switch (c.kind) {\n case \"added\":\n return \"added\";\n case \"removed\":\n return \"removed\";\n case \"value\":\n return \"value changed\";\n case \"reference\":\n if (c.valueType === \"function\") return c.sourceEqual ? \"new function, identical source\" : \"new function reference\";\n return c.shallowEqual === true ? \"reference changed, contents identical\" : \"reference changed\";\n }\n}\n\nfunction label(event: RenderEvent): string {\n switch (event.diagnosis.reason) {\n case \"mount\":\n return \"mount\";\n case \"props\":\n return event.changedProps.every((c) => c.kind === \"reference\") ? \"prop changed (reference only)\" : \"prop changed\";\n case \"parent\":\n return \"parent rendered\";\n case \"context\":\n return \"context update\";\n case \"state\":\n return \"state changed\";\n case \"state-or-external\":\n return \"state or external store\";\n case \"unknown\":\n return \"undetermined\";\n }\n}\n","import { createContext } from \"react\";\nimport type { NodeRecord } from \"../core/store.js\";\n\n/**\n * Carries the nearest instrumented ancestor down the tree.\n *\n * The value is the node object, created once per mounted instance and **never\n * replaced**. That is deliberate: a context value that changed per render would\n * force every instrumented descendant to re-render, defeating `React.memo` and\n * changing the behaviour of the very app we are measuring.\n */\nexport const AncestryContext = createContext<NodeRecord | undefined>(undefined);\nAncestryContext.displayName = \"RenderDetectiveAncestry\";\n","import { Profiler, useCallback, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ProfilerOnRenderCallback, ReactNode } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport type { NodeRecord } from \"../core/store.js\";\nimport type { RenderPhase } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\nexport interface TrackOptions {\n /** Overrides the inferred component name. Required for anonymous components. */\n name?: string;\n /**\n * `path/to/File.tsx:12:2`. Supplied automatically by the build plugin; there\n * is no runtime way to obtain it.\n */\n source?: string;\n /**\n * Set by the build plugin when the component is declared inside another\n * function. React sees a new component type on every parent render and\n * rebuilds the whole subtree, so this turns a guess into a fact.\n */\n declaredInRender?: boolean;\n}\n\n/**\n * Registers the current component, records this render attempt, and returns the\n * node plus a Profiler callback. All of it is a no-op when disabled.\n */\nexport function useInstrumentedNode(\n name: string,\n props: Record<string, unknown>,\n source?: string,\n): { node: NodeRecord | undefined; onRender: ProfilerOnRenderCallback } {\n const detective = getDetective();\n const parent = useContext(AncestryContext);\n\n // The active/inactive decision is frozen per instance so the element tree\n // shape never changes underneath a mounted component.\n const [node] = useState<NodeRecord | undefined>(() =>\n detective.enabled ? detective.createNode(name, parent, source) : undefined,\n );\n\n useLayoutEffect(() => {\n if (!node) return;\n detective.attach(node);\n return () => detective.detach(node);\n }, [detective, node]);\n\n if (node) {\n try {\n detective.recordAttempt(node, props);\n } catch {\n /* never break the app being debugged (§46) */\n }\n }\n\n const onRender = useCallback<ProfilerOnRenderCallback>(\n (_id, phase, actualDuration, baseDuration, startTime, commitTime) => {\n if (!node) return;\n try {\n detective.recordCommit(node, {\n phase: phase as RenderPhase,\n subtreeDuration: actualDuration,\n baseDuration,\n startTime,\n commitTime,\n });\n } catch {\n /* ignore */\n }\n },\n [detective, node],\n );\n\n return { node, onRender };\n}\n\nexport function renderInstrumented(\n node: NodeRecord | undefined,\n onRender: ProfilerOnRenderCallback,\n children: ReactNode,\n): ReactNode {\n if (!node) return children;\n return (\n <Profiler id={node.id} onRender={onRender}>\n <AncestryContext.Provider value={node}>{children}</AncestryContext.Provider>\n </Profiler>\n );\n}\n\nexport function componentName(component: unknown, fallback = \"Anonymous\"): string {\n const c = component as { displayName?: string; name?: string; type?: unknown } | null;\n if (!c) return fallback;\n if (typeof c.displayName === \"string\" && c.displayName) return c.displayName;\n if (typeof c.name === \"string\" && c.name) return c.name;\n // React.memo / forwardRef wrappers keep the real component on `.type`.\n if (c.type) return componentName(c.type, fallback);\n return fallback;\n}\n","import type { ComponentType } from \"react\";\nimport { getDetective } from \"../core/store.js\";\n\n/** Marks a component as one of ours, so it is never wrapped twice. */\nconst IS_WRAPPER = Symbol.for(\"react-render-detective.wrapper\");\nimport { componentName, renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\nimport type { TrackOptions } from \"./instrument.js\";\n\n/**\n * Wraps a component with full instrumentation: render counting, prop diffing,\n * parent attribution and Profiler timings.\n *\n * This is the most accurate integration mode — the wrapper's render function\n * runs exactly when the wrapped component re-renders, and it receives the same\n * props, so every diagnosis has first-hand evidence.\n *\n * Ref note: on React 19 `ref` is an ordinary prop and passes through the spread.\n * On React 18 and below, wrap with `forwardRef` yourself if the component needs\n * a ref.\n */\nexport function withRenderDetective<P extends object>(\n Component: ComponentType<P>,\n options: TrackOptions = {},\n): ComponentType<P> {\n /*\n * Wrapping a wrapper would make it render itself. That is unreachable through\n * careful hand-wrapping but trivially reachable once a build plugin is\n * wrapping everything, and the failure mode is a stack overflow before first\n * paint — so return the existing wrapper instead.\n */\n if ((Component as { [IS_WRAPPER]?: boolean })[IS_WRAPPER]) return Component;\n\n const name = options.name ?? componentName(Component);\n\n /*\n * Counted at wrap time, not render time. A component declared at module scope\n * is wrapped once; one declared inside a render body is wrapped again on every\n * parent render, which is the tell for the most expensive mistake in this\n * list — React rebuilds the whole subtree each time.\n */\n getDetective().noteDefinition(name, options.source, options.declaredInRender === true);\n\n function RenderDetected(props: P) {\n const { node, onRender } = useInstrumentedNode(name, props as Record<string, unknown>, options.source);\n return renderInstrumented(node, onRender, <Component {...props} />);\n }\n\n RenderDetected.displayName = `RenderDetective(${name})`;\n (RenderDetected as { [IS_WRAPPER]?: boolean })[IS_WRAPPER] = true;\n return RenderDetected;\n}\n","import type { ReactNode } from \"react\";\nimport { renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\n\nexport interface RenderDetectiveProps {\n name: string;\n children: ReactNode;\n}\n\n/**\n * Zero-refactor integration: drop it around a subtree.\n *\n * <RenderDetective name=\"UserProfile\"><UserProfile /></RenderDetective>\n *\n * Accuracy note: this boundary only sees the `children` **element**, not the\n * wrapped component's props. It therefore reports timings, parent propagation\n * and children-element churn accurately, but it cannot attribute a render to an\n * individual prop. Use `withRenderDetective` when you want per-prop diagnosis.\n */\nexport function RenderDetective({ name, children }: RenderDetectiveProps): ReactNode {\n const { node, onRender } = useInstrumentedNode(name, { children });\n return renderInstrumented(node, onRender, children);\n}\n","import * as React from \"react\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport { inspect } from \"../core/inspect.js\";\nimport { diffProps, shallowEqual } from \"../core/compare.js\";\nimport type { RenderEvent } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\n/**\n * In-component diagnostics without wrapping.\n *\n * Limitation, by design: a hook cannot install a `<Profiler>` around its own\n * component, so **no duration is available in this mode** — timings are\n * reported as 0. Everything else (render count, prop diffing, parent\n * attribution) is as accurate as the HOC.\n */\nexport function useRenderDiagnostics(name: string, props?: Record<string, unknown>): RenderEvent | undefined {\n const detective = getDetective();\n const parent = useContext(AncestryContext);\n const [node] = useState(() => {\n if (!detective.enabled) return undefined;\n const created = detective.createNode(name, parent);\n if (created) detective.hookModeNodes.add(created);\n return created;\n });\n const last = useRef<RenderEvent | undefined>(undefined);\n\n useEffect(() => {\n if (!node) return;\n detective.attach(node);\n const unsubscribe = detective.subscribe((event) => {\n if (event.component.id === node.id) last.current = event;\n });\n return () => {\n unsubscribe();\n detective.detach(node);\n };\n }, [detective, node]);\n\n if (node) {\n const isMount = !node.seenCommit;\n detective.recordAttempt(node, props ?? {});\n // No Profiler in hook mode: enqueue with a sentinel commit time, which the\n // flush pass resolves to the next real commit that follows this render.\n detective.recordCommit(node, {\n phase: isMount ? \"mount\" : \"update\",\n subtreeDuration: 0,\n baseDuration: 0,\n startTime: 0,\n commitTime: -1,\n });\n }\n\n return last.current;\n}\n\n/**\n * React 18+. Used only to identify *which* component under an instrumented node\n * owns the tracked state; `useId` is stable across StrictMode's double render,\n * which a `useRef` token would not be. Older React simply loses the guard.\n */\nconst useOwnerId: () => string =\n typeof (React as { useId?: () => string }).useId === \"function\"\n ? (React as unknown as { useId: () => string }).useId\n : () => \"\";\n\n/**\n * `useState` with a label. The only reliable way to attribute a render to a\n * specific piece of local state without React internals.\n *\n * **Call this inside a component that is itself instrumented** (wrapped with\n * `withRenderDetective`, or using `useRenderDiagnostics`). A hook cannot see\n * which component called it, only the nearest instrumented ancestor — so state\n * named in an uninstrumented descendant would be reported as the ancestor's.\n * The first caller under a given node claims it and later callers are ignored,\n * which stops a descendant from stealing the attribution, but it cannot rescue\n * the case where the ancestor never tracks state of its own.\n */\nexport function useTrackedState<S>(name: string, initial: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {\n const detective = getDetective();\n const node = useContext(AncestryContext);\n const ownerId = useOwnerId();\n const [state, setState] = useState<S>(initial);\n const previous = useRef<S>(state);\n\n if (node && node.stateOwner === undefined) node.stateOwner = ownerId;\n const owns = !node || node.stateOwner === ownerId;\n\n if (node && owns && !Object.is(previous.current, state)) {\n detective.recordStateChange(node, {\n name,\n previous: inspect(previous.current, detective.config.inspection),\n current: inspect(state, detective.config.inspection),\n });\n previous.current = state;\n } else if (!owns) {\n previous.current = state;\n }\n\n return [state, setState];\n}\n\n/**\n * `useEffect` that reports which of **its own declared** dependencies changed.\n *\n * This does not analyse whether the dependency list is correct — that needs\n * static analysis, not runtime observation (see docs/FEASIBILITY.md §9).\n */\nexport function useTrackedEffect(\n name: string,\n effect: () => void | (() => void),\n deps: unknown[],\n): void {\n const detective = getDetective();\n const previous = useRef<unknown[] | undefined>(undefined);\n const changed = useRef<number[]>([]);\n\n if (detective.enabled) {\n const prev = previous.current;\n changed.current = prev\n ? deps.map((d, i) => (Object.is(d, prev[i]) ? -1 : i)).filter((i) => i >= 0)\n : [];\n previous.current = deps;\n }\n\n useEffect(() => {\n if (detective.enabled && detective.config.mode !== \"silent\" && changed.current.length > 0) {\n // eslint-disable-next-line no-console\n console.debug(`[RRD] effect ${name} ran — deps changed at index ${changed.current.join(\", \")}`);\n }\n return effect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n}\n\n/**\n * Reports when a context value changes, from inside the provider.\n * Returns the value untouched.\n */\nexport function useTrackedContextValue<T>(contextName: string, value: T): T {\n const detective = getDetective();\n const previous = useRef<T | undefined>(undefined);\n const first = useRef(true);\n\n if (detective.enabled) {\n if (first.current) {\n first.current = false;\n } else if (!Object.is(previous.current, value)) {\n const prev = previous.current;\n const equal = shallowEqual(prev, value, detective.config);\n const changedKeys =\n isRecord(prev) && isRecord(value)\n ? diffProps(prev, value, detective.config).changed.map((c) => c.key)\n : [];\n detective.recordContextChange({\n contextName,\n changedKeys,\n referenceOnly: equal === true,\n commitTime: -1,\n });\n }\n previous.current = value;\n }\n\n return value;\n}\n\nfunction isRecord(v: unknown): v is Record<string, unknown> {\n return typeof v === \"object\" && v !== null && !Array.isArray(v);\n}\n","import { attachConsoleReporter } from \"./console/reporter.js\";\nimport { explainEvents, formatExplanation } from \"./core/explain.js\";\nimport { getDetective } from \"./core/store.js\";\nimport type {\n AppStats,\n ComponentStats,\n DetectiveConfig,\n DetectiveOptions,\n RenderEvent,\n} from \"./core/types.js\";\n\nconst REPORTER = Symbol.for(\"react-render-detective.reporter\");\ntype Global = typeof globalThis & { [REPORTER]?: () => void };\n\n/**\n * Enable diagnostics. Safe to call repeatedly — Fast Refresh, duplicate module\n * copies and re-entrant setup all reconfigure the single instance rather than\n * stacking listeners (§47).\n */\nexport function init(options: DetectiveOptions = {}): void {\n const detective = getDetective();\n detective.init(options);\n\n const g = globalThis as Global;\n g[REPORTER]?.();\n g[REPORTER] = undefined;\n\n if (detective.enabled && detective.config.mode !== \"silent\") {\n g[REPORTER] = attachConsoleReporter(detective);\n } else if (!detective.enabled) {\n // Never fail silently: a disabled detective looks identical to a broken one.\n console.info(\n \"[RRD] Diagnostics are disabled\" +\n (detective.config.enabled === false ? \" (enabled: false, or a production build was detected).\" : \".\"),\n );\n }\n}\n\n/** Update configuration without re-initialising. */\nexport function configure(options: DetectiveOptions): void {\n getDetective().configure(options);\n}\n\nexport function getConfig(): Readonly<DetectiveConfig> {\n return getDetective().config;\n}\n\nexport function isEnabled(): boolean {\n return getDetective().enabled;\n}\n\n/** Oldest → newest, bounded by `maxEvents`. */\nexport function getEvents(): RenderEvent[] {\n return getDetective().getEvents();\n}\n\nexport function getStats(): AppStats {\n return getDetective().getStats();\n}\n\nexport function getComponentStats(name?: string): ComponentStats[] {\n return getDetective().getComponentStats(name);\n}\n\n/** Live event stream. Returns an unsubscribe function. */\nexport function subscribe(listener: (event: RenderEvent) => void): () => void {\n return getDetective().subscribe(listener);\n}\n\n/** Clears recorded events and statistics; instrumentation stays attached. */\nexport function clear(): void {\n getDetective().clear();\n}\n\n/** Full teardown, including configuration. Mainly for tests and HMR disposal. */\nexport function reset(): void {\n const g = globalThis as Global;\n g[REPORTER]?.();\n g[REPORTER] = undefined;\n getDetective().reset();\n}\n\n/**\n * The flagship answer: aggregate every recorded render of one component into a\n * single, human explanation. Returns `undefined` if nothing was recorded.\n */\nexport function explain(componentName: string): string | undefined {\n const explanation = explainStructured(componentName);\n return explanation ? formatExplanation(explanation) : undefined;\n}\n\n/** Structured form of `explain`, for building UIs on top. */\nexport function explainStructured(componentName: string) {\n return explainEvents(componentName, getEvents(), getDetective().lifecycleOf(componentName));\n}\n\n/** Prints the application-level dashboard (§53). */\nexport function printStats(): void {\n const s = getStats();\n const lines = [\n \"React Render Detective\",\n \"\",\n `Components ${s.components}`,\n `Total renders ${s.totalRenders}`,\n `Total render time ${s.totalRenderTime.toFixed(1)}ms`,\n `Slow renders ${s.slowRenders}`,\n `Potentially avoidable ${s.potentiallyAvoidableRenders}`,\n ];\n const rebuilt = s.mostRendered.filter((c) => c.remountCount >= 2);\n if (rebuilt.length > 0) {\n lines.push(\n \"\",\n \"Rebuilt rather than re-rendered (state and DOM discarded each time)\",\n ...rebuilt.slice(0, 5).map((c) => ` ${c.name.padEnd(22)} ${String(c.remountCount).padStart(5)}× remounted`),\n );\n }\n if (s.devReplays > 0) {\n lines.push(`Development replays ${s.devReplays} (StrictMode / discarded — not counted above)`);\n }\n if (s.mostExpensive.length > 0) {\n lines.push(\"\", \"Top by cumulative render time\");\n for (const [i, c] of s.mostExpensive.slice(0, 5).entries()) {\n lines.push(\n `${String(i + 1).padStart(2)}. ${c.name.padEnd(22)} ${String(c.renderCount).padStart(6)} renders ${c.totalSelfDuration\n .toFixed(1)\n .padStart(8)}ms (avg ${c.averageSelfDuration.toFixed(1)}ms, p95 ${c.p95SelfDuration.toFixed(1)}ms)`,\n );\n }\n }\n console.log(lines.join(\"\\n\"));\n}\n\n/** Namespaced form, matching the documented `ReactRenderDetective.init()` usage. */\nexport const ReactRenderDetective = {\n init,\n configure,\n getConfig,\n isEnabled,\n getEvents,\n getStats,\n getComponentStats,\n subscribe,\n clear,\n reset,\n explain,\n explainStructured,\n printStats,\n};\n\nexport { withRenderDetective } from \"./react/withRenderDetective.js\";\nexport { RenderDetective } from \"./react/RenderDetective.js\";\nexport type { RenderDetectiveProps } from \"./react/RenderDetective.js\";\nexport {\n useRenderDiagnostics,\n useTrackedState,\n useTrackedEffect,\n useTrackedContextValue,\n} from \"./react/hooks.js\";\nexport type { TrackOptions } from \"./react/instrument.js\";\nexport { explainEvents, formatExplanation } from \"./core/explain.js\";\nexport type { Explanation } from \"./core/explain.js\";\nexport type * from \"./core/types.js\";\n"]}
|
package/dist/overlay.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunkJD4IJ4MN_cjs = require('./chunk-JD4IJ4MN.cjs');
|
|
4
|
+
var chunkDZ3BZ654_cjs = require('./chunk-DZ3BZ654.cjs');
|
|
5
5
|
|
|
6
6
|
// src/overlay/overlay.ts
|
|
7
7
|
var MOUNTED = /* @__PURE__ */ Symbol.for("react-render-detective.overlay");
|
|
@@ -15,7 +15,7 @@ function mountOverlay() {
|
|
|
15
15
|
} };
|
|
16
16
|
return noop;
|
|
17
17
|
}
|
|
18
|
-
const detective =
|
|
18
|
+
const detective = chunkDZ3BZ654_cjs.getDetective();
|
|
19
19
|
const root = document.createElement("div");
|
|
20
20
|
root.setAttribute("data-rrd-overlay", "");
|
|
21
21
|
root.attachShadow({ mode: "open" });
|
|
@@ -68,7 +68,7 @@ function mountOverlay() {
|
|
|
68
68
|
const rows = stats.mostExpensive.concat(stats.mostRendered).filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i).filter((s) => !filter || s.name.toLowerCase().includes(filter)).sort((a, b) => b.totalSelfDuration - a.totalSelfDuration).slice(0, 40);
|
|
69
69
|
listEl.innerHTML = rows.map((s) => {
|
|
70
70
|
const waste = s.potentiallyAvoidableRenders;
|
|
71
|
-
const flag = waste > 0 ? `<span class="warn">${waste} avoidable</span>` : "";
|
|
71
|
+
const flag = s.remountCount >= 2 ? `<span class="warn">${s.remountCount}\xD7 rebuilt</span>` : waste > 0 ? `<span class="warn">${waste} avoidable</span>` : "";
|
|
72
72
|
return `<div class="row${s.name === selected ? " sel" : ""}" data-name="${escapeHtml(s.name)}" title="${escapeHtml(s.source ?? s.name)}">
|
|
73
73
|
<span class="name">${escapeHtml(s.name)}</span>
|
|
74
74
|
<span class="num">${s.renderCount}</span>
|
|
@@ -77,8 +77,8 @@ function mountOverlay() {
|
|
|
77
77
|
</div>`;
|
|
78
78
|
}).join("");
|
|
79
79
|
if (selected) {
|
|
80
|
-
const explanation =
|
|
81
|
-
detailEl.textContent = explanation ?
|
|
80
|
+
const explanation = chunkJD4IJ4MN_cjs.explainEvents(selected, detective.getEvents(), detective.lifecycleOf(selected));
|
|
81
|
+
detailEl.textContent = explanation ? chunkJD4IJ4MN_cjs.formatExplanation(explanation) : `No recorded renders for ${selected}.`;
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
const handle = {
|
package/dist/overlay.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overlay/overlay.ts"],"names":["getDetective","explainEvents","formatExplanation"],"mappings":"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","file":"overlay.cjs","sourcesContent":["import { explainEvents, formatExplanation } from \"../core/explain.js\";\nimport { getDetective } from \"../core/store.js\";\nimport type { RenderEvent } from \"../core/types.js\";\n\nexport interface OverlayHandle {\n destroy: () => void;\n show: () => void;\n hide: () => void;\n}\n\nconst MOUNTED = Symbol.for(\"react-render-detective.overlay\");\ntype Global = typeof globalThis & { [MOUNTED]?: OverlayHandle };\n\n/**\n * Development overlay.\n *\n * Deliberately plain DOM: rendering the inspector *inside* the app's React tree\n * would add renders to the tree it is measuring. It consumes the same event\n * model as console mode — no diagnostic logic is duplicated here (§68).\n */\nexport function mountOverlay(): OverlayHandle {\n const g = globalThis as Global;\n if (g[MOUNTED]) return g[MOUNTED] as OverlayHandle;\n if (typeof document === \"undefined\") {\n const noop: OverlayHandle = { destroy: () => {}, show: () => {}, hide: () => {} };\n return noop;\n }\n\n const detective = getDetective();\n const root = document.createElement(\"div\");\n root.setAttribute(\"data-rrd-overlay\", \"\");\n root.attachShadow({ mode: \"open\" });\n const shadow = root.shadowRoot as ShadowRoot;\n shadow.innerHTML = TEMPLATE;\n document.body.appendChild(root);\n\n const $ = <T extends HTMLElement>(sel: string): T => shadow.querySelector(sel) as T;\n const listEl = $<HTMLDivElement>(\"#list\");\n const detailEl = $<HTMLPreElement>(\"#detail\");\n const filterEl = $<HTMLInputElement>(\"#filter\");\n const summaryEl = $<HTMLDivElement>(\"#summary\");\n const panelEl = $<HTMLDivElement>(\"#panel\");\n\n let selected: string | undefined;\n let paused = false;\n let dirty = true;\n let filter = \"\";\n const recent: RenderEvent[] = [];\n\n const unsubscribe = detective.subscribe((event) => {\n if (paused) return;\n recent.push(event);\n if (recent.length > 200) recent.shift();\n dirty = true;\n });\n\n filterEl.addEventListener(\"input\", () => {\n filter = filterEl.value.trim().toLowerCase();\n dirty = true;\n });\n $(\"#pause\").addEventListener(\"click\", () => {\n paused = !paused;\n ($(\"#pause\") as HTMLButtonElement).textContent = paused ? \"Resume\" : \"Pause\";\n });\n $(\"#clear\").addEventListener(\"click\", () => {\n detective.clear();\n recent.length = 0;\n selected = undefined;\n detailEl.textContent = \"\";\n dirty = true;\n });\n $(\"#close\").addEventListener(\"click\", () => handle.hide());\n listEl.addEventListener(\"click\", (e) => {\n const row = (e.target as HTMLElement).closest(\"[data-name]\") as HTMLElement | null;\n if (!row) return;\n selected = row.dataset.name as string;\n dirty = true;\n });\n\n const timer = setInterval(() => {\n if (!dirty || panelEl.hidden) return;\n dirty = false;\n render();\n }, 400);\n\n function render(): void {\n const stats = detective.getStats();\n summaryEl.textContent =\n `${stats.totalRenders} renders · ${stats.totalRenderTime.toFixed(0)}ms · ` +\n `${stats.potentiallyAvoidableRenders} potentially avoidable` +\n (stats.devReplays > 0 ? ` · ${stats.devReplays} dev replays` : \"\");\n\n const rows = stats.mostExpensive\n .concat(stats.mostRendered)\n .filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i)\n .filter((s) => !filter || s.name.toLowerCase().includes(filter))\n .sort((a, b) => b.totalSelfDuration - a.totalSelfDuration)\n .slice(0, 40);\n\n listEl.innerHTML = rows\n .map((s) => {\n const waste = s.potentiallyAvoidableRenders;\n const flag = waste > 0 ? `<span class=\"warn\">${waste} avoidable</span>` : \"\";\n return `<div class=\"row${s.name === selected ? \" sel\" : \"\"}\" data-name=\"${escapeHtml(s.name)}\" title=\"${escapeHtml(s.source ?? s.name)}\">\n <span class=\"name\">${escapeHtml(s.name)}</span>\n <span class=\"num\">${s.renderCount}</span>\n <span class=\"num\">${s.totalSelfDuration.toFixed(0)}ms</span>\n ${flag}\n </div>`;\n })\n .join(\"\");\n\n if (selected) {\n const explanation = explainEvents(selected, detective.getEvents());\n detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;\n }\n }\n\n const handle: OverlayHandle = {\n destroy() {\n unsubscribe();\n clearInterval(timer);\n root.remove();\n (globalThis as Global)[MOUNTED] = undefined;\n },\n show() {\n panelEl.hidden = false;\n dirty = true;\n },\n hide() {\n panelEl.hidden = true;\n },\n };\n\n g[MOUNTED] = handle;\n return handle;\n}\n\nfunction escapeHtml(s: string): string {\n return s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" })[c] as string);\n}\n\nconst TEMPLATE = `\n<style>\n :host { all: initial; }\n #panel {\n position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;\n display: flex; flex-direction: column; z-index: 2147483000;\n font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;\n box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;\n }\n header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }\n header b { font-weight: 600; letter-spacing: .02em; }\n header .spacer { flex: 1; }\n button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }\n button { cursor: pointer; }\n #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }\n #list { overflow: auto; max-height: 30vh; }\n .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }\n .row:hover { background: #1d2128; }\n .row.sel { background: #263041; }\n .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .num { color: #9aa4b2; min-width: 56px; text-align: right; }\n .warn { color: #f2b263; }\n #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }\n</style>\n<div id=\"panel\">\n <header>\n <b>Render Detective</b>\n <span class=\"spacer\"></span>\n <input id=\"filter\" placeholder=\"filter\" size=\"10\" />\n <button id=\"pause\">Pause</button>\n <button id=\"clear\">Clear</button>\n <button id=\"close\">×</button>\n </header>\n <div id=\"summary\"></div>\n <div id=\"list\"></div>\n <pre id=\"detail\">Select a component to see why it rendered.</pre>\n</div>\n`;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/overlay/overlay.ts"],"names":["getDetective","explainEvents","formatExplanation"],"mappings":"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","file":"overlay.cjs","sourcesContent":["import { explainEvents, formatExplanation } from \"../core/explain.js\";\nimport { getDetective } from \"../core/store.js\";\nimport type { RenderEvent } from \"../core/types.js\";\n\nexport interface OverlayHandle {\n destroy: () => void;\n show: () => void;\n hide: () => void;\n}\n\nconst MOUNTED = Symbol.for(\"react-render-detective.overlay\");\ntype Global = typeof globalThis & { [MOUNTED]?: OverlayHandle };\n\n/**\n * Development overlay.\n *\n * Deliberately plain DOM: rendering the inspector *inside* the app's React tree\n * would add renders to the tree it is measuring. It consumes the same event\n * model as console mode — no diagnostic logic is duplicated here (§68).\n */\nexport function mountOverlay(): OverlayHandle {\n const g = globalThis as Global;\n if (g[MOUNTED]) return g[MOUNTED] as OverlayHandle;\n if (typeof document === \"undefined\") {\n const noop: OverlayHandle = { destroy: () => {}, show: () => {}, hide: () => {} };\n return noop;\n }\n\n const detective = getDetective();\n const root = document.createElement(\"div\");\n root.setAttribute(\"data-rrd-overlay\", \"\");\n root.attachShadow({ mode: \"open\" });\n const shadow = root.shadowRoot as ShadowRoot;\n shadow.innerHTML = TEMPLATE;\n document.body.appendChild(root);\n\n const $ = <T extends HTMLElement>(sel: string): T => shadow.querySelector(sel) as T;\n const listEl = $<HTMLDivElement>(\"#list\");\n const detailEl = $<HTMLPreElement>(\"#detail\");\n const filterEl = $<HTMLInputElement>(\"#filter\");\n const summaryEl = $<HTMLDivElement>(\"#summary\");\n const panelEl = $<HTMLDivElement>(\"#panel\");\n\n let selected: string | undefined;\n let paused = false;\n let dirty = true;\n let filter = \"\";\n const recent: RenderEvent[] = [];\n\n const unsubscribe = detective.subscribe((event) => {\n if (paused) return;\n recent.push(event);\n if (recent.length > 200) recent.shift();\n dirty = true;\n });\n\n filterEl.addEventListener(\"input\", () => {\n filter = filterEl.value.trim().toLowerCase();\n dirty = true;\n });\n $(\"#pause\").addEventListener(\"click\", () => {\n paused = !paused;\n ($(\"#pause\") as HTMLButtonElement).textContent = paused ? \"Resume\" : \"Pause\";\n });\n $(\"#clear\").addEventListener(\"click\", () => {\n detective.clear();\n recent.length = 0;\n selected = undefined;\n detailEl.textContent = \"\";\n dirty = true;\n });\n $(\"#close\").addEventListener(\"click\", () => handle.hide());\n listEl.addEventListener(\"click\", (e) => {\n const row = (e.target as HTMLElement).closest(\"[data-name]\") as HTMLElement | null;\n if (!row) return;\n selected = row.dataset.name as string;\n dirty = true;\n });\n\n const timer = setInterval(() => {\n if (!dirty || panelEl.hidden) return;\n dirty = false;\n render();\n }, 400);\n\n function render(): void {\n const stats = detective.getStats();\n summaryEl.textContent =\n `${stats.totalRenders} renders · ${stats.totalRenderTime.toFixed(0)}ms · ` +\n `${stats.potentiallyAvoidableRenders} potentially avoidable` +\n (stats.devReplays > 0 ? ` · ${stats.devReplays} dev replays` : \"\");\n\n const rows = stats.mostExpensive\n .concat(stats.mostRendered)\n .filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i)\n .filter((s) => !filter || s.name.toLowerCase().includes(filter))\n .sort((a, b) => b.totalSelfDuration - a.totalSelfDuration)\n .slice(0, 40);\n\n listEl.innerHTML = rows\n .map((s) => {\n const waste = s.potentiallyAvoidableRenders;\n const flag =\n s.remountCount >= 2\n ? `<span class=\"warn\">${s.remountCount}× rebuilt</span>`\n : waste > 0\n ? `<span class=\"warn\">${waste} avoidable</span>`\n : \"\";\n return `<div class=\"row${s.name === selected ? \" sel\" : \"\"}\" data-name=\"${escapeHtml(s.name)}\" title=\"${escapeHtml(s.source ?? s.name)}\">\n <span class=\"name\">${escapeHtml(s.name)}</span>\n <span class=\"num\">${s.renderCount}</span>\n <span class=\"num\">${s.totalSelfDuration.toFixed(0)}ms</span>\n ${flag}\n </div>`;\n })\n .join(\"\");\n\n if (selected) {\n const explanation = explainEvents(selected, detective.getEvents(), detective.lifecycleOf(selected));\n detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;\n }\n }\n\n const handle: OverlayHandle = {\n destroy() {\n unsubscribe();\n clearInterval(timer);\n root.remove();\n (globalThis as Global)[MOUNTED] = undefined;\n },\n show() {\n panelEl.hidden = false;\n dirty = true;\n },\n hide() {\n panelEl.hidden = true;\n },\n };\n\n g[MOUNTED] = handle;\n return handle;\n}\n\nfunction escapeHtml(s: string): string {\n return s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" })[c] as string);\n}\n\nconst TEMPLATE = `\n<style>\n :host { all: initial; }\n #panel {\n position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;\n display: flex; flex-direction: column; z-index: 2147483000;\n font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;\n box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;\n }\n header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }\n header b { font-weight: 600; letter-spacing: .02em; }\n header .spacer { flex: 1; }\n button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }\n button { cursor: pointer; }\n #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }\n #list { overflow: auto; max-height: 30vh; }\n .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }\n .row:hover { background: #1d2128; }\n .row.sel { background: #263041; }\n .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .num { color: #9aa4b2; min-width: 56px; text-align: right; }\n .warn { color: #f2b263; }\n #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }\n</style>\n<div id=\"panel\">\n <header>\n <b>Render Detective</b>\n <span class=\"spacer\"></span>\n <input id=\"filter\" placeholder=\"filter\" size=\"10\" />\n <button id=\"pause\">Pause</button>\n <button id=\"clear\">Clear</button>\n <button id=\"close\">×</button>\n </header>\n <div id=\"summary\"></div>\n <div id=\"list\"></div>\n <pre id=\"detail\">Select a component to see why it rendered.</pre>\n</div>\n`;\n"]}
|
package/dist/overlay.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { explainEvents, formatExplanation } from './chunk-
|
|
2
|
-
import { getDetective } from './chunk-
|
|
1
|
+
import { explainEvents, formatExplanation } from './chunk-HOTY7J3X.js';
|
|
2
|
+
import { getDetective } from './chunk-QOGTEVBP.js';
|
|
3
3
|
|
|
4
4
|
// src/overlay/overlay.ts
|
|
5
5
|
var MOUNTED = /* @__PURE__ */ Symbol.for("react-render-detective.overlay");
|
|
@@ -66,7 +66,7 @@ function mountOverlay() {
|
|
|
66
66
|
const rows = stats.mostExpensive.concat(stats.mostRendered).filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i).filter((s) => !filter || s.name.toLowerCase().includes(filter)).sort((a, b) => b.totalSelfDuration - a.totalSelfDuration).slice(0, 40);
|
|
67
67
|
listEl.innerHTML = rows.map((s) => {
|
|
68
68
|
const waste = s.potentiallyAvoidableRenders;
|
|
69
|
-
const flag = waste > 0 ? `<span class="warn">${waste} avoidable</span>` : "";
|
|
69
|
+
const flag = s.remountCount >= 2 ? `<span class="warn">${s.remountCount}\xD7 rebuilt</span>` : waste > 0 ? `<span class="warn">${waste} avoidable</span>` : "";
|
|
70
70
|
return `<div class="row${s.name === selected ? " sel" : ""}" data-name="${escapeHtml(s.name)}" title="${escapeHtml(s.source ?? s.name)}">
|
|
71
71
|
<span class="name">${escapeHtml(s.name)}</span>
|
|
72
72
|
<span class="num">${s.renderCount}</span>
|
|
@@ -75,7 +75,7 @@ function mountOverlay() {
|
|
|
75
75
|
</div>`;
|
|
76
76
|
}).join("");
|
|
77
77
|
if (selected) {
|
|
78
|
-
const explanation = explainEvents(selected, detective.getEvents());
|
|
78
|
+
const explanation = explainEvents(selected, detective.getEvents(), detective.lifecycleOf(selected));
|
|
79
79
|
detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;
|
|
80
80
|
}
|
|
81
81
|
}
|
package/dist/overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/overlay/overlay.ts"],"names":[],"mappings":"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","file":"overlay.js","sourcesContent":["import { explainEvents, formatExplanation } from \"../core/explain.js\";\nimport { getDetective } from \"../core/store.js\";\nimport type { RenderEvent } from \"../core/types.js\";\n\nexport interface OverlayHandle {\n destroy: () => void;\n show: () => void;\n hide: () => void;\n}\n\nconst MOUNTED = Symbol.for(\"react-render-detective.overlay\");\ntype Global = typeof globalThis & { [MOUNTED]?: OverlayHandle };\n\n/**\n * Development overlay.\n *\n * Deliberately plain DOM: rendering the inspector *inside* the app's React tree\n * would add renders to the tree it is measuring. It consumes the same event\n * model as console mode — no diagnostic logic is duplicated here (§68).\n */\nexport function mountOverlay(): OverlayHandle {\n const g = globalThis as Global;\n if (g[MOUNTED]) return g[MOUNTED] as OverlayHandle;\n if (typeof document === \"undefined\") {\n const noop: OverlayHandle = { destroy: () => {}, show: () => {}, hide: () => {} };\n return noop;\n }\n\n const detective = getDetective();\n const root = document.createElement(\"div\");\n root.setAttribute(\"data-rrd-overlay\", \"\");\n root.attachShadow({ mode: \"open\" });\n const shadow = root.shadowRoot as ShadowRoot;\n shadow.innerHTML = TEMPLATE;\n document.body.appendChild(root);\n\n const $ = <T extends HTMLElement>(sel: string): T => shadow.querySelector(sel) as T;\n const listEl = $<HTMLDivElement>(\"#list\");\n const detailEl = $<HTMLPreElement>(\"#detail\");\n const filterEl = $<HTMLInputElement>(\"#filter\");\n const summaryEl = $<HTMLDivElement>(\"#summary\");\n const panelEl = $<HTMLDivElement>(\"#panel\");\n\n let selected: string | undefined;\n let paused = false;\n let dirty = true;\n let filter = \"\";\n const recent: RenderEvent[] = [];\n\n const unsubscribe = detective.subscribe((event) => {\n if (paused) return;\n recent.push(event);\n if (recent.length > 200) recent.shift();\n dirty = true;\n });\n\n filterEl.addEventListener(\"input\", () => {\n filter = filterEl.value.trim().toLowerCase();\n dirty = true;\n });\n $(\"#pause\").addEventListener(\"click\", () => {\n paused = !paused;\n ($(\"#pause\") as HTMLButtonElement).textContent = paused ? \"Resume\" : \"Pause\";\n });\n $(\"#clear\").addEventListener(\"click\", () => {\n detective.clear();\n recent.length = 0;\n selected = undefined;\n detailEl.textContent = \"\";\n dirty = true;\n });\n $(\"#close\").addEventListener(\"click\", () => handle.hide());\n listEl.addEventListener(\"click\", (e) => {\n const row = (e.target as HTMLElement).closest(\"[data-name]\") as HTMLElement | null;\n if (!row) return;\n selected = row.dataset.name as string;\n dirty = true;\n });\n\n const timer = setInterval(() => {\n if (!dirty || panelEl.hidden) return;\n dirty = false;\n render();\n }, 400);\n\n function render(): void {\n const stats = detective.getStats();\n summaryEl.textContent =\n `${stats.totalRenders} renders · ${stats.totalRenderTime.toFixed(0)}ms · ` +\n `${stats.potentiallyAvoidableRenders} potentially avoidable` +\n (stats.devReplays > 0 ? ` · ${stats.devReplays} dev replays` : \"\");\n\n const rows = stats.mostExpensive\n .concat(stats.mostRendered)\n .filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i)\n .filter((s) => !filter || s.name.toLowerCase().includes(filter))\n .sort((a, b) => b.totalSelfDuration - a.totalSelfDuration)\n .slice(0, 40);\n\n listEl.innerHTML = rows\n .map((s) => {\n const waste = s.potentiallyAvoidableRenders;\n const flag = waste > 0 ? `<span class=\"warn\">${waste} avoidable</span>` : \"\";\n return `<div class=\"row${s.name === selected ? \" sel\" : \"\"}\" data-name=\"${escapeHtml(s.name)}\" title=\"${escapeHtml(s.source ?? s.name)}\">\n <span class=\"name\">${escapeHtml(s.name)}</span>\n <span class=\"num\">${s.renderCount}</span>\n <span class=\"num\">${s.totalSelfDuration.toFixed(0)}ms</span>\n ${flag}\n </div>`;\n })\n .join(\"\");\n\n if (selected) {\n const explanation = explainEvents(selected, detective.getEvents());\n detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;\n }\n }\n\n const handle: OverlayHandle = {\n destroy() {\n unsubscribe();\n clearInterval(timer);\n root.remove();\n (globalThis as Global)[MOUNTED] = undefined;\n },\n show() {\n panelEl.hidden = false;\n dirty = true;\n },\n hide() {\n panelEl.hidden = true;\n },\n };\n\n g[MOUNTED] = handle;\n return handle;\n}\n\nfunction escapeHtml(s: string): string {\n return s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" })[c] as string);\n}\n\nconst TEMPLATE = `\n<style>\n :host { all: initial; }\n #panel {\n position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;\n display: flex; flex-direction: column; z-index: 2147483000;\n font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;\n box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;\n }\n header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }\n header b { font-weight: 600; letter-spacing: .02em; }\n header .spacer { flex: 1; }\n button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }\n button { cursor: pointer; }\n #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }\n #list { overflow: auto; max-height: 30vh; }\n .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }\n .row:hover { background: #1d2128; }\n .row.sel { background: #263041; }\n .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .num { color: #9aa4b2; min-width: 56px; text-align: right; }\n .warn { color: #f2b263; }\n #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }\n</style>\n<div id=\"panel\">\n <header>\n <b>Render Detective</b>\n <span class=\"spacer\"></span>\n <input id=\"filter\" placeholder=\"filter\" size=\"10\" />\n <button id=\"pause\">Pause</button>\n <button id=\"clear\">Clear</button>\n <button id=\"close\">×</button>\n </header>\n <div id=\"summary\"></div>\n <div id=\"list\"></div>\n <pre id=\"detail\">Select a component to see why it rendered.</pre>\n</div>\n`;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/overlay/overlay.ts"],"names":[],"mappings":"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","file":"overlay.js","sourcesContent":["import { explainEvents, formatExplanation } from \"../core/explain.js\";\nimport { getDetective } from \"../core/store.js\";\nimport type { RenderEvent } from \"../core/types.js\";\n\nexport interface OverlayHandle {\n destroy: () => void;\n show: () => void;\n hide: () => void;\n}\n\nconst MOUNTED = Symbol.for(\"react-render-detective.overlay\");\ntype Global = typeof globalThis & { [MOUNTED]?: OverlayHandle };\n\n/**\n * Development overlay.\n *\n * Deliberately plain DOM: rendering the inspector *inside* the app's React tree\n * would add renders to the tree it is measuring. It consumes the same event\n * model as console mode — no diagnostic logic is duplicated here (§68).\n */\nexport function mountOverlay(): OverlayHandle {\n const g = globalThis as Global;\n if (g[MOUNTED]) return g[MOUNTED] as OverlayHandle;\n if (typeof document === \"undefined\") {\n const noop: OverlayHandle = { destroy: () => {}, show: () => {}, hide: () => {} };\n return noop;\n }\n\n const detective = getDetective();\n const root = document.createElement(\"div\");\n root.setAttribute(\"data-rrd-overlay\", \"\");\n root.attachShadow({ mode: \"open\" });\n const shadow = root.shadowRoot as ShadowRoot;\n shadow.innerHTML = TEMPLATE;\n document.body.appendChild(root);\n\n const $ = <T extends HTMLElement>(sel: string): T => shadow.querySelector(sel) as T;\n const listEl = $<HTMLDivElement>(\"#list\");\n const detailEl = $<HTMLPreElement>(\"#detail\");\n const filterEl = $<HTMLInputElement>(\"#filter\");\n const summaryEl = $<HTMLDivElement>(\"#summary\");\n const panelEl = $<HTMLDivElement>(\"#panel\");\n\n let selected: string | undefined;\n let paused = false;\n let dirty = true;\n let filter = \"\";\n const recent: RenderEvent[] = [];\n\n const unsubscribe = detective.subscribe((event) => {\n if (paused) return;\n recent.push(event);\n if (recent.length > 200) recent.shift();\n dirty = true;\n });\n\n filterEl.addEventListener(\"input\", () => {\n filter = filterEl.value.trim().toLowerCase();\n dirty = true;\n });\n $(\"#pause\").addEventListener(\"click\", () => {\n paused = !paused;\n ($(\"#pause\") as HTMLButtonElement).textContent = paused ? \"Resume\" : \"Pause\";\n });\n $(\"#clear\").addEventListener(\"click\", () => {\n detective.clear();\n recent.length = 0;\n selected = undefined;\n detailEl.textContent = \"\";\n dirty = true;\n });\n $(\"#close\").addEventListener(\"click\", () => handle.hide());\n listEl.addEventListener(\"click\", (e) => {\n const row = (e.target as HTMLElement).closest(\"[data-name]\") as HTMLElement | null;\n if (!row) return;\n selected = row.dataset.name as string;\n dirty = true;\n });\n\n const timer = setInterval(() => {\n if (!dirty || panelEl.hidden) return;\n dirty = false;\n render();\n }, 400);\n\n function render(): void {\n const stats = detective.getStats();\n summaryEl.textContent =\n `${stats.totalRenders} renders · ${stats.totalRenderTime.toFixed(0)}ms · ` +\n `${stats.potentiallyAvoidableRenders} potentially avoidable` +\n (stats.devReplays > 0 ? ` · ${stats.devReplays} dev replays` : \"\");\n\n const rows = stats.mostExpensive\n .concat(stats.mostRendered)\n .filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i)\n .filter((s) => !filter || s.name.toLowerCase().includes(filter))\n .sort((a, b) => b.totalSelfDuration - a.totalSelfDuration)\n .slice(0, 40);\n\n listEl.innerHTML = rows\n .map((s) => {\n const waste = s.potentiallyAvoidableRenders;\n const flag =\n s.remountCount >= 2\n ? `<span class=\"warn\">${s.remountCount}× rebuilt</span>`\n : waste > 0\n ? `<span class=\"warn\">${waste} avoidable</span>`\n : \"\";\n return `<div class=\"row${s.name === selected ? \" sel\" : \"\"}\" data-name=\"${escapeHtml(s.name)}\" title=\"${escapeHtml(s.source ?? s.name)}\">\n <span class=\"name\">${escapeHtml(s.name)}</span>\n <span class=\"num\">${s.renderCount}</span>\n <span class=\"num\">${s.totalSelfDuration.toFixed(0)}ms</span>\n ${flag}\n </div>`;\n })\n .join(\"\");\n\n if (selected) {\n const explanation = explainEvents(selected, detective.getEvents(), detective.lifecycleOf(selected));\n detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;\n }\n }\n\n const handle: OverlayHandle = {\n destroy() {\n unsubscribe();\n clearInterval(timer);\n root.remove();\n (globalThis as Global)[MOUNTED] = undefined;\n },\n show() {\n panelEl.hidden = false;\n dirty = true;\n },\n hide() {\n panelEl.hidden = true;\n },\n };\n\n g[MOUNTED] = handle;\n return handle;\n}\n\nfunction escapeHtml(s: string): string {\n return s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" })[c] as string);\n}\n\nconst TEMPLATE = `\n<style>\n :host { all: initial; }\n #panel {\n position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;\n display: flex; flex-direction: column; z-index: 2147483000;\n font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;\n box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;\n }\n header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }\n header b { font-weight: 600; letter-spacing: .02em; }\n header .spacer { flex: 1; }\n button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }\n button { cursor: pointer; }\n #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }\n #list { overflow: auto; max-height: 30vh; }\n .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }\n .row:hover { background: #1d2128; }\n .row.sel { background: #263041; }\n .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .num { color: #9aa4b2; min-width: 56px; text-align: right; }\n .warn { color: #f2b263; }\n #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }\n</style>\n<div id=\"panel\">\n <header>\n <b>Render Detective</b>\n <span class=\"spacer\"></span>\n <input id=\"filter\" placeholder=\"filter\" size=\"10\" />\n <button id=\"pause\">Pause</button>\n <button id=\"clear\">Clear</button>\n <button id=\"close\">×</button>\n </header>\n <div id=\"summary\"></div>\n <div id=\"list\"></div>\n <pre id=\"detail\">Select a component to see why it rendered.</pre>\n</div>\n`;\n"]}
|
|
@@ -163,6 +163,11 @@ interface ComponentStats {
|
|
|
163
163
|
source?: string;
|
|
164
164
|
renderCount: number;
|
|
165
165
|
mountCount: number;
|
|
166
|
+
/**
|
|
167
|
+
* Mounts that followed an unmount of the same component — the component was
|
|
168
|
+
* rebuilt rather than re-rendered, which is far more expensive.
|
|
169
|
+
*/
|
|
170
|
+
remountCount: number;
|
|
166
171
|
uncommittedAttempts: number;
|
|
167
172
|
devReplays: number;
|
|
168
173
|
totalSelfDuration: number;
|
|
@@ -163,6 +163,11 @@ interface ComponentStats {
|
|
|
163
163
|
source?: string;
|
|
164
164
|
renderCount: number;
|
|
165
165
|
mountCount: number;
|
|
166
|
+
/**
|
|
167
|
+
* Mounts that followed an unmount of the same component — the component was
|
|
168
|
+
* rebuilt rather than re-rendered, which is far more expensive.
|
|
169
|
+
*/
|
|
170
|
+
remountCount: number;
|
|
166
171
|
uncommittedAttempts: number;
|
|
167
172
|
devReplays: number;
|
|
168
173
|
totalSelfDuration: number;
|
package/dist/vite.cjs
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var chunkPHYYA67T_cjs = require('./chunk-PHYYA67T.cjs');
|
|
6
6
|
|
|
7
7
|
// src/vite/index.ts
|
|
8
8
|
var DEFAULT_FILTER = (id) => /\.[jt]sx$/.test(id.split("?")[0] ?? id) && !id.includes("node_modules");
|
|
9
9
|
function renderDetective(options = {}) {
|
|
10
10
|
const filter = options.filter ?? DEFAULT_FILTER;
|
|
11
|
-
let
|
|
11
|
+
let transformAsync;
|
|
12
12
|
return {
|
|
13
13
|
name: "react-render-detective",
|
|
14
14
|
// After JSX is still present but before it is compiled away.
|
|
@@ -18,22 +18,25 @@ function renderDetective(options = {}) {
|
|
|
18
18
|
async transform(code, id) {
|
|
19
19
|
if (!filter(id)) return null;
|
|
20
20
|
if (!code.includes("<")) return null;
|
|
21
|
-
if (!
|
|
21
|
+
if (!transformAsync) {
|
|
22
22
|
try {
|
|
23
|
-
|
|
23
|
+
const mod = await import('@babel/core');
|
|
24
|
+
transformAsync = mod.transformAsync ?? mod.default?.transformAsync;
|
|
24
25
|
} catch {
|
|
26
|
+
}
|
|
27
|
+
if (!transformAsync) {
|
|
25
28
|
throw new Error(
|
|
26
29
|
"[react-render-detective] @babel/core is required for automatic instrumentation.\nInstall it (`npm i -D @babel/core`) or remove the renderDetective() plugin."
|
|
27
30
|
);
|
|
28
31
|
}
|
|
29
32
|
}
|
|
30
|
-
const result = await
|
|
33
|
+
const result = await transformAsync(code, {
|
|
31
34
|
filename: id,
|
|
32
35
|
babelrc: false,
|
|
33
36
|
configFile: false,
|
|
34
37
|
sourceMaps: true,
|
|
35
38
|
parserOpts: { plugins: ["jsx", "typescript"] },
|
|
36
|
-
plugins: [[
|
|
39
|
+
plugins: [[chunkPHYYA67T_cjs.renderDetectiveBabelPlugin, { enabled: true, ...options }]]
|
|
37
40
|
});
|
|
38
41
|
if (!result?.code) return null;
|
|
39
42
|
return { code: result.code, map: result.map };
|
package/dist/vite.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite/index.ts"],"names":["renderDetectiveBabelPlugin"],"mappings":";;;;;;;AAyBA,IAAM,iBAAiB,CAAC,EAAA,KACtB,WAAA,CAAY,IAAA,CAAK,GAAG,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,KAAK,EAAE,CAAA,IAAK,CAAC,EAAA,CAAG,SAAS,cAAc,CAAA;AAElE,SAAS,eAAA,CAAgB,OAAA,GAA6B,EAAC,EAAsB;AAClF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,cAAA;AACjC,EAAA,IAAI,
|
|
1
|
+
{"version":3,"sources":["../src/vite/index.ts"],"names":["renderDetectiveBabelPlugin"],"mappings":";;;;;;;AAyBA,IAAM,iBAAiB,CAAC,EAAA,KACtB,WAAA,CAAY,IAAA,CAAK,GAAG,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,KAAK,EAAE,CAAA,IAAK,CAAC,EAAA,CAAG,SAAS,cAAc,CAAA;AAElE,SAAS,eAAA,CAAgB,OAAA,GAA6B,EAAC,EAAsB;AAClF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,cAAA;AACjC,EAAA,IAAI,cAAA;AAEJ,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,wBAAA;AAAA;AAAA,IAEN,OAAA,EAAS,KAAA;AAAA;AAAA,IAET,KAAA,EAAO,OAAA;AAAA,IAEP,MAAM,SAAA,CAAU,IAAA,EAAc,EAAA,EAAY;AACxC,MAAA,IAAI,CAAC,MAAA,CAAO,EAAE,CAAA,EAAG,OAAO,IAAA;AAExB,MAAA,IAAI,CAAC,IAAA,CAAK,QAAA,CAAS,GAAG,GAAG,OAAO,IAAA;AAEhC,MAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,QAAA,IAAI;AAGF,UAAA,MAAM,GAAA,GAAO,MAAM,OAAO,aAAa,CAAA;AAIvC,UAAA,cAAA,GAAiB,GAAA,CAAI,cAAA,IAAkB,GAAA,CAAI,OAAA,EAAS,cAAA;AAAA,QACtD,CAAA,CAAA,MAAQ;AAAA,QAER;AACA,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,MAAM,IAAI,KAAA;AAAA,YACR;AAAA,WAEF;AAAA,QACF;AAAA,MACF;AAEA,MAAA,MAAM,MAAA,GAAS,MAAM,cAAA,CAAe,IAAA,EAAM;AAAA,QACxC,QAAA,EAAU,EAAA;AAAA,QACV,OAAA,EAAS,KAAA;AAAA,QACT,UAAA,EAAY,KAAA;AAAA,QACZ,UAAA,EAAY,IAAA;AAAA,QACZ,YAAY,EAAE,OAAA,EAAS,CAAC,KAAA,EAAO,YAAY,CAAA,EAAE;AAAA,QAC7C,OAAA,EAAS,CAAC,CAACA,4CAAA,EAAa,EAAE,SAAS,IAAA,EAAM,GAAG,OAAA,EAAS,CAAC;AAAA,OACvD,CAAA;AAED,MAAA,IAAI,CAAC,MAAA,EAAQ,IAAA,EAAM,OAAO,IAAA;AAC1B,MAAA,OAAO,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,EAAM,GAAA,EAAK,OAAO,GAAA,EAAI;AAAA,IAC9C;AAAA,GACF;AACF;AAEA,IAAO,YAAA,GAAQ","file":"vite.cjs","sourcesContent":["/**\n * Vite plugin: instrument every component in dev, with source locations.\n *\n * A thin wrapper around the Babel plugin — the transform lives in one place so\n * Vite, webpack, Next and Remix all behave identically.\n *\n * `@babel/core` is an optional peer dependency. Vite's React plugin already\n * brings it, so most projects need no extra install; the core runtime keeps its\n * zero-dependency guarantee because none of this ships to the browser.\n */\nimport babelPlugin from \"../babel/index.js\";\nimport type { RenderDetectivePluginOptions } from \"../babel/index.js\";\n\nexport interface VitePluginOptions extends RenderDetectivePluginOptions {\n /** Files to transform. Defaults to `.jsx` / `.tsx` outside node_modules. */\n filter?: (id: string) => boolean;\n}\n\ninterface MinimalVitePlugin {\n name: string;\n enforce?: \"pre\" | \"post\";\n apply?: \"serve\" | \"build\";\n transform?: (code: string, id: string) => Promise<{ code: string; map: unknown } | null>;\n}\n\nconst DEFAULT_FILTER = (id: string): boolean =>\n /\\.[jt]sx$/.test(id.split(\"?\")[0] ?? id) && !id.includes(\"node_modules\");\n\nexport function renderDetective(options: VitePluginOptions = {}): MinimalVitePlugin {\n const filter = options.filter ?? DEFAULT_FILTER;\n let transformAsync: typeof import(\"@babel/core\").transformAsync | undefined;\n\n return {\n name: \"react-render-detective\",\n // After JSX is still present but before it is compiled away.\n enforce: \"pre\",\n // Dev only. There is no way to ask for this in a production build, by design.\n apply: \"serve\",\n\n async transform(code: string, id: string) {\n if (!filter(id)) return null;\n // Cheap bail-out: no JSX, nothing to instrument.\n if (!code.includes(\"<\")) return null;\n\n if (!transformAsync) {\n try {\n // Babel 8 is ESM with named exports; Babel 7 is CJS and may arrive\n // under `default`. Support both rather than assuming the user's major.\n const mod = (await import(\"@babel/core\")) as unknown as {\n transformAsync?: typeof import(\"@babel/core\").transformAsync;\n default?: { transformAsync?: typeof import(\"@babel/core\").transformAsync };\n };\n transformAsync = mod.transformAsync ?? mod.default?.transformAsync;\n } catch {\n /* fall through to the error below */\n }\n if (!transformAsync) {\n throw new Error(\n \"[react-render-detective] @babel/core is required for automatic instrumentation.\\n\" +\n \"Install it (`npm i -D @babel/core`) or remove the renderDetective() plugin.\",\n );\n }\n }\n\n const result = await transformAsync(code, {\n filename: id,\n babelrc: false,\n configFile: false,\n sourceMaps: true,\n parserOpts: { plugins: [\"jsx\", \"typescript\"] },\n plugins: [[babelPlugin, { enabled: true, ...options }]],\n });\n\n if (!result?.code) return null;\n return { code: result.code, map: result.map };\n },\n };\n}\n\nexport default renderDetective;\nexport type { RenderDetectivePluginOptions };\n"]}
|
package/dist/vite.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { renderDetectiveBabelPlugin } from './chunk-
|
|
1
|
+
import { renderDetectiveBabelPlugin } from './chunk-MCIQMYNR.js';
|
|
2
2
|
|
|
3
3
|
// src/vite/index.ts
|
|
4
4
|
var DEFAULT_FILTER = (id) => /\.[jt]sx$/.test(id.split("?")[0] ?? id) && !id.includes("node_modules");
|
|
5
5
|
function renderDetective(options = {}) {
|
|
6
6
|
const filter = options.filter ?? DEFAULT_FILTER;
|
|
7
|
-
let
|
|
7
|
+
let transformAsync;
|
|
8
8
|
return {
|
|
9
9
|
name: "react-render-detective",
|
|
10
10
|
// After JSX is still present but before it is compiled away.
|
|
@@ -14,16 +14,19 @@ function renderDetective(options = {}) {
|
|
|
14
14
|
async transform(code, id) {
|
|
15
15
|
if (!filter(id)) return null;
|
|
16
16
|
if (!code.includes("<")) return null;
|
|
17
|
-
if (!
|
|
17
|
+
if (!transformAsync) {
|
|
18
18
|
try {
|
|
19
|
-
|
|
19
|
+
const mod = await import('@babel/core');
|
|
20
|
+
transformAsync = mod.transformAsync ?? mod.default?.transformAsync;
|
|
20
21
|
} catch {
|
|
22
|
+
}
|
|
23
|
+
if (!transformAsync) {
|
|
21
24
|
throw new Error(
|
|
22
25
|
"[react-render-detective] @babel/core is required for automatic instrumentation.\nInstall it (`npm i -D @babel/core`) or remove the renderDetective() plugin."
|
|
23
26
|
);
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
|
-
const result = await
|
|
29
|
+
const result = await transformAsync(code, {
|
|
27
30
|
filename: id,
|
|
28
31
|
babelrc: false,
|
|
29
32
|
configFile: false,
|
package/dist/vite.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vite/index.ts"],"names":[],"mappings":";;;AAyBA,IAAM,iBAAiB,CAAC,EAAA,KACtB,WAAA,CAAY,IAAA,CAAK,GAAG,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,KAAK,EAAE,CAAA,IAAK,CAAC,EAAA,CAAG,SAAS,cAAc,CAAA;AAElE,SAAS,eAAA,CAAgB,OAAA,GAA6B,EAAC,EAAsB;AAClF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,cAAA;AACjC,EAAA,IAAI,
|
|
1
|
+
{"version":3,"sources":["../src/vite/index.ts"],"names":[],"mappings":";;;AAyBA,IAAM,iBAAiB,CAAC,EAAA,KACtB,WAAA,CAAY,IAAA,CAAK,GAAG,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,KAAK,EAAE,CAAA,IAAK,CAAC,EAAA,CAAG,SAAS,cAAc,CAAA;AAElE,SAAS,eAAA,CAAgB,OAAA,GAA6B,EAAC,EAAsB;AAClF,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAA,IAAU,cAAA;AACjC,EAAA,IAAI,cAAA;AAEJ,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,wBAAA;AAAA;AAAA,IAEN,OAAA,EAAS,KAAA;AAAA;AAAA,IAET,KAAA,EAAO,OAAA;AAAA,IAEP,MAAM,SAAA,CAAU,IAAA,EAAc,EAAA,EAAY;AACxC,MAAA,IAAI,CAAC,MAAA,CAAO,EAAE,CAAA,EAAG,OAAO,IAAA;AAExB,MAAA,IAAI,CAAC,IAAA,CAAK,QAAA,CAAS,GAAG,GAAG,OAAO,IAAA;AAEhC,MAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,QAAA,IAAI;AAGF,UAAA,MAAM,GAAA,GAAO,MAAM,OAAO,aAAa,CAAA;AAIvC,UAAA,cAAA,GAAiB,GAAA,CAAI,cAAA,IAAkB,GAAA,CAAI,OAAA,EAAS,cAAA;AAAA,QACtD,CAAA,CAAA,MAAQ;AAAA,QAER;AACA,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,MAAM,IAAI,KAAA;AAAA,YACR;AAAA,WAEF;AAAA,QACF;AAAA,MACF;AAEA,MAAA,MAAM,MAAA,GAAS,MAAM,cAAA,CAAe,IAAA,EAAM;AAAA,QACxC,QAAA,EAAU,EAAA;AAAA,QACV,OAAA,EAAS,KAAA;AAAA,QACT,UAAA,EAAY,KAAA;AAAA,QACZ,UAAA,EAAY,IAAA;AAAA,QACZ,YAAY,EAAE,OAAA,EAAS,CAAC,KAAA,EAAO,YAAY,CAAA,EAAE;AAAA,QAC7C,OAAA,EAAS,CAAC,CAAC,0BAAA,EAAa,EAAE,SAAS,IAAA,EAAM,GAAG,OAAA,EAAS,CAAC;AAAA,OACvD,CAAA;AAED,MAAA,IAAI,CAAC,MAAA,EAAQ,IAAA,EAAM,OAAO,IAAA;AAC1B,MAAA,OAAO,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,EAAM,GAAA,EAAK,OAAO,GAAA,EAAI;AAAA,IAC9C;AAAA,GACF;AACF;AAEA,IAAO,YAAA,GAAQ","file":"vite.js","sourcesContent":["/**\n * Vite plugin: instrument every component in dev, with source locations.\n *\n * A thin wrapper around the Babel plugin — the transform lives in one place so\n * Vite, webpack, Next and Remix all behave identically.\n *\n * `@babel/core` is an optional peer dependency. Vite's React plugin already\n * brings it, so most projects need no extra install; the core runtime keeps its\n * zero-dependency guarantee because none of this ships to the browser.\n */\nimport babelPlugin from \"../babel/index.js\";\nimport type { RenderDetectivePluginOptions } from \"../babel/index.js\";\n\nexport interface VitePluginOptions extends RenderDetectivePluginOptions {\n /** Files to transform. Defaults to `.jsx` / `.tsx` outside node_modules. */\n filter?: (id: string) => boolean;\n}\n\ninterface MinimalVitePlugin {\n name: string;\n enforce?: \"pre\" | \"post\";\n apply?: \"serve\" | \"build\";\n transform?: (code: string, id: string) => Promise<{ code: string; map: unknown } | null>;\n}\n\nconst DEFAULT_FILTER = (id: string): boolean =>\n /\\.[jt]sx$/.test(id.split(\"?\")[0] ?? id) && !id.includes(\"node_modules\");\n\nexport function renderDetective(options: VitePluginOptions = {}): MinimalVitePlugin {\n const filter = options.filter ?? DEFAULT_FILTER;\n let transformAsync: typeof import(\"@babel/core\").transformAsync | undefined;\n\n return {\n name: \"react-render-detective\",\n // After JSX is still present but before it is compiled away.\n enforce: \"pre\",\n // Dev only. There is no way to ask for this in a production build, by design.\n apply: \"serve\",\n\n async transform(code: string, id: string) {\n if (!filter(id)) return null;\n // Cheap bail-out: no JSX, nothing to instrument.\n if (!code.includes(\"<\")) return null;\n\n if (!transformAsync) {\n try {\n // Babel 8 is ESM with named exports; Babel 7 is CJS and may arrive\n // under `default`. Support both rather than assuming the user's major.\n const mod = (await import(\"@babel/core\")) as unknown as {\n transformAsync?: typeof import(\"@babel/core\").transformAsync;\n default?: { transformAsync?: typeof import(\"@babel/core\").transformAsync };\n };\n transformAsync = mod.transformAsync ?? mod.default?.transformAsync;\n } catch {\n /* fall through to the error below */\n }\n if (!transformAsync) {\n throw new Error(\n \"[react-render-detective] @babel/core is required for automatic instrumentation.\\n\" +\n \"Install it (`npm i -D @babel/core`) or remove the renderDetective() plugin.\",\n );\n }\n }\n\n const result = await transformAsync(code, {\n filename: id,\n babelrc: false,\n configFile: false,\n sourceMaps: true,\n parserOpts: { plugins: [\"jsx\", \"typescript\"] },\n plugins: [[babelPlugin, { enabled: true, ...options }]],\n });\n\n if (!result?.code) return null;\n return { code: result.code, map: result.map };\n },\n };\n}\n\nexport default renderDetective;\nexport type { RenderDetectivePluginOptions };\n"]}
|