@depup/tanstack__react-router 1.167.4-depup.0 → 1.168.1-depup.0

package/src/Scripts.tsx

@@ -1,5 +1,7 @@
+import { useStore } from '@tanstack/react-store'
+import { deepEqual } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
 import { Asset } from './Asset'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
@@ -10,54 +12,80 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 export const Scripts = () => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
-  const assetScripts = useRouterState({
-    select: (state) => {
-      const assetScripts: Array<RouterManagedTag> = []
-      const manifest = router.ssr?.manifest
 
-      if (!manifest) {
-        return []
-      }
+  const getAssetScripts = (matches: Array<any>) => {
+    const assetScripts: Array<RouterManagedTag> = []
+    const manifest = router.ssr?.manifest
 
-      state.matches
-        .map((match) => router.looseRoutesById[match.routeId]!)
-        .forEach((route) =>
-          manifest.routes[route.id]?.assets
-            ?.filter((d) => d.tag === 'script')
-            .forEach((asset) => {
-              assetScripts.push({
-                tag: 'script',
-                attrs: { ...asset.attrs, nonce },
-                children: asset.children,
-              } as any)
-            }),
-        )
+    if (!manifest) {
+      return []
+    }
 
-      return assetScripts
-    },
-    structuralSharing: true as any,
-  })
+    matches
+      .map((match) => router.looseRoutesById[match.routeId]!)
+      .forEach((route) =>
+        manifest.routes[route.id]?.assets
+          ?.filter((d) => d.tag === 'script')
+          .forEach((asset) => {
+            assetScripts.push({
+              tag: 'script',
+              attrs: { ...asset.attrs, nonce },
+              children: asset.children,
+            } as any)
+          }),
+      )
 
-  const { scripts } = useRouterState({
-    select: (state) => ({
-      scripts: (
-        state.matches
-          .map((match) => match.scripts!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...script }) => ({
-        tag: 'script',
-        attrs: {
-          ...script,
-          suppressHydrationWarning: true,
-          nonce,
-        },
-        children,
-      })),
-    }),
-    structuralSharing: true as any,
-  })
+    return assetScripts
+  }
+
+  const getScripts = (matches: Array<any>): Array<RouterManagedTag> =>
+    (
+      matches
+        .map((match) => match.scripts!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(
+      ({ children, ...script }) =>
+        ({
+          tag: 'script',
+          attrs: {
+            ...script,
+            suppressHydrationWarning: true,
+            nonce,
+          },
+          children,
+        }) satisfies RouterManagedTag,
+    )
+
+  if (isServer ?? router.isServer) {
+    const assetScripts = getAssetScripts(
+      router.stores.activeMatchesSnapshot.state,
+    )
+    const scripts = getScripts(router.stores.activeMatchesSnapshot.state)
+    return renderScripts(router, scripts, assetScripts)
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const assetScripts = useStore(
+    router.stores.activeMatchesSnapshot,
+    getAssetScripts,
+    deepEqual,
+  )
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const scripts = useStore(
+    router.stores.activeMatchesSnapshot,
+    getScripts,
+    deepEqual,
+  )
+
+  return renderScripts(router, scripts, assetScripts)
+}
 
+function renderScripts(
+  router: ReturnType<typeof useRouter>,
+  scripts: Array<RouterManagedTag>,
+  assetScripts: Array<RouterManagedTag>,
+) {
   let serverBufferedScript: RouterManagedTag | undefined = undefined
 
   if (router.serverSsr) {

package/src/Transitioner.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { batch, useStore } from '@tanstack/react-store'
 import {
   getLocationChangeInfo,
   handleHashScroll,
@@ -6,7 +7,6 @@ import {
 } from '@tanstack/router-core'
 import { useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 
 export function Transitioner() {
   const router = useRouter()
@@ -14,13 +14,11 @@ export function Transitioner() {
 
   const [isTransitioning, setIsTransitioning] = React.useState(false)
   // Track pending state changes
-  const { hasPendingMatches, isLoading } = useRouterState({
-    select: (s) => ({
-      isLoading: s.isLoading,
-      hasPendingMatches: s.matches.some((d) => d.status === 'pending'),
-    }),
-    structuralSharing: true,
-  })
+  const isLoading = useStore(router.stores.isLoading, (value) => value)
+  const hasPendingMatches = useStore(
+    router.stores.hasPendingMatches,
+    (value) => value,
+  )
 
   const previousIsLoading = usePrevious(isLoading)
 
@@ -95,7 +93,10 @@ export function Transitioner() {
     if (previousIsLoading && !isLoading) {
       router.emit({
         type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
       })
     }
   }, [previousIsLoading, router, isLoading])
@@ -105,24 +106,31 @@ export function Transitioner() {
     if (previousIsPagePending && !isPagePending) {
       router.emit({
         type: 'onBeforeRouteMount',
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
       })
     }
   }, [isPagePending, previousIsPagePending, router])
 
   useLayoutEffect(() => {
     if (previousIsAnyPending && !isAnyPending) {
-      const changeInfo = getLocationChangeInfo(router.state)
+      const changeInfo = getLocationChangeInfo(
+        router.stores.location.state,
+        router.stores.resolvedLocation.state,
+      )
       router.emit({
         type: 'onResolved',
         ...changeInfo,
       })
 
-      router.__store.setState((s: typeof router.state) => ({
-        ...s,
-        status: 'idle',
-        resolvedLocation: s.location,
-      }))
+      batch(() => {
+        router.stores.status.setState(() => 'idle')
+        router.stores.resolvedLocation.setState(
+          () => router.stores.location.state,
+        )
+      })
 
       if (changeInfo.hrefChanged) {
         handleHashScroll(router)

package/src/headContentUtils.tsx

@@ -1,9 +1,171 @@
 import * as React from 'react'
-import { escapeHtml } from '@tanstack/router-core'
+import { useStore } from '@tanstack/react-store'
+import { deepEqual, escapeHtml } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
+function buildTagsFromMatches(
+  router: ReturnType<typeof useRouter>,
+  nonce: string | undefined,
+  matches: Array<any>,
+): Array<RouterManagedTag> {
+  const routeMeta = matches.map((match) => match.meta!).filter(Boolean)
+
+  const resultMeta: Array<RouterManagedTag> = []
+  const metaByAttribute: Record<string, true> = {}
+  let title: RouterManagedTag | undefined
+  for (let i = routeMeta.length - 1; i >= 0; i--) {
+    const metas = routeMeta[i]!
+    for (let j = metas.length - 1; j >= 0; j--) {
+      const m = metas[j]
+      if (!m) continue
+
+      if (m.title) {
+        if (!title) {
+          title = {
+            tag: 'title',
+            children: m.title,
+          }
+        }
+      } else if ('script:ld+json' in m) {
+        try {
+          const json = JSON.stringify(m['script:ld+json'])
+          resultMeta.push({
+            tag: 'script',
+            attrs: {
+              type: 'application/ld+json',
+            },
+            children: escapeHtml(json),
+          })
+        } catch {
+          // Skip invalid JSON-LD objects
+        }
+      } else {
+        const attribute = m.name ?? m.property
+        if (attribute) {
+          if (metaByAttribute[attribute]) {
+            continue
+          } else {
+            metaByAttribute[attribute] = true
+          }
+        }
+
+        resultMeta.push({
+          tag: 'meta',
+          attrs: {
+            ...m,
+            nonce,
+          },
+        })
+      }
+    }
+  }
+
+  if (title) {
+    resultMeta.push(title)
+  }
+
+  if (nonce) {
+    resultMeta.push({
+      tag: 'meta',
+      attrs: {
+        property: 'csp-nonce',
+        content: nonce,
+      },
+    })
+  }
+  resultMeta.reverse()
+
+  const constructedLinks = matches
+    .map((match) => match.links!)
+    .filter(Boolean)
+    .flat(1)
+    .map((link) => ({
+      tag: 'link',
+      attrs: {
+        ...link,
+        nonce,
+      },
+    })) satisfies Array<RouterManagedTag>
+
+  const manifest = router.ssr?.manifest
+  const assetLinks = matches
+    .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+    .filter(Boolean)
+    .flat(1)
+    .filter((asset) => asset.tag === 'link')
+    .map(
+      (asset) =>
+        ({
+          tag: 'link',
+          attrs: {
+            ...asset.attrs,
+            suppressHydrationWarning: true,
+            nonce,
+          },
+        }) satisfies RouterManagedTag,
+    )
+
+  const preloadLinks: Array<RouterManagedTag> = []
+  matches
+    .map((match) => router.looseRoutesById[match.routeId]!)
+    .forEach((route) =>
+      router.ssr?.manifest?.routes[route.id]?.preloads
+        ?.filter(Boolean)
+        .forEach((preload) => {
+          preloadLinks.push({
+            tag: 'link',
+            attrs: {
+              rel: 'modulepreload',
+              href: preload,
+              nonce,
+            },
+          })
+        }),
+    )
+
+  const styles = (
+    matches
+      .map((match) => match.styles!)
+      .flat(1)
+      .filter(Boolean) as Array<RouterManagedTag>
+  ).map(({ children, ...attrs }) => ({
+    tag: 'style',
+    attrs: {
+      ...attrs,
+      nonce,
+    },
+    children,
+  }))
+
+  const headScripts = (
+    matches
+      .map((match) => match.headScripts!)
+      .flat(1)
+      .filter(Boolean) as Array<RouterManagedTag>
+  ).map(({ children, ...script }) => ({
+    tag: 'script',
+    attrs: {
+      ...script,
+      nonce,
+    },
+    children,
+  }))
+
+  return uniqBy(
+    [
+      ...resultMeta,
+      ...preloadLinks,
+      ...constructedLinks,
+      ...assetLinks,
+      ...styles,
+      ...headScripts,
+    ] as Array<RouterManagedTag>,
+    (d) => JSON.stringify(d),
+  )
+}
+
 /**
  * Build the list of head/link/meta/script tags to render for active matches.
  * Used internally by `HeadContent`.
@@ -11,12 +173,25 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 export const useTags = () => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
-  const routeMeta = useRouterState({
-    select: (state) => {
-      return state.matches.map((match) => match.meta!).filter(Boolean)
+
+  if (isServer ?? router.isServer) {
+    return buildTagsFromMatches(
+      router,
+      nonce,
+      router.stores.activeMatchesSnapshot.state,
+    )
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const routeMeta = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
+      return matches.map((match) => match.meta!).filter(Boolean)
     },
-  })
+    deepEqual,
+  )
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
   const meta: Array<RouterManagedTag> = React.useMemo(() => {
     const resultMeta: Array<RouterManagedTag> = []
     const metaByAttribute: Record<string, true> = {}
@@ -88,9 +263,11 @@ export const useTags = () => {
     return resultMeta
   }, [routeMeta, nonce])
 
-  const links = useRouterState({
-    select: (state) => {
-      const constructed = state.matches
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const links = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
+      const constructed = matches
         .map((match) => match.links!)
         .filter(Boolean)
         .flat(1)
@@ -106,7 +283,7 @@ export const useTags = () => {
 
       // These are the assets extracted from the ViteManifest
       // using the `startManifestPlugin`
-      const assets = state.matches
+      const assets = matches
         .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
         .filter(Boolean)
         .flat(1)
@@ -125,14 +302,16 @@ export const useTags = () => {
 
       return [...constructed, ...assets]
     },
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const preloadLinks = useRouterState({
-    select: (state) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const preloadLinks = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
       const preloadLinks: Array<RouterManagedTag> = []
 
-      state.matches
+      matches
         .map((match) => router.looseRoutesById[match.routeId]!)
         .forEach((route) =>
           router.ssr?.manifest?.routes[route.id]?.preloads
@@ -151,13 +330,15 @@ export const useTags = () => {
 
       return preloadLinks
     },
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const styles = useRouterState({
-    select: (state) =>
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const styles = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) =>
       (
-        state.matches
+        matches
           .map((match) => match.styles!)
           .flat(1)
           .filter(Boolean) as Array<RouterManagedTag>
@@ -169,13 +350,15 @@ export const useTags = () => {
         },
         children,
       })),
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const headScripts: Array<RouterManagedTag> = useRouterState({
-    select: (state) =>
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const headScripts: Array<RouterManagedTag> = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) =>
       (
-        state.matches
+        matches
           .map((match) => match.headScripts!)
           .flat(1)
           .filter(Boolean) as Array<RouterManagedTag>
@@ -187,8 +370,8 @@ export const useTags = () => {
         },
         children,
       })),
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
   return uniqBy(
     [