Skip to content

Commit 17dd97e

Browse files
AlemTuzlakAlemTuzlak
committed
feat: refactor props passing to plugins for improved flexibility
1 parent 3e19f95 commit 17dd97e

20 files changed

Lines changed: 163 additions & 134 deletions

File tree

‎.changeset/thirty-spies-fetch.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@tanstack/preact-devtools': minor
3+
'@tanstack/devtools-utils': minor
4+
'@tanstack/react-devtools': minor
5+
'@tanstack/solid-devtools': minor
6+
'@tanstack/devtools': minor
7+
---
8+
9+
Change the way props are passed to the plugins

‎packages/devtools-utils/package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
"dependencies": {
6363
"@tanstack/devtools-ui": "workspace:^"
6464
},
65+
"devDependencies": {
66+
"tsup": "^8.5.0",
67+
"tsup-preset-solid": "^2.2.0",
68+
"vite-plugin-solid": "^2.11.8",
69+
"@tanstack/devtools": "workspace:^"
70+
},
6571
"peerDependencies": {
6672
"@types/react": ">=17.0.0",
6773
"preact": ">=10.0.0",
@@ -99,10 +105,5 @@
99105
"test:types": "tsc",
100106
"test:build": "publint --strict",
101107
"build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
102-
},
103-
"devDependencies": {
104-
"tsup": "^8.5.0",
105-
"tsup-preset-solid": "^2.2.0",
106-
"vite-plugin-solid": "^2.11.8"
107108
}
108-
}
109+
}

‎packages/devtools-utils/src/preact/panel.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/** @jsxImportSource preact */
22

33
import { useEffect, useRef } from 'preact/hooks'
4+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
5+
6+
export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
47

5-
export interface DevtoolsPanelProps {
6-
theme?: 'light' | 'dark'
78
}
89

910
/**
@@ -24,9 +25,9 @@ export interface DevtoolsPanelProps {
2425
* ```
2526
*/
2627
export function createPreactPanel<
27-
TComponentProps extends DevtoolsPanelProps | undefined,
28+
TComponentProps extends DevtoolsPanelProps,
2829
TCoreDevtoolsClass extends {
29-
mount: (el: HTMLElement, theme: 'light' | 'dark') => void
30+
mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
3031
unmount: () => void
3132
},
3233
>(CoreClass: new () => TCoreDevtoolsClass) {
@@ -38,7 +39,7 @@ export function createPreactPanel<
3839
devtools.current = new CoreClass()
3940

4041
if (devToolRef.current) {
41-
devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
42+
devtools.current.mount(devToolRef.current, props)
4243
}
4344

4445
return () => {
@@ -47,7 +48,7 @@ export function createPreactPanel<
4748
devtools.current = null
4849
}
4950
}
50-
}, [props?.theme])
51+
}, [props])
5152

5253
return <div style={{ height: '100%' }} ref={devToolRef} />
5354
}

‎packages/devtools-utils/src/preact/plugin.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import type { JSX } from 'preact'
44
import type { DevtoolsPanelProps } from './panel'
5+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
56

67
export function createPreactPlugin({
78
Component,
@@ -15,15 +16,15 @@ export function createPreactPlugin({
1516
function Plugin() {
1617
return {
1718
...config,
18-
render: (_el: HTMLElement, theme: 'light' | 'dark') => (
19-
<Component theme={theme} />
19+
render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
20+
<Component {...props} />
2021
),
2122
}
2223
}
2324
function NoOpPlugin() {
2425
return {
2526
...config,
26-
render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
27+
render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
2728
}
2829
}
2930
return [Plugin, NoOpPlugin] as const

‎packages/devtools-utils/src/react/panel.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useRef } from 'react'
2+
import type { TanStackDevtoolsPluginProps } from "@tanstack/devtools"
23

3-
export interface DevtoolsPanelProps {
4-
theme?: 'light' | 'dark'
4+
export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
55
}
66

77
/**
@@ -22,9 +22,9 @@ export interface DevtoolsPanelProps {
2222
* ```
2323
*/
2424
export function createReactPanel<
25-
TComponentProps extends DevtoolsPanelProps | undefined,
25+
TComponentProps extends TanStackDevtoolsPluginProps,
2626
TCoreDevtoolsClass extends {
27-
mount: (el: HTMLElement, theme: 'light' | 'dark') => void
27+
mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
2828
unmount: () => void
2929
},
3030
>(CoreClass: new () => TCoreDevtoolsClass) {
@@ -36,7 +36,7 @@ export function createReactPanel<
3636
devtools.current = new CoreClass()
3737

3838
if (devToolRef.current) {
39-
devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
39+
devtools.current.mount(devToolRef.current, props)
4040
}
4141

4242
return () => {
@@ -45,7 +45,7 @@ export function createReactPanel<
4545
devtools.current = null
4646
}
4747
}
48-
}, [props?.theme])
48+
}, [props])
4949

5050
return <div style={{ height: '100%' }} ref={devToolRef} />
5151
}

‎packages/devtools-utils/src/react/plugin.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { JSX } from 'react'
22
import type { DevtoolsPanelProps } from './panel'
3+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
34

45
export function createReactPlugin({
56
Component,
@@ -13,15 +14,15 @@ export function createReactPlugin({
1314
function Plugin() {
1415
return {
1516
...config,
16-
render: (_el: HTMLElement, theme: 'light' | 'dark') => (
17-
<Component theme={theme} />
17+
render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
18+
<Component {...props} />
1819
),
1920
}
2021
}
2122
function NoOpPlugin() {
2223
return {
2324
...config,
24-
render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
25+
render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
2526
}
2627
}
2728
return [Plugin, NoOpPlugin] as const

‎packages/devtools-utils/src/solid/class.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/** @jsxImportSource solid-js - we use Solid.js as JSX here */
22

3+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
34
import type { JSX } from 'solid-js'
45

56
/**
@@ -20,9 +21,9 @@ export function constructCoreClass(Component: () => JSX.Element) {
2021
#Component: any
2122
#ThemeProvider: any
2223

23-
constructor() {}
24+
constructor() { }
2425

25-
async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
26+
async mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps) {
2627
this.#isMounting = true
2728
const { lazy } = await import('solid-js')
2829
const { render, Portal } = await import('solid-js/web')
@@ -44,8 +45,8 @@ export function constructCoreClass(Component: () => JSX.Element) {
4445
return (
4546
<Portal mount={mountTo}>
4647
<div style={{ height: '100%' }}>
47-
<ThemeProvider theme={theme}>
48-
<Devtools />
48+
<ThemeProvider theme={props.theme} >
49+
<Devtools {...props} />
4950
</ThemeProvider>
5051
</div>
5152
</Portal>
@@ -79,8 +80,8 @@ export function constructCoreClass(Component: () => JSX.Element) {
7980
constructor() {
8081
super()
8182
}
82-
async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
83-
unmount() {}
83+
async mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps) { }
84+
unmount() { }
8485
}
8586
return [DevtoolsCore, NoOpDevtoolsCore] as const
8687
}

‎packages/devtools-utils/src/solid/panel.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22

33
import { createSignal, onCleanup, onMount } from 'solid-js'
44
import type { ClassType } from './class'
5+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
56

6-
export interface DevtoolsPanelProps {
7-
theme?: 'light' | 'dark'
7+
export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
88
}
99

1010
export function createSolidPanel<
11-
TComponentProps extends DevtoolsPanelProps | undefined,
11+
TComponentProps extends DevtoolsPanelProps,
1212
>(CoreClass: ClassType) {
1313
function Panel(props: TComponentProps) {
1414
let devToolRef: HTMLDivElement | undefined
1515
const [devtools] = createSignal(new CoreClass())
1616
onMount(() => {
1717
if (devToolRef) {
18-
devtools().mount(devToolRef, props?.theme ?? 'dark')
18+
devtools().mount(devToolRef, props)
1919
}
2020
onCleanup(() => {
2121
devtools().unmount()

‎packages/devtools-utils/src/solid/plugin.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import type { JSX } from 'solid-js'
44
import type { DevtoolsPanelProps } from './panel'
5+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
56

67
export function createSolidPlugin({
78
Component,
@@ -15,15 +16,15 @@ export function createSolidPlugin({
1516
function Plugin() {
1617
return {
1718
...config,
18-
render: (_el: HTMLElement, theme: 'light' | 'dark') => {
19-
return <Component theme={theme} />
19+
render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => {
20+
return <Component {...props} />
2021
},
2122
}
2223
}
2324
function NoOpPlugin() {
2425
return {
2526
...config,
26-
render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
27+
render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
2728
}
2829
}
2930
return [Plugin, NoOpPlugin] as const

‎packages/devtools-utils/src/vue/panel.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
2+
import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
23
import type { DefineComponent } from 'vue'
34

4-
export interface DevtoolsPanelProps {
5-
theme?: 'dark' | 'light' | 'system'
6-
}
5+
export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
76

87
export function createVuePanel<
98
TComponentProps extends DevtoolsPanelProps,
109
TCoreDevtoolsClass extends {
11-
mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void
10+
mount: (el: HTMLElement, props?: TanStackDevtoolsPluginProps) => void
1211
unmount: () => void
1312
},
1413
>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {
1514
const props = {
16-
theme: {
17-
type: String as () => DevtoolsPanelProps['theme'],
15+
props: {
16+
type: Object as () => DevtoolsPanelProps,
1817
},
1918
devtoolsProps: {
2019
type: Object as () => TComponentProps,
@@ -32,7 +31,7 @@ export function createVuePanel<
3231
devtools.value = instance
3332

3433
if (devToolRef.value) {
35-
instance.mount(devToolRef.value, config.theme)
34+
instance.mount(devToolRef.value, config.props)
3635
}
3736
})
3837

0 commit comments

Comments
 (0)