@tanstack/router-devtools-core 1.167.0 → 1.167.2

package/dist/cjs/Explorer.d.cts

@@ -3,7 +3,7 @@ type ExpanderProps = {
     expanded: boolean;
     style?: JSX.CSSProperties;
 };
-export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
+export declare const Expander: ({ expanded, style: _style }: ExpanderProps) => JSX.Element;
 type Entry = {
     label: string;
 };

package/dist/cjs/index.cjs

@@ -40,7 +40,7 @@ var TanStackRouterDevtoolsCore = class {
 			let Devtools;
 			if (this.#Component) Devtools = this.#Component;
 			else {
-				Devtools = require_context.lazy(() => Promise.resolve().then(() => require("../FloatingTanStackRouterDevtools-M-UhaKLc.cjs")));
+				Devtools = require_context.lazy(() => Promise.resolve().then(() => require("../FloatingTanStackRouterDevtools-eF_9_NhU.cjs")));
 				this.#Component = Devtools;
 			}
 			return require_context.createComponent(require_context.ShadowDomTargetContext.Provider, {
@@ -114,7 +114,7 @@ var TanStackRouterDevtoolsPanelCore = class {
 			let BaseTanStackRouterDevtoolsPanel;
 			if (this.#Component) BaseTanStackRouterDevtoolsPanel = this.#Component;
 			else {
-				BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-BlI6Kawa.cjs")));
+				BaseTanStackRouterDevtoolsPanel = require_context.lazy(() => Promise.resolve().then(() => require("../BaseTanStackRouterDevtoolsPanel-CKR5l6C5.cjs")));
 				this.#Component = BaseTanStackRouterDevtoolsPanel;
 			}
 			return require_context.createComponent(require_context.ShadowDomTargetContext.Provider, {

package/dist/cjs/utils.d.cts

@@ -10,6 +10,30 @@ export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, n
     ref?: HTMLElementTagNameMap[T] | undefined;
 }) => JSX.Element;
 export declare function useIsMounted(): import('solid-js').Accessor<boolean>;
+export type RscSlotUsageEvent = {
+    slot: string;
+    args?: Array<any>;
+};
+export type ServerComponentType = 'compositeSource' | 'renderableValue' | null;
+/**
+ * Checks if a value is any kind of server component
+ */
+export declare const isServerComponent: (value: unknown) => boolean;
+/**
+ * Gets the type of server component.
+ * - RENDERABLE_RSC === true → renderable (from renderServerComponent)
+ * - RENDERABLE_RSC === false or not present → composite (from createCompositeComponent)
+ */
+export declare const getServerComponentType: (value: unknown) => ServerComponentType;
+/**
+ * Gets the slot names from a composite server component (dev only)
+ */
+export declare const getServerComponentSlots: (value: unknown) => Array<string>;
+export declare const getServerComponentSlotUsages: (value: unknown) => Array<RscSlotUsageEvent>;
+export declare const getServerComponentSlotUsageSummary: (value: unknown) => Record<string, {
+    count: number;
+    invocations: Array<Array<any>>;
+}>;
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified

package/dist/esm/Explorer.d.ts

@@ -3,7 +3,7 @@ type ExpanderProps = {
     expanded: boolean;
     style?: JSX.CSSProperties;
 };
-export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element;
+export declare const Expander: ({ expanded, style: _style }: ExpanderProps) => JSX.Element;
 type Entry = {
     label: string;
 };

package/dist/esm/index.js

@@ -39,7 +39,7 @@ var TanStackRouterDevtoolsCore = class {
 			let Devtools;
 			if (this.#Component) Devtools = this.#Component;
 			else {
-				Devtools = lazy(() => import("../FloatingTanStackRouterDevtools-U4pxMObm.js"));
+				Devtools = lazy(() => import("../FloatingTanStackRouterDevtools-5lmIMjR6.js"));
 				this.#Component = Devtools;
 			}
 			return createComponent(ShadowDomTargetContext.Provider, {
@@ -113,7 +113,7 @@ var TanStackRouterDevtoolsPanelCore = class {
 			let BaseTanStackRouterDevtoolsPanel;
 			if (this.#Component) BaseTanStackRouterDevtoolsPanel = this.#Component;
 			else {
-				BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-DwUaC87U.js"));
+				BaseTanStackRouterDevtoolsPanel = lazy(() => import("../BaseTanStackRouterDevtoolsPanel-BYamTwOT.js"));
 				this.#Component = BaseTanStackRouterDevtoolsPanel;
 			}
 			return createComponent(ShadowDomTargetContext.Provider, {

package/dist/esm/utils.d.ts

@@ -10,6 +10,30 @@ export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, n
     ref?: HTMLElementTagNameMap[T] | undefined;
 }) => JSX.Element;
 export declare function useIsMounted(): import('solid-js').Accessor<boolean>;
+export type RscSlotUsageEvent = {
+    slot: string;
+    args?: Array<any>;
+};
+export type ServerComponentType = 'compositeSource' | 'renderableValue' | null;
+/**
+ * Checks if a value is any kind of server component
+ */
+export declare const isServerComponent: (value: unknown) => boolean;
+/**
+ * Gets the type of server component.
+ * - RENDERABLE_RSC === true → renderable (from renderServerComponent)
+ * - RENDERABLE_RSC === false or not present → composite (from createCompositeComponent)
+ */
+export declare const getServerComponentType: (value: unknown) => ServerComponentType;
+/**
+ * Gets the slot names from a composite server component (dev only)
+ */
+export declare const getServerComponentSlots: (value: unknown) => Array<string>;
+export declare const getServerComponentSlotUsages: (value: unknown) => Array<RscSlotUsageEvent>;
+export declare const getServerComponentSlotUsageSummary: (value: unknown) => Record<string, {
+    count: number;
+    invocations: Array<Array<any>>;
+}>;
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools-core",
-  "version": "1.167.0",
+  "version": "1.167.2",
   "description": "Modern and scalable routing for Web applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -50,8 +50,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "goober": "^2.1.16",
-    "tiny-invariant": "^1.3.3"
+    "goober": "^2.1.16"
   },
   "devDependencies": {
     "solid-js": "^1.9.10",
@@ -60,7 +59,7 @@
   },
   "peerDependencies": {
     "csstype": "^3.0.10",
-    "@tanstack/router-core": "^1.168.0"
+    "@tanstack/router-core": "^1.168.10"
   },
   "peerDependenciesMeta": {
     "csstype": {
@@ -71,12 +70,12 @@
     "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint ./src",
     "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
-    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
     "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
     "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
-    "test:types:ts59": "tsc",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js",
+    "test:types:ts60": "tsc",
     "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
     "build": "vite build"
   }

package/src/BaseTanStackRouterDevtoolsPanel.tsx

@@ -1,5 +1,4 @@
 import { clsx as cx } from 'clsx'
-import { default as invariant } from 'tiny-invariant'
 import { interpolatePath, rootRouteId, trimPath } from '@tanstack/router-core'
 import {
   For,
@@ -264,11 +263,6 @@ export const BaseTanStackRouterDevtoolsPanel =
     const styles = useStyles()
     const { className, style, ...otherPanelProps } = panelProps
 
-    invariant(
-      router,
-      'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',
-    )
-
     // useStore(router.stores.__store)
 
     const [currentTab, setCurrentTab] = useLocalStorage<
@@ -300,30 +294,30 @@ export const BaseTanStackRouterDevtoolsPanel =
       type Subscribe = (fn: () => void) => { unsubscribe: () => void }
       createEffect(() => {
         const pendingMatchesStore = router().stores.pendingMatchesSnapshot
-        setPendingMatches(pendingMatchesStore.state)
+        setPendingMatches(pendingMatchesStore.get())
         const subscription = (
           (pendingMatchesStore as any).subscribe as Subscribe
         )(() => {
-          setPendingMatches(pendingMatchesStore.state)
+          setPendingMatches(pendingMatchesStore.get())
         })
         onCleanup(() => subscription.unsubscribe())
       })
 
       createEffect(() => {
         const cachedMatchesStore = router().stores.cachedMatchesSnapshot
-        setCachedMatches(cachedMatchesStore.state)
+        setCachedMatches(cachedMatchesStore.get())
         const subscription = (
           (cachedMatchesStore as any).subscribe as Subscribe
         )(() => {
-          setCachedMatches(cachedMatchesStore.state)
+          setCachedMatches(cachedMatchesStore.get())
         })
         onCleanup(() => subscription.unsubscribe())
       })
     }
     // signal implementation
     else {
-      pendingMatches = () => router().stores.pendingMatchesSnapshot.state
-      cachedMatches = () => router().stores.cachedMatchesSnapshot.state
+      pendingMatches = () => router().stores.pendingMatchesSnapshot.get()
+      cachedMatches = () => router().stores.cachedMatchesSnapshot.get()
     }
 
     createEffect(() => {

package/src/Explorer.tsx

@@ -3,7 +3,12 @@ import { clsx as cx } from 'clsx'
 import * as goober from 'goober'
 import { createMemo, createSignal, useContext } from 'solid-js'
 import { tokens } from './tokens'
-import { displayValue } from './utils'
+import {
+  displayValue,
+  getServerComponentSlotUsageSummary,
+  getServerComponentSlots,
+  getServerComponentType,
+} from './utils'
 import { ShadowDomTargetContext } from './context'
 import type { Accessor, JSX } from 'solid-js'
 
@@ -12,7 +17,7 @@ type ExpanderProps = {
   style?: JSX.CSSProperties
 }
 
-export const Expander = ({ expanded, style = {} }: ExpanderProps) => {
+export const Expander = ({ expanded, style: _style = {} }: ExpanderProps) => {
   const styles = useStyles()
   return (
     <span class={styles().expander}>
@@ -90,6 +95,12 @@ function isIterable(x: any): x is Iterable<unknown> {
   return Symbol.iterator in x
 }
 
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (!value || typeof value !== 'object') return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
 export function Explorer({
   value,
   defaultExpanded,
@@ -116,7 +127,22 @@ export function Explorer({
       }
     }
 
-    if (Array.isArray(value())) {
+    if (
+      Array.isArray(value()) &&
+      (value() as Array<any>).length === 2 &&
+      (value() as Array<any>)[0] === 'React element' &&
+      isPlainObject((value() as Array<any>)[1])
+    ) {
+      // Special case: treat `["React element", { ...meta }]` as sibling entries
+      // to avoid the meta object being rendered as a deeper nested tree.
+      const v = value() as ['React element', Record<string, unknown>]
+      entries = [
+        makeProperty({ label: '0', value: v[0] }),
+        ...Object.entries(v[1]).map(([key, val]) =>
+          makeProperty({ label: key, value: val }),
+        ),
+      ]
+    } else if (Array.isArray(value())) {
       // any[]
       entries = (value() as Array<any>).map((d, i) =>
         makeProperty({
@@ -169,9 +195,72 @@ export function Explorer({
     />
   )
 
+  const serverComponentType = createMemo(() => getServerComponentType(value()))
+  const serverComponentSlots = createMemo(() =>
+    getServerComponentSlots(value()),
+  )
+  const serverComponentSlotUsageSummary = createMemo(() =>
+    getServerComponentSlotUsageSummary(value()),
+  )
+
+  const isCompositeWithSlots = createMemo(
+    () =>
+      serverComponentType() === 'compositeSource' &&
+      serverComponentSlots().length > 0,
+  )
+
   return (
     <div class={styles().entry}>
-      {subEntryPages().length ? (
+      {serverComponentType() !== null ? (
+        isCompositeWithSlots() ? (
+          <>
+            <button
+              class={styles().expandButton}
+              onClick={() => toggleExpanded()}
+            >
+              <Expander expanded={expanded() ?? false} />
+              <span>{rest.label}:</span>
+              <span class={styles().compositeComponent}>
+                {displayValue(value())}
+              </span>
+            </button>
+            {(expanded() ?? false) ? (
+              <div class={styles().rscMetaRow}>
+                <span class={styles().rscMetaLabel}>slots</span>
+                <div class={styles().subEntries}>
+                  {serverComponentSlots().map((name) => {
+                    const usage = serverComponentSlotUsageSummary()[name]
+                    if (!usage) return null
+                    return (
+                      <Explorer
+                        label={`${name}:`}
+                        value={() =>
+                          usage.invocations.map((args) =>
+                            args.length === 1 ? args[0] : args,
+                          )
+                        }
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <>
+            <span>{rest.label}:</span>{' '}
+            <span
+              class={
+                serverComponentType() === 'compositeSource'
+                  ? styles().compositeComponent
+                  : styles().renderableComponent
+              }
+            >
+              {displayValue(value())}
+            </span>
+          </>
+        )
+      ) : subEntryPages().length ? (
         <>
           <button
             class={styles().expandButton}
@@ -250,7 +339,7 @@ export function Explorer({
 }
 
 const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
-  const { colors, font, size, alpha, shadow, border } = tokens
+  const { colors, font, size, border } = tokens
   const { fontFamily, lineHeight, size: fontSize } = font
   const css = shadowDOMTarget
     ? goober.css.bind({ target: shadowDOMTarget })
@@ -309,6 +398,67 @@ const stylesFactory = (shadowDOMTarget?: ShadowRoot) => {
     value: css`
       color: ${colors.purple[400]};
     `,
+    compositeComponent: css`
+      display: inline-flex;
+      align-items: center;
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[700]};
+      color: ${colors.cyan[300]};
+      font-style: normal;
+      font-weight: ${font.weight.medium};
+    `,
+    renderableComponent: css`
+      display: inline-flex;
+      align-items: center;
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[700]};
+      color: ${colors.teal[300]};
+      font-style: normal;
+      font-weight: ${font.weight.medium};
+    `,
+    rscMetaRow: css`
+      display: flex;
+      gap: ${size[1]};
+      align-items: flex-start;
+      margin-left: calc(${size[3]} + ${size[1]});
+      margin-top: ${size[0.5]};
+      flex-wrap: wrap;
+    `,
+    rscMetaLabel: css`
+      color: ${colors.gray[500]};
+      font-size: ${fontSize['2xs']};
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      padding-top: 2px;
+    `,
+    rscChipRow: css`
+      display: flex;
+      gap: ${size[1]};
+      flex-wrap: wrap;
+    `,
+    rscChip: css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${size[0.5]};
+      padding: 1px ${size[1]};
+      border-radius: ${border.radius.full};
+      border: 1px solid ${colors.darkGray[500]};
+      background: ${colors.darkGray[800]};
+      color: ${colors.gray[200]};
+      font-size: ${fontSize['2xs']};
+      line-height: ${lineHeight.xs};
+    `,
+    rscChipName: css`
+      color: ${colors.gray[100]};
+    `,
+    rscChipMeta: css`
+      color: ${colors.gray[400]};
+      font-size: ${fontSize['2xs']};
+    `,
     subEntries: css`
       margin-left: ${size[2]};
       padding-left: ${size[2]};

package/src/utils.tsx

@@ -104,16 +104,144 @@ export function useIsMounted() {
   return isMounted
 }
 
+// Symbols for RSC detection
+const SERVER_COMPONENT_STREAM = Symbol.for('tanstack.rsc.stream')
+const RENDERABLE_RSC = Symbol.for('tanstack.rsc.renderable')
+const RSC_SLOT_USAGES = Symbol.for('tanstack.rsc.slotUsages')
+
+export type RscSlotUsageEvent = {
+  slot: string
+  args?: Array<any>
+}
+
+function trimTrailingUndefined<T>(arr: Array<T>): Array<T> {
+  let end = arr.length
+  while (end > 0 && arr[end - 1] === undefined) end--
+  if (end === 0) return arr
+  return end === arr.length ? arr : arr.slice(0, end)
+}
+
+export type ServerComponentType =
+  | 'compositeSource' // createCompositeComponent result (render via <CompositeComponent src={...} />)
+  | 'renderableValue' // renderServerComponent result (inline renderable value)
+  | null // not a server component
+
+/**
+ * Checks if a value is any kind of server component
+ */
+export const isServerComponent = (value: unknown): boolean => {
+  return (
+    (typeof value === 'object' || typeof value === 'function') &&
+    value !== null &&
+    SERVER_COMPONENT_STREAM in value
+  )
+}
+
+/**
+ * Gets the type of server component.
+ * - RENDERABLE_RSC === true → renderable (from renderServerComponent)
+ * - RENDERABLE_RSC === false or not present → composite (from createCompositeComponent)
+ */
+export const getServerComponentType = (value: unknown): ServerComponentType => {
+  if (!isServerComponent(value)) {
+    return null
+  }
+  const v = value as Record<symbol, unknown>
+  if (RENDERABLE_RSC in v && v[RENDERABLE_RSC] === true) {
+    return 'renderableValue'
+  }
+  // RENDERABLE_RSC is false or not present → composite
+  return 'compositeSource'
+}
+
+/**
+ * Gets the slot names from a composite server component (dev only)
+ */
+export const getServerComponentSlots = (value: unknown): Array<string> => {
+  if (!isServerComponent(value)) {
+    return []
+  }
+
+  const v = value as Record<symbol, unknown>
+  const out: Array<string> = []
+  // Include any slot names observed via dev-only slot usage events
+  if (RSC_SLOT_USAGES in v) {
+    const usages = v[RSC_SLOT_USAGES]
+    if (Array.isArray(usages)) {
+      for (const evt of usages) {
+        const name = evt?.slot
+        if (typeof name === 'string' && !out.includes(name)) {
+          out.push(name)
+        }
+      }
+    }
+  }
+
+  return out
+}
+
+export const getServerComponentSlotUsages = (
+  value: unknown,
+): Array<RscSlotUsageEvent> => {
+  if (!isServerComponent(value)) {
+    return []
+  }
+
+  const v = value as Record<symbol, unknown>
+  if (!(RSC_SLOT_USAGES in v)) return []
+  const usages = v[RSC_SLOT_USAGES]
+  if (!Array.isArray(usages)) return []
+
+  return usages.filter((d): d is RscSlotUsageEvent => {
+    return (
+      d &&
+      typeof d === 'object' &&
+      typeof d.slot === 'string' &&
+      (d.args === undefined || Array.isArray(d.args))
+    )
+  })
+}
+
+export const getServerComponentSlotUsageSummary = (
+  value: unknown,
+): Record<string, { count: number; invocations: Array<Array<any>> }> => {
+  const usages = getServerComponentSlotUsages(value)
+  const out: Record<string, { count: number; invocations: Array<Array<any>> }> =
+    {}
+  for (const evt of usages) {
+    const args = trimTrailingUndefined(evt.args ?? [])
+    const prev =
+      out[evt.slot] ?? (out[evt.slot] = { count: 0, invocations: [] })
+    prev.count++
+    prev.invocations.push(args)
+  }
+  return out
+}
+
 /**
  * Displays a string regardless the type of the data
  * @param {unknown} value Value to be stringified
  */
 export const displayValue = (value: unknown) => {
+  if (value === 'React element') return 'React element'
+  const componentType = getServerComponentType(value)
+  if (componentType === 'compositeSource') {
+    const slots = getServerComponentSlots(value)
+    if (slots.length > 0) {
+      return `RSC composite source (${slots.length} ${
+        slots.length === 1 ? 'slot' : 'slots'
+      })`
+    }
+    return 'RSC composite source'
+  }
+  if (componentType === 'renderableValue') {
+    return 'RSC renderable value'
+  }
   const name = Object.getOwnPropertyNames(Object(value))
   const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value
   try {
     return JSON.stringify(newValue, name)
-  } catch (e) {
+  } catch {
     return `unable to stringify`
   }
 }