@tanstack/devtools 0.1.0 → 0.1.1
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/cjs/components/main-panel.cjs.map +1 -1
- package/dist/cjs/components/main-panel.d.cts +1 -2
- package/dist/cjs/context/devtools-context.cjs.map +1 -1
- package/dist/cjs/context/devtools-context.d.cts +44 -2
- package/dist/cjs/core.cjs.map +1 -1
- package/dist/cjs/core.d.cts +24 -0
- package/dist/esm/components/main-panel.d.ts +1 -2
- package/dist/esm/components/main-panel.js.map +1 -1
- package/dist/esm/context/devtools-context.d.ts +44 -2
- package/dist/esm/context/devtools-context.js.map +1 -1
- package/dist/esm/core.d.ts +24 -0
- package/dist/esm/core.js.map +1 -1
- package/package.json +1 -1
- package/src/components/main-panel.tsx +1 -2
- package/src/context/devtools-context.tsx +44 -2
- package/src/core.tsx +24 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main-panel.cjs","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { JSX } from 'solid-js
|
|
1
|
+
{"version":3,"file":"main-panel.cjs","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport const MainPanel = (props: {\n isOpen: Accessor<boolean>\n children: JSX.Element\n isResizing: Accessor<boolean>\n}) => {\n const styles = useStyles()\n const { height } = useHeight()\n const { settings } = useDevtoolsSettings()\n return (\n <div\n id={TANSTACK_DEVTOOLS}\n style={{\n height: height() + 'px',\n }}\n class={clsx(\n styles().devtoolsPanelContainer(settings().panelLocation),\n styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n styles().devtoolsPanelContainerVisibility(props.isOpen()),\n styles().devtoolsPanelContainerResizing(props.isResizing),\n )}\n >\n {props.children}\n </div>\n )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","_v$2","clsx","devtoolsPanelContainer","panelLocation","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;;AAMO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,6BAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,uCAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,qBAAAF,MAAA,MAEQG,yBAAiB;AAAAC,QAAAA,OAAAJ,MAAA,MAWpBP,MAAMY,QAAQ;AAAAC,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MATLZ,OAAAA,IAAW,MAAIa,OAElBC,KACLhB,SAASiB,uBAAuBb,WAAWc,aAAa,GACxDlB,OAAAA,EAASmB,gCAAgCpB,MAAMqB,OAAAA,GAAUlB,OAAAA,CAAQ,GACjEF,OAAAA,EAASqB,iCAAiCtB,MAAMqB,OAAAA,CAAQ,GACxDpB,OAAAA,EAASsB,+BAA+BvB,MAAMwB,UAAU,CAC1D;AAACT,cAAAD,IAAAW,OAAAX,IAAAW,IAAAV,QAAA,OAAAR,KAAAmB,MAAAC,YAAA,UAAAZ,GAAA,IAAAR,KAAAmB,MAAAE,eAAA,QAAA;AAAAZ,eAAAF,IAAAe,KAAAC,IAAAA,UAAAvB,MAAAO,IAAAe,IAAAb,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAKP;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-context.cjs","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n TANSTACK_DEVTOOLS_SETTINGS,\n TANSTACK_DEVTOOLS_STATE,\n getStorageItem,\n setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\
|
|
1
|
+
{"version":3,"file":"devtools-context.cjs","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n TANSTACK_DEVTOOLS_SETTINGS,\n TANSTACK_DEVTOOLS_STATE,\n getStorageItem,\n setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\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 * // If a string, it will be used as the plugin name\n * name: \"Your Plugin\",\n * render: () => {}\n * }\n * ```\n * or\n *\n * ```ts\n * {\n * // If a function, it will be called with the mount element\n * name: (el) => {\n * el.innerText = \"Your Plugin Name\"\n * // Your name logic here\n * },\n * render: () => {}\n * }\n * ```\n */\n name: string | ((el: HTMLHeadingElement) => void)\n /**\n * Unique identifier for the plugin.\n * If not provided, it will be generated based on the name.\n */\n id?: string\n /**\n * Render the plugin UI by using the provided element. This function will be called\n * when the plugin tab is clicked and expected to be mounted.\n * @param el The mount element for the plugin.\n * @returns void\n *\n * Example:\n * ```ts\n * render: (el) => {\n * el.innerHTML = \"<h1>Your Plugin</h1>\"\n * }\n * ```\n */\n render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n store: DevtoolsStore\n setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n children: JSX.Element\n plugins?: Array<TanStackDevtoolsPlugin>\n config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n return {\n ...settings,\n }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n // if set by user, return the plugin id\n if (plugin.id) {\n return plugin.id\n }\n if (typeof plugin.name === 'string') {\n // if name is a string, use it to generate an id\n return plugin.name.toLowerCase().replace(' ', '-')\n }\n // Name is JSX? return the index as a string\n return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n config?: TanStackDevtoolsConfig,\n plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n const settings = getSettings()\n\n const state: DevtoolsStore = {\n ...initialState,\n plugins:\n plugins?.map((plugin, i) => {\n const id = generatePluginId(plugin, i)\n return {\n ...plugin,\n id,\n }\n }) || [],\n state: {\n ...initialState.state,\n ...(existingState ? JSON.parse(existingState) : {}),\n },\n settings: {\n ...initialState.settings,\n ...config,\n ...settings,\n },\n }\n return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n const [store, setStore] = createStore(\n getExistingStateFromStorage(props.config, props.plugins),\n )\n\n const value = {\n store,\n setStore: (\n updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n ) => {\n const newState = updater(store)\n const { settings, state: internalState } = newState\n // Store user settings for dev tools into local storage\n setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n // Store general state into local storage\n setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n setStore((prev) => ({\n ...prev,\n ...newState,\n }))\n },\n }\n\n return (\n <DevtoolsContext.Provider value={value}>\n {props.children}\n </DevtoolsContext.Provider>\n )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;;;AA6DO,MAAMA,kBAAkBC,QAAAA,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,QAAAA,eAAeC,kCAA0B;AAChE,QAAMC,WAAWC,SAAAA,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAOH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG;AAAA,EACnD;AAEA,SAAOJ,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,QAAAA,eAAegB,+BAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC,cAAAA;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,cAAAA,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,cAAAA,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,SAAOC,QAAQ,IAAIC,MAAAA,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IAAA,OACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,OAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,cAAAA,eAAe/B,QAAAA,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,cAAAA,eAAehB,QAAAA,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,IAAAA,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;;;"}
|
|
@@ -1,9 +1,51 @@
|
|
|
1
1
|
import { DevtoolsStore } from './devtools-store.cjs';
|
|
2
|
-
import { Setter } from 'solid-js';
|
|
3
|
-
import { JSX } from 'solid-js/jsx-runtime';
|
|
2
|
+
import { JSX, Setter } from 'solid-js';
|
|
4
3
|
export interface TanStackDevtoolsPlugin {
|
|
4
|
+
/**
|
|
5
|
+
* Name to be displayed in the devtools UI.
|
|
6
|
+
* If a string, it will be used as the plugin name.
|
|
7
|
+
* If a function, it will be called with the mount element.
|
|
8
|
+
*
|
|
9
|
+
* Example:
|
|
10
|
+
* ```ts
|
|
11
|
+
* {
|
|
12
|
+
* // If a string, it will be used as the plugin name
|
|
13
|
+
* name: "Your Plugin",
|
|
14
|
+
* render: () => {}
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
* or
|
|
18
|
+
*
|
|
19
|
+
* ```ts
|
|
20
|
+
* {
|
|
21
|
+
* // If a function, it will be called with the mount element
|
|
22
|
+
* name: (el) => {
|
|
23
|
+
* el.innerText = "Your Plugin Name"
|
|
24
|
+
* // Your name logic here
|
|
25
|
+
* },
|
|
26
|
+
* render: () => {}
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
5
30
|
name: string | ((el: HTMLHeadingElement) => void);
|
|
31
|
+
/**
|
|
32
|
+
* Unique identifier for the plugin.
|
|
33
|
+
* If not provided, it will be generated based on the name.
|
|
34
|
+
*/
|
|
6
35
|
id?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Render the plugin UI by using the provided element. This function will be called
|
|
38
|
+
* when the plugin tab is clicked and expected to be mounted.
|
|
39
|
+
* @param el The mount element for the plugin.
|
|
40
|
+
* @returns void
|
|
41
|
+
*
|
|
42
|
+
* Example:
|
|
43
|
+
* ```ts
|
|
44
|
+
* render: (el) => {
|
|
45
|
+
* el.innerHTML = "<h1>Your Plugin</h1>"
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
7
49
|
render: (el: HTMLDivElement) => void;
|
|
8
50
|
}
|
|
9
51
|
export declare const DevtoolsContext: import('solid-js').Context<{
|
package/dist/cjs/core.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n TanStackDevtoolsConfig,\n TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n config?: Partial<TanStackDevtoolsConfig>\n plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport class TanStackDevtoolsCore {\n #config: TanStackDevtoolsConfig = {\n ...initialState.settings,\n }\n #plugins: Array<TanStackDevtoolsPlugin> = []\n #isMounted = false\n #dispose?: () => void\n #Component: any\n\n constructor(init: TanStackDevtoolsInit) {\n this.#plugins = init.plugins || []\n this.#config = {\n ...this.#config,\n ...init.config,\n }\n }\n\n mount<T extends HTMLElement>(el: T) {\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n this.#Component = lazy(() => import('./devtools'))\n\n const Devtools = this.#Component\n\n return (\n <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n <Portal mount={mountTo}>\n <Devtools />\n </Portal>\n </DevtoolsProvider>\n )\n }, mountTo)\n\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n\n setConfig(config: Partial<TanStackDevtoolsInit>) {\n this.#config = {\n ...this.#config,\n ...config,\n }\n }\n}\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setConfig"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n TanStackDevtoolsConfig,\n TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\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 * Array of plugins to be used in the devtools.\n * Each plugin has a `render` function that gives you the dom node to mount into\n *\n * Example:\n * ```ts\n * const devtools = new TanStackDevtoolsCore({\n * plugins: [\n * {\n * id: \"your-plugin-id\",\n * name: \"Your Plugin\",\n * render: (el) => {\n * // Your render logic here\n * },\n * },\n * ],\n * })\n * ```\n */\n plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport class TanStackDevtoolsCore {\n #config: TanStackDevtoolsConfig = {\n ...initialState.settings,\n }\n #plugins: Array<TanStackDevtoolsPlugin> = []\n #isMounted = false\n #dispose?: () => void\n #Component: any\n\n constructor(init: TanStackDevtoolsInit) {\n this.#plugins = init.plugins || []\n this.#config = {\n ...this.#config,\n ...init.config,\n }\n }\n\n mount<T extends HTMLElement>(el: T) {\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n this.#Component = lazy(() => import('./devtools'))\n\n const Devtools = this.#Component\n\n return (\n <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n <Portal mount={mountTo}>\n <Devtools />\n </Portal>\n </DevtoolsProvider>\n )\n }, mountTo)\n\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n\n setConfig(config: Partial<TanStackDevtoolsInit>) {\n this.#config = {\n ...this.#config,\n ...config,\n }\n }\n}\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setConfig"],"mappings":";;;;;;;AAsCO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,2BAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGD,KAAKE;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,IAAAA,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,QAAAA,KAAK,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,6CAAA,QAAO,gBAAY,CAAA,CAAA,CAAC;AAEjD,YAAMC,WAAW,KAAK;AAEtB,aAAAC,IAAAA,gBACGC,gBAAAA,kBAAgB;AAAA,QAAA,IAACZ,UAAO;AAAA,iBAAEQ,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAK,WAAA;AAAA,iBAAAF,IAAAA,gBAC3DG,IAAAA,QAAM;AAAA,YAACZ,OAAOG;AAAAA,YAAO,IAAAQ,WAAA;AAAA,qBAAAF,IAAAA,gBACnBD,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAIjB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAS,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIX,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAY,UAAUf,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;;"}
|
package/dist/cjs/core.d.cts
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from './context/devtools-context.cjs';
|
|
2
2
|
export interface TanStackDevtoolsInit {
|
|
3
|
+
/**
|
|
4
|
+
* Configuration for the devtools shell. These configuration options are used to set the
|
|
5
|
+
* initial state of the devtools when it is started for the first time. Afterwards,
|
|
6
|
+
* the settings are persisted in local storage and changed through the settings panel.
|
|
7
|
+
*/
|
|
3
8
|
config?: Partial<TanStackDevtoolsConfig>;
|
|
9
|
+
/**
|
|
10
|
+
* Array of plugins to be used in the devtools.
|
|
11
|
+
* Each plugin has a `render` function that gives you the dom node to mount into
|
|
12
|
+
*
|
|
13
|
+
* Example:
|
|
14
|
+
* ```ts
|
|
15
|
+
* const devtools = new TanStackDevtoolsCore({
|
|
16
|
+
* plugins: [
|
|
17
|
+
* {
|
|
18
|
+
* id: "your-plugin-id",
|
|
19
|
+
* name: "Your Plugin",
|
|
20
|
+
* render: (el) => {
|
|
21
|
+
* // Your render logic here
|
|
22
|
+
* },
|
|
23
|
+
* },
|
|
24
|
+
* ],
|
|
25
|
+
* })
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
4
28
|
plugins?: Array<TanStackDevtoolsPlugin>;
|
|
5
29
|
}
|
|
6
30
|
export declare class TanStackDevtoolsCore {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { JSX } from 'solid-js
|
|
1
|
+
{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport const MainPanel = (props: {\n isOpen: Accessor<boolean>\n children: JSX.Element\n isResizing: Accessor<boolean>\n}) => {\n const styles = useStyles()\n const { height } = useHeight()\n const { settings } = useDevtoolsSettings()\n return (\n <div\n id={TANSTACK_DEVTOOLS}\n style={{\n height: height() + 'px',\n }}\n class={clsx(\n styles().devtoolsPanelContainer(settings().panelLocation),\n styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n styles().devtoolsPanelContainerVisibility(props.isOpen()),\n styles().devtoolsPanelContainerResizing(props.isResizing),\n )}\n >\n {props.children}\n </div>\n )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","_v$2","clsx","devtoolsPanelContainer","panelLocation","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;AAMO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAA,MAWpBP,MAAMY,QAAQ;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MATLZ,OAAAA,IAAW,MAAIa,OAElBC,KACLhB,SAASiB,uBAAuBb,WAAWc,aAAa,GACxDlB,OAAAA,EAASmB,gCAAgCpB,MAAMqB,OAAAA,GAAUlB,OAAAA,CAAQ,GACjEF,OAAAA,EAASqB,iCAAiCtB,MAAMqB,OAAAA,CAAQ,GACxDpB,OAAAA,EAASsB,+BAA+BvB,MAAMwB,UAAU,CAC1D;AAACT,cAAAD,IAAAW,OAAAX,IAAAW,IAAAV,QAAA,OAAAR,KAAAmB,MAAAC,YAAA,UAAAZ,GAAA,IAAAR,KAAAmB,MAAAE,eAAA,QAAA;AAAAZ,eAAAF,IAAAe,KAAAC,UAAAvB,MAAAO,IAAAe,IAAAb,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAKP;"}
|
|
@@ -1,9 +1,51 @@
|
|
|
1
1
|
import { DevtoolsStore } from './devtools-store.js';
|
|
2
|
-
import { Setter } from 'solid-js';
|
|
3
|
-
import { JSX } from 'solid-js/jsx-runtime';
|
|
2
|
+
import { JSX, Setter } from 'solid-js';
|
|
4
3
|
export interface TanStackDevtoolsPlugin {
|
|
4
|
+
/**
|
|
5
|
+
* Name to be displayed in the devtools UI.
|
|
6
|
+
* If a string, it will be used as the plugin name.
|
|
7
|
+
* If a function, it will be called with the mount element.
|
|
8
|
+
*
|
|
9
|
+
* Example:
|
|
10
|
+
* ```ts
|
|
11
|
+
* {
|
|
12
|
+
* // If a string, it will be used as the plugin name
|
|
13
|
+
* name: "Your Plugin",
|
|
14
|
+
* render: () => {}
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
* or
|
|
18
|
+
*
|
|
19
|
+
* ```ts
|
|
20
|
+
* {
|
|
21
|
+
* // If a function, it will be called with the mount element
|
|
22
|
+
* name: (el) => {
|
|
23
|
+
* el.innerText = "Your Plugin Name"
|
|
24
|
+
* // Your name logic here
|
|
25
|
+
* },
|
|
26
|
+
* render: () => {}
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
5
30
|
name: string | ((el: HTMLHeadingElement) => void);
|
|
31
|
+
/**
|
|
32
|
+
* Unique identifier for the plugin.
|
|
33
|
+
* If not provided, it will be generated based on the name.
|
|
34
|
+
*/
|
|
6
35
|
id?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Render the plugin UI by using the provided element. This function will be called
|
|
38
|
+
* when the plugin tab is clicked and expected to be mounted.
|
|
39
|
+
* @param el The mount element for the plugin.
|
|
40
|
+
* @returns void
|
|
41
|
+
*
|
|
42
|
+
* Example:
|
|
43
|
+
* ```ts
|
|
44
|
+
* render: (el) => {
|
|
45
|
+
* el.innerHTML = "<h1>Your Plugin</h1>"
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
7
49
|
render: (el: HTMLDivElement) => void;
|
|
8
50
|
}
|
|
9
51
|
export declare const DevtoolsContext: import('solid-js').Context<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n TANSTACK_DEVTOOLS_SETTINGS,\n TANSTACK_DEVTOOLS_STATE,\n getStorageItem,\n setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\
|
|
1
|
+
{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n TANSTACK_DEVTOOLS_SETTINGS,\n TANSTACK_DEVTOOLS_STATE,\n getStorageItem,\n setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\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 * // If a string, it will be used as the plugin name\n * name: \"Your Plugin\",\n * render: () => {}\n * }\n * ```\n * or\n *\n * ```ts\n * {\n * // If a function, it will be called with the mount element\n * name: (el) => {\n * el.innerText = \"Your Plugin Name\"\n * // Your name logic here\n * },\n * render: () => {}\n * }\n * ```\n */\n name: string | ((el: HTMLHeadingElement) => void)\n /**\n * Unique identifier for the plugin.\n * If not provided, it will be generated based on the name.\n */\n id?: string\n /**\n * Render the plugin UI by using the provided element. This function will be called\n * when the plugin tab is clicked and expected to be mounted.\n * @param el The mount element for the plugin.\n * @returns void\n *\n * Example:\n * ```ts\n * render: (el) => {\n * el.innerHTML = \"<h1>Your Plugin</h1>\"\n * }\n * ```\n */\n render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n store: DevtoolsStore\n setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n children: JSX.Element\n plugins?: Array<TanStackDevtoolsPlugin>\n config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n return {\n ...settings,\n }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n // if set by user, return the plugin id\n if (plugin.id) {\n return plugin.id\n }\n if (typeof plugin.name === 'string') {\n // if name is a string, use it to generate an id\n return plugin.name.toLowerCase().replace(' ', '-')\n }\n // Name is JSX? return the index as a string\n return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n config?: TanStackDevtoolsConfig,\n plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n const settings = getSettings()\n\n const state: DevtoolsStore = {\n ...initialState,\n plugins:\n plugins?.map((plugin, i) => {\n const id = generatePluginId(plugin, i)\n return {\n ...plugin,\n id,\n }\n }) || [],\n state: {\n ...initialState.state,\n ...(existingState ? JSON.parse(existingState) : {}),\n },\n settings: {\n ...initialState.settings,\n ...config,\n ...settings,\n },\n }\n return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n const [store, setStore] = createStore(\n getExistingStateFromStorage(props.config, props.plugins),\n )\n\n const value = {\n store,\n setStore: (\n updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n ) => {\n const newState = updater(store)\n const { settings, state: internalState } = newState\n // Store user settings for dev tools into local storage\n setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n // Store general state into local storage\n setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n setStore((prev) => ({\n ...prev,\n ...newState,\n }))\n },\n }\n\n return (\n <DevtoolsContext.Provider value={value}>\n {props.children}\n </DevtoolsContext.Provider>\n )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AA6DO,MAAMA,kBAAkBC,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,eAAeC,0BAA0B;AAChE,QAAMC,WAAWC,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAOH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG;AAAA,EACnD;AAEA,SAAOJ,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,eAAegB,uBAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,OAAOC,QAAQ,IAAIC,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,KAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAe/B,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,qBAAehB,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;"}
|
package/dist/esm/core.d.ts
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from './context/devtools-context.js';
|
|
2
2
|
export interface TanStackDevtoolsInit {
|
|
3
|
+
/**
|
|
4
|
+
* Configuration for the devtools shell. These configuration options are used to set the
|
|
5
|
+
* initial state of the devtools when it is started for the first time. Afterwards,
|
|
6
|
+
* the settings are persisted in local storage and changed through the settings panel.
|
|
7
|
+
*/
|
|
3
8
|
config?: Partial<TanStackDevtoolsConfig>;
|
|
9
|
+
/**
|
|
10
|
+
* Array of plugins to be used in the devtools.
|
|
11
|
+
* Each plugin has a `render` function that gives you the dom node to mount into
|
|
12
|
+
*
|
|
13
|
+
* Example:
|
|
14
|
+
* ```ts
|
|
15
|
+
* const devtools = new TanStackDevtoolsCore({
|
|
16
|
+
* plugins: [
|
|
17
|
+
* {
|
|
18
|
+
* id: "your-plugin-id",
|
|
19
|
+
* name: "Your Plugin",
|
|
20
|
+
* render: (el) => {
|
|
21
|
+
* // Your render logic here
|
|
22
|
+
* },
|
|
23
|
+
* },
|
|
24
|
+
* ],
|
|
25
|
+
* })
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
4
28
|
plugins?: Array<TanStackDevtoolsPlugin>;
|
|
5
29
|
}
|
|
6
30
|
export declare class TanStackDevtoolsCore {
|
package/dist/esm/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n TanStackDevtoolsConfig,\n TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n config?: Partial<TanStackDevtoolsConfig>\n plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport class TanStackDevtoolsCore {\n #config: TanStackDevtoolsConfig = {\n ...initialState.settings,\n }\n #plugins: Array<TanStackDevtoolsPlugin> = []\n #isMounted = false\n #dispose?: () => void\n #Component: any\n\n constructor(init: TanStackDevtoolsInit) {\n this.#plugins = init.plugins || []\n this.#config = {\n ...this.#config,\n ...init.config,\n }\n }\n\n mount<T extends HTMLElement>(el: T) {\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n this.#Component = lazy(() => import('./devtools'))\n\n const Devtools = this.#Component\n\n return (\n <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n <Portal mount={mountTo}>\n <Devtools />\n </Portal>\n </DevtoolsProvider>\n )\n }, mountTo)\n\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n\n setConfig(config: Partial<TanStackDevtoolsInit>) {\n this.#config = {\n ...this.#config,\n ...config,\n }\n }\n}\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setConfig"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n TanStackDevtoolsConfig,\n TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\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 * Array of plugins to be used in the devtools.\n * Each plugin has a `render` function that gives you the dom node to mount into\n *\n * Example:\n * ```ts\n * const devtools = new TanStackDevtoolsCore({\n * plugins: [\n * {\n * id: \"your-plugin-id\",\n * name: \"Your Plugin\",\n * render: (el) => {\n * // Your render logic here\n * },\n * },\n * ],\n * })\n * ```\n */\n plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport class TanStackDevtoolsCore {\n #config: TanStackDevtoolsConfig = {\n ...initialState.settings,\n }\n #plugins: Array<TanStackDevtoolsPlugin> = []\n #isMounted = false\n #dispose?: () => void\n #Component: any\n\n constructor(init: TanStackDevtoolsInit) {\n this.#plugins = init.plugins || []\n this.#config = {\n ...this.#config,\n ...init.config,\n }\n }\n\n mount<T extends HTMLElement>(el: T) {\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n this.#Component = lazy(() => import('./devtools'))\n\n const Devtools = this.#Component\n\n return (\n <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n <Portal mount={mountTo}>\n <Devtools />\n </Portal>\n </DevtoolsProvider>\n )\n }, mountTo)\n\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n\n setConfig(config: Partial<TanStackDevtoolsInit>) {\n this.#config = {\n ...this.#config,\n ...config,\n }\n }\n}\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setConfig"],"mappings":";;;;AAsCO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,aAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGD,KAAKE;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,KAAK,MAAM,OAAO,eAAY,CAAC;AAEjD,YAAMC,WAAW,KAAK;AAEtB,aAAAC,gBACGC,kBAAgB;AAAA,QAAA,IAACZ,UAAO;AAAA,iBAAEQ,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAK,WAAA;AAAA,iBAAAF,gBAC3DG,QAAM;AAAA,YAACZ,OAAOG;AAAAA,YAAO,IAAAQ,WAAA;AAAA,qBAAAF,gBACnBD,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAIjB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAS,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIX,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAY,UAAUf,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;"}
|
package/package.json
CHANGED
|
@@ -2,8 +2,7 @@ import clsx from 'clsx'
|
|
|
2
2
|
import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
|
|
3
3
|
import { useStyles } from '../styles/use-styles'
|
|
4
4
|
import { TANSTACK_DEVTOOLS } from '../utils/storage'
|
|
5
|
-
import type { JSX } from 'solid-js
|
|
6
|
-
import type { Accessor } from 'solid-js'
|
|
5
|
+
import type { Accessor, JSX } from 'solid-js'
|
|
7
6
|
|
|
8
7
|
export const MainPanel = (props: {
|
|
9
8
|
isOpen: Accessor<boolean>
|
|
@@ -9,12 +9,54 @@ import {
|
|
|
9
9
|
} from '../utils/storage'
|
|
10
10
|
import { initialState } from './devtools-store'
|
|
11
11
|
import type { DevtoolsStore } from './devtools-store'
|
|
12
|
-
import type { Setter } from 'solid-js'
|
|
13
|
-
import type { JSX } from 'solid-js/jsx-runtime'
|
|
12
|
+
import type { JSX, Setter } from 'solid-js'
|
|
14
13
|
|
|
15
14
|
export interface TanStackDevtoolsPlugin {
|
|
15
|
+
/**
|
|
16
|
+
* Name to be displayed in the devtools UI.
|
|
17
|
+
* If a string, it will be used as the plugin name.
|
|
18
|
+
* If a function, it will be called with the mount element.
|
|
19
|
+
*
|
|
20
|
+
* Example:
|
|
21
|
+
* ```ts
|
|
22
|
+
* {
|
|
23
|
+
* // If a string, it will be used as the plugin name
|
|
24
|
+
* name: "Your Plugin",
|
|
25
|
+
* render: () => {}
|
|
26
|
+
* }
|
|
27
|
+
* ```
|
|
28
|
+
* or
|
|
29
|
+
*
|
|
30
|
+
* ```ts
|
|
31
|
+
* {
|
|
32
|
+
* // If a function, it will be called with the mount element
|
|
33
|
+
* name: (el) => {
|
|
34
|
+
* el.innerText = "Your Plugin Name"
|
|
35
|
+
* // Your name logic here
|
|
36
|
+
* },
|
|
37
|
+
* render: () => {}
|
|
38
|
+
* }
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
16
41
|
name: string | ((el: HTMLHeadingElement) => void)
|
|
42
|
+
/**
|
|
43
|
+
* Unique identifier for the plugin.
|
|
44
|
+
* If not provided, it will be generated based on the name.
|
|
45
|
+
*/
|
|
17
46
|
id?: string
|
|
47
|
+
/**
|
|
48
|
+
* Render the plugin UI by using the provided element. This function will be called
|
|
49
|
+
* when the plugin tab is clicked and expected to be mounted.
|
|
50
|
+
* @param el The mount element for the plugin.
|
|
51
|
+
* @returns void
|
|
52
|
+
*
|
|
53
|
+
* Example:
|
|
54
|
+
* ```ts
|
|
55
|
+
* render: (el) => {
|
|
56
|
+
* el.innerHTML = "<h1>Your Plugin</h1>"
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
18
60
|
render: (el: HTMLDivElement) => void
|
|
19
61
|
}
|
|
20
62
|
export const DevtoolsContext = createContext<{
|
package/src/core.tsx
CHANGED
|
@@ -8,7 +8,31 @@ import type {
|
|
|
8
8
|
} from './context/devtools-context'
|
|
9
9
|
|
|
10
10
|
export interface TanStackDevtoolsInit {
|
|
11
|
+
/**
|
|
12
|
+
* Configuration for the devtools shell. These configuration options are used to set the
|
|
13
|
+
* initial state of the devtools when it is started for the first time. Afterwards,
|
|
14
|
+
* the settings are persisted in local storage and changed through the settings panel.
|
|
15
|
+
*/
|
|
11
16
|
config?: Partial<TanStackDevtoolsConfig>
|
|
17
|
+
/**
|
|
18
|
+
* Array of plugins to be used in the devtools.
|
|
19
|
+
* Each plugin has a `render` function that gives you the dom node to mount into
|
|
20
|
+
*
|
|
21
|
+
* Example:
|
|
22
|
+
* ```ts
|
|
23
|
+
* const devtools = new TanStackDevtoolsCore({
|
|
24
|
+
* plugins: [
|
|
25
|
+
* {
|
|
26
|
+
* id: "your-plugin-id",
|
|
27
|
+
* name: "Your Plugin",
|
|
28
|
+
* render: (el) => {
|
|
29
|
+
* // Your render logic here
|
|
30
|
+
* },
|
|
31
|
+
* },
|
|
32
|
+
* ],
|
|
33
|
+
* })
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
12
36
|
plugins?: Array<TanStackDevtoolsPlugin>
|
|
13
37
|
}
|
|
14
38
|
|