rerender-lens 0.4.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rerender-lens",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "Find avoidable React re-renders and what caused them. Reads the fiber tree like React DevTools, so nothing is patched: works with Fast Refresh, memo, forwardRef and classes. Structured reports, test assertions, and a DevTools bridge.",
   "keywords": [
     "react",
@@ -19,7 +19,9 @@
     "./dist/setup.js",
     "./dist/setup.cjs",
     "./dist/vitest-setup.js",
-    "./dist/vitest-setup.cjs"
+    "./dist/vitest-setup.cjs",
+    "./dist/jest-setup.js",
+    "./dist/jest-setup.cjs"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -85,6 +87,26 @@
         "default": "./dist/vitest-setup.cjs"
       }
     },
+    "./jest": {
+      "import": {
+        "types": "./dist/jest.d.ts",
+        "default": "./dist/jest.js"
+      },
+      "require": {
+        "types": "./dist/jest.d.cts",
+        "default": "./dist/jest.cjs"
+      }
+    },
+    "./jest/setup": {
+      "import": {
+        "types": "./dist/jest-setup.d.ts",
+        "default": "./dist/jest-setup.js"
+      },
+      "require": {
+        "types": "./dist/jest-setup.d.cts",
+        "default": "./dist/jest-setup.cjs"
+      }
+    },
     "./setup": {
       "import": {
         "types": "./dist/setup.d.ts",
@@ -119,9 +141,16 @@
     "docs:media": "node scripts/docs-media.mjs",
     "lint:ext": "npx --yes web-ext lint --source-dir dist-extension/firefox --warnings-as-errors=false",
     "version": "node scripts/sync-version.mjs && git add extension/manifest.json",
-    "check": "npm run typecheck && npm test && npm run build && npm run lint:pkg && npm run build:ext",
+    "check": "npm run typecheck && npm test && npm run build && npm run test:built && npm run lint:pkg && npm run build:ext",
     "prepublishOnly": "npm run check",
-    "dev:example": "npm run build && npm --prefix examples/vite-react run dev"
+    "dev:example": "npm run build && npm --prefix examples/vite-react run dev",
+    "test:built": "vitest run test/vendor.test.ts",
+    "e2e:next": "playwright test -c e2e/next.config.ts",
+    "test:jest": "node scripts/jest-check.mjs",
+    "test:react18": "npm install --prefix .react18 --no-save --no-package-lock --no-audit --no-fund react@18 react-dom@18 && vitest run --config test/react-compat.config.ts",
+    "store:media": "node scripts/store-media.mjs",
+    "test:react17": "npm install --prefix .react17 --no-save --no-package-lock --no-audit --no-fund react@17 react-dom@17 && REACT_COMPAT_DIR=.react17/node_modules vitest run --config test/react-compat.config.ts",
+    "e2e:perf": "playwright test -c e2e/perf.config.ts"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -129,11 +158,19 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
+    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-typescript": "^8.0.1",
+    "@jest/globals": "^30.5.1",
     "@playwright/test": "^1.63.0",
     "@types/chrome": "^0.2.9",
     "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
+    "babel-jest": "^30.5.1",
+    "jest": "^30.5.1",
+    "jest-environment-jsdom": "^30.5.1",
     "jsdom": "^29.1.1",
     "marked": "^9.1.6",
     "publint": "^0.3.24",

package/panel/panel.css

@@ -105,6 +105,11 @@ button.ib.active .glyph { color: var(--accent); }
 .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
 .status.connected .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
 .status.partial .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
+.app-picker {
+  height: 22px; max-width: 200px; padding: 0 4px; font-size: 11px; color: var(--text-dim);
+  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px;
+}
+.app-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .tab-chip {
   max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   padding: 2px 8px; border-radius: 10px; background: var(--bg-inset); color: var(--text-dim); font-size: 11px;
@@ -123,6 +128,43 @@ button.ib.active .glyph { color: var(--accent); }
 .summary button.stat { height: 22px; padding: 0 6px; margin: 0 -6px; }
 .summary button.stat:hover { background: var(--hover); }
 
+/* ---------- commit timeline strip ---------- */
+.timeline { flex: none; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
+.timeline-header {
+  display: flex; align-items: center; gap: 6px; padding: 1px 12px; height: 17px;
+  color: var(--text-dim); cursor: pointer; user-select: none; font-size: 10px;
+}
+.timeline-header:hover { color: var(--text); }
+.timeline-header .chevron { width: 9px; flex: none; }
+.timeline-header .count { margin-left: auto; font-variant-numeric: tabular-nums; }
+.timeline-header .chip {
+  height: 15px; padding: 0 7px; font-size: 10px; border-radius: 8px;
+  border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent);
+}
+.timeline-header .chip:hover { background: var(--accent); color: var(--bg); }
+.timeline-body { padding: 0 12px 2px; }
+.timeline.collapsed .timeline-body { display: none; }
+.timeline .bars {
+  display: flex; align-items: flex-end; gap: 1px; height: 26px; padding: 0 2px;
+  background: var(--bg-inset); border-radius: 3px; overflow: hidden; cursor: crosshair;
+}
+.timeline .bar {
+  flex: 1 1 0; min-width: 2px; height: 100%; padding: 0; margin: 0; display: block;
+  position: relative; align-self: flex-end; border: 0; border-radius: 1px 1px 0 0;
+  background: var(--ok); opacity: 0.65; cursor: pointer;
+}
+.timeline .bar:hover { background: var(--ok); opacity: 1; }
+.timeline .bar .avoid { position: absolute; left: 0; right: 0; bottom: 0; background: var(--danger); }
+.timeline .bar.in-window, .timeline .bar.brushing { opacity: 1; }
+.timeline .bar.selected { opacity: 1; outline: 1px solid var(--accent); outline-offset: -1px; }
+.timeline .bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.timeline-axis {
+  display: flex; justify-content: space-between; height: 10px; line-height: 10px;
+  pointer-events: none; font-size: 9px; color: var(--text-faint); font-variant-numeric: tabular-nums;
+}
+.compact .timeline-header, .compact .timeline-body { padding-left: 8px; padding-right: 8px; }
+.compact .timeline .bars { height: 22px; }
+
 /* ---------- banner, toast ---------- */
 .banner { padding: 6px 12px; background: var(--warn-bg); color: var(--text); border-bottom: 1px solid var(--border); font-size: 11px; flex: none; }
 .banner div { padding-left: 16px; position: relative; }
@@ -175,6 +217,12 @@ button.ib.active .glyph { color: var(--accent); }
 @keyframes flash { from { box-shadow: inset 3px 0 0 var(--warn); background: var(--warn-bg); } to { box-shadow: none; background: transparent; } }
 .empty { padding: 28px 18px; color: var(--text-dim); text-align: center; line-height: 1.6; }
 .empty code { font-family: var(--mono); font-size: 11px; background: var(--bg-inset); padding: 1px 5px; border-radius: 4px; }
+.empty .empty-head { color: var(--text); font-weight: 600; margin-bottom: 6px; }
+.empty .empty-tracking { color: var(--text); background: var(--bg-inset); border-radius: 6px; padding: 6px 10px; margin: 0 auto 8px; display: inline-block; max-width: 46em; }
+.empty-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
+.empty-actions button { border: 1px solid var(--border); }
+.empty-actions button.primary { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.empty-actions input.empty-match { border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; height: 24px; background: var(--bg-inset); width: 12em; }
 
 /* ---------- details ---------- */
 .details { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
@@ -324,6 +372,7 @@ details.obj pre { margin: 4px 0 0 12px; font: 11px/1.4 var(--mono); white-space:
 .opt input[type="text"], .opt input[type="number"] { height: 24px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: inherit; font: inherit; }
 .opt input[type="text"]:focus, .opt input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
 .drawer .meta { color: var(--text-dim); margin-top: 4px; }
+.drawer .report-link { display: inline-block; margin-top: 8px; font-weight: 600; }
 
 /* ---------- sessions, compare, commit priority ---------- */
 button.ib.rec .glyph { color: var(--danger); animation: blink 1.2s ease-in-out infinite; }