@tanstack/devtools-utils 0.2.2 → 0.2.4
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/preact/esm/panel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n TComponentProps extends DevtoolsPanelProps | undefined,\n TCoreDevtoolsClass extends {\n mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n unmount: () => void\n },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n function Panel(props: TComponentProps) {\n const devToolRef = useRef<HTMLDivElement>(null)\n const devtools = useRef<TCoreDevtoolsClass | null>(null)\n useEffect(() => {\n if (devtools.current) return\n
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n TComponentProps extends DevtoolsPanelProps | undefined,\n TCoreDevtoolsClass extends {\n mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n unmount: () => void\n },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n function Panel(props: TComponentProps) {\n const devToolRef = useRef<HTMLDivElement>(null)\n const devtools = useRef<TCoreDevtoolsClass | null>(null)\n useEffect(() => {\n if (devtools.current) return\n devtools.current = new CoreClass()\n\n if (devToolRef.current) {\n devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n }\n\n return () => {\n if (devToolRef.current) {\n devtools.current?.unmount()\n devtools.current = null\n }\n }\n }, [props?.theme])\n\n return <div style={{ height: '100%' }} ref={devToolRef} />\n }\n\n function NoOpPanel(_props: TComponentProps) {\n return <></>\n }\n return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAyBO,SAAS,kBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AACtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}
|
package/dist/react/esm/panel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n TComponentProps extends DevtoolsPanelProps | undefined,\n TCoreDevtoolsClass extends {\n mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n unmount: () => void\n },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n function Panel(props: TComponentProps) {\n const devToolRef = useRef<HTMLDivElement>(null)\n const devtools = useRef<TCoreDevtoolsClass | null>(null)\n useEffect(() => {\n if (devtools.current) return\n
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n TComponentProps extends DevtoolsPanelProps | undefined,\n TCoreDevtoolsClass extends {\n mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n unmount: () => void\n },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n function Panel(props: TComponentProps) {\n const devToolRef = useRef<HTMLDivElement>(null)\n const devtools = useRef<TCoreDevtoolsClass | null>(null)\n useEffect(() => {\n if (devtools.current) return\n devtools.current = new CoreClass()\n\n if (devToolRef.current) {\n devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n }\n\n return () => {\n if (devToolRef.current) {\n devtools.current?.unmount()\n devtools.current = null\n }\n }\n }, [props?.theme])\n\n return <div style={{ height: '100%' }} ref={devToolRef} />\n }\n\n function NoOpPanel(_props: TComponentProps) {\n return <></>\n }\n return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AACtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}
|
package/package.json
CHANGED
package/src/preact/panel.tsx
CHANGED
|
@@ -35,7 +35,6 @@ export function createPreactPanel<
|
|
|
35
35
|
const devtools = useRef<TCoreDevtoolsClass | null>(null)
|
|
36
36
|
useEffect(() => {
|
|
37
37
|
if (devtools.current) return
|
|
38
|
-
|
|
39
38
|
devtools.current = new CoreClass()
|
|
40
39
|
|
|
41
40
|
if (devToolRef.current) {
|
|
@@ -45,6 +44,7 @@ export function createPreactPanel<
|
|
|
45
44
|
return () => {
|
|
46
45
|
if (devToolRef.current) {
|
|
47
46
|
devtools.current?.unmount()
|
|
47
|
+
devtools.current = null
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
}, [props?.theme])
|
package/src/react/panel.tsx
CHANGED
|
@@ -33,7 +33,6 @@ export function createReactPanel<
|
|
|
33
33
|
const devtools = useRef<TCoreDevtoolsClass | null>(null)
|
|
34
34
|
useEffect(() => {
|
|
35
35
|
if (devtools.current) return
|
|
36
|
-
|
|
37
36
|
devtools.current = new CoreClass()
|
|
38
37
|
|
|
39
38
|
if (devToolRef.current) {
|
|
@@ -43,6 +42,7 @@ export function createReactPanel<
|
|
|
43
42
|
return () => {
|
|
44
43
|
if (devToolRef.current) {
|
|
45
44
|
devtools.current?.unmount()
|
|
45
|
+
devtools.current = null
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}, [props?.theme])
|