@tanstack/preact-devtools 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# @tanstack/preact-devtools
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## Usage
+
+```tsx
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+import { PreactQueryDevtoolsPanel } from '@tanstack/preact-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/preact-router-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
+const queryClient = new QueryClient()
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <h1>My App</h1>
+      <TanStackDevtools
+        plugins={[
+          {
+            name: 'TanStack Query',
+            render: <PreactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+    </QueryClientProvider>
+  )
+}
+```
+
+## Creating plugins
+
+In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/preact-devtools'
+
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <TanStackDevtools
+        plugins={[
+          {
+            id: 'your-plugin-id',
+            name: 'Your Plugin',
+            render: <CustomPluginComponent />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
+```

package/dist/esm/devtools.d.ts

@@ -0,0 +1,94 @@
+import { JSX } from 'preact';
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+type PluginRender = JSX.Element | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element);
+type TriggerProps = {
+    theme: 'dark' | 'light';
+};
+type TriggerRender = JSX.Element | ((el: HTMLElement, props: TriggerProps) => JSX.Element);
+export type TanStackDevtoolsPreactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
+    /**
+     * The render function can be a Preact element or a function that returns a Preact element.
+     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     render: <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    render: PluginRender;
+    /**
+     * Name to be displayed in the devtools UI.
+     * If a string, it will be used as the plugin name.
+     * If a function, it will be called with the mount element.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     name: "Your Plugin",
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     name:  <h1>Your Plugin title</h1>,
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    name: string | PluginRender;
+};
+type TanStackDevtoolsPreactConfig = Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {
+    /**
+     * Optional custom trigger component for the devtools.
+     * It can be a Preact element or a function that renders one.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     customTrigger: <CustomTriggerComponent />,
+     *   }
+     * ```
+     */
+    customTrigger?: TriggerRender;
+};
+export interface TanStackDevtoolsPreactInit {
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin should have a `render` function that returns a Preact element or a function
+     *
+     * Example:
+     * ```jsx
+     * <TanStackDevtools
+     *   plugins={[
+     *     {
+     *       id: "your-plugin-id",
+     *       name: "Your Plugin",
+     *       render: <CustomPluginComponent />,
+     *     }
+     *   ]}
+     * />
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsPreactPlugin>;
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: TanStackDevtoolsPreactConfig;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
+}
+export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsPreactInit) => JSX.Element | null;
+export {};

package/dist/esm/devtools.js

@@ -0,0 +1,122 @@
+import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from "preact/hooks";
+import { render } from "preact";
+import { TanStackDevtoolsCore } from "@tanstack/devtools";
+function Portal({
+  children,
+  container
+}) {
+  useEffect(() => {
+    render(children, container);
+    return () => {
+      render(null, container);
+    };
+  }, [children, container]);
+  return null;
+}
+const convertRender = (Component, setComponents, e, theme) => {
+  const element = typeof Component === "function" ? Component(e, theme) : Component;
+  setComponents((prev) => ({
+    ...prev,
+    [e.getAttribute("id")]: element
+  }));
+};
+const convertTrigger = (Component, setComponent, e, props) => {
+  const element = typeof Component === "function" ? Component(e, props) : Component;
+  setComponent(element);
+};
+const TanStackDevtools = ({
+  plugins,
+  config,
+  eventBusConfig
+}) => {
+  const devToolRef = useRef(null);
+  const [pluginContainers, setPluginContainers] = useState({});
+  const [titleContainers, setTitleContainers] = useState({});
+  const [triggerContainer, setTriggerContainer] = useState(
+    null
+  );
+  const [PluginComponents, setPluginComponents] = useState({});
+  const [TitleComponents, setTitleComponents] = useState({});
+  const [TriggerComponent, setTriggerComponent] = useState(
+    null
+  );
+  const pluginsMap = useMemo(
+    () => plugins?.map((plugin) => {
+      return {
+        ...plugin,
+        name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
+          const id = e.getAttribute("id");
+          const target = e.ownerDocument.getElementById(id);
+          if (target) {
+            setTitleContainers((prev) => ({
+              ...prev,
+              [id]: e
+            }));
+          }
+          convertRender(
+            plugin.name,
+            setTitleComponents,
+            e,
+            theme
+          );
+        },
+        render: (e, theme) => {
+          const id = e.getAttribute("id");
+          const target = e.ownerDocument.getElementById(id);
+          if (target) {
+            setPluginContainers((prev) => ({
+              ...prev,
+              [id]: e
+            }));
+          }
+          convertRender(plugin.render, setPluginComponents, e, theme);
+        }
+      };
+    }) ?? [],
+    [plugins]
+  );
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {};
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger ? (el, props) => {
+          setTriggerContainer(el);
+          convertTrigger(customTrigger, setTriggerComponent, el, props);
+        } : void 0
+      },
+      eventBusConfig,
+      plugins: pluginsMap
+    });
+  });
+  useEffect(() => {
+    devtools.setConfig({
+      plugins: pluginsMap
+    });
+  }, [devtools, pluginsMap]);
+  useEffect(() => {
+    if (devToolRef.current) {
+      devtools.mount(devToolRef.current);
+    }
+    return () => devtools.unmount();
+  }, [devtools]);
+  const hasPlugins = Object.values(pluginContainers).length > 0 && Object.values(PluginComponents).length > 0;
+  const hasTitles = Object.values(titleContainers).length > 0 && Object.values(TitleComponents).length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute" }, ref: devToolRef }),
+    hasPlugins ? Object.entries(pluginContainers).map(([key, pluginContainer]) => {
+      const component = PluginComponents[key];
+      return component ? /* @__PURE__ */ jsx(Portal, { container: pluginContainer, children: component }, key) : null;
+    }) : null,
+    hasTitles ? Object.entries(titleContainers).map(([key, titleContainer]) => {
+      const component = TitleComponents[key];
+      return component ? /* @__PURE__ */ jsx(Portal, { container: titleContainer, children: component }, key) : null;
+    }) : null,
+    triggerContainer && TriggerComponent ? /* @__PURE__ */ jsx(Portal, { container: triggerContainer, children: TriggerComponent }) : null
+  ] });
+};
+export {
+  TanStackDevtools
+};
+//# sourceMappingURL=devtools.js.map

package/dist/esm/devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'preact/hooks'\nimport { render } from 'preact'\nimport { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport type { JSX } from 'preact'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)\n\ntype TriggerProps = {\n  theme: 'dark' | 'light'\n}\n\ntype TriggerRender =\n  | JSX.Element\n  | ((el: HTMLElement, props: TriggerProps) => JSX.Element)\n\nexport type TanStackDevtoolsPreactPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a Preact element or a function that returns a Preact element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: PluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     name:  <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | PluginRender\n}\n\ntype TanStackDevtoolsPreactConfig = Omit<\n  Partial<TanStackDevtoolsConfig>,\n  'customTrigger'\n> & {\n  /**\n   * Optional custom trigger component for the devtools.\n   * It can be a Preact element or a function that renders one.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     customTrigger: <CustomTriggerComponent />,\n   *   }\n   * ```\n   */\n  customTrigger?: TriggerRender\n}\n\nexport interface TanStackDevtoolsPreactInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a Preact element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanStackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsPreactPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: TanStackDevtoolsPreactConfig\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\n// Simple portal component for Preact\nfunction Portal({\n  children,\n  container,\n}: {\n  children: JSX.Element\n  container: HTMLElement\n}) {\n  useEffect(() => {\n    render(children, container)\n    return () => {\n      render(null, container)\n    }\n  }, [children, container])\n\n  return null\n}\n\nconst convertRender = (\n  Component: PluginRender,\n  setComponents: (\n    value:\n      | Record<string, JSX.Element>\n      | ((prev: Record<string, JSX.Element>) => Record<string, JSX.Element>),\n  ) => void,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, theme) : Component\n\n  setComponents((prev) => ({\n    ...prev,\n    [e.getAttribute('id') as string]: element,\n  }))\n}\n\nconst convertTrigger = (\n  Component: TriggerRender,\n  setComponent: (component: JSX.Element | null) => void,\n  e: HTMLElement,\n  props: TriggerProps,\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, props) : Component\n  setComponent(element)\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsPreactInit): JSX.Element | null => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n\n  const [pluginContainers, setPluginContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [titleContainers, setTitleContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(\n    null,\n  )\n\n  const [PluginComponents, setPluginComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TitleComponents, setTitleComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(\n    null,\n  )\n\n  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(\n    () =>\n      plugins?.map((plugin) => {\n        return {\n          ...plugin,\n          name:\n            typeof plugin.name === 'string'\n              ? plugin.name\n              : (e, theme) => {\n                  const id = e.getAttribute('id')!\n                  const target = e.ownerDocument.getElementById(id)\n\n                  if (target) {\n                    setTitleContainers((prev) => ({\n                      ...prev,\n                      [id]: e,\n                    }))\n                  }\n\n                  convertRender(\n                    plugin.name as PluginRender,\n                    setTitleComponents,\n                    e,\n                    theme,\n                  )\n                },\n          render: (e, theme) => {\n            const id = e.getAttribute('id')!\n            const target = e.ownerDocument.getElementById(id)\n\n            if (target) {\n              setPluginContainers((prev) => ({\n                ...prev,\n                [id]: e,\n              }))\n            }\n\n            convertRender(plugin.render, setPluginComponents, e, theme)\n          },\n        }\n      }) ?? [],\n    [plugins],\n  )\n\n  const [devtools] = useState(() => {\n    const { customTrigger, ...coreConfig } = config || {}\n    return new TanStackDevtoolsCore({\n      config: {\n        ...coreConfig,\n        customTrigger: customTrigger\n          ? (el, props) => {\n              setTriggerContainer(el)\n              convertTrigger(customTrigger, setTriggerComponent, el, props)\n            }\n          : undefined,\n      },\n      eventBusConfig,\n      plugins: pluginsMap,\n    })\n  })\n\n  useEffect(() => {\n    devtools.setConfig({\n      plugins: pluginsMap,\n    })\n  }, [devtools, pluginsMap])\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => devtools.unmount()\n  }, [devtools])\n\n  const hasPlugins =\n    Object.values(pluginContainers).length > 0 &&\n    Object.values(PluginComponents).length > 0\n  const hasTitles =\n    Object.values(titleContainers).length > 0 &&\n    Object.values(TitleComponents).length > 0\n\n  return (\n    <>\n      <div style={{ position: 'absolute' }} ref={devToolRef} />\n\n      {hasPlugins\n        ? Object.entries(pluginContainers).map(([key, pluginContainer]) => {\n            const component = PluginComponents[key]\n            return component ? (\n              <Portal key={key} container={pluginContainer}>\n                {component}\n              </Portal>\n            ) : null\n          })\n        : null}\n\n      {hasTitles\n        ? Object.entries(titleContainers).map(([key, titleContainer]) => {\n            const component = TitleComponents[key]\n            return component ? (\n              <Portal key={key} container={titleContainer}>\n                {component}\n              </Portal>\n            ) : null\n          })\n        : null}\n\n      {triggerContainer && TriggerComponent ? (\n        <Portal container={triggerContainer}>{TriggerComponent}</Portal>\n      ) : null}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+import * as Devtools from './devtools.js';
+export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: Devtools.TanStackDevtoolsPreactInit) => import("preact").JSX.Element | null;
+export type { TanStackDevtoolsPreactPlugin, TanStackDevtoolsPreactInit, } from './devtools.js';

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { TanStackDevtools as TanStackDevtools$1 } from "./devtools.js";
+const TanStackDevtools = TanStackDevtools$1;
+export {
+  TanStackDevtools
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './devtools'\n\nexport const TanStackDevtools = Devtools.TanStackDevtools\n\nexport type {\n  TanStackDevtoolsPreactPlugin,\n  TanStackDevtoolsPreactInit,\n} from './devtools'\n"],"names":[],"mappings":";;AAIO;;;;"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tanstack/preact-devtools",
+  "version": "0.9.0",
+  "description": "TanStack Devtools is a set of tools for building advanced devtools for your Preact application.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/preact-devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "preact",
+    "devtools"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/devtools": "0.8.2"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "preact": "^10.28.0"
+  },
+  "peerDependencies": {
+    "preact": ">=10.0.0"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/devtools.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { render } from 'preact'
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
+import type { JSX } from 'preact'
+import type {
+  ClientEventBusConfig,
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+} from '@tanstack/devtools'
+
+type PluginRender =
+  | JSX.Element
+  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+
+type TriggerProps = {
+  theme: 'dark' | 'light'
+}
+
+type TriggerRender =
+  | JSX.Element
+  | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+
+export type TanStackDevtoolsPreactPlugin = Omit<
+  TanStackDevtoolsPlugin,
+  'render' | 'name'
+> & {
+  /**
+   * The render function can be a Preact element or a function that returns a Preact element.
+   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```jsx
+   *   {
+   *     render: <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  render: PluginRender
+  /**
+   * Name to be displayed in the devtools UI.
+   * If a string, it will be used as the plugin name.
+   * If a function, it will be called with the mount element.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     name: "Your Plugin",
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```jsx
+   *   {
+   *     name:  <h1>Your Plugin title</h1>,
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  name: string | PluginRender
+}
+
+type TanStackDevtoolsPreactConfig = Omit<
+  Partial<TanStackDevtoolsConfig>,
+  'customTrigger'
+> & {
+  /**
+   * Optional custom trigger component for the devtools.
+   * It can be a Preact element or a function that renders one.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     customTrigger: <CustomTriggerComponent />,
+   *   }
+   * ```
+   */
+  customTrigger?: TriggerRender
+}
+
+export interface TanStackDevtoolsPreactInit {
+  /**
+   * Array of plugins to be used in the devtools.
+   * Each plugin should have a `render` function that returns a Preact element or a function
+   *
+   * Example:
+   * ```jsx
+   * <TanStackDevtools
+   *   plugins={[
+   *     {
+   *       id: "your-plugin-id",
+   *       name: "Your Plugin",
+   *       render: <CustomPluginComponent />,
+   *     }
+   *   ]}
+   * />
+   * ```
+   */
+  plugins?: Array<TanStackDevtoolsPreactPlugin>
+  /**
+   * Configuration for the devtools shell. These configuration options are used to set the
+   * initial state of the devtools when it is started for the first time. Afterwards,
+   * the settings are persisted in local storage and changed through the settings panel.
+   */
+  config?: TanStackDevtoolsPreactConfig
+  /**
+   * Configuration for the TanStack Devtools client event bus.
+   */
+  eventBusConfig?: ClientEventBusConfig
+}
+
+// Simple portal component for Preact
+function Portal({
+  children,
+  container,
+}: {
+  children: JSX.Element
+  container: HTMLElement
+}) {
+  useEffect(() => {
+    render(children, container)
+    return () => {
+      render(null, container)
+    }
+  }, [children, container])
+
+  return null
+}
+
+const convertRender = (
+  Component: PluginRender,
+  setComponents: (
+    value:
+      | Record<string, JSX.Element>
+      | ((prev: Record<string, JSX.Element>) => Record<string, JSX.Element>),
+  ) => void,
+  e: HTMLElement,
+  theme: 'dark' | 'light',
+) => {
+  const element =
+    typeof Component === 'function' ? Component(e, theme) : Component
+
+  setComponents((prev) => ({
+    ...prev,
+    [e.getAttribute('id') as string]: element,
+  }))
+}
+
+const convertTrigger = (
+  Component: TriggerRender,
+  setComponent: (component: JSX.Element | null) => void,
+  e: HTMLElement,
+  props: TriggerProps,
+) => {
+  const element =
+    typeof Component === 'function' ? Component(e, props) : Component
+  setComponent(element)
+}
+
+export const TanStackDevtools = ({
+  plugins,
+  config,
+  eventBusConfig,
+}: TanStackDevtoolsPreactInit): JSX.Element | null => {
+  const devToolRef = useRef<HTMLDivElement>(null)
+
+  const [pluginContainers, setPluginContainers] = useState<
+    Record<string, HTMLElement>
+  >({})
+  const [titleContainers, setTitleContainers] = useState<
+    Record<string, HTMLElement>
+  >({})
+  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(
+    null,
+  )
+
+  const [PluginComponents, setPluginComponents] = useState<
+    Record<string, JSX.Element>
+  >({})
+  const [TitleComponents, setTitleComponents] = useState<
+    Record<string, JSX.Element>
+  >({})
+  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(
+    null,
+  )
+
+  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
+    () =>
+      plugins?.map((plugin) => {
+        return {
+          ...plugin,
+          name:
+            typeof plugin.name === 'string'
+              ? plugin.name
+              : (e, theme) => {
+                  const id = e.getAttribute('id')!
+                  const target = e.ownerDocument.getElementById(id)
+
+                  if (target) {
+                    setTitleContainers((prev) => ({
+                      ...prev,
+                      [id]: e,
+                    }))
+                  }
+
+                  convertRender(
+                    plugin.name as PluginRender,
+                    setTitleComponents,
+                    e,
+                    theme,
+                  )
+                },
+          render: (e, theme) => {
+            const id = e.getAttribute('id')!
+            const target = e.ownerDocument.getElementById(id)
+
+            if (target) {
+              setPluginContainers((prev) => ({
+                ...prev,
+                [id]: e,
+              }))
+            }
+
+            convertRender(plugin.render, setPluginComponents, e, theme)
+          },
+        }
+      }) ?? [],
+    [plugins],
+  )
+
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {}
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger
+          ? (el, props) => {
+              setTriggerContainer(el)
+              convertTrigger(customTrigger, setTriggerComponent, el, props)
+            }
+          : undefined,
+      },
+      eventBusConfig,
+      plugins: pluginsMap,
+    })
+  })
+
+  useEffect(() => {
+    devtools.setConfig({
+      plugins: pluginsMap,
+    })
+  }, [devtools, pluginsMap])
+
+  useEffect(() => {
+    if (devToolRef.current) {
+      devtools.mount(devToolRef.current)
+    }
+
+    return () => devtools.unmount()
+  }, [devtools])
+
+  const hasPlugins =
+    Object.values(pluginContainers).length > 0 &&
+    Object.values(PluginComponents).length > 0
+  const hasTitles =
+    Object.values(titleContainers).length > 0 &&
+    Object.values(TitleComponents).length > 0
+
+  return (
+    <>
+      <div style={{ position: 'absolute' }} ref={devToolRef} />
+
+      {hasPlugins
+        ? Object.entries(pluginContainers).map(([key, pluginContainer]) => {
+            const component = PluginComponents[key]
+            return component ? (
+              <Portal key={key} container={pluginContainer}>
+                {component}
+              </Portal>
+            ) : null
+          })
+        : null}
+
+      {hasTitles
+        ? Object.entries(titleContainers).map(([key, titleContainer]) => {
+            const component = TitleComponents[key]
+            return component ? (
+              <Portal key={key} container={titleContainer}>
+                {component}
+              </Portal>
+            ) : null
+          })
+        : null}
+
+      {triggerContainer && TriggerComponent ? (
+        <Portal container={triggerContainer}>{TriggerComponent}</Portal>
+      ) : null}
+    </>
+  )
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import * as Devtools from './devtools'
+
+export const TanStackDevtools = Devtools.TanStackDevtools
+
+export type {
+  TanStackDevtoolsPreactPlugin,
+  TanStackDevtoolsPreactInit,
+} from './devtools'