@tanstack/devtools 0.5.1 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "goober": "^2.1.16",
     "solid-js": "^1.9.7",
     "@tanstack/devtools-event-bus": "0.3.0",
-    "@tanstack/devtools-ui": "0.3.1"
+    "@tanstack/devtools-ui": "0.3.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/components/main-panel.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx'
+import { DrawClientProvider } from '../context/draw-context'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import { usePiPWindow } from '../context/pip-context'
+
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
@@ -30,7 +32,9 @@ export const MainPanel = (props: {
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      {props.children}
+      <DrawClientProvider animationMs={400}>
+        {props.children}
+      </DrawClientProvider>
     </div>
   )
 }

package/src/components/tabs.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { For } from 'solid-js'
 import { useStyles } from '../styles/use-styles'
 import { useDevtoolsState } from '../context/use-devtools-context'
+import { useDrawContext } from '../context/draw-context'
 import { tabs } from '../tabs'
 import { usePiPWindow } from '../context/pip-context'
 
@@ -18,6 +19,8 @@ export const Tabs = (props: TabsProps) => {
       `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
     )
   }
+  const { hoverUtils } = useDrawContext()
+
   return (
     <div class={styles().tabContainer}>
       <For each={tabs}>
@@ -26,6 +29,12 @@ export const Tabs = (props: TabsProps) => {
             type="button"
             onClick={() => setState({ activeTab: tab.id })}
             class={clsx(styles().tab, { active: state().activeTab === tab.id })}
+            onMouseEnter={() => {
+              if (tab.id === 'plugins') hoverUtils.enter()
+            }}
+            onMouseLeave={() => {
+              if (tab.id === 'plugins') hoverUtils.leave()
+            }}
           >
             {tab.icon}
           </button>

package/src/context/draw-context.tsx

@@ -0,0 +1,67 @@
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import type { ParentComponent } from 'solid-js'
+
+const useDraw = (props: { animationMs: number }) => {
+  const [activeHover, setActiveHover] = createSignal<boolean>(false)
+  const [forceExpand, setForceExpand] = createSignal<boolean>(false)
+
+  const expanded = createMemo(() => activeHover() || forceExpand())
+
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+  onCleanup(() => {
+    if (hoverTimeout) clearTimeout(hoverTimeout)
+  })
+
+  const hoverUtils = {
+    enter: () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout)
+        hoverTimeout = null
+      }
+      setActiveHover(true)
+    },
+
+    leave: () => {
+      hoverTimeout = setTimeout(() => {
+        setActiveHover(false)
+      }, props.animationMs)
+    },
+  }
+
+  return {
+    expanded,
+    setForceExpand,
+    hoverUtils,
+    animationMs: props.animationMs,
+  }
+}
+
+type ContextType = ReturnType<typeof useDraw>
+
+const DrawContext = createContext<ContextType | undefined>(undefined)
+
+export const DrawClientProvider: ParentComponent<{
+  animationMs: number
+}> = (props) => {
+  const value = useDraw({ animationMs: props.animationMs })
+
+  return (
+    <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>
+  )
+}
+
+export function useDrawContext() {
+  const context = useContext(DrawContext)
+
+  if (context === undefined) {
+    throw new Error(`useDrawContext must be used within a DrawClientProvider`)
+  }
+
+  return context
+}

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

@@ -1,6 +1,7 @@
-import { createMemo, useContext } from 'solid-js'
+import { createEffect, createMemo, useContext } from 'solid-js'
 import { DevtoolsContext } from './devtools-context.jsx'
-/* import type { DevtoolsPlugin } from './devtools-context' */
+import { useDrawContext } from './draw-context.jsx'
+
 import type { DevtoolsStore } from './devtools-store.js'
 
 /**
@@ -19,10 +20,19 @@ const useDevtoolsContext = () => {
 
 export const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext()
+  const { setForceExpand } = useDrawContext()
 
   const plugins = createMemo(() => store.plugins)
   const activePlugin = createMemo(() => store.state.activePlugin)
 
+  createEffect(() => {
+    if (activePlugin() == null) {
+      setForceExpand(false)
+    } else {
+      setForceExpand(true)
+    }
+  })
+
   const setActivePlugin = (pluginId: string) => {
     setStore((prev) => ({
       ...prev,

package/src/hooks/use-head-changes.ts

@@ -0,0 +1,110 @@
+import { onCleanup, onMount } from 'solid-js'
+
+type HeadChange =
+  | { kind: 'added'; node: Node }
+  | { kind: 'removed'; node: Node }
+  | {
+      kind: 'attr'
+      target: Element
+      name: string | null
+      oldValue: string | null
+    }
+  | { kind: 'title'; title: string }
+
+type UseHeadChangesOptions = {
+  /**
+   * Observe attribute changes on elements inside <head>
+   * Default: true
+   */
+  attributes?: boolean
+  /**
+   * Observe added/removed nodes in <head>
+   * Default: true
+   */
+  childList?: boolean
+  /**
+   * Observe descendants of <head>
+   * Default: true
+   */
+  subtree?: boolean
+  /**
+   * Also observe <title> changes explicitly
+   * Default: true
+   */
+  observeTitle?: boolean
+}
+
+export function useHeadChanges(
+  onChange: (change: HeadChange, raw?: MutationRecord) => void,
+  opts: UseHeadChangesOptions = {},
+) {
+  const {
+    attributes = true,
+    childList = true,
+    subtree = true,
+    observeTitle = true,
+  } = opts
+
+  onMount(() => {
+    const headObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'childList') {
+          m.addedNodes.forEach((node) => onChange({ kind: 'added', node }, m))
+          m.removedNodes.forEach((node) =>
+            onChange({ kind: 'removed', node }, m),
+          )
+        } else if (m.type === 'attributes') {
+          const el = m.target as Element
+          onChange(
+            {
+              kind: 'attr',
+              target: el,
+              name: m.attributeName,
+              oldValue: m.oldValue ?? null,
+            },
+            m,
+          )
+        } else {
+          // If someone mutates a Text node inside <title>, surface it as a title change.
+          const isInTitle =
+            m.target.parentNode &&
+            (m.target.parentNode as Element).tagName.toLowerCase() === 'title'
+          if (isInTitle) onChange({ kind: 'title', title: document.title }, m)
+        }
+      }
+    })
+
+    headObserver.observe(document.head, {
+      childList,
+      attributes,
+      subtree,
+      attributeOldValue: attributes,
+      characterData: true, // helps catch <title> text node edits
+      characterDataOldValue: false,
+    })
+
+    // Extra explicit observer for <title>, since `document.title = "..."`
+    // may not always bubble as a head mutation in all setups.
+    let titleObserver: MutationObserver | undefined
+    if (observeTitle) {
+      const titleEl =
+        document.head.querySelector('title') ||
+        // create a <title> if missing so future changes are observable
+        document.head.appendChild(document.createElement('title'))
+
+      titleObserver = new MutationObserver(() => {
+        onChange({ kind: 'title', title: document.title })
+      })
+      titleObserver.observe(titleEl, {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      })
+    }
+
+    onCleanup(() => {
+      headObserver.disconnect()
+      titleObserver?.disconnect()
+    })
+  })
+}

package/src/styles/use-styles.ts

@@ -4,12 +4,132 @@ import { tokens } from './tokens'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
 
+const mSecondsToCssSeconds = (mSeconds: number) =>
+  `${(mSeconds / 1000).toFixed(2)}s`
+
 const stylesFactory = () => {
   const { colors, font, size, alpha, border } = tokens
   const { fontFamily, size: fontSize } = font
   const css = goober.css
 
   return {
+    seoTabContainer: css`
+      padding: 0;
+      margin: 0 auto;
+      background: ${colors.darkGray[700]};
+      border-radius: 12px;
+      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
+      overflow-y: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      width: 100%;
+      overflow-y: auto;
+    `,
+    seoTabTitle: css`
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: ${colors.purple[400]};
+      margin: 0;
+      padding: 1rem 1.5rem 0.5rem 1.5rem;
+      text-align: left;
+      border-bottom: 1px solid ${colors.gray[700]};
+    `,
+    seoTabSection: css`
+      padding: 1.5rem;
+      background: ${colors.darkGray[800]};
+      border: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+      border-radius: 0.75rem;
+    `,
+    seoPreviewSection: css`
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      margin-bottom: 0;
+      justify-content: flex-start;
+      align-items: flex-start;
+      overflow-x: auto;
+      flex-wrap: wrap;
+      padding-bottom: 0.5rem;
+    `,
+    seoPreviewCard: css`
+      border: 1px solid ${colors.gray[700]};
+      border-radius: 8px;
+      padding: 12px 10px;
+      background: ${colors.darkGray[900]};
+      margin-bottom: 0;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 200px;
+      max-width: 240px;
+      font-size: 0.95rem;
+      gap: 4px;
+    `,
+    seoPreviewHeader: css`
+      font-size: 1rem;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: ${colors.purple[400]};
+    `,
+    seoPreviewImage: css`
+      max-width: 100%;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+      height: 160px;
+    `,
+    seoPreviewTitle: css`
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: ${colors.gray[100]};
+    `,
+    seoPreviewDesc: css`
+      color: ${colors.gray[300]};
+      margin-bottom: 2px;
+      font-size: 0.95rem;
+    `,
+    seoPreviewUrl: css`
+      color: ${colors.gray[500]};
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+      word-break: break-all;
+    `,
+    seoMissingTagsSection: css`
+      margin-top: 4px;
+      font-size: 0.95rem;
+      color: ${colors.red[400]};
+    `,
+    seoMissingTagsList: css`
+      margin: 4px 0 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      max-width: 240px;
+    `,
+    seoMissingTag: css`
+      background: ${colors.red[500]}22;
+      color: ${colors.red[500]};
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    `,
+    seoAllTagsFound: css`
+      color: ${colors.green[500]};
+      font-weight: 500;
+      margin-left: 6px;
+      font-size: 0.95rem;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,
@@ -231,13 +351,37 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
+
+    pluginsTabDraw: css`
+      width: 0px;
+      height: 100%;
       background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
       box-shadow: 0 1px 0 ${colors.gray[700]};
+    `,
+    pluginsTabDrawExpanded: css`
+      width: ${size[48]};
+      border-right: 1px solid ${colors.gray[700]};
+    `,
+    pluginsTabDrawTransition: (mSeconds: number) => {
+      return css`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
+    pluginsTabSidebar: css`
+      width: ${size[48]};
       overflow-y: auto;
+      transform: translateX(-100%);
+    `,
+    pluginsTabSidebarExpanded: css`
+      transform: translateX(0);
     `,
+    pluginsTabSidebarTransition: (mSeconds: number) => {
+      return css`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `
+    },
+
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
@@ -262,42 +406,6 @@ const stylesFactory = () => {
       overflow-y: auto;
     `,
 
-    settingsContainer: css`
-      padding: 1.5rem;
-      height: 100%;
-      overflow-y: auto;
-      background-color: ${colors.darkGray[700]};
-    `,
-    settingsSection: css`
-      margin-bottom: 2rem;
-      padding: 1.5rem;
-      background-color: ${colors.darkGray[800]};
-      border: 1px solid ${colors.gray[700]};
-      border-radius: 0.75rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    `,
-    sectionTitle: css`
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: ${colors.gray[100]};
-      margin: 0 0 1rem 0;
-      padding-bottom: 0.5rem;
-      border-bottom: 1px solid ${colors.gray[700]};
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      text-align: left;
-    `,
-    sectionIcon: css`
-      color: ${colors.purple[400]};
-    `,
-    sectionDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.875rem;
-      margin: 0 0 1.5rem 0;
-      line-height: 1.5;
-      text-align: left;
-    `,
     settingsGroup: css`
       display: flex;
       flex-direction: column;

package/src/tabs/index.tsx

@@ -1,5 +1,6 @@
 import { SettingsTab } from './settings-tab'
 import { PluginsTab } from './plugins-tab'
+import { SeoTab } from './seo-tab'
 
 export const tabs = [
   {
@@ -24,6 +25,30 @@ export const tabs = [
       </svg>
     ),
   },
+  {
+    name: 'SEO',
+    id: 'seo',
+    component: () => <SeoTab />,
+    icon: (
+      <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"
+        class="lucide lucide-file-search2-icon lucide-file-search-2"
+      >
+        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+        <circle cx="11.5" cy="14.5" r="2.5" />
+        <path d="M13.3 16.3 15 18" />
+      </svg>
+    ),
+  },
   {
     name: 'Settings',
     id: 'settings',

package/src/tabs/plugins-tab.tsx

@@ -1,11 +1,13 @@
 import { For, createEffect } from 'solid-js'
 import clsx from 'clsx'
+import { useDrawContext } from '../context/draw-context'
 import { usePlugins } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  const { expanded, hoverUtils, animationMs } = useDrawContext()
   let activePluginRef: HTMLDivElement | undefined
 
   createEffect(() => {
@@ -17,32 +19,58 @@ export const PluginsTab = () => {
     }
   })
   const styles = useStyles()
+
   return (
     <div class={styles().pluginsTabPanel}>
-      <div class={styles().pluginsTabSidebar}>
-        <For each={plugins()}>
-          {(plugin) => {
-            let pluginHeading: HTMLHeadingElement | undefined
-            createEffect(() => {
-              if (pluginHeading) {
-                typeof plugin.name === 'string'
-                  ? (pluginHeading.textContent = plugin.name)
-                  : plugin.name(pluginHeading)
-              }
-            })
-            return (
-              <div
-                onClick={() => setActivePlugin(plugin.id!)}
-                class={clsx(styles().pluginName, {
-                  active: activePlugin() === plugin.id,
-                })}
-              >
-                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
-              </div>
-            )
-          }}
-        </For>
+      <div
+        class={clsx(
+          styles().pluginsTabDraw,
+          {
+            [styles().pluginsTabDrawExpanded]: expanded(),
+          },
+          styles().pluginsTabDrawTransition(animationMs),
+        )}
+        onMouseEnter={() => {
+          hoverUtils.enter()
+        }}
+        onMouseLeave={() => {
+          hoverUtils.leave()
+        }}
+      >
+        <div
+          class={clsx(
+            styles().pluginsTabSidebar,
+            {
+              [styles().pluginsTabSidebarExpanded]: expanded(),
+            },
+            styles().pluginsTabSidebarTransition(animationMs),
+          )}
+        >
+          <For each={plugins()}>
+            {(plugin) => {
+              let pluginHeading: HTMLHeadingElement | undefined
+              createEffect(() => {
+                if (pluginHeading) {
+                  typeof plugin.name === 'string'
+                    ? (pluginHeading.textContent = plugin.name)
+                    : plugin.name(pluginHeading)
+                }
+              })
+              return (
+                <div
+                  onClick={() => setActivePlugin(plugin.id!)}
+                  class={clsx(styles().pluginName, {
+                    active: activePlugin() === plugin.id,
+                  })}
+                >
+                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
+                </div>
+              )
+            }}
+          </For>
+        </div>
       </div>
+
       <div
         id={PLUGIN_CONTAINER_ID}
         ref={activePluginRef}