feat: button web component

Author: AlemTuzlak

examples/react/basic/src/index.tsx

@@ -32,6 +32,7 @@ function App() {
     <div>
       <h1>TanStack Devtools React Basic Example</h1>
       <tsd-json-tree value={JSON.stringify(value)} />
+      <tsd-button text="test" ghost={true} outline={true} value='test' variant="secondary" onClick={() => console.log('Button clicked!')} />
       <Devtools />
     </div>
   )

examples/solid/basic/src/setup.tsx

@@ -25,6 +25,7 @@ const rootRoute = createRootRoute({
       <tsd-json-tree
         value={{ title: 'Test Event', description: 'This is a test event.' }}
       />
+      <tsd-button text="test" value='test' variant="secondary" onClick={() => console.log('Button clicked!')} />
       <hr />
       <Outlet />
     </>

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

@@ -1,5 +1,6 @@
-import { splitProps } from 'solid-js'
+import { Show, createEffect, createSignal, splitProps } from 'solid-js'
 import clsx from 'clsx'
+import { customElement, noShadowDOM } from 'solid-element'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js'
 
@@ -10,12 +11,14 @@ export type ButtonVariant =
   | 'success'
   | 'info'
   | 'warning'
-type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+
+export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: ButtonVariant
   outline?: boolean
   ghost?: boolean
   children?: any
   className?: string
+  text?: string
 }
 
 export function Button(props: ButtonProps) {
@@ -40,3 +43,27 @@ export function Button(props: ButtonProps) {
     </button>
   )
 }
+
+export interface ButtonWebComponentProps extends Exclude<ButtonProps, "children"> {
+  text: string
+}
+
+export const registerButtonComponent = (elName: string = 'tsd-button') =>
+  customElement<ButtonWebComponentProps>(elName, { variant: 'primary', outline: false, ghost: false, text: "" }, (props, { element }) => {
+    noShadowDOM()
+    const [buttonProps, setButtonProps] = createSignal(props)
+
+    createEffect(() => {
+      element.addPropertyChangedCallback((name, value) => {
+        setButtonProps((prev) => ({ ...prev, [name]: value }))
+      })
+    })
+
+    return (
+      <Show keyed when={buttonProps()}>
+        <Button {...buttonProps()}>
+          {buttonProps().text}
+        </Button>
+      </Show>
+    )
+  })

packages/devtools-ui/src/index.ts

@@ -3,7 +3,8 @@ export { Input } from './components/input'
 export { Select } from './components/select'
 export { TanStackLogo } from './components/logo'
 export { JsonTree, registerJsonTreeComponent } from './components/tree'
-export { Button } from './components/button'
+export { Button, registerButtonComponent } from './components/button'
 export { Tag } from './components/tag'
 export type { JsonTreeWebComponentProps } from './components/tree'
+export type { ButtonProps } from './components/button'
 export type { CustomElements } from './types'

packages/devtools-ui/src/types.ts

@@ -1,5 +1,7 @@
+import type { ButtonWebComponentProps } from './components/button'
 import type { JsonTreeWebComponentProps } from './components/tree'
 
 export interface CustomElements {
   'tsd-json-tree': JsonTreeWebComponentProps
+  'tsd-button': ButtonWebComponentProps
 }

packages/devtools/src/core.tsx

@@ -1,7 +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 { registerButtonComponent, 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'
@@ -71,6 +71,7 @@ export class TanStackDevtoolsCore {
       this.#eventBus = new ClientEventBus(this.#eventBusConfig)
       this.#eventBus.start()
       registerJsonTreeComponent()
+      registerButtonComponent()
       return (
         <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>