rerender-lens 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,6 +1,55 @@
 # Changelog
 
-## Unreleased
+## 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

package/README.md

@@ -30,9 +30,11 @@ Adds a **Re-renders** tab: the component tree with avoidable counts, why each co
 the props and hooks that changed, and the fix as a snippet. Other views rank components by wasted
 renders (Offenders), group renders by React commit with their root cause (Commits), rank every fix
 by how many re-renders it removes (Fixes), and compare a recording before and after a fix
-(Sessions). Also: an Elements-panel sidebar, a badge with the tab's avoidable count, hover to
-highlight in the page, "open source" links, and the same panel next to the page (side panel) or
-in its own window.
+(Sessions). A timeline strip above the tree draws one bar per commit sized by its renders and
+coloured by its avoidable share: click a bar for that commit, drag across bars to brush a time
+window that every view narrows to. Also: an Elements-panel sidebar, a badge with the tab's
+avoidable count, hover to highlight in the page, "open source" links, and the same panel next to
+the page (side panel) or in its own window.
 
 **Install** (until the Web Store listing is live): download `rerender-lens-chrome-<version>.zip`
 from the [latest release](https://github.com/NexaLeaf/rerender-lens/releases), unzip it, open
@@ -53,6 +55,16 @@ Injection tracks every `memo` / `PureComponent` and leaves the hook/context/stat
 (*Include state* in Settings turns them on; they are the costliest part on large apps). Settings
 are saved per origin. Details, shortcuts and packaging: [`extension/README.md`](extension/README.md).
 
+### Nothing shows up?
+
+Most often the default is doing exactly what it says: injection tracks only `React.memo` components
+and `PureComponent` classes, and an app of plain function components has none. The panel's empty
+state says so in words — *"tracking every React.memo and PureComponent; 42 components rendered, 3 of
+them tracked"* — with two buttons: **Track every component** and **Track components matching…**.
+For one component, select its element in **Elements**: the *rerender-lens* sidebar gives the verdict,
+the reason, and a *Track this component* button. Nothing avoidable in a tracked component is the
+other, good, case: it simply has not re-rendered.
+
 ## Vite
 
 ```ts
@@ -80,10 +92,17 @@ production builds. To see the panel without the extension:
 npx rerender-lens panel           # http://127.0.0.1:4141/  (--port, --host 0.0.0.0 for another machine)
 ```
 
+On loopback it needs no secret. Given any other `--host` it generates a token, prints it in the
+URL, and refuses connections without it, because reports carry your app's prop, state and context
+values. Pass the whole printed URL (token and all) to the app and the panel; `--token` sets your
+own and `--no-token` opts out.
+
 and point the app at it with `RERENDER_LENS_RELAY=http://127.0.0.1:4141`
 (`NEXT_PUBLIC_RERENDER_LENS_RELAY` for Next.js), `createDevtoolsNotifier({ relay })`, or
 `window.__RERENDER_LENS_RELAY__` set before the app loads. Settings, highlight and replay travel
-back to the app; several apps or panels can share one relay.
+back to the app, and the panel re-attaches when an app reloads. Point **several apps** at one relay
+(a host app and a microfrontend, two pages, two machines) and the panel shows a picker listing each
+by address; it watches one at a time and commands go only to that one.
 
 ## Manual setup
 

package/dist/{budget-CRswn-nC.d.cts → budget-CA1MS7lB.d.cts}

@@ -1,4 +1,4 @@
-import { a as ReportLike, R as RenderReport } from './types-DW5-N2XH.cjs';
+import { b as ReportLike, R as RenderReport } from './types-DwNN5cWe.cjs';
 
 /**
  * Concrete fixes derived from reports, ranked by how many avoidable re-renders each one removes.

package/dist/{budget-BnJlYwrV.d.ts → budget-ok1VDJ4t.d.ts}

@@ -1,4 +1,4 @@
-import { a as ReportLike, R as RenderReport } from './types-DW5-N2XH.js';
+import { b as ReportLike, R as RenderReport } from './types-DwNN5cWe.js';
 
 /**
  * Concrete fixes derived from reports, ranked by how many avoidable re-renders each one removes.

package/dist/cli.cjs

@@ -5,6 +5,7 @@ var fs = require('fs');
 var http = require('http');
 var path = require('path');
 var url = require('url');
+var crypto = require('crypto');
 
 // node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.tagName.toUpperCase() === "SCRIPT" ? document.currentScript.src : new URL("main.js", document.baseURI).href;
@@ -408,6 +409,8 @@ function checkBudget(reports, budget) {
 function toBudget(reports) {
   return { "*": 0, ...avoidableCounts(reports) };
 }
+var MARKER = "__rerenderLens";
+var PROTOCOL = 2;
 var MIME = { ".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".css": "text/css; charset=utf-8" };
 function findPanelDir() {
   const here = path.dirname(url.fileURLToPath(importMetaUrl));
@@ -442,26 +445,55 @@ function createRelayServer(options = {}) {
   const host = options.host ?? "127.0.0.1";
   const panelDir = options.panelDir === void 0 ? findPanelDir() : options.panelDir;
   const keepAliveMs = options.keepAliveMs ?? 15e3;
-  const apps = /* @__PURE__ */ new Set();
+  const token = options.token || null;
+  const apps = /* @__PURE__ */ new Map();
   const panels = /* @__PURE__ */ new Set();
   let url = "";
-  const send = (targets, message) => {
-    const line = `data: ${JSON.stringify(message)}
+  let nextAppId = 1;
+  const connectUrl = () => token ? `${url}?token=${encodeURIComponent(token)}` : url;
+  const line = (message) => `data: ${JSON.stringify(message)}
 
 `;
-    for (const res of targets) {
+  const sendTo = (res, message) => {
+    try {
+      res.write(line(message));
+    } catch {
+      apps.delete(res);
+      panels.delete(res);
+    }
+  };
+  const send = (targets, message) => {
+    const text = line(message);
+    for (const res of [...targets]) {
       try {
-        res.write(line);
+        res.write(text);
       } catch {
-        targets.delete(res);
+        apps.delete(res);
+        panels.delete(res);
       }
     }
   };
-  const route = (message) => {
+  const appList = () => [...apps.values()];
+  const roster = () => ({ [MARKER]: true, version: PROTOCOL, type: "relay", payload: { apps: apps.size, list: appList() } });
+  const streamOf = (id) => {
+    for (const [res, app] of apps) if (app.id === id) return res;
+    return null;
+  };
+  const route = (message, from) => {
     if (!message || typeof message !== "object") return;
     const m = message;
-    if (m.__rerenderLensCmd === true) send(apps, m);
-    else if (m.__rerenderLens === true || m.__rerenderLensReply === true) send(panels, m);
+    if (m.__rerenderLensCmd === true) {
+      const target = typeof m.app === "string" ? streamOf(m.app) : null;
+      if (target) sendTo(target, m);
+      else send(apps.keys(), m);
+    } else if (m.__rerenderLens === true || m.__rerenderLensReply === true) {
+      send(panels, from ? { ...m, app: from.id } : m);
+    }
+  };
+  const authorized = (req, u) => {
+    if (!token) return true;
+    const given = u.searchParams.get("token") || (typeof req.headers["x-rerender-lens-token"] === "string" ? req.headers["x-rerender-lens-token"] : "");
+    return given === token;
   };
   const server = http.createServer(async (req, res) => {
     cors(res);
@@ -473,18 +505,26 @@ function createRelayServer(options = {}) {
     }
     if (u.pathname === "/" && req.method === "GET") {
       res.statusCode = 302;
-      res.setHeader("Location", `/panel.html?relay=${encodeURIComponent(url)}`);
+      res.setHeader("Location", `/panel.html?relay=${encodeURIComponent(connectUrl())}`);
       res.end();
       return;
     }
+    if (/^\/(events|message|status)$/.test(u.pathname) && !authorized(req, u)) {
+      res.statusCode = 401;
+      res.setHeader("Content-Type", "text/plain");
+      res.end("rerender-lens relay: this relay needs the token from the URL it printed (?token=...)");
+      return;
+    }
     if (u.pathname === "/events" && req.method === "GET") {
-      const role = u.searchParams.get("role") === "app" ? apps : panels;
+      const isApp = u.searchParams.get("role") === "app";
       res.statusCode = 200;
       res.setHeader("Content-Type", "text/event-stream");
       res.setHeader("Cache-Control", "no-store");
       res.setHeader("Connection", "keep-alive");
       res.write(": connected\n\n");
-      role.add(res);
+      const app = isApp ? { id: `a${nextAppId++}`, label: (u.searchParams.get("label") || req.headers.origin || "").slice(0, 120) || `app ${nextAppId - 1}` } : null;
+      if (app) apps.set(res, app);
+      else panels.add(res);
       const ping = setInterval(() => {
         try {
           res.write(": ping\n\n");
@@ -493,14 +533,15 @@ function createRelayServer(options = {}) {
       }, keepAliveMs);
       req.on("close", () => {
         clearInterval(ping);
-        role.delete(res);
+        apps.delete(res);
+        panels.delete(res);
       });
-      const count = () => ({ __rerenderLens: true, version: 2, type: "relay", payload: { apps: apps.size } });
-      if (role === apps) {
-        send(panels, count());
-        req.on("close", () => send(panels, count()));
+      if (app) {
+        sendTo(res, { __rerenderLensRelay: true, version: PROTOCOL, app: app.id });
+        send(panels, roster());
+        req.on("close", () => send(panels, roster()));
       } else {
-        send(/* @__PURE__ */ new Set([res]), count());
+        sendTo(res, roster());
       }
       return;
     }
@@ -512,7 +553,9 @@ function createRelayServer(options = {}) {
     if (u.pathname === "/message" && req.method === "POST") {
       try {
         const parsed = JSON.parse(await readBody(req) || "null");
-        for (const m of Array.isArray(parsed) ? parsed : [parsed]) route(m);
+        const sender = u.searchParams.get("app");
+        const from = sender ? appList().find((a) => a.id === sender) ?? void 0 : void 0;
+        for (const m of Array.isArray(parsed) ? parsed : [parsed]) route(m, from);
         res.statusCode = 204;
         res.end();
       } catch (e) {
@@ -525,7 +568,7 @@ function createRelayServer(options = {}) {
     if (u.pathname === "/status" && req.method === "GET") {
       res.statusCode = 200;
       res.setHeader("Content-Type", "application/json");
-      res.end(JSON.stringify({ ok: true, apps: apps.size, panels: panels.size }));
+      res.end(JSON.stringify({ ok: true, apps: apps.size, panels: panels.size, list: appList() }));
       return;
     }
     const file = u.pathname.replace(/^\//, "");
@@ -555,10 +598,12 @@ function createRelayServer(options = {}) {
       resolve({
         server,
         url,
+        connectUrl: connectUrl(),
         port,
         counts: () => ({ apps: apps.size, panels: panels.size }),
+        appList,
         close: () => new Promise((done) => {
-          for (const res of [...apps, ...panels]) res.end();
+          for (const res of [...apps.keys(), ...panels]) res.end();
           apps.clear();
           panels.clear();
           server.close(() => done());
@@ -567,8 +612,6 @@ function createRelayServer(options = {}) {
     });
   });
 }
-
-// src/cli.ts
 var read = (file) => JSON.parse(fs.readFileSync(file, "utf8"));
 function summaryOf(file) {
   const parsed = parseExport(read(file));
@@ -576,14 +619,20 @@ function summaryOf(file) {
   if (parsed.sessions.length && !parsed.reports.length) return parsed.sessions[parsed.sessions.length - 1];
   return summarizeReports(parsed.reports, { name: file.replace(/^.*[\\/]/, "").replace(/\.json$/, "") });
 }
+var isLoopback = (host) => host === "127.0.0.1" || host === "localhost" || host === "::1";
 async function panelCommand(args) {
   const flag = (name) => {
     const i = args.indexOf(name);
     return i >= 0 ? args[i + 1] ?? "" : null;
   };
-  const relay = await createRelayServer({ port: Number(flag("--port") || 4141), host: flag("--host") || "127.0.0.1" });
-  console.log(`rerender-lens panel: ${relay.url}/`);
-  console.log(`in the app: createDevtoolsNotifier({ relay: '${relay.url}' })  or  window.__RERENDER_LENS_RELAY__ = '${relay.url}'`);
+  const host = flag("--host") || "127.0.0.1";
+  const given = flag("--token");
+  const token = args.includes("--no-token") ? null : given || (isLoopback(host) ? null : randomToken());
+  const relay = await createRelayServer({ port: Number(flag("--port") || 4141), host, token: token ?? void 0 });
+  console.log(`rerender-lens panel: ${relay.connectUrl}/`);
+  console.log(`in the app: createDevtoolsNotifier({ relay: '${relay.connectUrl}' })  or  window.__RERENDER_LENS_RELAY__ = '${relay.connectUrl}'`);
+  if (token) console.log("The token in that URL is required: reports carry your app's prop, state and context values.");
+  else if (!isLoopback(host)) console.log(`WARNING: ${host} is reachable by other machines and --no-token was given: anyone who can reach this port can read every report.`);
   console.log("Ctrl+C to stop.");
   return new Promise((resolve) => {
     const stop = () => void relay.close().then(() => resolve(0));
@@ -592,6 +641,9 @@ async function panelCommand(args) {
     relay.server.once("close", () => resolve(0));
   });
 }
+function randomToken() {
+  return crypto.randomBytes(16).toString("base64url");
+}
 function main(argv) {
   const [cmd, ...args] = argv;
   if (cmd === "panel") return panelCommand(args).catch((e) => (console.error(e.message), 1));