Skip to content

Commit d8b58ed

Browse files
author
sbreiler
committed
Add option to enable/disable (default: enabled) standard seo-tab and settings-tab inside the devtools
1 parent c6e80bc commit d8b58ed

File tree

4 files changed

+29
-6
lines changed

4 files changed

+29
-6
lines changed

packages/devtools/src/components/tab-content.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { createMemo } from 'solid-js'
2-
import { useDevtoolsState } from '../context/use-devtools-context'
3-
import { tabs } from '../tabs'
2+
import { useDevtoolsSettings, useDevtoolsState } from '../context/use-devtools-context'
3+
import { getTabs } from '../tabs'
44
import { useStyles } from '../styles/use-styles'
55
import type { JSX } from 'solid-js'
66

77
export const TabContent = () => {
88
const { state } = useDevtoolsState()
9+
const { settings } = useDevtoolsSettings()
910
const styles = useStyles()
1011
const component = createMemo<(() => JSX.Element) | null>(
11-
() => tabs.find((t) => t.id === state().activeTab)?.component || null,
12+
() => getTabs(settings()).find((t) => t.id === state().activeTab)?.component || null,
1213
)
1314

1415
return <div class={styles().tabContent}>{component()?.()}</div>

packages/devtools/src/components/tabs.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import clsx from 'clsx'
22
import { For } from 'solid-js'
33
import { PiP, X } from '@tanstack/devtools-ui/icons'
44
import { useStyles } from '../styles/use-styles'
5-
import { useDevtoolsState } from '../context/use-devtools-context'
5+
import { useDevtoolsState, useDevtoolsSettings } from '../context/use-devtools-context'
66
import { useDrawContext } from '../context/draw-context'
7-
import { tabs } from '../tabs'
7+
import { getTabs } from '../tabs'
88
import { usePiPWindow } from '../context/pip-context'
99

1010
interface TabsProps {
@@ -14,6 +14,7 @@ interface TabsProps {
1414
export const Tabs = (props: TabsProps) => {
1515
const styles = useStyles()
1616
const { state, setState } = useDevtoolsState()
17+
const { settings } = useDevtoolsSettings()
1718
const pipWindow = usePiPWindow()
1819
const handleDetachment = () => {
1920
pipWindow().requestPipWindow(
@@ -24,7 +25,7 @@ export const Tabs = (props: TabsProps) => {
2425

2526
return (
2627
<div class={styles().tabContainer}>
27-
<For each={tabs}>
28+
<For each={getTabs(settings())}>
2829
{(tab) => (
2930
<button
3031
type="button"

packages/devtools/src/context/devtools-store.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,16 @@ export type DevtoolsStore = {
6666
* @default TanStackLogo
6767
*/
6868
triggerImage: string
69+
/**
70+
* Whether the SEO tab is enabled
71+
* @default true
72+
*/
73+
enableSeoTab: boolean
74+
/**
75+
* Whether the Settings tab is enabled
76+
* @default true
77+
*/
78+
enableSettingsTab: boolean
6979
}
7080
state: {
7181
activeTab: TabName
@@ -92,6 +102,8 @@ export const initialState: DevtoolsStore = {
92102
? 'dark'
93103
: 'light',
94104
triggerImage: '',
105+
enableSeoTab: true,
106+
enableSettingsTab: true,
95107
},
96108
state: {
97109
activeTab: 'plugins',

packages/devtools/src/tabs/index.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'
22
import { SettingsTab } from './settings-tab'
33
import { PluginsTab } from './plugins-tab'
44
import { SeoTab } from './seo-tab'
5+
import type { DevtoolsStore } from '../context/devtools-store'
56

67
export const tabs = [
78
{
@@ -24,4 +25,12 @@ export const tabs = [
2425
},
2526
] as const
2627

28+
export const getTabs = (settings: DevtoolsStore['settings']) => {
29+
return tabs.filter((t) => {
30+
if (t.id === 'seo') return settings.enableSeoTab
31+
if (t.id === 'settings') return settings.enableSettingsTab
32+
return true
33+
})
34+
}
35+
2736
export type TabName = (typeof tabs)[number]['id']

0 commit comments

Comments
 (0)