From 52e4d94a7661587e0a0677758362ad736f2d6889 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Fri, 16 Jan 2026 20:39:00 +0100 Subject: [PATCH 1/6] fix devtools-utils for vue empty component --- .../devtools-utils/src/vue/plugin.test.ts | 55 +++++++++++++++++++ packages/devtools-utils/src/vue/plugin.ts | 15 +++-- 2 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 packages/devtools-utils/src/vue/plugin.test.ts diff --git a/packages/devtools-utils/src/vue/plugin.test.ts b/packages/devtools-utils/src/vue/plugin.test.ts new file mode 100644 index 00000000..17e4eea2 --- /dev/null +++ b/packages/devtools-utils/src/vue/plugin.test.ts @@ -0,0 +1,55 @@ +import { describe, it, expect } from 'vitest' +import { createVuePlugin } from '../src/vue/plugin' +import { defineComponent } from 'vue' +import type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools' + +describe('createVuePlugin', () => { + it('should create plugins with proper types', () => { + const TestComponent = defineComponent({ + name: 'TestComponent', + props: { + test: String + }, + setup() { + return () => null + } + }) + + const [Plugin, NoOpPlugin] = createVuePlugin<{ test: string }>('Test', TestComponent) + + // Test that plugins can be created + const plugin = Plugin({ test: 'value' }) + const noOpPlugin = NoOpPlugin({ test: 'value' }) + + // Test that plugins have correct structure + expect(plugin).toHaveProperty('name', 'Test') + expect(plugin).toHaveProperty('component') + expect(plugin).toHaveProperty('props', { test: 'value' }) + + expect(noOpPlugin).toHaveProperty('name', 'Test') + expect(noOpPlugin).toHaveProperty('component') + expect(noOpPlugin).toHaveProperty('props', { test: 'value' }) + + // Test that components are valid Vue components + expect(typeof plugin.component).toBe('object') + expect(typeof noOpPlugin.component).toBe('object') + }) + + it('should create plugins compatible with TanStackDevtoolsVuePlugin type', () => { + const TestComponent = defineComponent({ + name: 'TestComponent', + setup() { + return () => null + } + }) + + const [Plugin, NoOpPlugin] = createVuePlugin('Test', TestComponent) + + const plugin: TanStackDevtoolsVuePlugin = Plugin({}) + const noOpPlugin: TanStackDevtoolsVuePlugin = NoOpPlugin({}) + + // This should not cause type errors + expect(plugin.name).toBe('Test') + expect(noOpPlugin.name).toBe('Test') + }) +}) \ No newline at end of file diff --git a/packages/devtools-utils/src/vue/plugin.ts b/packages/devtools-utils/src/vue/plugin.ts index a2c20586..1f5ea8a2 100644 --- a/packages/devtools-utils/src/vue/plugin.ts +++ b/packages/devtools-utils/src/vue/plugin.ts @@ -1,9 +1,16 @@ -import { Fragment } from 'vue' +import { defineComponent } from 'vue' import type { DefineComponent } from 'vue' -export function createVuePlugin>( +const EmptyComponent = defineComponent({ + name: 'EmptyComponent', + setup() { + return () => null + }, +}) + +export function createVuePlugin>( name: string, - component: DefineComponent, + component: DefineComponent, unknown>, ) { function Plugin(props: TComponentProps) { return { @@ -15,7 +22,7 @@ export function createVuePlugin>( function NoOpPlugin(props: TComponentProps) { return { name, - component: Fragment, + component: EmptyComponent, props, } } From 12aa0a4e1375f5034a847dd7de90a97423489a61 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 16 Jan 2026 19:42:45 +0000 Subject: [PATCH 2/6] ci: apply automated fixes --- packages/devtools-utils/src/vue/plugin.test.ts | 13 ++++++++----- packages/devtools-utils/src/vue/plugin.ts | 4 +++- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/devtools-utils/src/vue/plugin.test.ts b/packages/devtools-utils/src/vue/plugin.test.ts index 17e4eea2..1b3e9e5e 100644 --- a/packages/devtools-utils/src/vue/plugin.test.ts +++ b/packages/devtools-utils/src/vue/plugin.test.ts @@ -8,14 +8,17 @@ describe('createVuePlugin', () => { const TestComponent = defineComponent({ name: 'TestComponent', props: { - test: String + test: String, }, setup() { return () => null - } + }, }) - const [Plugin, NoOpPlugin] = createVuePlugin<{ test: string }>('Test', TestComponent) + const [Plugin, NoOpPlugin] = createVuePlugin<{ test: string }>( + 'Test', + TestComponent, + ) // Test that plugins can be created const plugin = Plugin({ test: 'value' }) @@ -40,7 +43,7 @@ describe('createVuePlugin', () => { name: 'TestComponent', setup() { return () => null - } + }, }) const [Plugin, NoOpPlugin] = createVuePlugin('Test', TestComponent) @@ -52,4 +55,4 @@ describe('createVuePlugin', () => { expect(plugin.name).toBe('Test') expect(noOpPlugin.name).toBe('Test') }) -}) \ No newline at end of file +}) diff --git a/packages/devtools-utils/src/vue/plugin.ts b/packages/devtools-utils/src/vue/plugin.ts index 1f5ea8a2..2fbb0467 100644 --- a/packages/devtools-utils/src/vue/plugin.ts +++ b/packages/devtools-utils/src/vue/plugin.ts @@ -8,7 +8,9 @@ const EmptyComponent = defineComponent({ }, }) -export function createVuePlugin>( +export function createVuePlugin< + TComponentProps extends Record, +>( name: string, component: DefineComponent, unknown>, ) { From 802efd49be65dfaa0f4300a333bba2bdcf39fc03 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Fri, 16 Jan 2026 20:43:38 +0100 Subject: [PATCH 3/6] changeset --- .changeset/tall-cycles-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tall-cycles-allow.md diff --git a/.changeset/tall-cycles-allow.md b/.changeset/tall-cycles-allow.md new file mode 100644 index 00000000..18434230 --- /dev/null +++ b/.changeset/tall-cycles-allow.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools-utils': patch +--- + +fix types for the vue NoOp devtools From 90aa388883476ebe82e6d63513f75d1d033d1549 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Fri, 16 Jan 2026 20:49:55 +0100 Subject: [PATCH 4/6] types --- .../devtools-utils/src/vue/plugin.test.ts | 58 ------------------- packages/devtools-utils/src/vue/plugin.ts | 4 +- 2 files changed, 2 insertions(+), 60 deletions(-) delete mode 100644 packages/devtools-utils/src/vue/plugin.test.ts diff --git a/packages/devtools-utils/src/vue/plugin.test.ts b/packages/devtools-utils/src/vue/plugin.test.ts deleted file mode 100644 index 1b3e9e5e..00000000 --- a/packages/devtools-utils/src/vue/plugin.test.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { describe, it, expect } from 'vitest' -import { createVuePlugin } from '../src/vue/plugin' -import { defineComponent } from 'vue' -import type { TanStackDevtoolsVuePlugin } from '@tanstack/vue-devtools' - -describe('createVuePlugin', () => { - it('should create plugins with proper types', () => { - const TestComponent = defineComponent({ - name: 'TestComponent', - props: { - test: String, - }, - setup() { - return () => null - }, - }) - - const [Plugin, NoOpPlugin] = createVuePlugin<{ test: string }>( - 'Test', - TestComponent, - ) - - // Test that plugins can be created - const plugin = Plugin({ test: 'value' }) - const noOpPlugin = NoOpPlugin({ test: 'value' }) - - // Test that plugins have correct structure - expect(plugin).toHaveProperty('name', 'Test') - expect(plugin).toHaveProperty('component') - expect(plugin).toHaveProperty('props', { test: 'value' }) - - expect(noOpPlugin).toHaveProperty('name', 'Test') - expect(noOpPlugin).toHaveProperty('component') - expect(noOpPlugin).toHaveProperty('props', { test: 'value' }) - - // Test that components are valid Vue components - expect(typeof plugin.component).toBe('object') - expect(typeof noOpPlugin.component).toBe('object') - }) - - it('should create plugins compatible with TanStackDevtoolsVuePlugin type', () => { - const TestComponent = defineComponent({ - name: 'TestComponent', - setup() { - return () => null - }, - }) - - const [Plugin, NoOpPlugin] = createVuePlugin('Test', TestComponent) - - const plugin: TanStackDevtoolsVuePlugin = Plugin({}) - const noOpPlugin: TanStackDevtoolsVuePlugin = NoOpPlugin({}) - - // This should not cause type errors - expect(plugin.name).toBe('Test') - expect(noOpPlugin.name).toBe('Test') - }) -}) diff --git a/packages/devtools-utils/src/vue/plugin.ts b/packages/devtools-utils/src/vue/plugin.ts index 2fbb0467..b04844c5 100644 --- a/packages/devtools-utils/src/vue/plugin.ts +++ b/packages/devtools-utils/src/vue/plugin.ts @@ -9,10 +9,10 @@ const EmptyComponent = defineComponent({ }) export function createVuePlugin< - TComponentProps extends Record, + TComponentProps extends Record, >( name: string, - component: DefineComponent, unknown>, + component: DefineComponent, ) { function Plugin(props: TComponentProps) { return { From 29e97c22baecad64c164834a4493c96bd432ce52 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 16 Jan 2026 19:50:36 +0000 Subject: [PATCH 5/6] ci: apply automated fixes --- packages/devtools-utils/src/vue/plugin.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/devtools-utils/src/vue/plugin.ts b/packages/devtools-utils/src/vue/plugin.ts index b04844c5..c5ee4875 100644 --- a/packages/devtools-utils/src/vue/plugin.ts +++ b/packages/devtools-utils/src/vue/plugin.ts @@ -8,9 +8,7 @@ const EmptyComponent = defineComponent({ }, }) -export function createVuePlugin< - TComponentProps extends Record, ->( +export function createVuePlugin>( name: string, component: DefineComponent, ) { From b6d3960df9cae59d31ff9c86cbe39f3ba90a17ae Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Fri, 16 Jan 2026 21:18:16 +0100 Subject: [PATCH 6/6] revert --- packages/devtools-utils/src/vue/plugin.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/devtools-utils/src/vue/plugin.ts b/packages/devtools-utils/src/vue/plugin.ts index c5ee4875..2fbb0467 100644 --- a/packages/devtools-utils/src/vue/plugin.ts +++ b/packages/devtools-utils/src/vue/plugin.ts @@ -8,9 +8,11 @@ const EmptyComponent = defineComponent({ }, }) -export function createVuePlugin>( +export function createVuePlugin< + TComponentProps extends Record, +>( name: string, - component: DefineComponent, + component: DefineComponent, unknown>, ) { function Plugin(props: TComponentProps) { return {