hotfix: Fixes TableDevtoolsPanel rendering while using as a standalone component in TanStack Devtools - #6516
hotfix: Fixes TableDevtoolsPanel rendering while using as a standalone component in TanStack Devtools#6516riccardoperra wants to merge 3 commits into
Conversation
📝 WalkthroughWalkthroughThe standalone table devtools panel now opens by default when ChangesTable devtools panel behavior
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
|
View your CI Pipeline Execution ↗ for commit 1db0e8a
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version Preview6 package(s) bumped directly, 12 bumped as dependents. 🟩 Patch bumps
|
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We removed the accidental export keyword from resolvePanelProps in packages/angular-table-devtools/src/production/TableDevtools.ts, which was introduced by the PR but has no external consumers (the new test correctly imports from the non-production src/TableDevtools.ts). This fixes the table:test:knip failure that reported the function as an unused export.
Tip
✅ We verified this fix by re-running table:test:knip.
diff --git a/packages/angular-table-devtools/src/production/TableDevtools.ts b/packages/angular-table-devtools/src/production/TableDevtools.ts
index 6c7b911d..a4fb711a 100644
--- a/packages/angular-table-devtools/src/production/TableDevtools.ts
+++ b/packages/angular-table-devtools/src/production/TableDevtools.ts
@@ -3,7 +3,7 @@ import { TableDevtoolsCore } from '@tanstack/table-devtools/production'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
import type { TableDevtoolsAngularInit } from '../TableDevtools'
-export function resolvePanelProps(
+function resolvePanelProps(
props?: TableDevtoolsAngularInit,
): DevtoolsPanelProps {
return {
Or Apply changes locally with:
npx nx-cloud apply-locally 94wk-NT8D
Apply fix locally with your editor ↗ View interactive diff ↗
🎓 Learn more about Self-Healing CI on nx.dev
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/table-devtools/tests/panel-lifecycle.test.tsx (1)
42-55: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAssert subscription cleanup during teardown.
This test verifies the initial subscription, but it does not verify
unsubscribe. DestructureunsubscribefromcreateDevtoolsTable()and assert it afterdispose()and target cleanup. Otherwise, a store-subscription leak can pass this lifecycle test.Proposed test assertion
- const { subscribe, table } = createDevtoolsTable() + const { subscribe, table, unsubscribe } = createDevtoolsTable() ... dispose() cleanupTarget?.() + expect(unsubscribe).toHaveBeenCalledTimes(1)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/table-devtools/tests/panel-lifecycle.test.tsx` around lines 42 - 55, Update the standalone panel lifecycle test around createDevtoolsTable to also destructure unsubscribe and assert it is called during teardown after dispose() and cleanupTarget?.(). Keep the existing subscription assertion unchanged and verify the store subscription is released.packages/angular-table-devtools/src/TableDevtools.ts (1)
7-12: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep
resolvePanelPropsprivate.Line 7 exports the helper, but the PR objective says
resolvePanelPropsshould be private. The new test depends on that export. Remove the export and testTableDevtoolsPanelthrough its public API, or colocate the helper test, so this module does not expose an internal helper solely for testing.Suggested change
-export function resolvePanelProps( +function resolvePanelProps(🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/angular-table-devtools/src/TableDevtools.ts` around lines 7 - 12, Remove the export from resolvePanelProps so it remains private to the module. Update tests to exercise TableDevtoolsPanel through its public API, or colocate helper-specific coverage without exposing resolvePanelProps.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/angular-table-devtools/src/TableDevtools.ts`:
- Around line 7-12: Remove the export from resolvePanelProps so it remains
private to the module. Update tests to exercise TableDevtoolsPanel through its
public API, or colocate helper-specific coverage without exposing
resolvePanelProps.
In `@packages/table-devtools/tests/panel-lifecycle.test.tsx`:
- Around line 42-55: Update the standalone panel lifecycle test around
createDevtoolsTable to also destructure unsubscribe and assert it is called
during teardown after dispose() and cleanupTarget?.(). Keep the existing
subscription assertion unchanged and verify the store subscription is released.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6140c351-cc0f-4225-89be-f79dbf7e1431
📒 Files selected for processing (14)
.changeset/silent-planets-learn.mdpackages/angular-table-devtools/src/TableDevtools.tspackages/angular-table-devtools/src/production/TableDevtools.tspackages/angular-table-devtools/tests/panel-props.test.tspackages/preact-table-devtools/src/PreactTableDevtools.tsxpackages/preact-table-devtools/src/production/PreactTableDevtools.tsxpackages/react-table-devtools/src/ReactTableDevtools.tsxpackages/react-table-devtools/src/production/ReactTableDevtools.tsxpackages/solid-table-devtools/src/TableDevtools.tsxpackages/solid-table-devtools/src/production/TableDevtools.tsxpackages/table-devtools/src/TableDevtools.tsxpackages/table-devtools/tests/panel-lifecycle.test.tsxpackages/vue-table-devtools/src/VueTableDevtools.tsxpackages/vue-table-devtools/src/production/VueTableDevtools.tsx
1 participant
This pull request implements a hotfix to ensure that the
TableDevtoolsPanelrenders as open by default when used as a standalone component across all supported frameworks in TanStack Devtools. The default value for thedevtoolsOpenprop is changed fromfalsetotrue, and new tests are added to verify this behavior. This update improves the developer experience by making the panel visible out-of-the-box unless explicitly closed.Default open state for TableDevtoolsPanel:
Changed the default value of the
devtoolsOpenprop fromfalsetotruein all framework-specificresolvePanelPropsfunctions and component mounts, including Angular, React, Preact, Solid, and Vue implementations (TableDevtools.ts,ReactTableDevtools.tsx,PreactTableDevtools.tsx,VueTableDevtools.tsx, etc.). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]Updated the core
TableDevtoolscomponent to treatdevtoolsOpenastrueby default if not provided.Testing improvements:
Documentation and release:
Summary by CodeRabbit
Bug Fixes
Tests