@tanstack/start-server-core 1.169.2 → 1.169.3

package/src/router-manifest.ts

@@ -1,16 +1,15 @@
-import { buildDevStylesUrl, rootRouteId } from '@tanstack/router-core'
-import type {
-  AnyRoute,
-  ManifestAssetLink,
-  RouterManagedTag,
+import {
+  DEV_STYLES_ATTR,
+  buildDevStylesUrl,
+  rootRouteId,
 } from '@tanstack/router-core'
+import type { AnyRoute, ServerManifestRoute } from '@tanstack/router-core'
 import type { StartManifestWithClientEntry } from './transformAssetUrls'
 
 // Pre-computed constant for dev styles URL basepath.
 // Defaults to vite `base` (set via TSS_DEV_SSR_STYLES_BASEPATH in the plugin),
 // aligning dev styles with how other CSS/JS assets are served.
 const DEV_SSR_STYLES_BASEPATH = process.env.TSS_DEV_SSR_STYLES_BASEPATH || '/'
-
 /**
  * @description Returns the router manifest data that should be sent to the client.
  * This includes only the assets and preloads for the current route and any
@@ -28,11 +27,16 @@ export async function getStartManifest(
 ): Promise<StartManifestWithClientEntry> {
   const { tsrStartManifest } = await import('tanstack-start-manifest:v')
   const startManifest = tsrStartManifest()
+  let routes = startManifest.routes
+  let rootRoute = routes[rootRouteId]
 
-  const rootRoute = (startManifest.routes[rootRouteId] =
-    startManifest.routes[rootRouteId] || {})
-
-  rootRoute.assets = rootRoute.assets || []
+  const updateRootRoute = (nextRootRoute: ServerManifestRoute) => {
+    rootRoute = nextRootRoute
+    routes = {
+      ...routes,
+      [rootRouteId]: rootRoute,
+    }
+  }
 
   // Inject dev styles link in dev mode (when SSR styles are enabled)
   if (
@@ -41,54 +45,66 @@ export async function getStartManifest(
     matchedRoutes
   ) {
     const matchedRouteIds = matchedRoutes.map((route) => route.id)
-    rootRoute.assets.push({
-      tag: 'link',
-      attrs: {
-        rel: 'stylesheet',
-        href: buildDevStylesUrl(DEV_SSR_STYLES_BASEPATH, matchedRouteIds),
-        'data-tanstack-router-dev-styles': 'true',
-      },
+    updateRootRoute({
+      ...rootRoute,
+      css: [
+        ...(rootRoute?.css ?? []),
+        {
+          href: buildDevStylesUrl(DEV_SSR_STYLES_BASEPATH, matchedRouteIds),
+          [DEV_STYLES_ATTR]: true,
+        },
+      ],
     })
   }
 
-  // Collect injected head scripts in dev mode (returned separately so we can
-  // build the client entry script tag after URL transforms are applied)
-  let injectedHeadScripts: string | undefined
   if (process.env.TSS_DEV_SERVER === 'true') {
     const mod = await import('tanstack-start-injected-head-scripts:v')
     if (mod.injectedHeadScripts) {
-      injectedHeadScripts = mod.injectedHeadScripts
+      updateRootRoute({
+        ...rootRoute,
+        scripts: [
+          ...(rootRoute?.scripts ?? []),
+          {
+            attrs: {
+              type: 'module',
+            },
+            children: mod.injectedHeadScripts,
+          },
+        ],
+      })
+    }
+  }
+
+  const manifestRoutes: Record<string, ServerManifestRoute> = {}
+
+  for (const k in routes) {
+    const v = routes[k]!
+    const result = {} as ServerManifestRoute
+
+    if (v.preloads && v.preloads.length > 0) {
+      result.preloads = v.preloads
+    }
+    if (v.scripts && v.scripts.length > 0) {
+      result.scripts = v.scripts
+    }
+    if (v.css?.length) {
+      result.css = v.css
+    }
+    if (result.preloads || result.scripts || result.css) {
+      manifestRoutes[k] = result
     }
   }
 
   const manifest = {
-    inlineCss: startManifest.inlineCss,
-    routes: Object.fromEntries(
-      Object.entries(startManifest.routes).flatMap(([k, v]) => {
-        const result = {} as {
-          preloads?: Array<ManifestAssetLink>
-          assets?: Array<RouterManagedTag>
-        }
-        let hasData = false
-        if (v.preloads && v.preloads.length > 0) {
-          result['preloads'] = v.preloads
-          hasData = true
-        }
-        if (v.assets && v.assets.length > 0) {
-          result['assets'] = v.assets
-          hasData = true
-        }
-        if (!hasData) {
-          return []
-        }
-        return [[k, result]]
-      }),
-    ),
+    ...(startManifest.scriptFormat
+      ? { scriptFormat: startManifest.scriptFormat }
+      : {}),
+    ...(startManifest.inlineCss ? { inlineCss: startManifest.inlineCss } : {}),
+    routes: manifestRoutes,
   }
 
   return {
     manifest: manifest as StartManifestWithClientEntry['manifest'],
     clientEntry: startManifest.clientEntry,
-    injectedHeadScripts,
   }
 }

package/src/tanstack-start.d.ts

@@ -1,7 +1,7 @@
 declare module 'tanstack-start-manifest:v' {
-  import type { Manifest } from '@tanstack/router-core'
+  import type { ServerManifest } from '@tanstack/router-core'
 
-  export const tsrStartManifest: () => Manifest & { clientEntry: string }
+  export const tsrStartManifest: () => ServerManifest & { clientEntry: string }
 }
 
 declare module 'tanstack-start-route-tree:v' {

package/src/transformAssetUrls.ts

@@ -1,11 +1,17 @@
-import { resolveManifestAssetLink, rootRouteId } from '@tanstack/router-core'
+import {
+  getManifestScriptFormat,
+  resolveManifestAssetLink,
+  resolveManifestCssLink,
+} from '@tanstack/router-core'
 
 import type {
   AssetCrossOrigin,
   Awaitable,
-  Manifest,
   ManifestAssetLink,
-  RouterManagedTag,
+  ManifestCssLink,
+  ManifestScript,
+  ScriptFormat,
+  ServerManifest,
 } from '@tanstack/router-core'
 
 export type { AssetCrossOrigin }
@@ -13,16 +19,12 @@ export type { AssetCrossOrigin }
 export type TransformAssetsContext =
   | {
       url: string
-      kind: 'modulepreload'
+      kind: 'script'
     }
   | {
       url: string
       kind: 'stylesheet'
     }
-  | {
-      url: string
-      kind: 'clientEntry'
-    }
   | {
       url: string
       kind: 'css-url'
@@ -33,7 +35,7 @@ export type TransformAssetKind = TransformAssetsContext['kind']
 
 type TransformAssetsShorthandCrossOriginKind = Exclude<
   TransformAssetKind,
-  'clientEntry' | 'css-url'
+  'css-url'
 >
 
 export type TransformAssetResult =
@@ -114,7 +116,7 @@ export type TransformAssetsOptions =
  * crossOrigin: 'anonymous'
  *
  * // Different values per kind
- * crossOrigin: { modulepreload: 'anonymous', stylesheet: 'use-credentials' }
+ * crossOrigin: { script: 'anonymous', stylesheet: 'use-credentials' }
  * ```
  */
 export type TransformAssetsCrossOriginConfig =
@@ -136,7 +138,7 @@ export interface TransformAssetsObjectShorthand {
   /** URL prefix prepended to every asset URL. */
   prefix: string
   /**
-   * Optional crossOrigin attribute applied to manifest-managed `<link>` assets.
+   * Optional crossOrigin attribute applied to transformed script and stylesheet assets.
    *
    * Accepts a single value or a per-kind record.
    */
@@ -211,7 +213,7 @@ async function transformInlineCssTemplate(options: {
 }
 
 async function transformInlineCssStyles(
-  inlineCss: NonNullable<Manifest['inlineCss']>,
+  inlineCss: NonNullable<ServerManifest['inlineCss']>,
   transformFn: TransformAssetsFn,
 ) {
   const transformedStyles: Record<string, string> = {}
@@ -287,7 +289,7 @@ export function resolveTransformAssetsConfig(
       transformFn: ({ url, kind }) => {
         const href = `${prefix}${url}`
 
-        if (kind === 'clientEntry' || kind === 'css-url') {
+        if (kind === 'css-url') {
           return { href }
         }
 
@@ -321,44 +323,104 @@ export function resolveTransformAssetsConfig(
 }
 
 export interface StartManifestWithClientEntry {
-  manifest: Manifest
+  manifest: ServerManifest
   clientEntry: string
-  /** Script content prepended before the client entry import (dev only) */
-  injectedHeadScripts?: string
 }
 
 /**
  * Builds the client entry `<script>` tag from a (possibly transformed) client
- * entry URL and optional injected head scripts.
+ * entry URL.
  */
 export function buildClientEntryScriptTag(
   clientEntry: string,
-  injectedHeadScripts?: string,
-): RouterManagedTag {
-  const clientEntryLiteral = JSON.stringify(clientEntry)
-  let script = `import(${clientEntryLiteral})`
-  if (injectedHeadScripts) {
-    script = `${injectedHeadScripts};${script}`
-  }
+  scriptFormat: ScriptFormat = 'module',
+  crossOrigin?: AssetCrossOrigin,
+): ManifestScript {
   return {
-    tag: 'script',
     attrs: {
-      type: 'module',
+      ...(scriptFormat === 'module' ? { type: 'module' } : {}),
       async: true,
+      src: clientEntry,
+      ...(crossOrigin ? { crossOrigin } : {}),
     },
-    children: script,
   }
 }
 
-function assignManifestAssetLink(
+type AssignableManifestLink = ManifestAssetLink | ManifestCssLink
+
+function assignManifestLink(
   link: ManifestAssetLink,
   next: { href: string; crossOrigin?: AssetCrossOrigin },
-): ManifestAssetLink {
+): ManifestAssetLink
+function assignManifestLink(
+  link: ManifestCssLink,
+  next: { href: string; crossOrigin?: AssetCrossOrigin },
+): ManifestCssLink
+function assignManifestLink(
+  link: AssignableManifestLink,
+  next: { href: string; crossOrigin?: AssetCrossOrigin },
+): AssignableManifestLink {
   if (typeof link === 'string') {
     return next.crossOrigin ? next : next.href
   }
 
-  return next.crossOrigin ? next : { href: next.href }
+  const nextLink: Exclude<ManifestCssLink, string> = {
+    ...link,
+    href: next.href,
+  }
+
+  if (next.crossOrigin) {
+    nextLink.crossOrigin = next.crossOrigin
+  } else {
+    delete nextLink.crossOrigin
+  }
+
+  return nextLink
+}
+
+function appendUniqueManifestAssetLink(
+  target: Array<ManifestAssetLink> | undefined,
+  link: ManifestAssetLink,
+) {
+  const href = typeof link === 'string' ? link : link.href
+
+  if (target) {
+    for (const item of target) {
+      if ((typeof item === 'string' ? item : item.href) === href) {
+        return target
+      }
+    }
+  }
+
+  return [...(target ?? []), link]
+}
+
+function addClientEntryToManifest(
+  manifest: ServerManifest,
+  clientEntry: string,
+) {
+  const rootRoute = manifest.routes.__root__ ?? {}
+  const rootScripts = rootRoute.scripts ?? []
+  const scripts = rootScripts.some(
+    (script) => script.attrs?.src === clientEntry,
+  )
+    ? rootScripts
+    : [
+        ...rootScripts,
+        buildClientEntryScriptTag(
+          clientEntry,
+          getManifestScriptFormat(manifest),
+        ),
+      ]
+
+  manifest.routes = {
+    ...manifest.routes,
+    __root__: {
+      ...rootRoute,
+      preloads: appendUniqueManifestAssetLink(rootRoute.preloads, clientEntry),
+      scripts,
+    },
+  }
 }
 
 export async function transformManifestAssets(
@@ -368,9 +430,28 @@ export async function transformManifestAssets(
     clone?: boolean
     inlineCss?: boolean
   },
-): Promise<Manifest> {
+): Promise<ServerManifest> {
   const manifest = structuredClone(source.manifest)
   const inlineCssEnabled = _opts?.inlineCss !== false
+  const scriptTransforms = new Map<
+    string,
+    Promise<Exclude<TransformAssetResult, string>>
+  >()
+  const transformScript = (url: string) => {
+    const cached = scriptTransforms.get(url)
+    if (cached) {
+      return cached
+    }
+
+    const transformed = Promise.resolve(
+      transformFn({
+        url,
+        kind: 'script',
+      }),
+    ).then(normalizeTransformAssetResult)
+    scriptTransforms.set(url, transformed)
+    return transformed
+  }
 
   if (!inlineCssEnabled) {
     delete manifest.inlineCss
@@ -381,19 +462,35 @@ export async function transformManifestAssets(
     )
   }
 
+  addClientEntryToManifest(manifest, source.clientEntry)
+
   for (const route of Object.values(manifest.routes)) {
-    if (route.preloads) {
+    if (route.preloads?.length) {
       route.preloads = await Promise.all(
         route.preloads.map(async (link) => {
           const resolved = resolveManifestAssetLink(link)
+          const result = await transformScript(resolved.href)
+
+          return assignManifestLink(link, {
+            href: result.href,
+            crossOrigin: result.crossOrigin,
+          })
+        }),
+      )
+    }
+
+    if (route.css?.length && !manifest.inlineCss) {
+      route.css = await Promise.all(
+        route.css.map(async (link) => {
+          const resolved = resolveManifestCssLink(link)
           const result = normalizeTransformAssetResult(
             await transformFn({
               url: resolved.href,
-              kind: 'modulepreload',
+              kind: 'stylesheet',
             }),
           )
 
-          return assignManifestAssetLink(link, {
+          return assignManifestLink(link, {
             href: result.href,
             crossOrigin: result.crossOrigin,
           })
@@ -401,56 +498,33 @@ export async function transformManifestAssets(
       )
     }
 
-    if (route.assets && !manifest.inlineCss) {
-      for (const asset of route.assets) {
-        if (asset.tag === 'link' && asset.attrs?.href) {
-          const rel = asset.attrs.rel
-          const relTokens = typeof rel === 'string' ? rel.split(/\s+/) : []
-
-          if (!relTokens.includes('stylesheet')) {
-            continue
-          }
+    if (route.scripts?.length) {
+      for (const script of route.scripts) {
+        const src = script.attrs?.src
+        if (typeof src !== 'string') {
+          continue
+        }
 
-          const result = normalizeTransformAssetResult(
-            await transformFn({
-              url: asset.attrs.href,
-              kind: 'stylesheet',
-            }),
-          )
+        const result = await transformScript(src)
 
-          asset.attrs.href = result.href
-          if (result.crossOrigin) {
-            asset.attrs.crossOrigin = result.crossOrigin
-          } else {
-            delete asset.attrs.crossOrigin
-          }
+        script.attrs = {
+          ...script.attrs,
+          src: result.href,
+        }
+        if (result.crossOrigin) {
+          script.attrs.crossOrigin = result.crossOrigin
+        } else {
+          delete script.attrs.crossOrigin
         }
       }
     }
   }
 
-  const transformedClientEntry = normalizeTransformAssetResult(
-    await transformFn({
-      url: source.clientEntry,
-      kind: 'clientEntry',
-    }),
-  )
-
-  const rootRoute = (manifest.routes[rootRouteId] =
-    manifest.routes[rootRouteId] || {})
-  rootRoute.assets = rootRoute.assets || []
-  rootRoute.assets.push(
-    buildClientEntryScriptTag(
-      transformedClientEntry.href,
-      source.injectedHeadScripts,
-    ),
-  )
-
   return manifest
 }
 
 /**
- * Builds a final Manifest from a StartManifestWithClientEntry without any
+ * Builds a final ServerManifest from a StartManifestWithClientEntry without any
  * URL transforms. Used when no transformAssets option is provided.
  *
  * Returns a new manifest object so the cached base manifest is never mutated.
@@ -458,25 +532,20 @@ export async function transformManifestAssets(
 export function buildManifestWithClientEntry(
   source: StartManifestWithClientEntry,
   opts?: { inlineCss?: boolean },
-): Manifest {
-  const scriptTag = buildClientEntryScriptTag(
-    source.clientEntry,
-    source.injectedHeadScripts,
-  )
-
-  const baseRootRoute = source.manifest.routes[rootRouteId]
-  const routes = {
-    ...source.manifest.routes,
-    [rootRouteId]: {
-      ...baseRootRoute,
-      assets: [...(baseRootRoute?.assets || []), scriptTag],
+): ServerManifest {
+  const manifest: ServerManifest = {
+    ...(source.manifest.scriptFormat
+      ? { scriptFormat: source.manifest.scriptFormat }
+      : {}),
+    ...(opts?.inlineCss !== false && source.manifest.inlineCss
+      ? { inlineCss: structuredClone(source.manifest.inlineCss) }
+      : {}),
+    routes: {
+      ...source.manifest.routes,
     },
   }
 
-  return {
-    ...(opts?.inlineCss === false
-      ? {}
-      : { inlineCss: structuredClone(source.manifest.inlineCss) }),
-    routes,
-  }
+  addClientEntryToManifest(manifest, source.clientEntry)
+
+  return manifest
 }