npm - @tanstack/solid-devtools - Versions diffs - 0.2.2 → 0.3.0 - Mend

@tanstack/solid-devtools 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/cjs/devtools.cjs CHANGED Viewed

@@ -45,6 +45,7 @@ const TanstackDevtools = ({
     var _el$ = _tmpl$();
     var _ref$ = devToolRef;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
+    _el$.style.setProperty("height", "100%");
     return _el$;
   })();
 };

package/dist/cjs/devtools.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"devtools.cjs","sources":["../../src/devtools.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 = JSX.Element \| (() => JSX.Element)\nconst convertRender = (\n el: HTMLDivElement \| HTMLHeadingElement,\n Component: SolidPluginRender,\n) => (\n <Portal mount={el}>\n {typeof Component === 'function' ? <Component /> : 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 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 const TanstackDevtools = ({\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) => convertRender(el, plugin.name as SolidPluginRender),\n render: (el: HTMLDivElement) => convertRender(el, plugin.render),\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 ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,IAAAA,gBAE3BC,IAAAA,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,IAAAA,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aACjB,IAAIC,SAAAA,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,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,UAAAA,aAAa,MAAM;AACjBR,eAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,iBAAAA,EAAWN,MAAMa,UAAU;AAE3BI,cAAAA,UAAU,MAAM;AACdX,mBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,~~QAAiBR~~;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,~~WAAAA~~;AAAAA,EAAA,GAAA;~~AAC7B~~;;"}
1	+ {"version":3,"file":"devtools.cjs","sources":["../../src/devtools.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 = JSX.Element \| (() => JSX.Element)\nconst convertRender = (\n el: HTMLDivElement \| HTMLHeadingElement,\n Component: SolidPluginRender,\n) => (\n <Portal mount={el}>\n {typeof Component === 'function' ? <Component /> : 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 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 const TanstackDevtools = ({\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) => convertRender(el, plugin.name as SolidPluginRender),\n render: (el: HTMLDivElement) => convertRender(el, plugin.render),\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={{ height: '100%' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,IAAAA,gBAE3BC,IAAAA,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,IAAAA,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aACjB,IAAIC,SAAAA,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,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,UAAAA,aAAa,MAAM;AACjBR,eAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,iBAAAA,EAAWN,MAAMa,UAAU;AAE3BI,cAAAA,UAAU,MAAM;AACdX,mBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAA4CR;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,UAAA,MAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxD;;"}

package/dist/esm/devtools.js CHANGED Viewed

@@ -43,6 +43,7 @@ const TanstackDevtools = ({
     var _el$ = _tmpl$();
     var _ref$ = devToolRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+    _el$.style.setProperty("height", "100%");
     return _el$;
   })();
 };

package/dist/esm/devtools.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"devtools.js","sources":["../../src/devtools.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 = JSX.Element \| (() => JSX.Element)\nconst convertRender = (\n el: HTMLDivElement \| HTMLHeadingElement,\n Component: SolidPluginRender,\n) => (\n <Portal mount={el}>\n {typeof Component === 'function' ? <Component /> : 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 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 const TanstackDevtools = ({\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) => convertRender(el, plugin.name as SolidPluginRender),\n render: (el: HTMLDivElement) => convertRender(el, plugin.render),\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 ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,gBAE3BC,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,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,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;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,~~QAAiBR~~;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,~~WAAAA~~;AAAAA,EAAA,GAAA;~~AAC7B~~;"}
1	+ {"version":3,"file":"devtools.js","sources":["../../src/devtools.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 = JSX.Element \| (() => JSX.Element)\nconst convertRender = (\n el: HTMLDivElement \| HTMLHeadingElement,\n Component: SolidPluginRender,\n) => (\n <Portal mount={el}>\n {typeof Component === 'function' ? <Component /> : 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 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 const TanstackDevtools = ({\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) => convertRender(el, plugin.name as SolidPluginRender),\n render: (el: HTMLDivElement) => convertRender(el, plugin.render),\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={{ height: '100%' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,gBAE3BC,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,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,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;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,QAA4CR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,UAAA,MAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxD;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.3.0"
+    "@tanstack/devtools": "0.3.1"
   },
   "devDependencies": {
     "solid-js": "^1.9.7",

package/src/devtools.tsx CHANGED Viewed

@@ -126,5 +126,5 @@ export const TanstackDevtools = ({
       })
     }
   })
-  return <div ref={devToolRef} />
+  return <div style={{ height: '100%' }} ref={devToolRef} />
 }