feat(core,ui): trigger image support

[jakiestfu]

Howdy! I apologize for not reviewing the contributing guidelines more carefully and built this feature without first soliciting feedback from the team on the desire to implement this. I hope this request is received well.

This PR adds support for specifying a trigger image via the config object or via the UI. We are interested in using the devtools package for more than just the tanstack ecosystem, and would like to consider replacing it with our engineering/dev logo (even though we're using tanstack for all the things!) If no logo is provided, it will default to the tanstack logo in the package.

Via UI

Via Configuragion

<TanStackDevtools
  config={{
    triggerImage: "https://avatars.githubusercontent.com/u/1041792?v=4",
  }}
/>

[AlemTuzlak]

We actually planned to implement this, would this also work for relative paths in the project?

[jakiestfu]

@AlemTuzlak You can import images, use relative paths, etc.

import TanStackLogo from './logo.png' just ends up resolving to a data URI which is perfectly fine to use in the src, as well as a remote URL or a relative url, etc.

import Logo from "./assets/CompanyLogo.png"

export const CompanyDevTools = () => (
  <TanStackDevtools
    config={{
      triggerImage: Logo,
    }}
  />
)

[pkg-pr-new]

More templates

• @tanstack/devtools-example-react-basic
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-solid-start

@tanstack/devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools@134

@tanstack/devtools-ui

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-ui@134

@tanstack/devtools-vite

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-vite@134

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-bus@134

@tanstack/devtools-event-client

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@134

@tanstack/react-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@134

@tanstack/solid-devtools

npm i https://pkg.pr.new/TanStack/devtools/@tanstack/solid-devtools@134

commit: f6c2ab5