diff --git a/.changeset/silent-planets-learn.md b/.changeset/silent-planets-learn.md new file mode 100644 index 0000000000..53515efbb1 --- /dev/null +++ b/.changeset/silent-planets-learn.md @@ -0,0 +1,10 @@ +--- +'@tanstack/angular-table-devtools': patch +'@tanstack/preact-table-devtools': patch +'@tanstack/react-table-devtools': patch +'@tanstack/solid-table-devtools': patch +'@tanstack/vue-table-devtools': patch +'@tanstack/table-devtools': patch +--- + +Hotfix: Fixes TableDevtoolsPanel rendering while using as a standalone component in TanStack Devtools diff --git a/packages/angular-table-devtools/src/TableDevtools.ts b/packages/angular-table-devtools/src/TableDevtools.ts index 0ea790a3b4..4085b087e4 100644 --- a/packages/angular-table-devtools/src/TableDevtools.ts +++ b/packages/angular-table-devtools/src/TableDevtools.ts @@ -4,12 +4,12 @@ import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular' export interface TableDevtoolsAngularInit extends Partial {} -function resolvePanelProps( +export function resolvePanelProps( props?: TableDevtoolsAngularInit, ): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/angular-table-devtools/src/production/TableDevtools.ts b/packages/angular-table-devtools/src/production/TableDevtools.ts index c9061540c8..a4fb711ac7 100644 --- a/packages/angular-table-devtools/src/production/TableDevtools.ts +++ b/packages/angular-table-devtools/src/production/TableDevtools.ts @@ -8,7 +8,7 @@ function resolvePanelProps( ): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/angular-table-devtools/tests/panel-props.test.ts b/packages/angular-table-devtools/tests/panel-props.test.ts new file mode 100644 index 0000000000..d789d42540 --- /dev/null +++ b/packages/angular-table-devtools/tests/panel-props.test.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from 'vitest' +import { resolvePanelProps } from '../src/TableDevtools' + +describe('TableDevtoolsPanel props', () => { + it('treats a standalone panel without devtools props as open', () => { + expect(resolvePanelProps()).toEqual({ + theme: 'dark', + devtoolsOpen: true, + }) + }) + + it('preserves an explicit closed state from the devtools plugin', () => { + expect(resolvePanelProps({ devtoolsOpen: false })).toEqual({ + theme: 'dark', + devtoolsOpen: false, + }) + }) +}) diff --git a/packages/preact-table-devtools/src/PreactTableDevtools.tsx b/packages/preact-table-devtools/src/PreactTableDevtools.tsx index 9e0f7e681b..024ae05976 100644 --- a/packages/preact-table-devtools/src/PreactTableDevtools.tsx +++ b/packages/preact-table-devtools/src/PreactTableDevtools.tsx @@ -19,7 +19,7 @@ function resolvePanelProps( ): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/preact-table-devtools/src/production/PreactTableDevtools.tsx b/packages/preact-table-devtools/src/production/PreactTableDevtools.tsx index 7606a20f5c..064efe7a08 100644 --- a/packages/preact-table-devtools/src/production/PreactTableDevtools.tsx +++ b/packages/preact-table-devtools/src/production/PreactTableDevtools.tsx @@ -17,7 +17,7 @@ function resolvePanelProps( ): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/react-table-devtools/src/ReactTableDevtools.tsx b/packages/react-table-devtools/src/ReactTableDevtools.tsx index 4fbd67f137..58ea8f159a 100644 --- a/packages/react-table-devtools/src/ReactTableDevtools.tsx +++ b/packages/react-table-devtools/src/ReactTableDevtools.tsx @@ -16,7 +16,7 @@ const [TableDevtoolsPanelBase, TableDevtoolsPanelNoOpBase] = function resolvePanelProps(props?: TableDevtoolsReactInit): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/react-table-devtools/src/production/ReactTableDevtools.tsx b/packages/react-table-devtools/src/production/ReactTableDevtools.tsx index 5d2f4e5dd8..c1efb0f93b 100644 --- a/packages/react-table-devtools/src/production/ReactTableDevtools.tsx +++ b/packages/react-table-devtools/src/production/ReactTableDevtools.tsx @@ -14,7 +14,7 @@ const [TableDevtoolsPanelBase] = createReactPanel(TableDevtoolsCore) function resolvePanelProps(props?: TableDevtoolsReactInit): DevtoolsPanelProps { return { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, } } diff --git a/packages/solid-table-devtools/src/TableDevtools.tsx b/packages/solid-table-devtools/src/TableDevtools.tsx index b20fea09f4..5305ff3a94 100644 --- a/packages/solid-table-devtools/src/TableDevtools.tsx +++ b/packages/solid-table-devtools/src/TableDevtools.tsx @@ -18,7 +18,7 @@ function resolvePanelProps(props?: TableDevtoolsSolidInit): DevtoolsPanelProps { return props?.theme ?? 'dark' }, get devtoolsOpen() { - return props?.devtoolsOpen ?? false + return props?.devtoolsOpen ?? true }, } } diff --git a/packages/solid-table-devtools/src/production/TableDevtools.tsx b/packages/solid-table-devtools/src/production/TableDevtools.tsx index ec38ac5ae5..cffef5e2b7 100644 --- a/packages/solid-table-devtools/src/production/TableDevtools.tsx +++ b/packages/solid-table-devtools/src/production/TableDevtools.tsx @@ -18,7 +18,7 @@ function resolvePanelProps(props?: TableDevtoolsSolidInit): DevtoolsPanelProps { return props?.theme ?? 'dark' }, get devtoolsOpen() { - return props?.devtoolsOpen ?? false + return props?.devtoolsOpen ?? true }, } } diff --git a/packages/table-devtools/src/TableDevtools.tsx b/packages/table-devtools/src/TableDevtools.tsx index 0f687b3557..6d28f6d626 100644 --- a/packages/table-devtools/src/TableDevtools.tsx +++ b/packages/table-devtools/src/TableDevtools.tsx @@ -6,11 +6,11 @@ import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui' export default function TableDevtools(props: { theme: TanStackDevtoolsTheme - devtoolsOpen: boolean + devtoolsOpen?: boolean }) { return ( - + diff --git a/packages/table-devtools/tests/panel-lifecycle.test.tsx b/packages/table-devtools/tests/panel-lifecycle.test.tsx index 7ec8bdb399..1c3c655eef 100644 --- a/packages/table-devtools/tests/panel-lifecycle.test.tsx +++ b/packages/table-devtools/tests/panel-lifecycle.test.tsx @@ -39,6 +39,21 @@ afterEach(() => { }) describe('TableDevtools panel lifecycle', () => { + it('treats a standalone panel without devtools props as open', async () => { + const { subscribe, table } = createDevtoolsTable() + const cleanupTarget = upsertTableDevtoolsTarget({ + table: table as never, + }) + const element = document.createElement('div') + const dispose = render(() => , element) + + await Promise.resolve() + expect(subscribe).toHaveBeenCalledTimes(1) + + dispose() + cleanupTarget?.() + }) + it('subscribes only while the devtools panel is open', async () => { const { subscribe, table, unsubscribe } = createDevtoolsTable() const cleanupTarget = upsertTableDevtoolsTarget({ diff --git a/packages/vue-table-devtools/src/VueTableDevtools.tsx b/packages/vue-table-devtools/src/VueTableDevtools.tsx index 564229333e..1ca34ec3e1 100644 --- a/packages/vue-table-devtools/src/VueTableDevtools.tsx +++ b/packages/vue-table-devtools/src/VueTableDevtools.tsx @@ -14,7 +14,7 @@ class TableDevtoolsVueCore { mount(el: HTMLElement, props?: DevtoolsPanelProps) { void this.core.mount(el, { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, }) } @@ -39,7 +39,7 @@ function createPanelWrapper( return () => { const devtoolsProps = { theme: props.theme ?? 'dark', - devtoolsOpen: props.devtoolsOpen ?? false, + devtoolsOpen: props.devtoolsOpen ?? true, } return h(Component, { key: `${devtoolsProps.theme}:${devtoolsProps.devtoolsOpen}`, diff --git a/packages/vue-table-devtools/src/production/VueTableDevtools.tsx b/packages/vue-table-devtools/src/production/VueTableDevtools.tsx index d9ad422562..8d48c7997a 100644 --- a/packages/vue-table-devtools/src/production/VueTableDevtools.tsx +++ b/packages/vue-table-devtools/src/production/VueTableDevtools.tsx @@ -13,7 +13,7 @@ class TableDevtoolsVueCore { mount(el: HTMLElement, props?: DevtoolsPanelProps) { void this.core.mount(el, { theme: props?.theme ?? 'dark', - devtoolsOpen: props?.devtoolsOpen ?? false, + devtoolsOpen: props?.devtoolsOpen ?? true, }) } @@ -34,7 +34,7 @@ export const TableDevtoolsPanel = defineComponent({ return () => { const devtoolsProps = { theme: props.theme ?? 'dark', - devtoolsOpen: props.devtoolsOpen ?? false, + devtoolsOpen: props.devtoolsOpen ?? true, } return h(TableDevtoolsPanelBase, { key: `${devtoolsProps.theme}:${devtoolsProps.devtoolsOpen}`,