@tanstack/devtools 0.6.20 → 0.6.22

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XFQ6P775.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XF4JFOLU.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -14,6 +14,7 @@ var TanStackDevtoolsCore = class {
   #Component;
   #eventBus;
   #eventBusConfig;
+  #setPlugins;
   constructor(init) {
     this.#plugins = init.plugins || [];
     this.#eventBusConfig = init.eventBusConfig;
@@ -29,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/6XAY2RKM.js'));
+      this.#Component = lazy(() => import('./devtools/YRFZDV5N.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();
@@ -40,6 +41,9 @@ var TanStackDevtoolsCore = class {
         get config() {
           return _self$.#config;
         },
+        onSetPlugins: (setPlugins) => {
+          _self$.#setPlugins = setPlugins;
+        },
         get children() {
           return createComponent(PiPProvider, {
             get children() {
@@ -70,6 +74,12 @@ var TanStackDevtoolsCore = class {
       ...this.#config,
       ...config
     };
+    if (config.plugins) {
+      this.#plugins = config.plugins;
+      if (this.#isMounted && this.#setPlugins) {
+        this.#setPlugins(config.plugins);
+      }
+    }
   }
 };
 

package/dist/server.js

@@ -1,5 +1,5 @@
-import { initialState } from './chunk/XFQ6P775.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
+import { initialState } from './chunk/XF4JFOLU.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
 import 'solid-js/web';
 import 'solid-js';
 import '@tanstack/devtools-event-bus/client';
@@ -14,6 +14,7 @@ var TanStackDevtoolsCore = class {
   #Component;
   #eventBus;
   #eventBusConfig;
+  #setPlugins;
   constructor(init) {
     this.#plugins = init.plugins || [];
     this.#eventBusConfig = init.eventBusConfig;
@@ -38,6 +39,12 @@ var TanStackDevtoolsCore = class {
       ...this.#config,
       ...config
     };
+    if (config.plugins) {
+      this.#plugins = config.plugins;
+      if (this.#isMounted && this.#setPlugins) {
+        this.#setPlugins(config.plugins);
+      }
+    }
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -49,12 +49,15 @@
     "src"
   ],
   "dependencies": {
+    "@solid-primitives/event-listener": "^2.4.3",
     "@solid-primitives/keyboard": "^1.3.3",
+    "@solid-primitives/resize-observer": "^2.1.3",
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
-    "@tanstack/devtools-event-bus": "0.3.2",
-    "@tanstack/devtools-ui": "0.4.2"
+    "@tanstack/devtools-client": "0.0.3",
+    "@tanstack/devtools-event-bus": "0.3.3",
+    "@tanstack/devtools-ui": "0.4.3"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/components/source-inspector.tsx

@@ -0,0 +1,158 @@
+import { createEffect, createMemo, createSignal } from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { createElementSize } from '@solid-primitives/resize-observer'
+import { useKeyDownList } from '@solid-primitives/keyboard'
+import { createEventListener } from '@solid-primitives/event-listener'
+
+export const SourceInspector = () => {
+  const highlightStateInit = () => ({
+    element: null as HTMLElement | null,
+    bounding: { width: 0, height: 0, left: 0, top: 0 },
+    dataSource: '',
+  })
+
+  const [highlightState, setHighlightState] = createStore(highlightStateInit())
+  const resetHighlight = () => {
+    setHighlightState(highlightStateInit())
+  }
+
+  const [nameTagRef, setNameTagRef] = createSignal<HTMLDivElement | null>(null)
+  const nameTagSize = createElementSize(() => nameTagRef())
+
+  const [mousePosition, setMousePosition] = createStore({ x: 0, y: 0 })
+  createEventListener(document, 'mousemove', (e) => {
+    setMousePosition({ x: e.clientX, y: e.clientY })
+  })
+
+  const downList = useKeyDownList()
+  const isHighlightingKeysHeld = createMemo(() => {
+    const keys = downList()
+    const isShiftHeld = keys.includes('SHIFT')
+    const isCtrlHeld = keys.includes('CONTROL')
+    const isMetaHeld = keys.includes('META')
+    return isShiftHeld && (isCtrlHeld || isMetaHeld)
+  })
+
+  createEffect(() => {
+    if (!isHighlightingKeysHeld()) {
+      resetHighlight()
+      return
+    }
+
+    const target = document.elementFromPoint(mousePosition.x, mousePosition.y)
+
+    if (!(target instanceof HTMLElement)) {
+      resetHighlight()
+      return
+    }
+
+    if (target === highlightState.element) {
+      return
+    }
+
+    const dataSource = target.getAttribute('data-tsd-source')
+    if (!dataSource) {
+      resetHighlight()
+      return
+    }
+
+    const rect = target.getBoundingClientRect()
+    const bounding = {
+      width: rect.width,
+      height: rect.height,
+      left: rect.left,
+      top: rect.top,
+    }
+
+    setHighlightState({
+      element: target,
+      bounding,
+      dataSource,
+    })
+  })
+
+  createEventListener(document, 'click', (e) => {
+    if (!highlightState.element) return
+
+    window.getSelection()?.removeAllRanges()
+    e.preventDefault()
+    e.stopPropagation()
+
+    fetch(
+      `${location.origin}/__tsd/open-source?source=${encodeURIComponent(
+        highlightState.dataSource,
+      )}`,
+    ).catch(() => {})
+  })
+
+  const currentElementBoxStyles = createMemo(() => {
+    if (highlightState.element) {
+      return {
+        display: 'block',
+        width: `${highlightState.bounding.width}px`,
+        height: `${highlightState.bounding.height}px`,
+        left: `${highlightState.bounding.left}px`,
+        top: `${highlightState.bounding.top}px`,
+
+        'background-color': 'oklch(55.4% 0.046 257.417 /0.25)',
+        transition: 'all 0.05s linear',
+        position: 'fixed' as const,
+        'z-index': 9999,
+      }
+    }
+    return {
+      display: 'none',
+    }
+  })
+
+  const fileNameStyles = createMemo(() => {
+    if (highlightState.element && nameTagRef()) {
+      const windowWidth = window.innerWidth
+      const nameTagHeight = nameTagSize.height || 26
+      const nameTagWidth = nameTagSize.width || 0
+      let left = highlightState.bounding.left
+      let top = highlightState.bounding.top - nameTagHeight - 4
+
+      if (top < 0) {
+        top = highlightState.bounding.top + highlightState.bounding.height + 4
+      }
+
+      if (left + nameTagWidth > windowWidth) {
+        left = windowWidth - nameTagWidth - 4
+      }
+
+      if (left < 0) {
+        left = 4
+      }
+
+      return {
+        position: 'fixed' as const,
+        left: `${left}px`,
+        top: `${top}px`,
+        'background-color': 'oklch(55.4% 0.046 257.417 /0.80)',
+        color: 'white',
+        padding: '2px 4px',
+        fontSize: '12px',
+        'border-radius': '2px',
+        'z-index': 10000,
+        visibility: 'visible' as const,
+        transition: 'all 0.05s linear',
+      }
+    }
+    return {
+      display: 'none',
+    }
+  })
+
+  return (
+    <>
+      <div
+        ref={setNameTagRef}
+        style={{ ...fileNameStyles(), 'pointer-events': 'none' }}
+      >
+        {highlightState.dataSource}
+      </div>
+      <div style={{ ...currentElementBoxStyles(), 'pointer-events': 'none' }} />
+    </>
+  )
+}

package/src/context/devtools-context.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'solid-js'
+import { createContext, createEffect } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { tryParseJson } from '../utils/sanitize'
 import {
@@ -76,6 +76,9 @@ interface ContextProps {
   children: JSX.Element
   plugins?: Array<TanStackDevtoolsPlugin>
   config?: TanStackDevtoolsConfig
+  onSetPlugins?: (
+    setPlugins: (plugins: Array<TanStackDevtoolsPlugin>) => void,
+  ) => void
 }
 
 const getSettings = () => {
@@ -161,6 +164,26 @@ export const DevtoolsProvider = (props: ContextProps) => {
     getExistingStateFromStorage(props.config, props.plugins),
   )
 
+  // Provide a way for the core to update plugins reactively
+  const updatePlugins = (newPlugins: Array<TanStackDevtoolsPlugin>) => {
+    const pluginsWithIds = newPlugins.map((plugin, i) => {
+      const id = generatePluginId(plugin, i)
+      return {
+        ...plugin,
+        id,
+      }
+    })
+
+    setStore('plugins', pluginsWithIds)
+  }
+
+  // Call the callback to give core access to updatePlugins
+  createEffect(() => {
+    if (props.onSetPlugins) {
+      props.onSetPlugins(updatePlugins)
+    }
+  })
+
   const value = {
     store,
     setStore: (

package/src/core.tsx

@@ -50,6 +50,7 @@ export class TanStackDevtoolsCore {
   #Component: any
   #eventBus: ClientEventBus | undefined
   #eventBusConfig: ClientEventBusConfig | undefined
+  #setPlugins?: (plugins: Array<TanStackDevtoolsPlugin>) => void
 
   constructor(init: TanStackDevtoolsInit) {
     this.#plugins = init.plugins || []
@@ -74,7 +75,13 @@ export class TanStackDevtoolsCore {
       this.#eventBus = new ClientEventBus(this.#eventBusConfig)
       this.#eventBus.start()
       return (
-        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
+        <DevtoolsProvider
+          plugins={this.#plugins}
+          config={this.#config}
+          onSetPlugins={(setPlugins) => {
+            this.#setPlugins = setPlugins
+          }}
+        >
           <PiPProvider>
             <Portal mount={mountTo}>
               <Devtools />
@@ -102,6 +109,13 @@ export class TanStackDevtoolsCore {
       ...this.#config,
       ...config,
     }
+    if (config.plugins) {
+      this.#plugins = config.plugins
+      // Update the reactive store if mounted
+      if (this.#isMounted && this.#setPlugins) {
+        this.#setPlugins(config.plugins)
+      }
+    }
   }
 }
 

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
 import { Portal } from 'solid-js/web'
 import { ThemeContextProvider } from '@tanstack/devtools-ui'
@@ -18,6 +18,7 @@ import { TabContent } from './components/tab-content'
 import { keyboardModifiers } from './context/devtools-store'
 import { getAllPermutations } from './utils/sanitize'
 import { usePiPWindow } from './context/pip-context'
+import { SourceInspector } from './components/source-inspector'
 
 export default function DevTools() {
   const { settings } = useDevtoolsSettings()
@@ -159,33 +160,6 @@ export default function DevTools() {
     }
   })
 
-  createEffect(() => {
-    // this will only work with the Vite plugin
-    const openSourceHandler = (e: Event) => {
-      const isShiftHeld = (e as KeyboardEvent).shiftKey
-      const isCtrlHeld =
-        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey
-      if (!isShiftHeld || !isCtrlHeld) return
-
-      if (e.target instanceof HTMLElement) {
-        const dataSource = e.target.getAttribute('data-tsd-source')
-        window.getSelection()?.removeAllRanges()
-        if (dataSource) {
-          e.preventDefault()
-          e.stopPropagation()
-          fetch(
-            `${location.origin}/__tsd/open-source?source=${encodeURIComponent(
-              dataSource,
-            )}`,
-          ).catch(() => {})
-        }
-      }
-    }
-    window.addEventListener('click', openSourceHandler)
-    onCleanup(() => {
-      window.removeEventListener('click', openSourceHandler)
-    })
-  })
   const { theme } = useTheme()
 
   return (
@@ -216,6 +190,7 @@ export default function DevTools() {
               </ContentPanel>
             </MainPanel>
           </Show>
+          <SourceInspector />
         </div>
       </Portal>
     </ThemeContextProvider>