@tanstack/solid-devtools 0.7.11 → 0.7.12

package/dist/esm/core.d.ts

@@ -42,6 +42,9 @@ export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render'
      */
     name: string | SolidPluginRender;
 };
+interface TriggerProps {
+    theme: 'light' | 'dark';
+}
 export interface TanStackDevtoolsInit {
     /**
      * Array of plugins to be used in the devtools.
@@ -66,7 +69,12 @@ export interface TanStackDevtoolsInit {
      * 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?: Partial<TanStackDevtoolsConfig>;
+    config?: Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {
+        /**
+         * An optional custom function to render the dev tools trigger component.
+         */
+        customTrigger?: ((el: HTMLElement, props: TriggerProps) => JSX.Element) | JSX.Element;
+    };
     /**
      * Configuration for the TanStack Devtools client event bus.
      */

package/dist/esm/core.js

@@ -1,4 +1,4 @@
-import { createComponent, template, use, Portal } from "solid-js/web";
+import { createComponent, template, Portal, use } from "solid-js/web";
 import { TanStackDevtoolsCore } from "@tanstack/devtools";
 import { createMemo, createSignal, createEffect, onMount, onCleanup } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -21,15 +21,30 @@ function SolidDevtoolsCore({
     ),
     render: (el, theme) => convertRender(el, plugin.render, theme)
   })));
+  const convertTrigger = (el, props) => {
+    const Trigger = config?.customTrigger;
+    return createComponent(Portal, {
+      mount: el,
+      get children() {
+        return typeof Trigger === "function" ? Trigger(el, props) : Trigger;
+      }
+    });
+  };
   const [devtools] = createSignal(new TanStackDevtoolsCore({
-    config,
+    config: {
+      ...config,
+      customTrigger: (el, props) => convertTrigger(el, props)
+    },
     eventBusConfig,
     plugins: pluginsMap()
   }));
   let devToolRef;
   createEffect(() => {
     devtools().setConfig({
-      config
+      config: {
+        ...config,
+        customTrigger: (el, props) => convertTrigger(el, props)
+      }
     });
   });
   createEffect(() => {

package/dist/esm/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender =\n  | JSX.Element\n  | ((\n      el: HTMLDivElement | HTMLHeadingElement,\n      theme: 'dark' | 'light',\n    ) => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n  theme: 'dark' | 'light',\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? Component(el, theme) : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS 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   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\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   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\nexport interface TanStackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React 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<TanStackDevtoolsSolidPlugin>\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?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport default function SolidDevtoolsCore({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanStackDevtoolsInit) {\n  // Convert plugins to the format expected by the core\n  const pluginsMap = createMemo<Array<TanStackDevtoolsPlugin> | undefined>(() =>\n    plugins?.map((plugin) => ({\n      ...plugin,\n      name:\n        typeof plugin.name === 'string'\n          ? plugin.name\n          : // The check above confirms that `plugin.name` is of Render type\n            (el, theme) =>\n              convertRender(el, plugin.name as SolidPluginRender, theme),\n      render: (el: HTMLDivElement, theme: 'dark' | 'light') =>\n        convertRender(el, plugin.render, theme),\n    })),\n  )\n\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: pluginsMap(),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n\n  createEffect(() => {\n    devtools().setConfig({ config })\n  })\n\n  // Update plugins when they change\n  createEffect(() => {\n    const currentPlugins = pluginsMap()\n    if (currentPlugins) {\n      devtools().setConfig({ plugins: currentPlugins })\n    }\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ position: 'absolute' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","theme","_$createComponent","Portal","mount","children","SolidDevtoolsCore","config","plugins","eventBusConfig","pluginsMap","createMemo","map","plugin","name","render","devtools","createSignal","TanStackDevtoolsCore","devToolRef","createEffect","setConfig","currentPlugins","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAsBA,MAAMA,gBAAgBA,CACpBC,IACAC,WACAC,UAAuBC,gBAEtBC,QAAM;AAAA,EAACC,OAAOL;AAAAA,EAAE,IAAAM,WAAA;AAAA,WACd,OAAOL,cAAc,aAAaA,UAAUD,IAAIE,KAAK,IAAID;AAAAA,EAAS;AAAA,CAAA;AA+EvE,SAAwBM,kBAAkB;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AACoB,GAAG;AAEvB,QAAMC,aAAaC,WAAsD,MACvEH,SAASI,IAAKC,CAAAA,YAAY;AAAA,IACxB,GAAGA;AAAAA,IACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,OAEP,CAACf,IAAIE,UACHH,cAAcC,IAAIc,OAAOC,MAA2Bb,KAAK;AAAA;AAAA,IACjEc,QAAQA,CAAChB,IAAoBE,UAC3BH,cAAcC,IAAIc,OAAOE,QAAQd,KAAK;AAAA,EAAA,EACxC,CACJ;AAEA,QAAM,CAACe,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBX;AAAAA,IACAE;AAAAA,IACAD,SAASE,WAAAA;AAAAA,EAAW,CACrB,CACH;AACA,MAAIS;AAEJC,eAAa,MAAM;AACjBJ,aAAAA,EAAWK,UAAU;AAAA,MAAEd;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AAGDa,eAAa,MAAM;AACjB,UAAME,iBAAiBZ,WAAAA;AACvB,QAAIY,gBAAgB;AAClBN,eAAAA,EAAWK,UAAU;AAAA,QAAEb,SAASc;AAAAA,MAAAA,CAAgB;AAAA,IAClD;AAAA,EACF,CAAC;AAEDC,UAAQ,MAAM;AACZ,QAAIJ,YAAY;AACdH,eAAAA,EAAWZ,MAAMe,UAAU;AAE3BK,gBAAU,MAAM;AACdR,iBAAAA,EAAWS,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDT;AAAU,WAAAS,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVP,aAAUO;AAAAA,SAAAI,MAAAC,YAAA,YAAA,UAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAC9D;"}
+{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender =\n  | JSX.Element\n  | ((\n      el: HTMLDivElement | HTMLHeadingElement,\n      theme: 'dark' | 'light',\n    ) => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n  theme: 'dark' | 'light',\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? Component(el, theme) : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS 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   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\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   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\ninterface TriggerProps {\n  theme: 'light' | 'dark'\n}\nexport interface TanStackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React 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<TanStackDevtoolsSolidPlugin>\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?: Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {\n    /**\n     * An optional custom function to render the dev tools trigger component.\n     */\n    customTrigger?:\n      | ((el: HTMLElement, props: TriggerProps) => JSX.Element)\n      | JSX.Element\n  }\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport default function SolidDevtoolsCore({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanStackDevtoolsInit) {\n  // Convert plugins to the format expected by the core\n  const pluginsMap = createMemo<Array<TanStackDevtoolsPlugin> | undefined>(() =>\n    plugins?.map((plugin) => ({\n      ...plugin,\n      name:\n        typeof plugin.name === 'string'\n          ? plugin.name\n          : // The check above confirms that `plugin.name` is of Render type\n            (el, theme) =>\n              convertRender(el, plugin.name as SolidPluginRender, theme),\n      render: (el: HTMLDivElement, theme: 'dark' | 'light') =>\n        convertRender(el, plugin.render, theme),\n    })),\n  )\n\n  const convertTrigger = (el: HTMLElement, props: TriggerProps) => {\n    const Trigger = config?.customTrigger\n\n    return (\n      <Portal mount={el}>\n        {typeof Trigger === 'function' ? Trigger(el, props) : Trigger}\n      </Portal>\n    )\n  }\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config: {\n        ...config,\n        customTrigger: (el, props) => convertTrigger(el, props),\n      },\n      eventBusConfig,\n      plugins: pluginsMap(),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n\n  createEffect(() => {\n    devtools().setConfig({\n      config: {\n        ...config,\n        customTrigger: (el, props) => convertTrigger(el, props),\n      },\n    })\n  })\n\n  // Update plugins when they change\n  createEffect(() => {\n    const currentPlugins = pluginsMap()\n    if (currentPlugins) {\n      devtools().setConfig({ plugins: currentPlugins })\n    }\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ position: 'absolute' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","theme","_$createComponent","Portal","mount","children","SolidDevtoolsCore","config","plugins","eventBusConfig","pluginsMap","createMemo","map","plugin","name","render","convertTrigger","props","Trigger","customTrigger","devtools","createSignal","TanStackDevtoolsCore","devToolRef","createEffect","setConfig","currentPlugins","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAsBA,MAAMA,gBAAgBA,CACpBC,IACAC,WACAC,UAAuBC,gBAEtBC,QAAM;AAAA,EAACC,OAAOL;AAAAA,EAAE,IAAAM,WAAA;AAAA,WACd,OAAOL,cAAc,aAAaA,UAAUD,IAAIE,KAAK,IAAID;AAAAA,EAAS;AAAA,CAAA;AAyFvE,SAAwBM,kBAAkB;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AACoB,GAAG;AAEvB,QAAMC,aAAaC,WAAsD,MACvEH,SAASI,IAAKC,CAAAA,YAAY;AAAA,IACxB,GAAGA;AAAAA,IACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,OAEP,CAACf,IAAIE,UACHH,cAAcC,IAAIc,OAAOC,MAA2Bb,KAAK;AAAA;AAAA,IACjEc,QAAQA,CAAChB,IAAoBE,UAC3BH,cAAcC,IAAIc,OAAOE,QAAQd,KAAK;AAAA,EAAA,EACxC,CACJ;AAEA,QAAMe,iBAAiBA,CAACjB,IAAiBkB,UAAwB;AAC/D,UAAMC,UAAUX,QAAQY;AAExB,WAAAjB,gBACGC,QAAM;AAAA,MAACC,OAAOL;AAAAA,MAAE,IAAAM,WAAA;AAAA,eACd,OAAOa,YAAY,aAAaA,QAAQnB,IAAIkB,KAAK,IAAIC;AAAAA,MAAO;AAAA,IAAA,CAAA;AAAA,EAGnE;AACA,QAAM,CAACE,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBf,QAAQ;AAAA,MACN,GAAGA;AAAAA,MACHY,eAAeA,CAACpB,IAAIkB,UAAUD,eAAejB,IAAIkB,KAAK;AAAA,IAAA;AAAA,IAExDR;AAAAA,IACAD,SAASE,WAAAA;AAAAA,EAAW,CACrB,CACH;AACA,MAAIa;AAEJC,eAAa,MAAM;AACjBJ,aAAAA,EAAWK,UAAU;AAAA,MACnBlB,QAAQ;AAAA,QACN,GAAGA;AAAAA,QACHY,eAAeA,CAACpB,IAAIkB,UAAUD,eAAejB,IAAIkB,KAAK;AAAA,MAAA;AAAA,IACxD,CACD;AAAA,EACH,CAAC;AAGDO,eAAa,MAAM;AACjB,UAAME,iBAAiBhB,WAAAA;AACvB,QAAIgB,gBAAgB;AAClBN,eAAAA,EAAWK,UAAU;AAAA,QAAEjB,SAASkB;AAAAA,MAAAA,CAAgB;AAAA,IAClD;AAAA,EACF,CAAC;AAEDC,UAAQ,MAAM;AACZ,QAAIJ,YAAY;AACdH,eAAAA,EAAWhB,MAAMmB,UAAU;AAE3BK,gBAAU,MAAM;AACdR,iBAAAA,EAAWS,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDT;AAAU,WAAAS,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVP,aAAUO;AAAAA,SAAAI,MAAAC,YAAA,YAAA,UAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAC9D;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.7.0"
+    "@tanstack/devtools": "0.8.0"
   },
   "devDependencies": {
     "solid-js": "^1.9.9",

package/src/core.tsx

@@ -74,6 +74,9 @@ export type TanStackDevtoolsSolidPlugin = Omit<
    */
   name: string | SolidPluginRender
 }
+interface TriggerProps {
+  theme: 'light' | 'dark'
+}
 export interface TanStackDevtoolsInit {
   /**
    * Array of plugins to be used in the devtools.
@@ -98,7 +101,14 @@ export interface TanStackDevtoolsInit {
    * 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?: Partial<TanStackDevtoolsConfig>
+  config?: Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {
+    /**
+     * An optional custom function to render the dev tools trigger component.
+     */
+    customTrigger?:
+      | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+      | JSX.Element
+  }
   /**
    * Configuration for the TanStack Devtools client event bus.
    */
@@ -125,9 +135,21 @@ export default function SolidDevtoolsCore({
     })),
   )
 
+  const convertTrigger = (el: HTMLElement, props: TriggerProps) => {
+    const Trigger = config?.customTrigger
+
+    return (
+      <Portal mount={el}>
+        {typeof Trigger === 'function' ? Trigger(el, props) : Trigger}
+      </Portal>
+    )
+  }
   const [devtools] = createSignal(
     new TanStackDevtoolsCore({
-      config,
+      config: {
+        ...config,
+        customTrigger: (el, props) => convertTrigger(el, props),
+      },
       eventBusConfig,
       plugins: pluginsMap(),
     }),
@@ -135,7 +157,12 @@ export default function SolidDevtoolsCore({
   let devToolRef: HTMLDivElement | undefined
 
   createEffect(() => {
-    devtools().setConfig({ config })
+    devtools().setConfig({
+      config: {
+        ...config,
+        customTrigger: (el, props) => convertTrigger(el, props),
+      },
+    })
   })
 
   // Update plugins when they change