rerender-lens 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,92 @@
 
 ## Unreleased
 
+- **Jest.** `rerender-lens/jest` and `rerender-lens/jest/setup`: the same deal as the Vitest
+  integration — one `setupFilesAfterEnv` line collects every avoidable re-render, and the reporter
+  (`reporters: [['rerender-lens/jest', { budget }]]`) prints the run's ranked fixes and root causes,
+  writes a panel-compatible export and fails the run on a budget violation. The runner-agnostic half
+  (the JSONL hand-off between workers and the reporter, the per-file setup, the finish logic) moved
+  to `src/runner-report.ts`, so Vitest and Jest share one implementation. A real Jest run in
+  `test/jest/` (jsdom, babel-jest, the package resolved by name) is its own CI job: it asserts the
+  reporter exits non-zero with a budget of zero and exits 0 with a budget that fits.
+
+- **React 17 in CI, and the peer range is now honest.** `npm run test:react17` runs the unit suite
+  against React 17 alongside `test:react18`, so `react >= 16.8` is a tested claim rather than an
+  assumption. The harness became version-agnostic (`act` from `react` or `react-dom/test-utils`, a
+  shim for the root API React 17 does not have). What React 17 cannot give you is now documented in
+  the README's compatibility table and said once at runtime: React only records the value a
+  component read from a context from 18 on, so on 17 a context change is reported as a plain parent
+  re-render; updaters and effect-loop detection need React 18's updater tracking.
+- **Report a problem** in the panel's Settings drawer: opens a GitHub issue prefilled with the
+  extension and library versions, React version, options, overhead, the truncation count and the
+  buffer totals, and nothing from the page. `extension/store/QA.md` gains the scale, relay and
+  help checks.
+- **Verdicts on modern React.** A fixture matrix (`test/modern.test.ts`, and `/modern.html` in the
+  example) pins the verdict for React Compiler output, `use(promise)`, `startTransition`, Suspense
+  fallback → content, `useSyncExternalStore` selectors, render props, `forwardRef` + `memo` refs,
+  classes with `shouldComponentUpdate`, `useDeferredValue` and `useId`; the README gains the table
+  "What counts as avoidable". Fixes that came out of it: components compiled by React Compiler carry
+  `compiled: true` (detected from the `useMemoCache` slots on the fiber) and a parent-triggered render
+  with identical props is no longer avoidable (the output is memoized; nothing to fix); content
+  re-rendered because a Suspense boundary above it resolved is explained instead of flagged; a new
+  `ref` object per render is reported as `deep-equal` on `ref` with `useRef` advice instead of a
+  spurious `ref.current` change; the deferred second render of `useDeferredValue` is a `hooks` render
+  (dev builds) rather than an avoidable parent render, and never counts as an effect → setState loop;
+  class components get PureComponent / `shouldComponentUpdate` advice instead of `React.memo`. The
+  panel shows the compiled flag.
+
+## 0.5.0
+
+Highlights: root causes in the CLI and test reporters, React 18 in CI, Next.js verified end to
+end, one analysis implementation shared by the panel and the library, and Web Store assets
+generated by script. Details, newest first:
+
+- **README and docs site.** The README is half its length: a "pick a way in" table, one section
+  per entry point, and the reference tables trimmed to what you read. The docs site gains a hero
+  with the recording, a sticky table of contents and a cleaner layout; `docs/PLAN.md` holds the
+  plan for what comes next.
+- **Store assets.** `npm run store:media` renders the five 1280x800 screenshots and the two promo
+  tiles the Chrome Web Store asks for into `extension/store/media/`; the e2e suite also checks the
+  panel stays responsive with 20,000 buffered reports (`panel.html?demo&flood=20000`).
+- Root causes outside the panel. The commit analysis the DevTools panel had (`analyzeCommit`,
+  `rootCauseOf`, `contextAttribution`, `cascadeTree`, `rootCauseSummary`) moved into the library
+  (`src/causes.ts`, exported from `rerender-lens`) with `groupByCommit`, `rankRootCauses` and
+  `formatRootCauses` on top; the panel imports it. `formatFixes` (the CLI `fixes` command, the
+  Vitest reporter, `collector.assertNoAvoidable`, budget failures) now ends with a "Root causes"
+  section when the reports carry `commitId` (`<Page> (state) started 3 commits, 12 avoidable
+  re-renders`), and `rerender-lens causes export.json` prints that table alone.
+- The DevTools panel and the library now share one implementation of fixes (`fixesFor`,
+  `rankFixes`), session summaries (`summarizeReports`/`summarizeSession`,
+  `compareSummaries`/`compareSessions`) and diff paths (`firstDifferentPath`, `diffLeaves`), typed
+  over a structural `ReportLike`. Library fixes gain the `snippet` and the context/provider
+  attribution the panel had; ranked fixes also carry the first 50 `reports` they apply to.
+- **Next.js, verified.** `examples/next` starts the library from `instrumentation-client.ts` with
+  `rerender-lens/setup` and reaches the relay panel; `npm run e2e:next` drives it in Chromium
+  (CI too). Two bugs it found: `rerender-lens/setup` read `process.env[key]` dynamically, which no
+  bundler inlines, so `NEXT_PUBLIC_RERENDER_LENS_RELAY` was never seen and the entry also ran in
+  production builds; and a panel that opened after the app had connected to the relay never
+  attached (the relay now greets each panel with the current app count, and the panel sends its
+  first command only after that greeting, so no reply is lost to the connection race).
+- **React 18 in CI.** `npm run test:react18` runs the whole unit suite against React 18 (CI job
+  `react18`). It found one bug: with React 18 the custom hook name replay listed React's own
+  `useState` wrapper as if it were a custom hook (`useState › useCounter › useCart`); frames named
+  like a React primitive are now skipped.
+- The panel re-reads `info()` every 3 s while connected, so the overhead readout, the enabled
+  flag and the "reports skipped" banner stay current instead of reflecting the moment it attached.
+- `npm run test:built` (in `check` and CI) loads the three built vendor scripts in order and drives
+  a React re-render through them; before, that test always skipped in CI because tests ran
+  before the build.
+
+## 0.4.0
+
+Highlights: the panel for any app with `npx rerender-lens panel`, Vitest and Playwright
+integrations, bounded work per commit (large apps no longer freeze), a lighter panel, and the
+injectable library split into three readable scripts. Details, newest first:
+
+- **Scale test.** `examples/vite-react/scale.html?rows=N` renders N memoized cells sharing a
+  2,000-item context and a 4 MB typed-array prop; its readout shows the library's overhead and
+  the reports skipped by the cap. The e2e suite runs it with 3,000 rows. The panel shows the
+  skipped count in the status tooltip and as a banner.
 - **`npx rerender-lens panel`.** A dependency-free relay (`rerender-lens/relay`) that serves the
   panel and forwards messages between apps and panels over server-sent events and POST, so the
   panel works for any app on any origin without the extension or Vite: Next.js, Webpack, a remote
@@ -18,6 +104,38 @@
   `clearReports`, `expectWithinBudget`.
 - A second copy of the library (another bundle on the same page) no longer wraps the hook
   again, which doubled every report.
+- **Bounded work per commit** (large apps froze the page). Deep equality is memoized across the
+  components of one commit and gives up on values too large to walk (reported as `different`);
+  large Sets compare by identity. Serialization caps every array/object/Map/Set at 100 entries
+  (`…+N more`), every report at 20k nodes, treats typed arrays, `ArrayBuffer`, DOM nodes and
+  promises as leaves, and defaults to depth 4. A commit reports at most 200 tracked components
+  and stops after 25 ms; the rest is counted in `info().truncated` with a one-time warning.
+  Source locations are cached per element, the instance registry prunes on growth only, and
+  highlight/flash measure all nodes before drawing (at most 100 boxes).
+- Reports are posted on `window` only once something says it listens (the extension's content
+  script, or `replay()`), so a page that runs the library without an open panel pays no
+  structured clone per report and wakes none of its own `message` listeners. `hello` and
+  `clear` still post; the BroadcastChannel and relay paths are unchanged.
+- The injected library (extension) now runs with `includeState: false`; Settings can turn the
+  hook/context/state snapshots on per origin. Effect-loop detection no longer flags commits
+  caused by discrete input (typing, dragging). The toolbar badge repaints at most every 100 ms.
+- **The panel keeps up.** Summary totals are incremental; the Offenders/Commits/Fixes lists and
+  the "best fix" stat update at most every 250 / 500 ms once 200 reports are buffered (the
+  tree and the stream stay live); commit analysis is memoized per commit and root causes are
+  found by index; each commit keeps at most 500 reports; buffer eviction is one splice per
+  frame. The content script sends one batched port message per task instead of one per
+  report. The DevTools panel retries the connect handshake with backoff (up to ~90 s) when a
+  page loads the library late, and the polling fallback clears the panel once per reset
+  instead of on every poll when the page overruns its buffer.
+- The injectable library ships as three vendor scripts (`rerender-lens.core.js`,
+  `rerender-lens.engine.js`, `rerender-lens.js`) built by `scripts/build-vendor.mjs`; the
+  Playwright helper still gets one concatenated bundle.
+- Removed: per-component notes and mute, share links (`panel.html?report=…`), the Offenders
+  column chooser (*Places*, *Last seen*), and the windowed Offenders/Fixes variant above 200 rows.
+  Offenders and Fixes always render plain rows; the tree and the stream stay virtualized. The
+  panel also drops its protocol-1 fallbacks: protocol 2 is the only one it speaks.
+- Fix: after a navigation the panel's polling fallback stops until the new page answers `info`,
+  instead of evaluating into pages without the library every 500 ms.
 
 ## 0.3.0