Function Scripts

packages/solid-router/src/Scripts.tsx:7–61

()

import type { AnyRouteMatch, RouterManagedTag } from '@tanstack/router-core'

export const Scripts = () => {
  const router = useRouter()
  const nonce = router.options.ssr?.nonce

  const getAssetScripts = (matches: Array<AnyRouteMatch>) => {
    const assetScripts: Array<RouterManagedTag> = []
    const manifest = router.ssr?.manifest

    if (!manifest) {
      return []
    }

    for (const match of matches) {
      const scripts = manifest.routes[match.routeId]?.scripts

      if (!scripts) {
        continue
      }

      for (const asset of scripts) {
        assetScripts.push({
          tag: 'script',
          attrs: { ...asset.attrs, nonce },
          children: asset.children,
        })
      }
    }

    return assetScripts
  }

  const getScripts = (matches: Array<AnyRouteMatch>): Array<RouterManagedTag> =>
    (
      matches
        .map((match) => match.scripts!)
        .flat(1)
        .filter(Boolean) as Array<RouterManagedTag>
    ).map(
      ({ children, ...script }) =>
        ({
          tag: 'script',
          attrs: {
            ...script,
            nonce,
          },
          children,
        }) satisfies RouterManagedTag,
    )

  const activeMatches = Solid.createMemo(() => router.stores.matches.get())
  const assetScripts = Solid.createMemo(() => getAssetScripts(activeMatches()))
  const scripts = Solid.createMemo(() => getScripts(activeMatches()))

  return renderScripts(router, scripts(), assetScripts())
}

function renderScripts(
  router: ReturnType<typeof useRouter>,