Devtools

Nimm dieses Schwert... äh, Devtools!... um dir auf deinem Weg zu helfen!

Schwing die Arme in die Luft und jubiliere, denn TanStack Router kommt mit dedizierten Devtools! 🥳

Wenn du deine TanStack Router-Reise beginnst, möchtest du diese Devtools an deiner Seite haben. Sie helfen dir, alle inneren Abläufe von TanStack Router zu visualisieren und werden dir wahrscheinlich Stunden beim Debugging ersparen, falls du mal in Schwierigkeiten gerätst!

Die Devtools sind ein separates Paket, das Sie installieren müssen

npm install @tanstack/solid-router-devtools

npm install @tanstack/solid-router-devtools

oder

pnpm add @tanstack/solid-router-devtools

pnpm add @tanstack/solid-router-devtools

oder

yarn add @tanstack/solid-router-devtools

yarn add @tanstack/solid-router-devtools

oder

bun add @tanstack/solid-router-devtools

bun add @tanstack/solid-router-devtools

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

Die Devtools, wenn sie als TanStackRouterDevtools importiert werden, werden in der Produktion nicht angezeigt. Wenn du Devtools in einer Umgebung mit process.env.NODE_ENV === 'production' haben möchtest, verwende stattdessen TanStackRouterDevtoolsInProd, das alle gleichen Optionen hat.

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'

Der einfachste Weg, damit die Devtools funktionieren, ist, sie innerhalb deiner Root-Route (oder einer beliebigen anderen Route) zu rendern. Dadurch werden die Devtools automatisch mit der Router-Instanz verbunden.

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const routeTree = rootRoute.addChildren([
  // ... other routes
])

const router = createRouter({
  routeTree,
})

function App() {
  return <RouterProvider router={router} />
}

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const routeTree = rootRoute.addChildren([
  // ... other routes
])

const router = createRouter({
  routeTree,
})

function App() {
  return <RouterProvider router={router} />
}

Wenn das Rendern der Devtools innerhalb des RouterProvider nicht dein Ding ist, akzeptiert die router-Prop für die Devtools dieselbe router-Instanz, die du an die Router-Komponente übergibst. Dies ermöglicht es, die Devtools überall auf der Seite zu platzieren, nicht nur innerhalb des Providers.

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

Der Floating Mode lädt die Devtools als festes, schwebendes Element in Ihrer App und bietet einen Schalter in der Ecke des Bildschirms, um die Devtools ein- und auszublenden. Dieser Schalterzustand wird in localStorage gespeichert und über Neuladungen hinweg beibehalten.

Platziere den folgenden Code so hoch wie möglich in deiner Solid-App. Je näher er am Root der Seite liegt, desto besser funktioniert er!

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

• router: Router
  • Die Router-Instanz, mit der verbunden werden soll.
• initialIsOpen: Boolean
  • Setze dies auf true, wenn die Devtools standardmäßig geöffnet sein sollen.
• panelProps: PropsObject
  • Verwende dies, um dem Panel Props hinzuzufügen. Du kannst zum Beispiel class, style (Standardstil zusammenführen und überschreiben) usw. hinzufügen.
• closeButtonProps: PropsObject
  • Verwende dies, um dem Schließknopf Props hinzuzufügen. Du kannst zum Beispiel class, style (Standardstil zusammenführen und überschreiben), onClick (Standard-Handler erweitern) usw. hinzufügen.
• toggleButtonProps: PropsObject
  • Verwende dies, um dem Umschaltknopf Props hinzuzufügen. Du kannst zum Beispiel class, style (Standardstil zusammenführen und überschreiben), onClick (Standard-Handler erweitern) usw. hinzufügen.
• position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  • Standardmäßig ist dies bottom-left.
  • Die Position des TanStack Router-Logos zum Öffnen und Schließen des Devtools-Panels.
• shadowDOMTarget?: ShadowRoot
  • Gibt ein Shadow DOM-Ziel für die Devtools an.
  • Standardmäßig werden die Devtool-Styles auf den <head>-Tag des Hauptdokuments (Light DOM) angewendet. Wenn ein shadowDOMTarget angegeben wird, werden die Styles stattdessen innerhalb dieses Shadow DOMs angewendet.
• containerElement?: string | any
  • Verwende dies, um die Devtools für Barrierefreiheitszwecke in einen anderen Containerelement-Typ zu rendern.
  • Jeder String, der einem gültigen intrinsischen JSX-Element entspricht, ist zulässig.
  • Standardmäßig ist dies 'footer'.

Um die Position der Devtools zu steuern, importiere das TanStackRouterDevtoolsPanel.

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

Es kann dann an das bereitgestellte Shadow DOM-Ziel angehängt werden.

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

Klicke hier, um ein Live-Beispiel auf StackBlitz zu sehen.

Der eingebettete Modus bettet die Devtools als reguläre Komponente in deine Anwendung ein. Du kannst sie danach beliebig gestalten!

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        class={class}
      />
    </>
  )
}

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        class={class}
      />
    </>
  )
}

• router: Router
  • Die Router-Instanz, mit der verbunden werden soll.
• style: StyleObject
  • Das Standard-Solid-Style-Objekt, das verwendet wird, um eine Komponente mit Inline-Styles zu gestalten.
• class: string
  • Die Standard-Solid-Klassen-Eigenschaft, die verwendet wird, um eine Komponente mit Klassen zu gestalten.
• isOpen?: boolean
  • Eine boolesche Variable, die angibt, ob das Panel geöffnet oder geschlossen ist.
• setIsOpen?: (isOpen: boolean) => void
  • Eine Funktion, die den Öffnungs- und Schließzustand des Panels umschaltet.
• handleDragStart?: (e: any) => void
  • Behandelt das Öffnen und Schließen des Devtools-Panels.
• shadowDOMTarget?: ShadowRoot
  • Gibt ein Shadow DOM-Ziel für die Devtools an.
  • Standardmäßig werden die Devtool-Styles auf den <head>-Tag des Hauptdokuments (Light DOM) angewendet. Wenn ein shadowDOMTarget angegeben wird, werden die Styles stattdessen innerhalb dieses Shadow DOMs angewendet.