@tanstack/devtools 0.0.0

package/src/components/main-panel.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import { useHeight } from '../context/use-devtools-context'
+import { useStyles } from '../styles/use-styles'
+import { TANSTACK_DEVTOOLS } from '../utils/storage'
+import type { JSX } from 'solid-js/jsx-runtime'
+import type { Accessor } from 'solid-js'
+
+export const MainPanel = (props: {
+  isOpen: Accessor<boolean>
+  children: JSX.Element
+  isResizing: Accessor<boolean>
+}) => {
+  const styles = useStyles()
+  const { height } = useHeight()
+  return (
+    <div
+      id={TANSTACK_DEVTOOLS}
+      style={{
+        height: height() + 'px',
+      }}
+      class={clsx(
+        styles().devtoolsPanelContainer,
+        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
+        styles().devtoolsPanelContainerVisibility(props.isOpen()),
+        styles().devtoolsPanelContainerResizing(props.isResizing),
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/components/tab-content.tsx

@@ -0,0 +1,20 @@
+import { createEffect, createSignal } from 'solid-js'
+import { useDevtoolsState } from '../context/use-devtools-context'
+import { tabs } from '../tabs'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js'
+
+export const TabContent = () => {
+  const { state } = useDevtoolsState()
+  const styles = useStyles()
+  const [component, setComponent] = createSignal<JSX.Element | null>(
+    tabs.find((t) => t.id === state().activeTab)?.component() || null,
+  )
+  createEffect(() => {
+    setComponent(
+      tabs.find((t) => t.id === state().activeTab)?.component() || null,
+    )
+  })
+
+  return <div class={styles().tabContent}>{component()}</div>
+}

package/src/components/tabs.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx'
+import { For } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+import { useDevtoolsState } from '../context/use-devtools-context'
+import { tabs } from '../tabs'
+
+interface TabsProps {
+  toggleOpen: () => void
+}
+
+export const Tabs = (props: TabsProps) => {
+  const styles = useStyles()
+  const { state, setState } = useDevtoolsState()
+
+  return (
+    <div class={styles().tabContainer}>
+      <For each={tabs}>
+        {(tab) => (
+          <button
+            type="button"
+            onClick={() => setState({ activeTab: tab.id })}
+            class={clsx(styles().tab, { active: state().activeTab === tab.id })}
+          >
+            {tab.icon}
+          </button>
+        )}
+      </For>
+      <button
+        type="button"
+        class={clsx(styles().tab, 'close')}
+        onClick={() => props.toggleOpen()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+  )
+}

package/src/components/trigger.tsx

@@ -0,0 +1,34 @@
+import { createMemo } from 'solid-js'
+import clsx from 'clsx'
+import { useDevtoolsSettings } from '../context/use-devtools-context'
+import { useStyles } from '../styles/use-styles'
+import { TanStackLogo } from './logo'
+import type { Accessor } from 'solid-js'
+
+export const Trigger = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: Accessor<boolean>
+  setIsOpen: (isOpen: boolean) => void
+}) => {
+  const { settings } = useDevtoolsSettings()
+  const styles = useStyles()
+  const buttonStyle = createMemo(() => {
+    return clsx(
+      styles().mainCloseBtn,
+      styles().mainCloseBtnPosition(settings().position),
+      styles().mainCloseBtnAnimation(isOpen()),
+    )
+  })
+  return (
+    <button
+      type="button"
+      aria-label="Open TanStack Devtools"
+      class={buttonStyle()}
+      onClick={() => setIsOpen(!isOpen())}
+    >
+      <TanStackLogo />
+    </button>
+  )
+}

package/src/context/devtools-context.tsx

@@ -0,0 +1,93 @@
+import { createContext } from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { tryParseJson } from '../utils/sanitize'
+import {
+  TANSTACK_DEVTOOLS_SETTINGS,
+  TANSTACK_DEVTOOLS_STATE,
+  getStorageItem,
+  setStorageItem,
+} from '../utils/storage'
+import { initialState } from './devtools-store'
+import type { DevtoolsStore } from './devtools-store'
+import type { Setter } from 'solid-js'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export interface DevtoolsPlugin {
+  name: string | ((el: HTMLHeadingElement) => void)
+  id: string
+  render: (el: HTMLDivElement) => void
+}
+
+export const DevtoolsContext = createContext<{
+  store: DevtoolsStore
+  setStore: Setter<DevtoolsStore>
+}>()
+
+interface ContextProps {
+  children: JSX.Element
+  plugins?: Array<DevtoolsPlugin>
+  config?: DevtoolsSettings
+}
+
+const getSettings = () => {
+  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)
+  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)
+  return {
+    ...settings,
+  }
+}
+
+const getExistingStateFromStorage = (
+  config?: DevtoolsSettings,
+  plugins?: Array<DevtoolsPlugin>,
+) => {
+  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)
+  const settings = getSettings()
+
+  const state: DevtoolsStore = {
+    ...initialState,
+    plugins: plugins || [],
+    state: {
+      ...initialState.state,
+      ...(existingState ? JSON.parse(existingState) : {}),
+    },
+    settings: {
+      ...initialState.settings,
+      ...config,
+      ...settings,
+    },
+  }
+  return state
+}
+
+export type DevtoolsSettings = DevtoolsStore['settings']
+
+export const DevtoolsProvider = (props: ContextProps) => {
+  const [store, setStore] = createStore(
+    getExistingStateFromStorage(props.config, props.plugins),
+  )
+
+  const value = {
+    store,
+    setStore: (
+      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,
+    ) => {
+      const newState = updater(store)
+      const { settings, state: internalState } = newState
+      // Store user settings for dev tools into local storage
+      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))
+      // Store general state into local storage
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))
+      setStore((prev) => ({
+        ...prev,
+        ...newState,
+      }))
+    },
+  }
+
+  return (
+    <DevtoolsContext.Provider value={value}>
+      {props.children}
+    </DevtoolsContext.Provider>
+  )
+}

package/src/context/devtools-store.ts

@@ -0,0 +1,79 @@
+import type { TabName } from '../tabs'
+import type { DevtoolsPlugin } from './devtools-context'
+
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
+type KeyboardKey = ModifierKey | (string & {})
+
+type TriggerPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'middle-left'
+  | 'middle-right'
+
+export type DevtoolsStore = {
+  settings: {
+    /**
+     * Whether the dev tools should be open by default
+     * @default false
+     */
+    defaultOpen: boolean
+    /**
+     * Whether the dev tools trigger should be hidden until the user hovers over it
+     * @default false
+     */
+    hideUntilHover: boolean
+    /**
+     * The position of the trigger button
+     * @default "bottom-right"
+     */
+    position: TriggerPosition
+
+    /**
+     * The location of the panel once it is open
+     * @default "bottom"
+     */
+    panelLocation: 'top' | 'bottom'
+    /**
+     * The hotkey to open the dev tools
+     * @default "shift+a"
+     */
+    openHotkey: Array<KeyboardKey>
+    /**
+     * Whether to require the URL flag to open the dev tools
+     * @default false
+     */
+    requireUrlFlag: boolean
+    /**
+     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)
+     * @default "tanstack-devtools"
+     */
+    urlFlag: string
+  }
+  state: {
+    activeTab: TabName
+    height: number
+    activePlugin?: DevtoolsPlugin | undefined
+    persistOpen: boolean
+  }
+  plugins?: Array<DevtoolsPlugin>
+}
+
+export const initialState: DevtoolsStore = {
+  settings: {
+    defaultOpen: false,
+    hideUntilHover: false,
+    position: 'bottom-right',
+    panelLocation: 'bottom',
+    openHotkey: ['Shift', 'A'],
+    requireUrlFlag: false,
+    urlFlag: 'tanstack-devtools',
+  },
+  state: {
+    activeTab: 'plugins',
+    height: 400,
+    activePlugin: undefined,
+    persistOpen: false,
+  },
+}

package/src/context/use-devtools-context.ts

@@ -0,0 +1,95 @@
+import { createMemo, useContext } from 'solid-js'
+import { DevtoolsContext } from './devtools-context.jsx'
+import type { DevtoolsPlugin } from './devtools-context.jsx'
+/* import type { DevtoolsPlugin } from './devtools-context' */
+import type { DevtoolsStore } from './devtools-store.js'
+
+/**
+ * Returns an object containing the current state and setState function of the ShellContext.
+ * Throws an error if used outside of a ShellContextProvider.
+ */
+const useDevtoolsContext = () => {
+  const context = useContext(DevtoolsContext)
+  if (context === undefined) {
+    throw new Error(
+      'useDevtoolsShellContext must be used within a ShellContextProvider',
+    )
+  }
+  return context
+}
+
+export const usePlugins = () => {
+  const { store, setStore } = useDevtoolsContext()
+
+  const plugins = createMemo(() => store.plugins)
+  const activePlugin = createMemo(() => store.state.activePlugin)
+
+  const setActivePlugin = (plugin: DevtoolsPlugin) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        activePlugin: plugin,
+      },
+    }))
+  }
+
+  return { plugins, setActivePlugin, activePlugin }
+}
+
+export const useDevtoolsState = () => {
+  const { store, setStore } = useDevtoolsContext()
+  const state = createMemo(() => store.state)
+  const setState = (newState: Partial<DevtoolsStore['state']>) => {
+    setStore((prev) => ({
+      ...prev,
+      state: {
+        ...prev.state,
+        ...newState,
+      },
+    }))
+  }
+  return { state, setState }
+}
+
+export const useDevtoolsSettings = () => {
+  const { store, setStore } = useDevtoolsContext()
+
+  const settings = createMemo(() => store.settings)
+
+  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {
+    setStore((prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        ...newSettings,
+      },
+    }))
+  }
+
+  return { setSettings, settings }
+}
+
+export const usePersistOpen = () => {
+  const { state, setState } = useDevtoolsState()
+
+  const persistOpen = createMemo(() => state().persistOpen)
+
+  const setPersistOpen = (value: boolean) => {
+    setState({ persistOpen: value })
+  }
+
+  return { persistOpen, setPersistOpen }
+}
+
+export const useHeight = () => {
+  const { state, setState } = useDevtoolsState()
+
+  const height = createMemo(() => state().height)
+
+  const setHeight = (newHeight: number) => {
+    setState({ height: newHeight })
+  }
+
+  return { height, setHeight }
+}

package/src/core.tsx

@@ -0,0 +1,71 @@
+import { lazy } from 'solid-js'
+import { Portal, render } from 'solid-js/web'
+import { DevtoolsProvider } from './context/devtools-context'
+import { initialState } from './context/devtools-store'
+import type {
+  DevtoolsPlugin,
+  DevtoolsSettings,
+} from './context/devtools-context'
+
+export interface DevtoolsOptions {
+  options?: Partial<DevtoolsSettings>
+  plugins?: Array<DevtoolsPlugin>
+}
+
+class TanStackDevtoolsCore {
+  #options: DevtoolsSettings = {
+    ...initialState.settings,
+  }
+  #plugins: Array<DevtoolsPlugin> = []
+  #isMounted = false
+  #dispose?: () => void
+  #Component: any
+
+  constructor(config: DevtoolsOptions) {
+    this.#plugins = config.plugins || []
+    this.#options = {
+      ...this.#options,
+      ...config.options,
+    }
+  }
+
+  mount<T extends HTMLElement>(el: T) {
+    if (this.#isMounted) {
+      throw new Error('Devtools is already mounted')
+    }
+    const mountTo = el
+    const dispose = render(() => {
+      this.#Component = lazy(() => import('./devtools'))
+
+      const Devtools = this.#Component
+
+      return (
+        <DevtoolsProvider plugins={this.#plugins} config={this.#options}>
+          <Portal mount={mountTo}>
+            <Devtools />
+          </Portal>
+        </DevtoolsProvider>
+      )
+    }, mountTo)
+
+    this.#isMounted = true
+    this.#dispose = dispose
+  }
+
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error('Devtools is not mounted')
+    }
+    this.#dispose?.()
+    this.#isMounted = false
+  }
+
+  setOptions(options: Partial<DevtoolsOptions>) {
+    this.#options = {
+      ...this.#options,
+      ...options,
+    }
+  }
+}
+
+export { TanStackDevtoolsCore as TanStackRouterDevtoolsCore }

package/src/devtools.tsx

@@ -0,0 +1,146 @@
+import { createEffect, createSignal } from 'solid-js'
+import { createShortcut } from '@solid-primitives/keyboard'
+import {
+  useDevtoolsSettings,
+  useHeight,
+  usePersistOpen,
+} from './context/use-devtools-context'
+import { useDisableTabbing } from './hooks/use-disable-tabbing'
+import { TANSTACK_DEVTOOLS } from './utils/storage'
+import { Trigger } from './components/trigger'
+import { MainPanel } from './components/main-panel'
+import { ContentPanel } from './components/content-panel'
+import { Tabs } from './components/tabs'
+import { TabContent } from './components/tab-content'
+
+export default function DevTools() {
+  const { settings } = useDevtoolsSettings()
+  const { setHeight } = useHeight()
+  const { persistOpen, setPersistOpen } = usePersistOpen()
+  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()
+  const [isOpen, setIsOpen] = createSignal(
+    settings().defaultOpen || persistOpen(),
+  )
+  let panelRef: HTMLDivElement | undefined = undefined
+  const [isResizing, setIsResizing] = createSignal(false)
+  const toggleOpen = () => {
+    const open = isOpen()
+    setIsOpen(!open)
+    setPersistOpen(!open)
+  }
+
+  // Used to resize the panel
+  const handleDragStart = (
+    panelElement: HTMLDivElement | undefined,
+    startEvent: MouseEvent,
+  ) => {
+    if (startEvent.button !== 0) return // Only allow left click for drag
+
+    setIsResizing(true)
+
+    const dragInfo = {
+      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
+      pageY: startEvent.pageY,
+    }
+
+    const run = (moveEvent: MouseEvent) => {
+      const delta = dragInfo.pageY - moveEvent.pageY
+      const newHeight = dragInfo.originalHeight + delta
+
+      setHeight(newHeight)
+
+      if (newHeight < 70) {
+        setIsOpen(false)
+      } else {
+        setIsOpen(true)
+      }
+    }
+
+    const unsub = () => {
+      setIsResizing(false)
+      document.removeEventListener('mousemove', run)
+      document.removeEventListener('mouseUp', unsub)
+    }
+
+    document.addEventListener('mousemove', run)
+    document.addEventListener('mouseup', unsub)
+  }
+
+  // Handle resizing and padding adjustments
+  createEffect(() => {
+    if (isOpen()) {
+      const previousValue = rootEl()?.parentElement?.style.paddingBottom
+
+      const run = () => {
+        const containerHeight = panelRef!.getBoundingClientRect().height
+        if (rootEl()?.parentElement) {
+          setRootEl((prev) => {
+            if (prev?.parentElement) {
+              prev.parentElement.style.paddingBottom = `${containerHeight}px`
+            }
+            return prev
+          })
+        }
+      }
+
+      run()
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', run)
+
+        return () => {
+          window.removeEventListener('resize', run)
+          if (rootEl()?.parentElement && typeof previousValue === 'string') {
+            setRootEl((prev) => {
+              prev!.parentElement!.style.paddingBottom = previousValue
+              return prev
+            })
+          }
+        }
+      }
+    } else {
+      // Reset padding when devtools are closed
+      if (rootEl()?.parentElement) {
+        setRootEl((prev) => {
+          if (prev?.parentElement) {
+            prev.parentElement.removeAttribute('style')
+          }
+          return prev
+        })
+      }
+    }
+    return
+  })
+  createEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && isOpen()) {
+        toggleOpen()
+      }
+    })
+  })
+  useDisableTabbing(isOpen)
+  createEffect(() => {
+    if (rootEl()) {
+      const el = rootEl()
+      const fontSize = getComputedStyle(el!).fontSize
+      el?.style.setProperty('--tsrd-font-size', fontSize)
+    }
+  })
+  createShortcut(settings().openHotkey, () => {
+    toggleOpen()
+  })
+  return (
+    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
+      <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+      <MainPanel isResizing={isResizing} isOpen={isOpen}>
+        <ContentPanel
+          ref={(ref) => (panelRef = ref)}
+          handleDragStart={(e) => handleDragStart(panelRef, e)}
+        >
+          <Tabs toggleOpen={toggleOpen} />
+          <TabContent />
+        </ContentPanel>
+      </MainPanel>
+    </div>
+  )
+}

package/src/hooks/use-disable-tabbing.ts

@@ -0,0 +1,28 @@
+import { createEffect } from 'solid-js'
+import { TANSTACK_DEVTOOLS } from '../utils/storage'
+
+const recursivelyChangeTabIndex = (
+  node: Element | HTMLElement,
+  remove = true,
+) => {
+  if (remove) {
+    node.setAttribute('tabIndex', '-1')
+  } else {
+    node.removeAttribute('tabIndex')
+  }
+  for (const child of node.children) {
+    recursivelyChangeTabIndex(child, remove)
+  }
+}
+/**
+ * @param isOpen A function that returns whether the devtools are open or not.
+ * This is used to disable tabbing over the main devtools container while
+ * the devtools are closed.
+ */
+export const useDisableTabbing = (isOpen: () => boolean) => {
+  createEffect(() => {
+    const el = document.getElementById(TANSTACK_DEVTOOLS)
+    if (!el) return
+    recursivelyChangeTabIndex(el, !isOpen())
+  })
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { TanStackRouterDevtoolsCore } from './core'
+export type { DevtoolsOptions } from './core'
+export type { DevtoolsPlugin } from './context/devtools-context'