rerender-lens 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # Changelog
 
+## 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