@tanstack/start-server-core 1.169.2 → 1.169.4

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
 }

package/src/virtual-modules.ts

@@ -1,6 +1,5 @@
 export const VIRTUAL_MODULES = {
   startManifest: 'tanstack-start-manifest:v',
-  injectedHeadScripts: 'tanstack-start-injected-head-scripts:v',
   serverFnResolver: '#tanstack-start-server-fn-resolver',
   pluginAdapters: '#tanstack-start-plugin-adapters',
 } as const