@tanstack/solid-devtools 0.7.32 → 0.8.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.
- package/dist/esm/client-only.js +24 -22
- package/dist/esm/client-only.js.map +1 -1
- package/dist/esm/core.d.ts +3 -3
- package/dist/esm/core.js +60 -72
- package/dist/esm/core.js.map +1 -1
- package/dist/esm/devtools.js +6 -5
- package/dist/esm/devtools.js.map +1 -1
- package/dist/esm/index.js +1 -4
- package/package.json +3 -3
- package/src/core.tsx +10 -8
- package/dist/esm/index.js.map +0 -1
package/dist/esm/client-only.js
CHANGED
|
@@ -1,27 +1,29 @@
|
|
|
1
|
-
import { createSignal,
|
|
1
|
+
import { createMemo, createSignal, onMount, sharedConfig, splitProps, untrack } from "solid-js";
|
|
2
2
|
import { isServer } from "solid-js/web";
|
|
3
|
+
//#region src/client-only.ts
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
|
|
7
|
+
*/
|
|
3
8
|
function clientOnly(fn, options = {}) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback))
|
|
18
|
-
);
|
|
19
|
-
};
|
|
9
|
+
if (isServer) return (props) => props.fallback;
|
|
10
|
+
const [comp, setComp] = createSignal();
|
|
11
|
+
!options.lazy && load(fn, setComp);
|
|
12
|
+
return (props) => {
|
|
13
|
+
let Comp;
|
|
14
|
+
let m;
|
|
15
|
+
const [, rest] = splitProps(props, ["fallback"]);
|
|
16
|
+
options.lazy && load(fn, setComp);
|
|
17
|
+
if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
|
|
18
|
+
const [mounted, setMounted] = createSignal(!sharedConfig.context);
|
|
19
|
+
onMount(() => setMounted(true));
|
|
20
|
+
return createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
|
|
21
|
+
};
|
|
20
22
|
}
|
|
21
23
|
function load(fn, setComp) {
|
|
22
|
-
|
|
24
|
+
fn().then((m) => setComp(() => m.default));
|
|
23
25
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=client-only.js.map
|
|
26
|
+
//#endregion
|
|
27
|
+
export { clientOnly as default };
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=client-only.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client-only.js","sources":["../../src/client-only.ts"],"sourcesContent":["import {\n createMemo,\n createSignal,\n onMount,\n sharedConfig,\n splitProps,\n untrack,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { Component, ComponentProps, JSX, Setter } from 'solid-js'\n\n/**\n *\n * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only\n */\n// not using Suspense\nexport default function clientOnly<T extends Component<any>>(\n fn: () => Promise<{\n default: T\n }>,\n options: { lazy?: boolean } = {},\n) {\n if (isServer)\n return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>\n props.fallback\n\n const [comp, setComp] = createSignal<T>()\n !options.lazy && load(fn, setComp)\n return (props: ComponentProps<T>) => {\n let Comp: T | undefined\n let m: boolean\n const [, rest] = splitProps(props, ['fallback'])\n options.lazy && load(fn, setComp)\n if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)\n const [mounted, setMounted] = createSignal(!sharedConfig.context)\n onMount(() => setMounted(true))\n return createMemo(\n () => (\n (Comp = comp()),\n (m = mounted()),\n untrack(() => (Comp && m ? Comp(rest) : props.fallback))\n ),\n )\n }\n}\n\nfunction load<T>(\n fn: () => Promise<{\n default: T\n }>,\n setComp: Setter<T>,\n) {\n fn().then((m) => setComp(() => m.default))\n}\n"],"
|
|
1
|
+
{"version":3,"file":"client-only.js","names":[],"sources":["../../src/client-only.ts"],"sourcesContent":["import {\n createMemo,\n createSignal,\n onMount,\n sharedConfig,\n splitProps,\n untrack,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { Component, ComponentProps, JSX, Setter } from 'solid-js'\n\n/**\n *\n * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only\n */\n// not using Suspense\nexport default function clientOnly<T extends Component<any>>(\n fn: () => Promise<{\n default: T\n }>,\n options: { lazy?: boolean } = {},\n) {\n if (isServer)\n return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>\n props.fallback\n\n const [comp, setComp] = createSignal<T>()\n !options.lazy && load(fn, setComp)\n return (props: ComponentProps<T>) => {\n let Comp: T | undefined\n let m: boolean\n const [, rest] = splitProps(props, ['fallback'])\n options.lazy && load(fn, setComp)\n if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)\n const [mounted, setMounted] = createSignal(!sharedConfig.context)\n onMount(() => setMounted(true))\n return createMemo(\n () => (\n (Comp = comp()),\n (m = mounted()),\n untrack(() => (Comp && m ? Comp(rest) : props.fallback))\n ),\n )\n }\n}\n\nfunction load<T>(\n fn: () => Promise<{\n default: T\n }>,\n setComp: Setter<T>,\n) {\n fn().then((m) => setComp(() => m.default))\n}\n"],"mappings":";;;;;;;AAgBA,SAAwB,WACtB,IAGA,UAA8B,EAAE,EAChC;AACA,KAAI,SACF,SAAQ,UACN,MAAM;CAEV,MAAM,CAAC,MAAM,WAAW,cAAiB;AACzC,EAAC,QAAQ,QAAQ,KAAK,IAAI,QAAQ;AAClC,SAAQ,UAA6B;EACnC,IAAI;EACJ,IAAI;EACJ,MAAM,GAAG,QAAQ,WAAW,OAAO,CAAC,WAAW,CAAC;AAChD,UAAQ,QAAQ,KAAK,IAAI,QAAQ;AACjC,OAAK,OAAO,MAAM,KAAK,CAAC,aAAa,QAAS,QAAO,KAAK,KAAK;EAC/D,MAAM,CAAC,SAAS,cAAc,aAAa,CAAC,aAAa,QAAQ;AACjE,gBAAc,WAAW,KAAK,CAAC;AAC/B,SAAO,kBAEF,OAAO,MAAM,EACb,IAAI,SAAS,EACd,cAAe,QAAQ,IAAI,KAAK,KAAK,GAAG,MAAM,SAAU,EAE3D;;;AAIL,SAAS,KACP,IAGA,SACA;AACA,KAAI,CAAC,MAAM,MAAM,cAAc,EAAE,QAAQ,CAAC"}
|
package/dist/esm/core.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { JSX } from 'solid-js';
|
|
2
|
-
import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
|
|
3
|
-
type SolidPluginRender = JSX.Element | ((el: HTMLDivElement | HTMLHeadingElement,
|
|
2
|
+
import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin, TanStackDevtoolsPluginProps, TanStackDevtoolsTheme } from '@tanstack/devtools';
|
|
3
|
+
type SolidPluginRender = JSX.Element | ((el: HTMLDivElement | HTMLHeadingElement, props: TanStackDevtoolsPluginProps) => JSX.Element);
|
|
4
4
|
export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
|
|
5
5
|
/**
|
|
6
6
|
* The render function can be a SolidJS element or a function that returns a SolidJS element.
|
|
@@ -43,7 +43,7 @@ export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render'
|
|
|
43
43
|
name: string | SolidPluginRender;
|
|
44
44
|
};
|
|
45
45
|
interface TriggerProps {
|
|
46
|
-
theme:
|
|
46
|
+
theme: TanStackDevtoolsTheme;
|
|
47
47
|
}
|
|
48
48
|
export interface TanStackDevtoolsInit {
|
|
49
49
|
/**
|
package/dist/esm/core.js
CHANGED
|
@@ -1,76 +1,64 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
|
|
2
|
+
import { Portal, createComponent, template, use } from "solid-js/web";
|
|
2
3
|
import { TanStackDevtoolsCore } from "@tanstack/devtools";
|
|
3
|
-
|
|
4
|
+
//#region src/core.tsx
|
|
4
5
|
var _tmpl$ = /* @__PURE__ */ template(`<div style=position:absolute>`);
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
var convertRender = (el, Component, props) => createComponent(Portal, {
|
|
7
|
+
mount: el,
|
|
8
|
+
get children() {
|
|
9
|
+
return typeof Component === "function" ? Component(el, props) : Component;
|
|
10
|
+
}
|
|
10
11
|
});
|
|
11
|
-
function SolidDevtoolsCore({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
if (devToolRef) {
|
|
60
|
-
devtools().mount(devToolRef);
|
|
61
|
-
onCleanup(() => {
|
|
62
|
-
devtools().unmount();
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
return (() => {
|
|
67
|
-
var _el$ = _tmpl$();
|
|
68
|
-
var _ref$ = devToolRef;
|
|
69
|
-
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
70
|
-
return _el$;
|
|
71
|
-
})();
|
|
12
|
+
function SolidDevtoolsCore({ config, plugins, eventBusConfig }) {
|
|
13
|
+
const pluginsMap = createMemo(() => plugins?.map((plugin) => ({
|
|
14
|
+
...plugin,
|
|
15
|
+
name: typeof plugin.name === "string" ? plugin.name : (el, props) => convertRender(el, plugin.name, props),
|
|
16
|
+
render: (el, props) => convertRender(el, plugin.render, props)
|
|
17
|
+
})));
|
|
18
|
+
const convertTrigger = (el, props) => {
|
|
19
|
+
const Trigger = config?.customTrigger;
|
|
20
|
+
return createComponent(Portal, {
|
|
21
|
+
mount: el,
|
|
22
|
+
get children() {
|
|
23
|
+
return typeof Trigger === "function" ? Trigger(el, props) : Trigger;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
const [devtools] = createSignal(new TanStackDevtoolsCore({
|
|
28
|
+
config: {
|
|
29
|
+
...config,
|
|
30
|
+
customTrigger: config?.customTrigger ? (el, props) => convertTrigger(el, props) : void 0
|
|
31
|
+
},
|
|
32
|
+
eventBusConfig,
|
|
33
|
+
plugins: pluginsMap()
|
|
34
|
+
}));
|
|
35
|
+
let devToolRef;
|
|
36
|
+
createEffect(() => {
|
|
37
|
+
devtools().setConfig({ config: {
|
|
38
|
+
...config,
|
|
39
|
+
customTrigger: config?.customTrigger ? (el, props) => convertTrigger(el, props) : void 0
|
|
40
|
+
} });
|
|
41
|
+
});
|
|
42
|
+
createEffect(() => {
|
|
43
|
+
const currentPlugins = pluginsMap();
|
|
44
|
+
if (currentPlugins) devtools().setConfig({ plugins: currentPlugins });
|
|
45
|
+
});
|
|
46
|
+
onMount(() => {
|
|
47
|
+
if (devToolRef) {
|
|
48
|
+
devtools().mount(devToolRef);
|
|
49
|
+
onCleanup(() => {
|
|
50
|
+
devtools().unmount();
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
return (() => {
|
|
55
|
+
var _el$ = _tmpl$();
|
|
56
|
+
var _ref$ = devToolRef;
|
|
57
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
58
|
+
return _el$;
|
|
59
|
+
})();
|
|
72
60
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
//# sourceMappingURL=core.js.map
|
|
61
|
+
//#endregion
|
|
62
|
+
export { SolidDevtoolsCore as default };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=core.js.map
|
package/dist/esm/core.js.map
CHANGED
|
@@ -1 +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
|
|
1
|
+
{"version":3,"file":"core.js","names":["TanStackDevtoolsCore","createEffect","createMemo","createSignal","onCleanup","onMount","Portal","JSX","ClientEventBusConfig","TanStackDevtoolsConfig","TanStackDevtoolsPlugin","TanStackDevtoolsPluginProps","TanStackDevtoolsTheme","SolidPluginRender","Element","el","HTMLDivElement","HTMLHeadingElement","props","convertRender","Component","_$createComponent","mount","children","TanStackDevtoolsSolidPlugin","Omit","render","name","TriggerProps","theme","TanStackDevtoolsInit","plugins","Array","config","Partial","customTrigger","HTMLElement","eventBusConfig","SolidDevtoolsCore","pluginsMap","map","plugin","convertTrigger","Trigger","devtools","undefined","devToolRef","setConfig","currentPlugins","unmount","_el$","_tmpl$","_ref$","_$use"],"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 TanStackDevtoolsPluginProps,\n TanStackDevtoolsTheme,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender =\n | JSX.Element\n | ((\n el: HTMLDivElement | HTMLHeadingElement,\n props: TanStackDevtoolsPluginProps,\n ) => JSX.Element)\nconst convertRender = (\n el: HTMLDivElement | HTMLHeadingElement,\n Component: SolidPluginRender,\n props: TanStackDevtoolsPluginProps,\n) => (\n <Portal mount={el}>\n {typeof Component === 'function' ? Component(el, props) : 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: TanStackDevtoolsTheme\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, props) =>\n convertRender(el, plugin.name as SolidPluginRender, props),\n render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) =>\n convertRender(el, plugin.render, props),\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: config?.customTrigger\n ? (el, props) => convertTrigger(el, props)\n : undefined,\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: config?.customTrigger\n ? (el, props) => convertTrigger(el, props)\n : undefined,\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"],"mappings":";;;;;AAwBA,IAAMmB,iBACJJ,IACAK,WACAF,UAAkCG,gBAEjCf,QAAM;CAACgB,OAAOP;CAAE,IAAAQ,WAAA;AAAA,SACd,OAAOH,cAAc,aAAaA,UAAUL,IAAIG,MAAM,GAAGE;;CAAS,CAEtE;AAuFD,SAAwBkB,kBAAkB,EACxCL,QACAF,SACAM,kBACuB;CAEvB,MAAME,aAAarC,iBACjB6B,SAASS,KAAKC,YAAY;EACxB,GAAGA;EACHd,MACE,OAAOc,OAAOd,SAAS,WACnBc,OAAOd,QAENZ,IAAIG,UACHC,cAAcJ,IAAI0B,OAAOd,MAA2BT,MAAM;EAClEQ,SAASX,IAAoBG,UAC3BC,cAAcJ,IAAI0B,OAAOf,QAAQR,MAAK;EACzC,EACH,CAAC;CAED,MAAMwB,kBAAkB3B,IAAiBG,UAAwB;EAC/D,MAAMyB,UAAUV,QAAQE;AAExB,SAAAd,gBACGf,QAAM;GAACgB,OAAOP;GAAE,IAAAQ,WAAA;AAAA,WACd,OAAOoB,YAAY,aAAaA,QAAQ5B,IAAIG,MAAM,GAAGyB;;GAAO,CAAA;;CAInE,MAAM,CAACC,YAAYzC,aACjB,IAAIH,qBAAqB;EACvBiC,QAAQ;GACN,GAAGA;GACHE,eAAeF,QAAQE,iBAClBpB,IAAIG,UAAUwB,eAAe3B,IAAIG,MAAM,GACxC2B,KAAAA;GACL;EACDR;EACAN,SAASQ,YAAW;EACrB,CACH,CAAC;CACD,IAAIO;AAEJ7C,oBAAmB;AACjB2C,YAAU,CAACG,UAAU,EACnBd,QAAQ;GACN,GAAGA;GACHE,eAAeF,QAAQE,iBAClBpB,IAAIG,UAAUwB,eAAe3B,IAAIG,MAAM,GACxC2B,KAAAA;GACN,EACD,CAAC;GACF;AAGF5C,oBAAmB;EACjB,MAAM+C,iBAAiBT,YAAY;AACnC,MAAIS,eACFJ,WAAU,CAACG,UAAU,EAAEhB,SAASiB,gBAAgB,CAAC;GAEnD;AAEF3C,eAAc;AACZ,MAAIyC,YAAY;AACdF,aAAU,CAACtB,MAAMwB,WAAW;AAE5B1C,mBAAgB;AACdwC,cAAU,CAACK,SAAS;KACpB;;GAEJ;AACF,eAAA;EAAA,IAAAC,OAAAC,QAAA;EAAA,IAAAC,QAAkDN;AAAU,SAAAM,UAAA,aAAAC,IAAAD,OAAAF,KAAA,GAAVJ,aAAUI;AAAA,SAAAA;KAAA"}
|
package/dist/esm/devtools.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import clientOnly from "./client-only.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
|
|
2
|
+
//#region src/devtools.tsx
|
|
3
|
+
var TanStackDevtools = clientOnly(() => import("./core.js").then((m) => m));
|
|
4
|
+
//#endregion
|
|
5
|
+
export { TanStackDevtools };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=devtools.js.map
|
package/dist/esm/devtools.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import clientOnly from './client-only'\n\nexport const TanStackDevtools = clientOnly(() =>\n import('./core').then((m) => m),\n)\n"],"
|
|
1
|
+
{"version":3,"file":"devtools.js","names":["clientOnly","TanStackDevtools","then","m"],"sources":["../../src/devtools.tsx"],"sourcesContent":["import clientOnly from './client-only'\n\nexport const TanStackDevtools = clientOnly(() =>\n import('./core').then((m) => m),\n)\n"],"mappings":";;AAEA,IAAaC,mBAAmBD,iBAC9B,OAAO,aAAUE,MAAMC,MAAMA,EAC/B,CAAC"}
|
package/dist/esm/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/solid-devtools",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"src"
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@tanstack/devtools": "0.
|
|
42
|
+
"@tanstack/devtools": "0.11.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"solid-js": "^1.9.9",
|
|
46
|
-
"vite-plugin-solid": "^2.11.
|
|
46
|
+
"vite-plugin-solid": "^2.11.11"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"solid-js": ">=1.9.7"
|
package/src/core.tsx
CHANGED
|
@@ -12,21 +12,23 @@ import type {
|
|
|
12
12
|
ClientEventBusConfig,
|
|
13
13
|
TanStackDevtoolsConfig,
|
|
14
14
|
TanStackDevtoolsPlugin,
|
|
15
|
+
TanStackDevtoolsPluginProps,
|
|
16
|
+
TanStackDevtoolsTheme,
|
|
15
17
|
} from '@tanstack/devtools'
|
|
16
18
|
|
|
17
19
|
type SolidPluginRender =
|
|
18
20
|
| JSX.Element
|
|
19
21
|
| ((
|
|
20
22
|
el: HTMLDivElement | HTMLHeadingElement,
|
|
21
|
-
|
|
23
|
+
props: TanStackDevtoolsPluginProps,
|
|
22
24
|
) => JSX.Element)
|
|
23
25
|
const convertRender = (
|
|
24
26
|
el: HTMLDivElement | HTMLHeadingElement,
|
|
25
27
|
Component: SolidPluginRender,
|
|
26
|
-
|
|
28
|
+
props: TanStackDevtoolsPluginProps,
|
|
27
29
|
) => (
|
|
28
30
|
<Portal mount={el}>
|
|
29
|
-
{typeof Component === 'function' ? Component(el,
|
|
31
|
+
{typeof Component === 'function' ? Component(el, props) : Component}
|
|
30
32
|
</Portal>
|
|
31
33
|
)
|
|
32
34
|
|
|
@@ -75,7 +77,7 @@ export type TanStackDevtoolsSolidPlugin = Omit<
|
|
|
75
77
|
name: string | SolidPluginRender
|
|
76
78
|
}
|
|
77
79
|
interface TriggerProps {
|
|
78
|
-
theme:
|
|
80
|
+
theme: TanStackDevtoolsTheme
|
|
79
81
|
}
|
|
80
82
|
export interface TanStackDevtoolsInit {
|
|
81
83
|
/**
|
|
@@ -128,10 +130,10 @@ export default function SolidDevtoolsCore({
|
|
|
128
130
|
typeof plugin.name === 'string'
|
|
129
131
|
? plugin.name
|
|
130
132
|
: // The check above confirms that `plugin.name` is of Render type
|
|
131
|
-
(el,
|
|
132
|
-
convertRender(el, plugin.name as SolidPluginRender,
|
|
133
|
-
render: (el: HTMLDivElement,
|
|
134
|
-
convertRender(el, plugin.render,
|
|
133
|
+
(el, props) =>
|
|
134
|
+
convertRender(el, plugin.name as SolidPluginRender, props),
|
|
135
|
+
render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) =>
|
|
136
|
+
convertRender(el, plugin.render, props),
|
|
135
137
|
})),
|
|
136
138
|
)
|
|
137
139
|
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|