hotfix: Fixes TableDevtoolsPanel rendering while using as a standalone component in TanStack Devtools

.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

packages/angular-table-devtools/src/TableDevtools.ts

@@ -4,12 +4,12 @@ import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
 
 export interface TableDevtoolsAngularInit extends Partial<DevtoolsPanelProps> {}
 
-function resolvePanelProps(
+export function resolvePanelProps(
   props?: TableDevtoolsAngularInit,
 ): DevtoolsPanelProps {
   return {
     theme: props?.theme ?? 'dark',
-    devtoolsOpen: props?.devtoolsOpen ?? false,
+    devtoolsOpen: props?.devtoolsOpen ?? true,
   }
 }
 

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,
   }
 }
 

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,
+    })
+  })
+})

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,
   }
 }
 

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,
   }
 }
 

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,
   }
 }
 

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,
   }
 }
 

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
     },
   }
 }

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
     },
   }
 }

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 (
     <ThemeContextProvider theme={props.theme}>
-      <Show when={props.devtoolsOpen}>
+      <Show when={props.devtoolsOpen ?? true}>
         <TableContextProvider>
           <Shell />
         </TableContextProvider>

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(() => <TableDevtools theme="dark" />, 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({

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}`,

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}`,