| 64 | |
| 65 | export default function DevTools() { |
| 66 | const { settings } = createDevtoolsSettings() |
| 67 | const { state } = createDevtoolsState() |
| 68 | const { setHeight } = createHeight() |
| 69 | const { persistOpen, setPersistOpen } = createPersistOpen() |
| 70 | const [rootEl, setRootEl] = createSignal<HTMLDivElement>() |
| 71 | const [isOpen, setIsOpen] = createSignal( |
| 72 | settings().defaultOpen || persistOpen(), |
| 73 | ) |
| 74 | const pip = createPiPWindow() |
| 75 | let panelRef: HTMLDivElement | undefined |
| 76 | const [isResizing, setIsResizing] = createSignal(false) |
| 77 | const { isCollapsed } = createCollapsed() |
| 78 | const [showMarketplace, setShowMarketplace] = createSignal(false) |
| 79 | const themeOwner = Symbol('tanstack-devtools-theme') |
| 80 | |
| 81 | const updateHeight = (nextHeight: number) => { |
| 82 | setHeight(nextHeight) |
| 83 | setIsOpen(nextHeight >= PANEL_CLOSE_THRESHOLD) |
| 84 | } |
| 85 | |
| 86 | const toggleOpen = () => { |
| 87 | if (pip().pipWindow) return |
| 88 | const newState = !isOpen() |
| 89 | setIsOpen(newState) |
| 90 | setPersistOpen(newState) |
| 91 | devtoolsEventClient.emit('trigger-toggled', { isOpen: newState }) |
| 92 | } |
| 93 | |
| 94 | createEffect(() => { |
| 95 | const unsubscribe = devtoolsEventClient.on('trigger-toggled', (event) => { |
| 96 | if (pip().pipWindow) return |
| 97 | const payload = event.payload as unknown as { isOpen: boolean } |
| 98 | if (payload.isOpen !== isOpen()) { |
| 99 | setIsOpen(payload.isOpen) |
| 100 | setPersistOpen(payload.isOpen) |
| 101 | } |
| 102 | }) |
| 103 | onCleanup(unsubscribe) |
| 104 | }) |
| 105 | |
| 106 | // Only the plugins and SEO destinations have a secondary strip. The collapse |