@tanstack/start-plugin-core 1.167.34 → 1.168.0

package/src/start-compiler/compiler.ts

@@ -13,6 +13,7 @@ import { handleCreateMiddleware } from './handleCreateMiddleware'
 import { handleCreateIsomorphicFn } from './handleCreateIsomorphicFn'
 import { handleEnvOnlyFn } from './handleEnvOnly'
 import { handleClientOnlyJSX } from './handleClientOnlyJSX'
+import { cleanId } from './utils'
 import type {
   CompilationContext,
   DevServerFnModuleSpecifierEncoder,
@@ -259,6 +260,19 @@ function isNestedDirectCallCandidate(node: t.CallExpression): boolean {
   return calleeName !== undefined && DirectCallFactoryNames.has(calleeName)
 }
 
+function isSimpleDirectCallExpression(node: t.CallExpression): boolean {
+  return (
+    t.isIdentifier(node.callee) ||
+    (t.isMemberExpression(node.callee) &&
+      t.isIdentifier(node.callee.object) &&
+      t.isIdentifier(node.callee.property))
+  )
+}
+
+function isTopLevelDirectCallCandidateNode(node: t.CallExpression): boolean {
+  return isSimpleDirectCallExpression(node)
+}
+
 /**
  * Checks if a CallExpression path is a top-level direct-call candidate.
  * Top-level means the call is the init of a VariableDeclarator at program level.
@@ -272,13 +286,7 @@ function isTopLevelDirectCallCandidate(
   const node = path.node
 
   // Must be a simple identifier call or namespace call
-  const isSimpleCall =
-    t.isIdentifier(node.callee) ||
-    (t.isMemberExpression(node.callee) &&
-      t.isIdentifier(node.callee.object) &&
-      t.isIdentifier(node.callee.property))
-
-  if (!isSimpleCall) {
+  if (!isSimpleDirectCallExpression(node)) {
     return false
   }
 
@@ -294,6 +302,12 @@ function isTopLevelDirectCallCandidate(
   return t.isProgram(path.parentPath.parentPath?.parent)
 }
 
+function isDirectCallCandidateForKind(
+  kind: Exclude<LookupKind, 'ClientOnlyJSX'>,
+): boolean {
+  return LookupSetup[kind].type === 'directCall'
+}
+
 export class StartCompiler {
   private moduleCache = new Map<string, ModuleInfo>()
   private initialized = false
@@ -530,7 +544,6 @@ export class StartCompiler {
 
   /**
    * Extracts bindings and exports from an already-parsed AST.
-   * This is the core logic shared by ingestModule and ingestModuleFromAst.
    */
   private extractModuleInfo(
     ast: ReturnType<typeof parseAst>,
@@ -642,10 +655,105 @@ export class StartCompiler {
   }
 
   public invalidateModule(id: string) {
-    // Note: Resolution caches (resolveIdCache, exportResolutionCache) are only
-    // used in build mode where there's no HMR. In dev mode, caching is disabled,
-    // so we only need to invalidate the moduleCache here.
-    return this.moduleCache.delete(id)
+    const normalizedId = cleanId(id)
+    let hasCachedModule = false
+
+    for (const moduleId of Array.from(this.moduleCache.keys())) {
+      if (cleanId(moduleId) === normalizedId) {
+        this.moduleCache.delete(moduleId)
+        hasCachedModule = true
+      }
+    }
+
+    // Root import metadata is synthetic compiler state and should survive HMR.
+    // The stale dev state lives in per-module resolvedKind memoization.
+    for (const [moduleId, moduleInfo] of this.moduleCache) {
+      if (this.knownRootImports.has(moduleId)) {
+        continue
+      }
+
+      for (const binding of moduleInfo.bindings.values()) {
+        binding.resolvedKind = undefined
+      }
+    }
+
+    // Build-mode caches are cheap to rebuild and may point at removed entries.
+    this.resolveIdCache.clear()
+    this.exportResolutionCache.clear()
+
+    return hasCachedModule
+  }
+
+  public async getTransitiveImporters(id: string): Promise<Set<string>> {
+    const discoveredImporters = new Set<string>()
+    const pendingTargets = [cleanId(id)]
+    const visitedTargets = new Set<string>()
+    const resolveCache = new Map<string, Promise<string | null>>()
+
+    const resolveSource = (source: string, importer: string) => {
+      const cacheKey = `${importer}::${source}`
+      let resolved = resolveCache.get(cacheKey)
+
+      if (!resolved) {
+        resolved = this.resolveIdCached(source, importer)
+        resolveCache.set(cacheKey, resolved)
+      }
+
+      return resolved
+    }
+
+    while (pendingTargets.length > 0) {
+      const targetId = pendingTargets.pop()!
+
+      if (visitedTargets.has(targetId)) {
+        continue
+      }
+
+      visitedTargets.add(targetId)
+
+      const importerIds = await Promise.all(
+        Array.from(this.moduleCache.values()).map(async (moduleInfo) => {
+          if (this.knownRootImports.has(moduleInfo.id)) {
+            return null
+          }
+
+          const moduleId = cleanId(moduleInfo.id)
+
+          if (moduleId === targetId) {
+            return null
+          }
+
+          const importSources = new Set(moduleInfo.reExportAllSources)
+
+          for (const binding of moduleInfo.bindings.values()) {
+            if (binding.type === 'import') {
+              importSources.add(binding.source)
+            }
+          }
+
+          for (const source of importSources) {
+            const resolved = await resolveSource(source, moduleInfo.id)
+
+            if (resolved && cleanId(resolved) === targetId) {
+              return moduleId
+            }
+          }
+
+          return null
+        }),
+      )
+
+      for (const importerId of importerIds) {
+        if (!importerId || discoveredImporters.has(importerId)) {
+          continue
+        }
+
+        discoveredImporters.add(importerId)
+        pendingTargets.push(importerId)
+      }
+    }
+
+    return discoveredImporters
   }
 
   public async compile({
@@ -719,7 +827,10 @@ export class StartCompiler {
         if (declarations) {
           for (const decl of declarations) {
             if (decl.init && t.isCallExpression(decl.init)) {
-              if (isMethodChainCandidate(decl.init, fileKinds)) {
+              if (
+                isMethodChainCandidate(decl.init, fileKinds) ||
+                isTopLevelDirectCallCandidateNode(decl.init)
+              ) {
                 candidateIndices.push(i)
                 break // Only need to mark this statement once
               }
@@ -760,6 +871,11 @@ export class StartCompiler {
                 // Method chain pattern
                 if (isMethodChainCandidate(node, fileKinds)) {
                   candidatePaths.push(path)
+                  return
+                }
+
+                if (isTopLevelDirectCallCandidate(path)) {
+                  candidatePaths.push(path)
                 }
               },
             })
@@ -792,11 +908,14 @@ export class StartCompiler {
             return
           }
 
+          if (isTopLevelDirectCallCandidate(path)) {
+            candidatePaths.push(path)
+            return
+          }
+
           // Pattern 2: Direct call pattern
           if (checkDirectCalls) {
-            if (isTopLevelDirectCallCandidate(path)) {
-              candidatePaths.push(path)
-            } else if (isNestedDirectCallCandidate(node)) {
+            if (isNestedDirectCallCandidate(node)) {
               candidatePaths.push(path)
             }
           }
@@ -845,9 +964,23 @@ export class StartCompiler {
     )
 
     // Filter to valid candidates
-    const validCandidates = resolvedCandidates.filter(({ kind }) =>
-      this.validLookupKinds.has(kind as Exclude<LookupKind, 'ClientOnlyJSX'>),
-    ) as Array<{
+    const validCandidates = resolvedCandidates.filter(({ path, kind }) => {
+      if (
+        !this.validLookupKinds.has(kind as Exclude<LookupKind, 'ClientOnlyJSX'>)
+      ) {
+        return false
+      }
+
+      if (
+        isLookupKind(kind) &&
+        kind !== 'ClientOnlyJSX' &&
+        !isMethodChainCandidate(path.node, fileKinds)
+      ) {
+        return isDirectCallCandidateForKind(kind)
+      }
+
+      return true
+    }) as Array<{
       path: babel.NodePath<t.CallExpression>
       kind: Exclude<LookupKind, 'ClientOnlyJSX'>
     }>
@@ -925,6 +1058,7 @@ export class StartCompiler {
       code,
       env: this.options.env,
       envName: this.options.envName,
+      mode: this.mode,
       root: this.options.root,
       framework: this.options.framework,
       providerEnvName: this.options.providerEnvName,

package/src/start-compiler/handleCreateServerFn.ts

@@ -7,6 +7,20 @@ import type { CompileStartFrameworkOptions } from '../types'
 
 const TSS_SERVERFN_SPLIT_PARAM = 'tss-serverfn-split'
 
+const providerHmrAcceptTemplate = babel.template.statements(
+  `
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {})
+}
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(() => {})
+}
+`,
+  {
+    placeholderPattern: false,
+  },
+)
+
 // ============================================================================
 // Pre-compiled babel templates (compiled once at module load time)
 // ============================================================================
@@ -414,6 +428,10 @@ export function handleCreateServerFn(
         ),
       )
     }
+
+    if (context.mode === 'dev') {
+      context.ast.program.body.push(...providerHmrAcceptTemplate())
+    }
   }
 
   // Notify about discovered functions (only for non-provider files)

package/src/start-compiler/types.ts

@@ -12,6 +12,7 @@ export interface CompilationContext {
   readonly id: string
   readonly env: 'client' | 'server'
   readonly envName: string
+  readonly mode: 'dev' | 'build'
   readonly root: string
   /** The framework being used (e.g., 'react', 'solid') */
   readonly framework: CompileStartFrameworkOptions

package/src/start-manifest-plugin/manifestBuilder.ts

@@ -10,8 +10,6 @@ import {
 import type { ManifestAssetLink, RouterManagedTag } from '@tanstack/router-core'
 import type { NormalizedClientBuild, NormalizedClientChunk } from '../types'
 
-const ROUTER_MANAGED_MODE = 1
-const NON_ROUTE_DYNAMIC_MODE = 2
 const VISITING_CHUNK = 1
 
 type RouteTreeRoute = {
@@ -27,7 +25,6 @@ interface ScannedClientChunks {
   entryChunk: NormalizedClientChunk
   chunksByFileName: ReadonlyMap<string, NormalizedClientChunk>
   routeChunksByFilePath: ReadonlyMap<string, Array<NormalizedClientChunk>>
-  routeEntryChunks: ReadonlySet<NormalizedClientChunk>
 }
 
 interface ManifestAssetResolvers {
@@ -114,19 +111,25 @@ export function appendUniqueAssets(
 }
 
 function getAssetIdentity(asset: RouterManagedTag) {
-  if (asset.tag === 'link' || asset.tag === 'script') {
-    const attrs = asset.attrs ?? {}
-    return [
-      asset.tag,
-      'href' in attrs ? String(attrs.href) : '',
-      'src' in attrs ? String(attrs.src) : '',
-      'rel' in attrs ? String(attrs.rel) : '',
-      'type' in attrs ? String(attrs.type) : '',
-      asset.children ?? '',
-    ].join('|')
+  return JSON.stringify({
+    tag: asset.tag,
+    attrs: normalizeAssetAttrs(asset.attrs),
+    children: 'children' in asset ? (asset.children ?? null) : null,
+  })
+}
+
+function normalizeAssetAttrs(attrs: Record<string, any> | undefined) {
+  if (!attrs) {
+    return null
   }
 
-  return JSON.stringify(asset)
+  const entries = Object.entries(attrs)
+  if (entries.length === 0) {
+    return null
+  }
+
+  entries.sort(([left], [right]) => left.localeCompare(right))
+  return Object.fromEntries(entries)
 }
 
 function mergeRouteChunkData(options: {
@@ -149,17 +152,12 @@ export function buildStartManifest(options: {
   clientBuild: NormalizedClientBuild
   routeTreeRoutes: RouteTreeRoutes
   basePath: string
+  additionalRouteAssets?: Partial<
+    Record<string, ReadonlyArray<RouterManagedTag>>
+  >
 }): StartManifest {
   const scannedChunks = scanClientChunks(options.clientBuild)
-  const hashedCssFiles = collectDynamicImportCss(
-    scannedChunks.routeEntryChunks,
-    scannedChunks.chunksByFileName,
-    scannedChunks.entryChunk,
-  )
-  const assetResolvers = createManifestAssetResolvers({
-    basePath: options.basePath,
-    hashedCssFiles,
-  })
+  const assetResolvers = createManifestAssetResolvers(options.basePath)
 
   const routes = buildRouteManifestRoutes({
     routeTreeRoutes: options.routeTreeRoutes,
@@ -167,6 +165,7 @@ export function buildStartManifest(options: {
     chunksByFileName: scannedChunks.chunksByFileName,
     entryChunk: scannedChunks.entryChunk,
     assetResolvers,
+    additionalRouteAssets: options.additionalRouteAssets,
   })
 
   dedupeNestedRouteManifestEntries(rootRouteId, routes[rootRouteId]!, routes)
@@ -202,13 +201,10 @@ export function scanClientChunks(
     throw new Error(`Missing entry chunk: ${clientBuild.entryChunkFileName}`)
   }
 
-  const routeEntryChunks = new Set<NormalizedClientChunk>()
   const routeChunksByFilePath = new Map<string, Array<NormalizedClientChunk>>()
 
   for (const chunk of clientBuild.chunksByFileName.values()) {
     if (chunk.routeFilePaths.length > 0) {
-      routeEntryChunks.add(chunk)
-
       for (const routeFilePath of chunk.routeFilePaths) {
         let chunks = routeChunksByFilePath.get(routeFilePath)
         if (chunks === undefined) {
@@ -224,92 +220,12 @@ export function scanClientChunks(
     entryChunk,
     chunksByFileName: clientBuild.chunksByFileName,
     routeChunksByFilePath,
-    routeEntryChunks,
   }
 }
 
-export function collectDynamicImportCss(
-  routeEntryChunks: ReadonlySet<NormalizedClientChunk>,
-  chunksByFileName: ReadonlyMap<string, NormalizedClientChunk>,
-  entryChunk?: NormalizedClientChunk,
-) {
-  const routerManagedCssFiles = new Set<string>()
-  const nonRouteDynamicCssFiles = new Set<string>()
-  const hashedCssFiles = new Set<string>()
-  const visitedByChunk = new Map<NormalizedClientChunk, number>()
-  const chunkStack: Array<NormalizedClientChunk> = []
-  const modeStack: Array<number> = []
-
-  for (const routeEntryChunk of routeEntryChunks) {
-    chunkStack.push(routeEntryChunk)
-    modeStack.push(ROUTER_MANAGED_MODE)
-  }
-
-  if (entryChunk) {
-    chunkStack.push(entryChunk)
-    modeStack.push(ROUTER_MANAGED_MODE)
-  }
-
-  while (chunkStack.length > 0) {
-    const chunk = chunkStack.pop()!
-    const mode = modeStack.pop()!
-    const previousMode = visitedByChunk.get(chunk) ?? 0
-
-    if ((previousMode & mode) === mode) {
-      continue
-    }
-
-    visitedByChunk.set(chunk, previousMode | mode)
-
-    if ((mode & ROUTER_MANAGED_MODE) !== 0) {
-      for (const cssFile of chunk.css) {
-        routerManagedCssFiles.add(cssFile)
-      }
-    }
-
-    if ((mode & NON_ROUTE_DYNAMIC_MODE) !== 0) {
-      for (const cssFile of chunk.css) {
-        nonRouteDynamicCssFiles.add(cssFile)
-      }
-    }
-
-    for (let i = 0; i < chunk.imports.length; i++) {
-      const importedChunk = chunksByFileName.get(chunk.imports[i]!)
-      if (importedChunk) {
-        chunkStack.push(importedChunk)
-        modeStack.push(mode)
-      }
-    }
-
-    for (let i = 0; i < chunk.dynamicImports.length; i++) {
-      const dynamicImportedChunk = chunksByFileName.get(
-        chunk.dynamicImports[i]!,
-      )
-      if (dynamicImportedChunk) {
-        chunkStack.push(dynamicImportedChunk)
-        modeStack.push(
-          (mode & NON_ROUTE_DYNAMIC_MODE) !== 0 ||
-            !routeEntryChunks.has(dynamicImportedChunk)
-            ? NON_ROUTE_DYNAMIC_MODE
-            : ROUTER_MANAGED_MODE,
-        )
-      }
-    }
-  }
-
-  for (const cssFile of routerManagedCssFiles) {
-    if (nonRouteDynamicCssFiles.has(cssFile)) {
-      hashedCssFiles.add(cssFile)
-    }
-  }
-
-  return hashedCssFiles
-}
-
-export function createManifestAssetResolvers(options: {
-  basePath: string
-  hashedCssFiles?: Set<string>
-}): ManifestAssetResolvers {
+export function createManifestAssetResolvers(
+  basePath: string,
+): ManifestAssetResolvers {
   const assetPathByFileName = new Map<string, string>()
   const stylesheetAssetByFileName = new Map<string, RouterManagedTag>()
   const preloadsByChunk = new Map<NormalizedClientChunk, Array<string>>()
@@ -320,7 +236,7 @@ export function createManifestAssetResolvers(options: {
       return cachedPath
     }
 
-    const assetPath = joinURL(options.basePath, fileName)
+    const assetPath = joinURL(basePath, fileName)
     assetPathByFileName.set(fileName, assetPath)
     return assetPath
   }
@@ -336,7 +252,7 @@ export function createManifestAssetResolvers(options: {
       tag: 'link',
       attrs: {
         rel: 'stylesheet',
-        href: options.hashedCssFiles?.has(cssFile) ? `${href}#` : href,
+        href,
         type: 'text/css',
       },
     } satisfies RouterManagedTag
@@ -380,15 +296,14 @@ export function createChunkCssAssetCollector(options: {
 
   const appendAsset = (
     assets: Array<RouterManagedTag>,
-    seenAssets: Set<string>,
+    seenAssets: Set<RouterManagedTag>,
     asset: RouterManagedTag,
   ) => {
-    const identity = getAssetIdentity(asset)
-    if (seenAssets.has(identity)) {
+    if (seenAssets.has(asset)) {
       return
     }
 
-    seenAssets.add(identity)
+    seenAssets.add(asset)
     assets.push(asset)
   }
 
@@ -406,7 +321,7 @@ export function createChunkCssAssetCollector(options: {
     stateByChunk.set(chunk, VISITING_CHUNK)
 
     const assets: Array<RouterManagedTag> = []
-    const seenAssets = new Set<string>()
+    const seenAssets = new Set<RouterManagedTag>()
 
     for (const cssFile of chunk.css) {
       appendAsset(assets, seenAssets, options.getStylesheetAsset(cssFile))
@@ -441,6 +356,9 @@ export function buildRouteManifestRoutes(options: {
   chunksByFileName: ReadonlyMap<string, NormalizedClientChunk>
   entryChunk: NormalizedClientChunk
   assetResolvers: ManifestAssetResolvers
+  additionalRouteAssets?: Partial<
+    Record<string, ReadonlyArray<RouterManagedTag>>
+  >
 }) {
   const routes: Record<string, RouteTreeRoute> = {}
   const getChunkCssAssets = createChunkCssAssetCollector({
@@ -485,6 +403,25 @@ export function buildRouteManifestRoutes(options: {
     getChunkPreloads: options.assetResolvers.getChunkPreloads,
   })
 
+  if (options.additionalRouteAssets) {
+    for (const [routeId, assets] of Object.entries(
+      options.additionalRouteAssets,
+    )) {
+      if (!assets || assets.length === 0) {
+        continue
+      }
+
+      if (!(routeId in options.routeTreeRoutes)) {
+        throw new Error(
+          `expected additionalRouteAssets routeId to exist in routeTreeRoutes: ${routeId}`,
+        )
+      }
+
+      const route = (routes[routeId] = routes[routeId] || {})
+      route.assets = appendUniqueAssets(route.assets, [...assets])
+    }
+  }
+
   return routes
 }
 

package/src/utils.ts

@@ -17,3 +17,7 @@ export function createLogger(prefix: string) {
     error: (...args: any) => console.error(label, ...args),
   }
 }
+
+export function normalizePath(path: string): string {
+  return path.replace(/\\/g, '/')
+}