diff --git a/examples/react/start-bun/package.json b/examples/react/start-bun/package.json index a70abb38c30..c9e2dd7c256 100644 --- a/examples/react/start-bun/package.json +++ b/examples/react/start-bun/package.json @@ -14,7 +14,7 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.18", - "@tanstack/react-devtools": "^0.7.0", + "@tanstack/react-devtools": "^0.9.0", "@tanstack/react-router": "^1.166.2", "@tanstack/react-router-devtools": "^1.166.2", "@tanstack/react-router-ssr-query": "^1.166.2", diff --git a/examples/react/start-i18n-paraglide/package.json b/examples/react/start-i18n-paraglide/package.json index 09bbe4d0230..a6a0d00693e 100644 --- a/examples/react/start-i18n-paraglide/package.json +++ b/examples/react/start-i18n-paraglide/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@tanstack/react-devtools": "^0.7.0", + "@tanstack/react-devtools": "^0.9.0", "@tanstack/react-router": "^1.166.2", "@tanstack/react-router-devtools": "^1.166.2", "@tanstack/react-start": "^1.166.2", diff --git a/package.json b/package.json index 9dcb695afaf..ffc69f6d832 100644 --- a/package.json +++ b/package.json @@ -79,9 +79,8 @@ "pnpm": { "overrides": { "@types/babel__traverse": "^7.28.0", - "vite-plugin-dts": "4.0.3", - "solid-js": "1.9.10", - "react": "$react", + "vite-plugin-dts": "4.0.3", + "react": "$react", "react-dom": "$react-dom", "@types/react": "$@types/react", "@types/react-dom": "$@types/react-dom", diff --git a/packages/router-devtools-core/package.json b/packages/router-devtools-core/package.json index 5da41309aa8..696037b763f 100644 --- a/packages/router-devtools-core/package.json +++ b/packages/router-devtools-core/package.json @@ -67,9 +67,10 @@ "tiny-invariant": "^1.3.3" }, "devDependencies": { - "solid-js": "^1.9.10", + "@solidjs/web": "2.0.0-beta.1", + "solid-js": "2.0.0-beta.1", "vite": "*", - "vite-plugin-solid": "^2.11.10" + "vite-plugin-solid": "3.0.0-next.2" }, "peerDependencies": { "@tanstack/router-core": "workspace:^", diff --git a/packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx b/packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx index c306d82d809..29776648f01 100644 --- a/packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx +++ b/packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx @@ -10,7 +10,6 @@ import { createMemo, createSignal, onCleanup, - untrack, } from 'solid-js' import { useDevtoolsOnClose } from './context' import { useStyles } from './useStyles' @@ -280,32 +279,32 @@ export const BaseTanStackRouterDevtoolsPanel = const [history, setHistory] = createSignal>([]) const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false) - createEffect(() => { - const matches = routerState().matches - const currentMatch = matches[matches.length - 1] - if (!currentMatch) { - return - } - // Read history WITHOUT tracking it to avoid infinite loops - const historyUntracked = untrack(() => history()) - const lastMatch = historyUntracked[0] - const sameLocation = - lastMatch && - lastMatch.pathname === currentMatch.pathname && - JSON.stringify(lastMatch.search ?? {}) === - JSON.stringify(currentMatch.search ?? {}) - if (!lastMatch || !sameLocation) { - if (historyUntracked.length >= HISTORY_LIMIT) { - setHasHistoryOverflowed(true) + createEffect( + () => routerState().matches, + (matches) => { + const currentMatch = matches[matches.length - 1] + if (!currentMatch) { + return } - setHistory((prev) => { - const newHistory = [currentMatch, ...prev] - // truncate to ensure we don't overflow too much the ui - newHistory.splice(HISTORY_LIMIT) - return newHistory - }) - } - }) + const lastMatch = history()[0] + const sameLocation = + lastMatch && + lastMatch.pathname === currentMatch.pathname && + JSON.stringify(lastMatch.search ?? {}) === + JSON.stringify(currentMatch.search ?? {}) + if (!lastMatch || !sameLocation) { + if (history().length >= HISTORY_LIMIT) { + setHasHistoryOverflowed(true) + } + setHistory((prev) => { + const newHistory = [currentMatch, ...prev] + // truncate to ensure we don't overflow too much the ui + newHistory.splice(HISTORY_LIMIT) + return newHistory + }) + } + }, + ) const activeMatch = createMemo(() => { const matches = [ @@ -378,7 +377,7 @@ export const BaseTanStackRouterDevtoolsPanel = {...otherPanelProps} > {handleDragStart ? ( -
+
) : null}