fix(devtools-utils): unmount the devtools core when a Preact or React panel unmounts

[JoviDeCroock]

🎯 Changes

When a Preact or React panel unmounts, its ref is already detached by the time the effect cleanup runs (React 19, Preact 11), so the devtools core was never unmounted. The effect now keeps the element it mounted into in a variable and uses that in the cleanup. Adds a test for the Preact panel.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Bug Fixes
  • Devtools panels now reliably unmount and clean up their instances when removed in React and Preact.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TanStack/devtools/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 85770b15-18a6-464f-a0e4-c075f3de70e9

📥 Commits

Reviewing files that changed from the base of the PR and between afa01fe and 3a9325e.

📒 Files selected for processing (5)

• .changeset/panel-unmount-cleanup.md
• knip.json
• packages/devtools-utils/src/preact/panel.test.tsx
• packages/devtools-utils/src/preact/panel.tsx
• packages/devtools-utils/src/react/panel.tsx

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

React and Preact panels now use the captured mount element during cleanup. New Preact tests check panel creation, mounting, and unmounting. The changes also update Knip configuration and add a patch changeset.

Changes

Panel Unmount Cleanup

Layer / File(s)	Summary
Panel cleanup and validation packages/devtools-utils/src/{preact,react}/panel.tsx, packages/devtools-utils/src/preact/panel.test.tsx, knip.json, .changeset/panel-unmount-cleanup.md	Both panel implementations use the captured element to determine whether cleanup calls unmount() and clears the devtools instance. Preact tests check panel creation, mount arguments, and unmount after removal. Knip ignores preact for this workspace, and the changeset records a patch release.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 3a932

React and Preact panels now retain their mount elements for cleanup. The reviewed changes show no actionable merge risk.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 3a932

The normal unmount path is improved, but a failed core mount can now cause panel cleanup to throw. The identified effect is limited to panel lifecycle and recovery; no security boundary change was established.

Retained concerns

• Low · reliability · inferred: If the core's asynchronous mount fails before panel teardown, the newly reached unmount call throws and cleanup does not clear the panel's core ref. This weakens failure containment for that lifecycle transition.

Security review details

Security Blast Radius

• inferred — The directly changed behavior operates on each panel's DOM element and retained core instance. The examined change does not establish expanded attacker-controlled reachability or a changed privilege boundary.

Resilience and Maintainability Implications

• inferred — After a failed asynchronous mount, the newly reached teardown can throw before clearing the adapter's core ref; no security-sensitive sink or attacker-controlled trigger was established for this path.

Hardening Proposals

• proposed — Make adapter teardown tolerant of an already-unmounted core while ensuring its retained instance is released if teardown fails.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 3 files. (2 skipped: 2…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: unmounting the devtools core when Preact or React panels unmount.
Description check	✅ Passed	The description explains the bug, the fix, the added test, local testing, and release impact. The only incomplete item is the checklist statement about understanding AI-assisted code, which is non-cri…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 60.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 3 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}