@tanstack/start-plugin-core 1.121.0-alpha.27 → 1.121.0-alpha.28

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

@@ -1,28 +1,21 @@
-import { readFileSync } from 'node:fs'
-import path from 'node:path'
 import { joinURL } from 'ufo'
 import { rootRouteId } from '@tanstack/router-core'
 import { VIRTUAL_MODULES } from '@tanstack/start-server-core'
+import { tsrSplit } from '@tanstack/router-plugin'
 import { resolveViteId } from '../utils'
-import { CLIENT_DIST_DIR } from '../constants'
-import type {
-  PluginOption,
-  ResolvedConfig,
-  Manifest as ViteManifest,
-  ManifestChunk as ViteManifestChunk,
-} from 'vite'
+import { ENTRY_POINTS } from '../constants'
+import type { PluginOption, Rollup } from 'vite'
 import type { RouterManagedTag } from '@tanstack/router-core'
-import type { TanStackStartOutputConfig } from '../plugin'
 
-const getCSSRecursively = (
-  file: ViteManifestChunk,
-  filesByRouteFilePath: ViteManifest,
+export const getCSSRecursively = (
+  chunk: Rollup.OutputChunk,
+  chunksByFileName: Map<string, Rollup.OutputChunk>,
   basePath: string,
 ) => {
   const result: Array<RouterManagedTag> = []
 
   // Get all css imports from the file
-  for (const cssFile of file.css ?? []) {
+  for (const cssFile of chunk.viteMetadata?.importedCss ?? []) {
     result.push({
       tag: 'link',
       attrs: {
@@ -34,11 +27,11 @@ const getCSSRecursively = (
   }
 
   // Recursively get CSS from imports
-  for (const imp of file.imports ?? []) {
-    const importInfo = filesByRouteFilePath[imp]
-    if (importInfo) {
+  for (const importedFileName of chunk.imports) {
+    const importedChunk = chunksByFileName.get(importedFileName)
+    if (importedChunk) {
       result.push(
-        ...getCSSRecursively(importInfo, filesByRouteFilePath, basePath),
+        ...getCSSRecursively(importedChunk, chunksByFileName, basePath),
       )
     }
   }
@@ -47,21 +40,12 @@ const getCSSRecursively = (
 }
 
 const resolvedModuleId = resolveViteId(VIRTUAL_MODULES.startManifest)
-export function startManifestPlugin(
-  opts: TanStackStartOutputConfig,
-): PluginOption {
-  let config: ResolvedConfig
-
+export function startManifestPlugin(opts: {
+  getClientBundle: () => Rollup.OutputBundle
+}): PluginOption {
   return {
     name: 'tanstack-start:start-manifest-plugin',
     enforce: 'pre',
-
-    configResolved(resolvedConfig) {
-      config = resolvedConfig
-    },
-    // configEnvironment(env, envConfig) {
-    //   config = envConfig.
-    // },
     resolveId: {
       filter: { id: new RegExp(VIRTUAL_MODULES.startManifest) },
       handler(id) {
@@ -83,131 +67,129 @@ export function startManifestPlugin(
             return `export default {}`
           }
 
-          // If we're in development, return a dummy manifest
-          if (config.command === 'serve') {
-            return `export const tsrStartManifest = () => ({
-            routes: {}
-          })`
-          }
-
           // This is the basepath for the application
           const APP_BASE = globalThis.TSS_APP_BASE
 
-          const clientViteManifestPath = path.resolve(
-            opts.root,
-            CLIENT_DIST_DIR,
-            '.vite',
-            'manifest.json',
-          )
-
-          let viteManifest: ViteManifest
-          try {
-            viteManifest = JSON.parse(
-              readFileSync(clientViteManifestPath, 'utf-8'),
-            )
-          } catch (err) {
-            console.error(err)
-            throw new Error(
-              `Could not find the production client vite manifest at '${clientViteManifestPath}'!`,
-            )
+          // If we're in development, return a dummy manifest
+          if (this.environment.config.command === 'serve') {
+            return `export const tsrStartManifest = () => ({
+            routes: {},
+            clientEntry: '${joinURL(APP_BASE, '@id', ENTRY_POINTS.client)}',
+          })`
           }
 
           // This the manifest pulled from the generated route tree and later used by the Router.
-          // i.e what's located in `src/generatedRouteTree.gen.ts`
+          // i.e what's located in `src/routeTree.gen.ts`
           const routeTreeRoutes = globalThis.TSS_ROUTES_MANIFEST.routes
 
           // This is where hydration will start, from when the SSR'd page reaches the browser.
-          // By default, this'd be the virtual entry of `/~start/default-client-entry.tsx`, unless a custom entry is provided.
-          let entryFile: ViteManifestChunk | undefined
-
-          const filesByRouteFilePath: ViteManifest = Object.fromEntries(
-            Object.entries(viteManifest).map(([k, v]) => {
-              if (v.isEntry) {
-                if (entryFile !== undefined) {
-                  console.error(
-                    `multiple entries detected`,
-                    entryFile.file,
-                    v.file,
+          let entryFile: Rollup.OutputChunk | undefined
+
+          const clientBundle = opts.getClientBundle()
+          const chunksByFileName = new Map<string, Rollup.OutputChunk>()
+
+          const routeChunks: Record<
+            string /** fullPath of route file **/,
+            Array<Rollup.OutputChunk>
+          > = {}
+          for (const bundleEntry of Object.values(clientBundle)) {
+            if (bundleEntry.type === 'chunk') {
+              chunksByFileName.set(bundleEntry.fileName, bundleEntry)
+              if (bundleEntry.isEntry) {
+                if (entryFile) {
+                  throw new Error(
+                    `multiple entries detected: ${entryFile.fileName} ${bundleEntry.fileName}`,
                   )
                 }
-                entryFile = v
+                entryFile = bundleEntry
               }
-
-              const rPath = k.split('?')[0]
-
-              return [rPath, v]
-            }, {}),
-          )
-
-          const routesDirectoryFromRoot = path.relative(
-            opts.root,
-            opts.tsr.routesDirectory,
-          )
+              const routePieces = bundleEntry.moduleIds.flatMap((m) => {
+                const [id, query] = m.split('?')
+                if (id === undefined) {
+                  throw new Error('expected id to be defined')
+                }
+                if (query === undefined) {
+                  return []
+                }
+                const searchParams = new URLSearchParams(query)
+                const split = searchParams.get(tsrSplit)
+
+                if (split !== null) {
+                  return {
+                    id,
+                    split,
+                  }
+                }
+                return []
+              })
+              if (routePieces.length > 0) {
+                routePieces.forEach((r) => {
+                  let array = routeChunks[r.id]
+                  if (array === undefined) {
+                    array = []
+                    routeChunks[r.id] = array
+                  }
+                  array.push(bundleEntry)
+                })
+              }
+            }
+          }
 
           // Add preloads to the routes from the vite manifest
           Object.entries(routeTreeRoutes).forEach(([routeId, v]) => {
-            const file =
-              filesByRouteFilePath[
-                path.posix.join(routesDirectoryFromRoot, v.filePath as string)
-              ]
-
-            if (file) {
-              // Map the relevant imports to their route paths,
-              // so that it can be imported in the browser.
-              const preloads = (file.imports ?? []).map((d) => {
-                const assetPath = joinURL(APP_BASE, viteManifest[d]!.file)
-                return assetPath
+            if (!v.filePath) {
+              throw new Error(`expected filePath to be set for ${routeId}`)
+            }
+            const chunks = routeChunks[v.filePath]
+            if (chunks) {
+              chunks.forEach((chunk) => {
+                // Map the relevant imports to their route paths,
+                // so that it can be imported in the browser.
+                const preloads = chunk.imports.map((d) => {
+                  const assetPath = joinURL(APP_BASE, d)
+                  return assetPath
+                })
+
+                // Since this is the most important JS entry for the route,
+                // it should be moved to the front of the preloads so that
+                // it has the best chance of being loaded first.
+                preloads.unshift(joinURL(APP_BASE, chunk.fileName))
+
+                const cssAssetsList = getCSSRecursively(
+                  chunk,
+                  chunksByFileName,
+                  APP_BASE,
+                )
+
+                routeTreeRoutes[routeId] = {
+                  ...v,
+                  assets: [...(v.assets || []), ...cssAssetsList],
+                  preloads: [...(v.preloads || []), ...preloads],
+                }
               })
-
-              // Since this is the most important JS entry for the route,
-              // it should be moved to the front of the preloads so that
-              // it has the best chance of being loaded first.
-              if (file.file) {
-                preloads.unshift(path.join(APP_BASE, file.file))
-              }
-
-              const cssAssetsList = getCSSRecursively(
-                file,
-                filesByRouteFilePath,
-                APP_BASE,
-              )
-
-              routeTreeRoutes[routeId] = {
-                ...v,
-                assets: [...(v.assets || []), ...cssAssetsList],
-                preloads,
-              }
             }
           })
 
-          if (entryFile) {
-            routeTreeRoutes[rootRouteId]!.preloads = [
-              joinURL(APP_BASE, entryFile.file),
-              ...(entryFile.imports?.map((d) =>
-                joinURL(APP_BASE, viteManifest[d]!.file),
-              ) || []),
-            ]
-
-            // Gather all the CSS files from the entry file in
-            // the `css` key and add them to the root route
-            const entryCssAssetsList = getCSSRecursively(
-              entryFile,
-              filesByRouteFilePath,
-              APP_BASE,
-            )
-
-            routeTreeRoutes[rootRouteId]!.assets = [
-              ...(routeTreeRoutes[rootRouteId]!.assets || []),
-              ...entryCssAssetsList,
-              {
-                tag: 'script',
-                attrs: {
-                  src: joinURL(APP_BASE, entryFile.file),
-                  type: 'module',
-                },
-              },
-            ]
+          if (!entryFile) {
+            throw new Error('No entry file found')
           }
+          routeTreeRoutes[rootRouteId]!.preloads = [
+            joinURL(APP_BASE, entryFile.fileName),
+            ...entryFile.imports.map((d) => joinURL(APP_BASE, d)),
+          ]
+
+          // Gather all the CSS files from the entry file in
+          // the `css` key and add them to the root route
+          const entryCssAssetsList = getCSSRecursively(
+            entryFile,
+            chunksByFileName,
+            APP_BASE,
+          )
+
+          routeTreeRoutes[rootRouteId]!.assets = [
+            ...(routeTreeRoutes[rootRouteId]!.assets || []),
+            ...entryCssAssetsList,
+          ]
 
           const recurseRoute = (
             route: {
@@ -232,14 +214,14 @@ export function startManifestPlugin(
             }
           }
 
-          // @ts-expect-error
-          recurseRoute(routeTreeRoutes[rootRouteId])
+          recurseRoute(routeTreeRoutes[rootRouteId]!)
 
-          const routesManifest = {
+          const startManifest = {
             routes: routeTreeRoutes,
+            clientEntry: joinURL(APP_BASE, entryFile.fileName),
           }
 
-          return `export const tsrStartManifest = () => (${JSON.stringify(routesManifest)})`
+          return `export const tsrStartManifest = () => (${JSON.stringify(startManifest)})`
         }
 
         return undefined

package/src/start-router-plugin/generator-plugins/routes-manifest-plugin.ts

@@ -18,7 +18,7 @@ export function routesManifestPlugin(): GeneratorPlugin {
       }
       const routesManifest = {
         [rootRouteId]: {
-          filePath: rootRouteNode.filePath,
+          filePath: rootRouteNode.fullPath,
           children: routeTree.acc.routeTree.map((d) => d.routePath),
         },
         ...Object.fromEntries(
@@ -28,7 +28,7 @@ export function routesManifestPlugin(): GeneratorPlugin {
             return [
               filePathId,
               {
-                filePath: d.filePath,
+                filePath: d.fullPath,
                 parent: d.parent?.routePath ? d.parent.routePath : undefined,
                 children: d.children?.map((childRoute) => childRoute.routePath),
               },

package/src/start-router-plugin/plugin.ts

@@ -14,20 +14,44 @@ import {
   tanstackRouterAutoImport,
   tanstackRouterGenerator,
 } from '@tanstack/router-plugin/vite'
+import { VITE_ENVIRONMENT_NAMES } from '../constants'
 import { routeTreeClientPlugin } from './route-tree-client-plugin'
 import { virtualRouteTreePlugin } from './virtual-route-tree-plugin'
 import { routesManifestPlugin } from './generator-plugins/routes-manifest-plugin'
 import { serverRoutesPlugin } from './generator-plugins/server-routes-plugin'
 import type { PluginOption } from 'vite'
-import type { Config } from '@tanstack/router-generator'
+import type { Config } from '@tanstack/router-plugin'
 
 export function tanStackStartRouter(config: Config): Array<PluginOption> {
   return [
     tanstackRouterGenerator({
       ...config,
       plugins: [serverRoutesPlugin(), routesManifestPlugin()],
+      plugin: {
+        vite: { environmentName: VITE_ENVIRONMENT_NAMES.client },
+      },
+    }),
+    tanStackRouterCodeSplitter({
+      ...config,
+      codeSplittingOptions: {
+        ...config.codeSplittingOptions,
+        deleteNodes: ['ssr'],
+        addHmr: true,
+      },
+      plugin: {
+        vite: { environmentName: VITE_ENVIRONMENT_NAMES.client },
+      },
+    }),
+    tanStackRouterCodeSplitter({
+      ...config,
+      codeSplittingOptions: {
+        ...config.codeSplittingOptions,
+        addHmr: false,
+      },
+      plugin: {
+        vite: { environmentName: VITE_ENVIRONMENT_NAMES.server },
+      },
     }),
-    tanStackRouterCodeSplitter(config),
     tanstackRouterAutoImport(config),
     routeTreeClientPlugin(config),
     virtualRouteTreePlugin(config),

package/src/start-router-plugin/route-tree-client-plugin.ts

@@ -4,6 +4,7 @@ import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
 import { normalizePath } from 'vite'
 import { deadCodeElimination } from 'babel-dead-code-elimination'
 import { debug } from '../debug'
+import { VITE_ENVIRONMENT_NAMES } from '../constants'
 import type { Plugin } from 'vite'
 import type { Config } from '@tanstack/router-generator'
 
@@ -19,7 +20,7 @@ export function routeTreeClientPlugin(config: Config): Plugin {
     name: 'tanstack-start:route-tree-client-plugin',
     enforce: 'pre',
     // only run this plugin in the client environment
-    applyToEnvironment: (env) => env.config.consumer === 'client',
+    applyToEnvironment: (env) => env.name === VITE_ENVIRONMENT_NAMES.client,
     transform: {
       filter: { id: generatedRouteTreePath },
       handler(code, id) {

package/src/start-router-plugin/virtual-route-tree-plugin.ts

@@ -1,11 +1,10 @@
 import path from 'node:path'
 import { normalizePath } from 'vite'
+import { VIRTUAL_MODULES } from '@tanstack/start-server-core'
 import { debug } from '../debug'
 import type { Config } from '@tanstack/router-generator'
 import type { Plugin } from 'vite'
 
-export const moduleId = 'tanstack-start-route-tree:v'
-
 export function virtualRouteTreePlugin(config: Config): Plugin {
   const generatedRouteTreePath = normalizePath(
     path.resolve(config.generatedRouteTree),
@@ -16,10 +15,10 @@ export function virtualRouteTreePlugin(config: Config): Plugin {
     enforce: 'pre',
     sharedDuringBuild: true,
     resolveId: {
-      filter: { id: new RegExp(moduleId) },
+      filter: { id: new RegExp(VIRTUAL_MODULES.routeTree) },
       handler(id) {
         let resolvedId: string | null = null
-        if (id === moduleId) {
+        if (id === VIRTUAL_MODULES.routeTree) {
           if (debug) console.info('resolving id', id, generatedRouteTreePath)
           resolvedId = generatedRouteTreePath
         }