@tanstack/solid-router 2.0.0-alpha.6 → 2.0.0-alpha.7

package/src/headContentUtils.tsx

@@ -1,7 +1,6 @@
 import * as Solid from 'solid-js'
 import { escapeHtml } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
 /**
@@ -11,11 +10,15 @@ 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)
-    },
-  })
+  const getTagKey = (tag: RouterManagedTag) => JSON.stringify(tag)
+  const activeMatches = Solid.createMemo(
+    () => router.stores.activeMatchesSnapshot.state,
+  )
+  const routeMeta = Solid.createMemo(() =>
+    activeMatches()
+      .map((match) => match.meta!)
+      .filter(Boolean),
+  )
 
   const meta: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {
     const resultMeta: Array<RouterManagedTag> = []
@@ -89,100 +92,96 @@ export const useTags = () => {
     return resultMeta
   })
 
-  const links = useRouterState({
-    select: (state) => {
-      const constructed = state.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 assets = state.matches
-        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
-        .filter(Boolean)
-        .flat(1)
-        .filter((asset) => asset.tag === 'link')
-        .map(
-          (asset) =>
-            ({
-              tag: 'link',
-              attrs: { ...asset.attrs, nonce },
-            }) satisfies RouterManagedTag,
-        )
-
-      return [...constructed, ...assets]
-    },
-  })
-
-  const preloadLinks = useRouterState({
-    select: (state) => {
-      const preloadLinks: Array<RouterManagedTag> = []
-
-      state.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,
-                },
-              })
-            }),
-        )
-
-      return preloadLinks
-    },
-  })
-
-  const styles = useRouterState({
-    select: (state) =>
-      (
-        state.matches
-          .map((match) => match.styles!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...style }) => ({
-        tag: 'style',
+  const links = Solid.createMemo(() => {
+    const matches = activeMatches()
+    const constructed = matches
+      .map((match) => match.links!)
+      .filter(Boolean)
+      .flat(1)
+      .map((link) => ({
+        tag: 'link',
         attrs: {
-          ...style,
+          ...link,
           nonce,
         },
-        children,
-      })),
+      })) satisfies Array<RouterManagedTag>
+
+    const manifest = router.ssr?.manifest
+
+    const assets = matches
+      .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+      .filter(Boolean)
+      .flat(1)
+      .filter((asset) => asset.tag === 'link')
+      .map(
+        (asset) =>
+          ({
+            tag: 'link',
+            attrs: { ...asset.attrs, nonce },
+          }) satisfies RouterManagedTag,
+      )
+
+    return [...constructed, ...assets]
   })
 
-  const headScripts = useRouterState({
-    select: (state) =>
-      (
-        state.matches
-          .map((match) => match.headScripts!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...script }) => ({
-        tag: 'script',
-        attrs: {
-          ...script,
-          nonce,
-        },
-        children,
-      })),
+  const preloadLinks = Solid.createMemo(() => {
+    const matches = activeMatches()
+    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,
+              },
+            })
+          }),
+      )
+
+    return preloadLinks
   })
 
-  return () =>
-    uniqBy(
+  const styles = Solid.createMemo(() =>
+    (
+      activeMatches()
+        .map((match) => match.styles!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...style }) => ({
+      tag: 'style',
+      attrs: {
+        ...style,
+        nonce,
+      },
+      children,
+    })),
+  )
+
+  const headScripts = Solid.createMemo(() =>
+    (
+      activeMatches()
+        .map((match) => match.headScripts!)
+        .flat(1)
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...script }) => ({
+      tag: 'script',
+      attrs: {
+        ...script,
+        nonce,
+      },
+      children,
+    })),
+  )
+
+  return Solid.createMemo((prev: Array<RouterManagedTag> | undefined) => {
+    const next = uniqBy(
       [
         ...meta(),
         ...preloadLinks(),
@@ -190,10 +189,19 @@ export const useTags = () => {
         ...styles(),
         ...headScripts(),
       ] as Array<RouterManagedTag>,
-      (d) => {
-        return JSON.stringify(d)
-      },
+      getTagKey,
     )
+
+    if (
+      prev &&
+      prev.length === next.length &&
+      prev.every((tag, index) => getTagKey(tag) === getTagKey(next[index]!))
+    ) {
+      return prev
+    }
+
+    return next
+  })
 }
 
 export function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {