@tanstack/router-core 1.171.5 → 1.171.6

package/src/manifest.ts

@@ -1,8 +1,11 @@
 export type AssetCrossOrigin = 'anonymous' | 'use-credentials'
+export type ScriptFormat = 'module' | 'iife'
+
+export const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
 
 export type AssetCrossOriginConfig =
   | AssetCrossOrigin
-  | Partial<Record<'modulepreload' | 'stylesheet', AssetCrossOrigin>>
+  | Partial<Record<'script' | 'stylesheet', AssetCrossOrigin>>
 
 export type ManifestAssetLink =
   | string
@@ -13,7 +16,7 @@ export type ManifestAssetLink =
 
 export function getAssetCrossOrigin(
   assetCrossOrigin: AssetCrossOriginConfig | undefined,
-  kind: 'modulepreload' | 'stylesheet',
+  kind: 'script' | 'stylesheet',
 ): AssetCrossOrigin | undefined {
   if (!assetCrossOrigin) {
     return undefined
@@ -26,6 +29,35 @@ export function getAssetCrossOrigin(
   return assetCrossOrigin[kind]
 }
 
+export function getManifestScriptFormat(
+  manifest: { scriptFormat?: ScriptFormat } | undefined,
+): ScriptFormat {
+  return manifest?.scriptFormat ?? 'module'
+}
+
+export function getScriptPreloadAttrs(
+  manifest: { scriptFormat?: ScriptFormat } | undefined,
+  link: ManifestAssetLink,
+  assetCrossOrigin?: AssetCrossOriginConfig,
+): {
+  rel: 'modulepreload' | 'preload'
+  as?: 'script'
+  href: string
+  crossOrigin?: AssetCrossOrigin
+} {
+  const preloadLink = resolveManifestAssetLink(link)
+  const crossOrigin =
+    getAssetCrossOrigin(assetCrossOrigin, 'script') ?? preloadLink.crossOrigin
+
+  return {
+    ...(getManifestScriptFormat(manifest) === 'iife'
+      ? { rel: 'preload', as: 'script' }
+      : { rel: 'modulepreload' }),
+    href: preloadLink.href,
+    ...(crossOrigin ? { crossOrigin } : {}),
+  }
+}
+
 export function resolveManifestAssetLink(link: ManifestAssetLink) {
   if (typeof link === 'string') {
     return { href: link, crossOrigin: undefined }
@@ -35,87 +67,147 @@ export function resolveManifestAssetLink(link: ManifestAssetLink) {
 }
 
 export type Manifest = {
-  inlineCss?: {
-    styles: Record<string, string>
-    templates?: Record<
-      string,
-      {
-        strings: Array<string>
-        urls: Array<string>
-      }
-    >
-  }
-  routes: Record<
-    string,
-    {
-      filePath?: string
-      preloads?: Array<ManifestAssetLink>
-      assets?: Array<RouterManagedTag>
-    }
-  >
+  scriptFormat?: ScriptFormat
+  inlineStyle?: ManifestInlineCss
+  routes: Record<string, ManifestRoute>
+}
+
+export type ServerManifest = {
+  scriptFormat?: ScriptFormat
+  inlineCss?: ServerManifestInlineCss
+  routes: Record<string, ServerManifestRoute>
+}
+
+export type ServerManifestInlineCss = {
+  styles: Record<string, string>
+  templates?: Record<string, InlineCssTemplate>
+}
+
+export type InlineCssTemplate = {
+  strings: Array<string>
+  urls: Array<string>
+}
+
+export type ManifestRoute = {
+  filePath?: string
+  preloads?: Array<ManifestAssetLink>
+  scripts?: Array<ManifestScript>
+  css?: Array<ManifestCssLink>
+}
+
+export type ServerManifestRoute = ManifestRoute
+
+export type ManifestRouteAssets = Pick<
+  ManifestRoute,
+  'preloads' | 'scripts' | 'css'
+>
+
+export type RouterManagedTitleTag = {
+  tag: 'title'
+  attrs?: Record<string, any>
+  children: string
+}
+
+export type RouterManagedMetaTag = {
+  tag: 'meta'
+  attrs?: Record<string, any>
+  children?: never
+}
+
+export type RouterManagedLinkTag = {
+  tag: 'link'
+  attrs?: Record<string, any>
+  children?: never
+}
+
+export type RouterManagedScriptTag = {
+  tag: 'script'
+  attrs?: Record<string, any>
+  children?: string
+}
+
+export type ManifestScript = Omit<RouterManagedScriptTag, 'tag'>
+
+export type RouterManagedStyleTag = {
+  tag: 'style'
+  attrs?: Record<string, any>
+  children?: string
+  inlineCss?: true
 }
 
 export type RouterManagedTag =
-  | {
-      tag: 'title'
-      attrs?: Record<string, any>
-      children: string
-    }
-  | {
-      tag: 'meta' | 'link'
-      attrs?: Record<string, any>
-      children?: never
-    }
-  | {
-      tag: 'script'
-      attrs?: Record<string, any>
-      children?: string
+  | RouterManagedTitleTag
+  | RouterManagedMetaTag
+  | RouterManagedLinkTag
+  | RouterManagedScriptTag
+  | RouterManagedStyleTag
+
+export function appendUniqueUserTags(
+  target: Array<RouterManagedTag>,
+  tags: Array<RouterManagedTag>,
+) {
+  if (tags.length === 0) {
+    return
+  }
+
+  if (tags.length === 1) {
+    target.push(tags[0]!)
+    return
+  }
+
+  const seen = new Set<string>()
+  for (const tag of tags) {
+    const key = JSON.stringify(tag)
+    if (seen.has(key)) {
+      continue
     }
+    seen.add(key)
+    target.push(tag)
+  }
+}
+
+export type ManifestCssLink =
+  | string
   | {
-      tag: 'style'
-      attrs?: Record<string, any>
-      children?: string
-      inlineCss?: true
+      href: string
+      crossOrigin?: AssetCrossOrigin
+      [DEV_STYLES_ATTR]?: true
     }
 
-export function getStylesheetHref(asset: RouterManagedTag) {
-  if (asset.tag !== 'link') return undefined
-
-  const rel = asset.attrs?.rel
-  const href = asset.attrs?.href
-  if (typeof href !== 'string') return undefined
+export type ManifestInlineCss = {
+  attrs?: Record<string, any>
+  children?: string
+}
 
-  const relTokens = typeof rel === 'string' ? rel.split(/\s+/) : []
-  if (!relTokens.includes('stylesheet')) return undefined
+export type RouterManagedInlineCssTag = RouterManagedStyleTag & {
+  inlineCss: true
+}
 
-  return href
+export function getStylesheetHref(asset: ManifestCssLink) {
+  return resolveManifestCssLink(asset).href
 }
 
-export function isInlinableStylesheet(
-  manifest: Manifest | undefined,
-  asset: RouterManagedTag,
-) {
-  const href = getStylesheetHref(asset)
-  return !!href && manifest?.inlineCss?.styles[href] !== undefined
+export function resolveManifestCssLink(link: ManifestCssLink) {
+  if (typeof link === 'string') {
+    return { href: link, crossOrigin: undefined }
+  }
+
+  return link
 }
 
-export function createInlineCssStyleAsset(css: string): RouterManagedTag {
+export function createInlineCssStyleAsset(css: string): ManifestInlineCss {
   return {
-    tag: 'style',
     attrs: {
       suppressHydrationWarning: true,
     },
-    inlineCss: true,
     children: css,
   }
 }
 
-export function createInlineCssPlaceholderAsset(): RouterManagedTag {
+export function createInlineCssPlaceholderAsset(): ManifestInlineCss {
   return {
-    tag: 'style',
     attrs: {
       suppressHydrationWarning: true,
     },
-    inlineCss: true,
   }
 }

package/src/router.ts

@@ -98,7 +98,11 @@ import type {
   CommitLocationOptions,
   NavigateFn,
 } from './RouterProvider'
-import type { Manifest, RouterManagedTag } from './manifest'
+import type {
+  Manifest,
+  ManifestRouteAssets,
+  RouterManagedTag,
+} from './manifest'
 import type { AnySchema, AnyValidator } from './validators'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import type { NotFoundError } from './not-found'
@@ -803,9 +807,7 @@ export interface ServerSsr {
   setRenderFinished: () => void
   cleanup: () => void
   onSerializationFinished: (listener: () => void) => void
-  dehydrate: (opts?: {
-    requestAssets?: Array<RouterManagedTag>
-  }) => Promise<void>
+  dehydrate: (opts?: { requestAssets?: ManifestRouteAssets }) => Promise<void>
   takeBufferedScripts: () => RouterManagedTag | undefined
   /**
    * Takes any buffered HTML that was injected.

package/src/ssr/createRequestHandler.ts

@@ -8,7 +8,7 @@ import {
 import type { HandlerCallback } from './handlerCallback'
 import type { AnyHeaders } from './headers'
 import type { AnyRouter } from '../router'
-import type { Manifest } from '../manifest'
+import type { ServerManifest } from '../manifest'
 
 export type RequestHandler<TRouter extends AnyRouter> = (
   cb: HandlerCallback<TRouter>,
@@ -21,7 +21,7 @@ export function createRequestHandler<TRouter extends AnyRouter>({
 }: {
   createRouter: () => TRouter
   request: Request
-  getRouterManifest?: () => Manifest | Promise<Manifest>
+  getRouterManifest?: () => ServerManifest | Promise<ServerManifest>
 }): RequestHandler<TRouter> {
   return async (cb) => {
     const router = createRouter()
@@ -78,9 +78,10 @@ export function createRequestHandler<TRouter extends AnyRouter>({
 }
 
 function getRequestHeaders(opts: { router: AnyRouter }): Headers {
-  const matchHeaders = opts.router.stores.matches
-    .get()
-    .map<AnyHeaders>((match) => match.headers)
+  const matchHeaders: Array<AnyHeaders> = []
+  for (const match of opts.router.stores.matches.get()) {
+    matchHeaders.push(match.headers)
+  }
 
   // Handle Redirects
   const redirect = opts.router.stores.redirect.get()