devtools: update to solid 2

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",

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.0"
   },
   "peerDependencies": {
     "@tanstack/router-core": "workspace:^",

packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx

@@ -6,9 +6,9 @@ import {
   Match,
   Show,
   Switch,
-  createEffect,
   createMemo,
   createSignal,
+  createTrackedEffect,
   onCleanup,
   untrack,
 } from 'solid-js'
@@ -280,7 +280,7 @@ export const BaseTanStackRouterDevtoolsPanel =
     const [history, setHistory] = createSignal<Array<AnyRouteMatch>>([])
     const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false)
 
-    createEffect(() => {
+    createTrackedEffect(() => {
       const matches = routerState().matches
       const currentMatch = matches[matches.length - 1]
       if (!currentMatch) {
@@ -378,7 +378,7 @@ export const BaseTanStackRouterDevtoolsPanel =
         {...otherPanelProps}
       >
         {handleDragStart ? (
-          <div class={styles().dragHandle} onMouseDown={handleDragStart}></div>
+          <div class={styles().dragHandle} on:mousedown={handleDragStart}></div>
         ) : null}
         <button
           class={styles().panelCloseBtn}
@@ -566,7 +566,7 @@ export const BaseTanStackRouterDevtoolsPanel =
                         {(match, index) => (
                           <li
                             class={cx(
-                              styles().matchRow(match === activeMatch()),
+                              styles().matchRow(match() === activeMatch()),
                             )}
                           >
                             <div
@@ -579,18 +579,18 @@ export const BaseTanStackRouterDevtoolsPanel =
                             <NavigateLink
                               left={
                                 <NavigateButton
-                                  to={match.pathname}
-                                  params={match.params}
-                                  search={match.search}
+                                  to={match().pathname}
+                                  params={match().params}
+                                  search={match().search}
                                   router={router}
                                 />
                               }
                               right={
-                                <AgeTicker match={match} router={router} />
+                                <AgeTicker match={match()} router={router} />
                               }
                             >
                               <code class={styles().matchID}>
-                                {`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}
+                                {`${match().routeId === rootRouteId ? rootRouteId : match().pathname}`}
                               </code>
                             </NavigateLink>
                           </li>

packages/router-devtools-core/src/Explorer.tsx

@@ -249,7 +249,7 @@ export function Explorer({
   )
 }
 
-const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
+const stylesFactory = (shadowDOMTarget?: ShadowRoot | null) => {
   const { colors, font, size, alpha, shadow, border } = tokens
   const { fontFamily, lineHeight, size: fontSize } = font
   const css = shadowDOMTarget

packages/router-devtools-core/src/FloatingTanStackRouterDevtools.tsx

@@ -1,7 +1,7 @@
 import { clsx as cx } from 'clsx'
 
-import { createEffect, createMemo, createSignal } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
+import { createMemo, createSignal, createTrackedEffect } from 'solid-js'
+import { Dynamic } from '@solidjs/web'
 
 import { DevtoolsOnCloseContext } from './context'
 import { useIsMounted } from './utils'
@@ -69,9 +69,7 @@ export function FloatingTanStackRouterDevtools({
   shadowDOMTarget,
 }: FloatingDevtoolsOptions): JSX.Element | null {
   const [rootEl, setRootEl] = createSignal<HTMLDivElement>()
-
-  // eslint-disable-next-line prefer-const
-  let panelRef: HTMLDivElement | undefined = undefined
+  const [panelRef, setPanelRef] = createSignal<HTMLDivElement>()
 
   const [isOpen, setIsOpen] = useLocalStorage(
     'tanstackRouterDevtoolsOpen',
@@ -105,6 +103,11 @@ export function FloatingTanStackRouterDevtools({
       const delta = dragInfo.pageY - moveEvent.pageY
       const newHeight = dragInfo.originalHeight + delta
 
+      // Directly manipulate DOM for immediate visual feedback during drag
+      if (panelElement) {
+        panelElement.style.height = `${newHeight}px`
+      }
+
       setDevtoolsHeight(newHeight)
 
       if (newHeight < 70) {
@@ -117,7 +120,7 @@ export function FloatingTanStackRouterDevtools({
     const unsub = () => {
       setIsResizing(false)
       document.removeEventListener('mousemove', run)
-      document.removeEventListener('mouseUp', unsub)
+      document.removeEventListener('mouseup', unsub)
     }
 
     document.addEventListener('mousemove', run)
@@ -126,16 +129,16 @@ export function FloatingTanStackRouterDevtools({
 
   const isButtonClosed = isOpen() ?? false
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     setIsResolvedOpen(isOpen() ?? false)
   })
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (isResolvedOpen()) {
       const previousValue = rootEl()?.parentElement?.style.paddingBottom
 
       const run = () => {
-        const containerHeight = panelRef!.getBoundingClientRect().height
+        const containerHeight = panelRef()?.getBoundingClientRect().height ?? 0
         if (rootEl()?.parentElement) {
           setRootEl((prev) => {
             if (prev?.parentElement) {
@@ -175,7 +178,7 @@ export function FloatingTanStackRouterDevtools({
     return
   })
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (rootEl()) {
       const el = rootEl()
       const fontSize = getComputedStyle(el!).fontSize
@@ -239,28 +242,28 @@ export function FloatingTanStackRouterDevtools({
       ref={setRootEl}
       class="TanStackRouterDevtools"
     >
-      <DevtoolsOnCloseContext.Provider
+      <DevtoolsOnCloseContext
         value={{
           onCloseClick: onCloseClick ?? (() => {}),
         }}
       >
         {/* {router() ? ( */}
         <BaseTanStackRouterDevtoolsPanel
-          ref={panelRef}
+          ref={setPanelRef}
           {...otherPanelProps}
           router={router}
           routerState={routerState}
           className={basePanelClass}
           style={basePanelStyle}
           isOpen={isResolvedOpen()}
           setIsOpen={setIsOpen}
-          handleDragStart={(e) => handleDragStart(panelRef, e)}
+          handleDragStart={(e) => handleDragStart(panelRef(), e)}
           shadowDOMTarget={shadowDOMTarget}
         />
         {/* ) : (
           <p>No router</p>
         )} */}
-      </DevtoolsOnCloseContext.Provider>
+      </DevtoolsOnCloseContext>
 
       <button
         type="button"

packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx

@@ -1,5 +1,5 @@
 import { createSignal, lazy } from 'solid-js'
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { ShadowDomTargetContext } from './context'
 import type { AnyRouter } from '@tanstack/router-core'
 import type { Signal } from 'solid-js'
@@ -105,7 +105,7 @@ export class TanStackRouterDevtoolsCore {
       }
 
       return (
-        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
+        <ShadowDomTargetContext value={shadowDOMTarget ?? null}>
           <Devtools
             position={position}
             initialIsOpen={initialIsOpen}
@@ -117,7 +117,7 @@ export class TanStackRouterDevtoolsCore {
             toggleButtonProps={toggleButtonProps}
             containerElement={containerElement}
           />
-        </ShadowDomTargetContext.Provider>
+        </ShadowDomTargetContext>
       )
     }, el)
 

packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import { createSignal, lazy } from 'solid-js'
 import { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'
 import type { JSX } from 'solid-js'
@@ -91,8 +91,8 @@ export class TanStackRouterDevtoolsPanelCore {
       }
 
       return (
-        <ShadowDomTargetContext.Provider value={shadowDOMTarget}>
-          <DevtoolsOnCloseContext.Provider
+        <ShadowDomTargetContext value={shadowDOMTarget ?? null}>
+          <DevtoolsOnCloseContext
             value={{
               onCloseClick: () => {},
             }}
@@ -105,8 +105,8 @@ export class TanStackRouterDevtoolsPanelCore {
               style={style}
               className={className}
             />
-          </DevtoolsOnCloseContext.Provider>
-        </ShadowDomTargetContext.Provider>
+          </DevtoolsOnCloseContext>
+        </ShadowDomTargetContext>
       )
     }, el)
 

packages/router-devtools-core/src/context.ts

@@ -1,8 +1,6 @@
 import { createContext, useContext } from 'solid-js'
 
-export const ShadowDomTargetContext = createContext<ShadowRoot | undefined>(
-  undefined,
-)
+export const ShadowDomTargetContext = createContext<ShadowRoot | null>(null)
 
 export const DevtoolsOnCloseContext = createContext<
   | {

packages/router-devtools-core/src/theme.tsx

@@ -25,9 +25,9 @@ const ThemeContext = createContext(defaultTheme)
 
 export function ThemeProvider({ children, theme, ...rest }: ProviderProps) {
   return (
-    <ThemeContext.Provider value={theme} {...rest}>
+    <ThemeContext value={theme} {...rest}>
       {children}
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 

packages/router-devtools-core/src/useLocalStorage.ts

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal, createTrackedEffect } from 'solid-js'
 import type { Accessor } from 'solid-js'
 
 const getItem = (key: string): unknown => {
@@ -19,7 +19,7 @@ export default function useLocalStorage<T>(
 ): [Accessor<T | undefined>, (newVal: T | ((prevVal: T) => T)) => void] {
   const [value, setValue] = createSignal<T>()
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const initialValue = getItem(key) as T | undefined
 
     if (typeof initialValue === 'undefined' || initialValue === null) {

packages/router-devtools-core/src/useMediaQuery.ts

@@ -1,44 +1,41 @@
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal, createTrackedEffect, onCleanup } from 'solid-js'
 import type { Accessor } from 'solid-js'
 
 export default function useMediaQuery(
   query: string,
 ): Accessor<boolean | undefined> {
   // Keep track of the preference in state, start with the current match
-  const [isMatch, setIsMatch] = createSignal(() => {
-    if (typeof window !== 'undefined') {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      return window.matchMedia && window.matchMedia(query).matches
-    }
-    return
-  })
+  const [isMatch, setIsMatch] = createSignal<boolean | undefined>(
+    typeof window !== 'undefined'
+      ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        !!(window.matchMedia && window.matchMedia(query).matches)
+      : undefined,
+  )
 
   // Watch for changes
-  createEffect(() => {
-    if (typeof window !== 'undefined') {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (!window.matchMedia) {
-        return
-      }
-
-      // Create a matcher
-      const matcher = window.matchMedia(query)
+  createTrackedEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!window.matchMedia) {
+      return
+    }
 
-      // Create our handler
-      const onChange = ({ matches }: { matches: boolean }) =>
-        setIsMatch(() => () => matches)
+    // Create a matcher
+    const matcher = window.matchMedia(query)
 
-      // Listen for changes
-      matcher.addListener(onChange)
+    // Create our handler
+    const onChange = ({ matches }: { matches: boolean }) => setIsMatch(matches)
 
-      return () => {
-        // Stop listening for changes
-        matcher.removeListener(onChange)
-      }
-    }
+    // Listen for changes
+    matcher.addListener(onChange)
 
-    return
+    onCleanup(() => {
+      // Stop listening for changes
+      matcher.removeListener(onChange)
+    })
   })
 
-  return isMatch()
+  return isMatch
 }

packages/router-devtools-core/src/useStyles.tsx

@@ -4,7 +4,7 @@ import { tokens } from './tokens'
 import { ShadowDomTargetContext } from './context'
 import type { Accessor } from 'solid-js'
 
-const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
+const stylesFactory = (shadowDOMTarget?: ShadowRoot | null) => {
   const { colors, font, size, alpha, shadow, border } = tokens
   const { fontFamily, lineHeight, size: fontSize } = font
   const css = shadowDOMTarget