rerender-lens 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rerender-lens",
-  "version": "0.3.0",
+  "version": "0.5.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",
@@ -108,7 +130,7 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "tsup && node scripts/copy-panel.mjs",
+    "build": "tsup && node scripts/build-vendor.mjs && node scripts/copy-panel.mjs",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -119,9 +141,15 @@
     "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"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -129,11 +157,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

@@ -324,6 +324,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; }
@@ -363,40 +364,6 @@ button.ib.rec .glyph { color: var(--danger); animation: blink 1.2s ease-in-out i
 .views button.instances { color: var(--text-dim); }
 .views button.instances.active { background: var(--accent-bg); color: var(--accent); }
 
-/* ---------- windowed grids, column chooser, notes ---------- */
-.vhead { display: grid; position: sticky; top: 0; z-index: 1; background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-dim); align-items: center; }
-.vhead > span { padding: 6px 10px; white-space: nowrap; cursor: pointer; user-select: none; }
-.vhead > span.sorted { color: var(--accent); }
-.vhead > span.num { text-align: right; }
-.vrow { display: grid; grid-template-columns: var(--grid-cols); align-items: center; height: 26px; position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--border); font-size: 11px; cursor: pointer; box-sizing: border-box; }
-.vrow:hover { background: var(--hover); }
-.vrow > span { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.vrow > span.num { text-align: right; font-variant-numeric: tabular-nums; }
-.vrow > span.c .name { font-family: var(--mono); color: var(--key); }
-.vrow > span.c .name::before { content: "<"; color: var(--text-faint); }
-.vrow > span.c .name::after { content: ">"; color: var(--text-faint); }
-.vrow > span.fix { color: var(--text-dim); font-family: var(--mono); }
-.vrow.fix-row { display: flex; gap: 8px; padding: 0 10px; }
-.vrow.fix-row .label { font-family: var(--mono); }
-.vrow.fix-row .meta { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
-.vrow.selected, .vrow.fix-row.selected { background: var(--selected); color: var(--selected-text); box-shadow: inset 2px 0 0 var(--accent); }
-.table-tools { display: flex; justify-content: flex-end; padding: 3px 8px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
-.columns-menu { position: relative; font-size: 11px; font-weight: 400; }
-.columns-menu summary { list-style: none; cursor: pointer; color: var(--text-dim); padding: 2px 6px; border-radius: var(--radius); }
-.columns-menu summary::-webkit-details-marker { display: none; }
-.columns-menu summary:hover { background: var(--hover); color: var(--text); }
-.columns-menu .menu { position: absolute; right: 0; top: 100%; z-index: 3; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 10px; min-width: 140px; }
-.vhead .columns-menu { justify-self: end; }
-.grid td.mono { font-family: var(--mono); }
-tr.muted td, .vrow.muted > span, .row.muted .tag { opacity: 0.55; }
-.row.muted .tag .name::after { content: " ·muted"; color: var(--text-faint); font-family: var(--font); font-size: 10px; }
-button.ib.small { height: 22px; padding: 0 6px; }
-.note-box { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--warn-bg); border-bottom: 1px solid var(--border); }
-.note-box.muted { background: var(--bg-inset); }
-.note-box .glyph { color: var(--warn); }
-.note-input { flex: 1; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; font: inherit; color: inherit; }
-.note-input:hover, .note-input:focus { border-color: var(--border-strong); background: var(--bg); outline: none; }
-
 /* ---------- compact layout (side panel, narrow windows) ---------- */
 .compact .toolbar { flex-wrap: wrap; gap: 3px; }
 .compact .toolbar input[type="search"] { min-width: 120px; flex-basis: 100%; max-width: none; order: -1; margin-bottom: 3px; }