feat: add web components to devtools

Author: AlemTuzlak

examples/react/basic/src/index.tsx

@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client'
+import { useEffect, useState } from 'react'
 import Devtools from './setup'
 import { queryPlugin } from './plugin'
 
@@ -15,13 +16,31 @@ queryPlugin.on('test', (event) => {
 })
 
 function App() {
+  const [value, setValue] = useState<any>(({
+    initial: "value",
+    should: "change",
+    in: 2,
+    array: [
+      1, 2, 3
+    ]
+  }))
+  useEffect(() => {
+    setTimeout(() => {
+      setValue(({ title: 'Test Event', description: 'This is a test event.' }))
+    }, 2000)
+  }, [])
+  // console.log('Current value:', value)
   return (
     <div>
       <h1>TanStack Devtools React Basic Example</h1>
+      <tsd-json-tree
+        value={JSON.stringify(value)}
+      />
       <Devtools />
     </div>
   )
 }
 
+
 const root = createRoot(document.getElementById('root')!)
 root.render(<App />)

examples/react/start/src/components/client-plugin.tsx

@@ -1,5 +1,5 @@
-import { queryPlugin } from '@/plugin'
 import { useEffect, useState } from 'react'
+import { queryPlugin } from '@/plugin'
 
 export default function ClientPlugin() {
   const [events, setEvents] = useState<
@@ -17,6 +17,7 @@ export default function ClientPlugin() {
     <div>
       <h1>Client Plugin Initialized</h1>
       <p>Devtools Client is connected.</p>
+
       <button
         className="bg-blue-500 text-white px-4 py-2 rounded"
         onClick={() => {

examples/solid/basic/src/setup.tsx

@@ -22,6 +22,7 @@ const rootRoute = createRootRoute({
           About
         </Link>
       </div>
+      <tsd-json-tree value={{ title: 'Test Event', description: 'This is a test event.' }} />
       <hr />
       <Outlet />
     </>
@@ -43,6 +44,7 @@ function About() {
   return (
     <div class="p-2">
       <h3>Hello from About!</h3>
+
     </div>
   )
 }

packages/devtools-ui/package.json

@@ -32,6 +32,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./types": {
+      "import": {
+        "types": "./dist/esm/types.d.ts",
+        "default": "./dist/esm/types.js"
+      },
+      "require": {
+        "types": "./dist/cjs/types.d.cts",
+        "default": "./dist/cjs/types.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -55,12 +65,15 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
+    "solid-element": "^1.9.1",
     "solid-js": "^1.9.7"
   },
   "peerDependencies": {
+    "@types/react": ">=17.0.0",
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.6"
+    "vite-plugin-solid": "^2.11.6",
+    "@types/react": "19.1.10"
   }
-}
+}

packages/devtools-ui/src/components/tree.tsx

@@ -1,8 +1,10 @@
-import { For, Show, createSignal } from 'solid-js'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 import clsx from 'clsx'
+import { customElement, noShadowDOM } from "solid-element"
 import { useStyles } from '../styles/use-styles'
 
 export function JsonTree(props: { value: any }) {
+
   return <JsonValue isRoot value={props.value} />
 }
 
@@ -165,3 +167,33 @@ const ObjectValue = ({
     </span>
   )
 }
+
+
+export const registerJsonTreeComponent = (elName: string = "tsd-json-tree") => customElement(elName, { value: {}, }, (props, { element }) => {
+  noShadowDOM()
+  function getValue(value: any) {
+
+    if (typeof value === 'string') {
+      try {
+        const parsedValue = JSON.parse(value)
+        return parsedValue
+      } catch (e) {
+        return value
+      }
+    }
+    return value
+  }
+  const [value, setValue] = createSignal(getValue(props.value))
+
+  createEffect(() => {
+    element.addPropertyChangedCallback((name, value) => {
+      if (name === "value") {
+        const finalValue = getValue(value)
+        setValue(finalValue)
+      }
+    })
+  })
+  return <Show keyed when={value()}><JsonTree value={value()} /></Show>
+})
+
+

packages/devtools-ui/src/index.ts

@@ -2,6 +2,6 @@ export { Checkbox } from './components/checkbox'
 export { Input } from './components/input'
 export { Select } from './components/select'
 export { TanStackLogo } from './components/logo'
-export { JsonTree } from './components/tree'
+export { JsonTree, registerJsonTreeComponent } from './components/tree'
 export { Button } from './components/button'
 export { Tag } from './components/tag'

packages/devtools-ui/src/types.ts

@@ -0,0 +1,23 @@
+import type { } from "react";
+import type { } from "solid-js";
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'tsd-json-tree': { value: any, }
+    }
+  }
+}
+
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'tsd-json-tree': { value: any }
+    }
+  }
+}
+
+type _ = string
+export type { _ }

packages/devtools-ui/vite.config.ts

@@ -19,7 +19,7 @@ const config = defineConfig({
 export default mergeConfig(
   config,
   tanstackViteConfig({
-    entry: ['./src/index.ts'],
+    entry: ['./src/index.ts', "./src/types.ts"],
     srcDir: './src',
   }),
 )

packages/devtools/src/core.tsx

@@ -1,6 +1,7 @@
 import { lazy } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
+import { registerJsonTreeComponent } from '@tanstack/devtools-ui'
 import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
 import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
@@ -9,6 +10,7 @@ import type {
   TanStackDevtoolsPlugin,
 } from './context/devtools-context'
 
+
 export interface TanStackDevtoolsInit {
   /**
    * Configuration for the devtools shell. These configuration options are used to set the
@@ -69,6 +71,7 @@ export class TanStackDevtoolsCore {
       const Devtools = this.#Component
       this.#eventBus = new ClientEventBus(this.#eventBusConfig)
       this.#eventBus.start()
+      registerJsonTreeComponent();
       return (
         <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>
@@ -87,6 +90,7 @@ export class TanStackDevtoolsCore {
       throw new Error('Devtools is not mounted')
     }
     this.#eventBus?.stop()
+
     this.#dispose?.()
     this.#isMounted = false
   }

packages/devtools/src/index.ts

@@ -1,7 +1,11 @@
+import type { _ } from "@tanstack/devtools-ui/types"
+
 export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants'
 export { TanStackDevtoolsCore } from './core'
 export type { TanStackDevtoolsInit, ClientEventBusConfig } from './core'
 export type {
   TanStackDevtoolsPlugin,
   TanStackDevtoolsConfig,
 } from './context/devtools-context'
+
+export type { _ }