rerender-lens 0.4.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # Changelog
 
+## 0.7.0
+
+Highlights: verdicts pinned for modern React (Compiler output, `use()`, transitions, Suspense),
+a Jest integration, React 17 and 18 in CI, several apps on one relay, a commit timeline in the
+panel, a docs site that answers "how do I start", a relay that authenticates off loopback, and a
+panel that tells you why a component is not tracked. Details, newest first:
+
+- **The relay authenticates when it is not on loopback.** `npx rerender-lens panel --host 0.0.0.0`
+  now generates a token, prints it inside the URL and refuses `/events`, `/message` and `/status`
+  without it, because reports carry your app's prop, state and context values. Pass the printed URL
+  to the app and the panel and both pick the token up; `--token` sets your own, `--no-token` opts
+  out with a warning. Loopback is unchanged and needs no secret.
+- A nightly job records what the library costs per commit on a large tree (`npm run e2e:perf`,
+  3,000 and 10,000 memoized rows) and fails when a commit blows its budget. On a laptop the worst
+  commit is about 32 ms at both sizes: the cost is flat in tree size because the per-commit cap
+  stops the walk. The extension README now documents that the package ships no remote code and no
+  `eval` beyond `chrome.devtools.inspectedWindow.eval`, under MV3's default content security
+  policy.
+- **"Why is this component not tracked?"** New `explainTracking(type, options)` returns the same
+  decision as `shouldTrack` plus the rule that made it and what to change, and the bridge carries
+  it: `info().tracking` (mode, include/exclude, and how many distinct components rendered since
+  `init` versus how many were tracked), `inspect(node).tracking`, and a new `explain(node | instanceId)`
+  command that also works over the BroadcastChannel and the relay. The panel's empty state now says
+  "tracking every React.memo and PureComponent; 42 components rendered, 3 of them tracked" and
+  offers *Track every component* and *Track components matching…*; the Elements sidebar shows the
+  verdict, the reason and a *Track this component* button for the selected element. Additive:
+  the protocol stays at 2.
+- **The docs site is a product page.** A landing page that answers "how do I start with my
+  bundler" (Vite, Next.js, Webpack, any app through the relay, the extension, tests) with the
+  snippets lifted straight out of the README so they cannot drift, the README as the guide, the
+  extension guide, a generated API reference for every entry point, and a hosted copy of the panel
+  running its demo data so you can click around before installing anything. A published release
+  recaptures the screenshots before building, so they never show an old panel.
+- **Several apps on one relay.** `npx rerender-lens panel` now gives each connected app an id and a
+  label (its address), tells the app its id so what it posts is stamped, and sends panels the
+  roster. The panel shows a picker when more than one app is connected, watches one at a time and
+  addresses its commands to that app, so a host app and a microfrontend (or two pages, or two
+  machines) no longer interleave into one stream. A panel or a library that knows nothing about
+  ids behaves exactly as before, and the protocol stays at 2.
+- The side panel and the DevTools panel are now covered by a test that changes a setting in one and
+  reads it back in the other, in both directions.
+- **Panel: a commit timeline strip above the tree.** One bar per React commit, oldest left, height
+  on a sqrt scale of the commit's render count and filled from the bottom with its avoidable share.
+  Click a bar to open that commit in the Commits view; drag across bars to brush a time window, and
+  the tree, Offenders, Fixes, Commits and the live stream all narrow to it (a chip in the strip
+  header says how wide the window is and how many reports it holds; `Esc` or the chip clears it).
+  Bars are focusable, labelled ("commit 12, 4 renders, 3 avoidable, 8 seconds ago") and navigable
+  with the arrow keys. The strip collapses from its chevron (persisted per origin), draws at most
+  the 200 most recent commits, and repaints on the same `LEFT_RENDER_INTERVAL` throttle as the
+  other heavy views once the buffer passes 200 reports.
+
+- **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