From 96ba40c5fbb4dbad748e78eb7e8ebbbc17410bc6 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Tue, 23 Sep 2025 16:16:30 +0200 Subject: [PATCH 1/4] chore: fix issue with core class --- packages/devtools-utils/src/solid/class.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/devtools-utils/src/solid/class.tsx b/packages/devtools-utils/src/solid/class.tsx index bda0ac5..cbe3c16 100644 --- a/packages/devtools-utils/src/solid/class.tsx +++ b/packages/devtools-utils/src/solid/class.tsx @@ -18,7 +18,7 @@ export function constructCoreClass(Component: () => JSX.Element) { #Component: any #ThemeProvider: any - constructor() {} + constructor() { } async mount(el: T, theme: 'light' | 'dark') { const { lazy } = await import('solid-js') @@ -28,8 +28,7 @@ export function constructCoreClass(Component: () => JSX.Element) { } const mountTo = el const dispose = render(() => { - // eslint-disable-next-line @typescript-eslint/require-await - this.#Component = lazy(async () => ({ default: Component })) + this.#Component = Component this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({ @@ -65,8 +64,8 @@ export function constructCoreClass(Component: () => JSX.Element) { constructor() { super() } - async mount(_el: T, _theme: 'light' | 'dark') {} - unmount() {} + async mount(_el: T, _theme: 'light' | 'dark') { } + unmount() { } } return [DevtoolsCore, NoOpDevtoolsCore] as const } From f8ff65c51a67874d7efdc8ec506694ccf9b20fd2 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 14:17:38 +0000 Subject: [PATCH 2/4] ci: apply automated fixes --- packages/devtools-utils/src/solid/class.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devtools-utils/src/solid/class.tsx b/packages/devtools-utils/src/solid/class.tsx index cbe3c16..c48961c 100644 --- a/packages/devtools-utils/src/solid/class.tsx +++ b/packages/devtools-utils/src/solid/class.tsx @@ -18,7 +18,7 @@ export function constructCoreClass(Component: () => JSX.Element) { #Component: any #ThemeProvider: any - constructor() { } + constructor() {} async mount(el: T, theme: 'light' | 'dark') { const { lazy } = await import('solid-js') @@ -64,8 +64,8 @@ export function constructCoreClass(Component: () => JSX.Element) { constructor() { super() } - async mount(_el: T, _theme: 'light' | 'dark') { } - unmount() { } + async mount(_el: T, _theme: 'light' | 'dark') {} + unmount() {} } return [DevtoolsCore, NoOpDevtoolsCore] as const } From 3090430729eb8f0d80681b1a2e61e5e91ac526a9 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Tue, 23 Sep 2025 16:25:32 +0200 Subject: [PATCH 3/4] fix --- packages/devtools-utils/src/react/panel.tsx | 4 +++- packages/devtools-utils/src/solid/panel.tsx | 15 ++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/devtools-utils/src/react/panel.tsx b/packages/devtools-utils/src/react/panel.tsx index c235356..274ff8b 100644 --- a/packages/devtools-utils/src/react/panel.tsx +++ b/packages/devtools-utils/src/react/panel.tsx @@ -41,7 +41,9 @@ export function createReactPanel< } return () => { - devtools.current?.unmount() + if (devToolRef.current) { + devtools.current?.unmount() + } } }, [props?.theme]) diff --git a/packages/devtools-utils/src/solid/panel.tsx b/packages/devtools-utils/src/solid/panel.tsx index 89cdf20..8051118 100644 --- a/packages/devtools-utils/src/solid/panel.tsx +++ b/packages/devtools-utils/src/solid/panel.tsx @@ -1,6 +1,6 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */ -import { onCleanup, onMount } from 'solid-js' +import { createSignal, onCleanup, onMount } from 'solid-js' import type { ClassType } from './class' export interface DevtoolsPanelProps { @@ -12,17 +12,14 @@ export function createSolidPanel< >(CoreClass: ClassType) { function Panel(props: TComponentProps) { let devToolRef: HTMLDivElement | undefined - + const [devtools] = createSignal(new CoreClass()) onMount(() => { - const devtools = new CoreClass() - if (devToolRef) { - devtools.mount(devToolRef, props?.theme ?? 'dark') - - onCleanup(() => { - devtools.unmount() - }) + devtools().mount(devToolRef, props?.theme ?? 'dark') } + onCleanup(() => { + devtools().unmount() + }) }) return
From 53920e6459c9cbf92b334cbb34030ff9e366e1bb Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Tue, 23 Sep 2025 16:38:29 +0200 Subject: [PATCH 4/4] changeset --- .changeset/free-women-film.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/free-women-film.md diff --git a/.changeset/free-women-film.md b/.changeset/free-women-film.md new file mode 100644 index 0000000..1ba9c1c --- /dev/null +++ b/.changeset/free-women-film.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools-utils': patch +--- + +fix issues with mounting