@tanstack/solid-devtools 0.6.10 → 0.7.1

package/dist/esm/core.js

@@ -20,7 +20,7 @@ function SolidDevtoolsCore({
       ...plugin,
       name: typeof plugin.name === "string" ? plugin.name : (
         // The check above confirms that `plugin.name` is of Render type
-        (el, theme) => convertRender(el, plugin.name, theme)
+        ((el, theme) => convertRender(el, plugin.name, theme))
       ),
       render: (el, theme) => convertRender(el, plugin.render, theme)
     }))

package/dist/esm/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } 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  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: 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  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\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","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAgBA,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;AACvB,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAEP,CAAChB,IAAIE,UACHH,cAAcC,IAAIe,OAAOC,MAA2Bd,KAAK;AAAA;AAAA,MACjEe,QAAQA,CAACjB,IAAoBE,UAC3BH,cAAcC,IAAIe,OAAOE,QAAQf,KAAK;AAAA,IAAA,EACxC;AAAA,EAAA,CACH,CACH;AACA,MAAIgB;AACJC,eAAa,MAAM;AACjBR,aAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,eAAAA,EAAWN,MAAMa,UAAU;AAE3BI,gBAAU,MAAM;AACdX,iBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;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 { createEffect, createSignal, onCleanup, onMount } 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  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: 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  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\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","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAgBA,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;AACvB,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,SAEP,CAAChB,IAAIE,UACHH,cAAcC,IAAIe,OAAOC,MAA2Bd,KAAK;AAAA;AAAA,MACjEe,QAAQA,CAACjB,IAAoBE,UAC3BH,cAAcC,IAAIe,OAAOE,QAAQf,KAAK;AAAA,IAAA,EACxC;AAAA,EAAA,CACH,CACH;AACA,MAAIgB;AACJC,eAAa,MAAM;AACjBR,aAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,eAAAA,EAAWN,MAAMa,UAAU;AAE3BI,gBAAU,MAAM;AACdX,iBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,YAAA,UAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAC9D;"}

package/dist/esm/index.d.ts

@@ -1,3 +1,2 @@
-import * as Devtools from './devtools.js';
-export declare const TanStackDevtools: (typeof Devtools)['TanStackDevtools'];
+export { TanStackDevtools } from './devtools.js';
 export type { TanStackDevtoolsSolidPlugin } from './core.js';

package/dist/esm/index.js

@@ -1,8 +1,4 @@
-import { isDev } from "solid-js/web";
-import { TanStackDevtools as TanStackDevtools$1 } from "./devtools.js";
-const TanStackDevtools = isDev ? TanStackDevtools$1 : function() {
-  return null;
-};
+import { TanStackDevtools } from "./devtools.js";
 export {
   TanStackDevtools
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { isDev } from 'solid-js/web'\nimport * as Devtools from './devtools'\n\nexport const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] = isDev\n  ? Devtools.TanStackDevtools\n  : function () {\n      return null\n    }\n\nexport type { TanStackDevtoolsSolidPlugin } from './core'\n"],"names":["Devtools.TanStackDevtools"],"mappings":";;AAGO,MAAM,mBAA0D,QACnEA,qBACA,WAAY;AACV,SAAO;AACT;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.6.10",
+  "version": "0.7.1",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -28,12 +28,6 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./production": {
-      "import": {
-        "types": "./dist/esm/production.d.ts",
-        "default": "./dist/esm/production.js"
-      }
-    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -45,11 +39,11 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.6.14"
+    "@tanstack/devtools": "0.6.15"
   },
   "devDependencies": {
-    "solid-js": "^1.9.7",
-    "vite-plugin-solid": "^2.11.6"
+    "solid-js": "^1.9.9",
+    "vite-plugin-solid": "^2.11.8"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/index.ts

@@ -1,10 +1,3 @@
-import { isDev } from 'solid-js/web'
-import * as Devtools from './devtools'
-
-export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] = isDev
-  ? Devtools.TanStackDevtools
-  : function () {
-      return null
-    }
+export { TanStackDevtools } from './devtools'
 
 export type { TanStackDevtoolsSolidPlugin } from './core'

package/dist/esm/production.d.ts

@@ -1,3 +0,0 @@
-import * as Devtools from './devtools.js';
-export declare const TanStackDevtools: (typeof Devtools)['TanStackDevtools'];
-export type { TanStackDevtoolsSolidPlugin } from './core.js';

package/dist/esm/production.js

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

package/dist/esm/production.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"production.js","sources":["../../src/production.ts"],"sourcesContent":["import * as Devtools from './devtools'\n\nexport const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] =\n  Devtools.TanStackDevtools\n\nexport type { TanStackDevtoolsSolidPlugin } from './core'\n"],"names":["Devtools.TanStackDevtools"],"mappings":";AAEO,MAAM,mBACXA;"}

package/src/production.ts

@@ -1,6 +0,0 @@
-import * as Devtools from './devtools'
-
-export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] =
-  Devtools.TanStackDevtools
-
-export type { TanStackDevtoolsSolidPlugin } from './core'