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

package/src/plugin.ts

@@ -1,19 +1,19 @@
 import path from 'node:path'
 import { createNitro } from 'nitropack'
 import { trimPathRight } from '@tanstack/router-core'
-import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import { VIRTUAL_MODULES } from '@tanstack/start-server-core'
 import { TanStackServerFnPluginEnv } from '@tanstack/server-functions-plugin'
 import * as vite from 'vite'
 import { createTanStackConfig } from './schema'
 import { nitroPlugin } from './nitro-plugin/plugin'
-import { startRoutesManifestPlugin } from './start-routes-manifest-plugin/plugin'
+import { startManifestPlugin } from './start-manifest-plugin/plugin'
 import { startCompilerPlugin } from './start-compiler-plugin'
 import {
   CLIENT_DIST_DIR,
   SSR_ENTRY_FILE,
   VITE_ENVIRONMENT_NAMES,
 } from './constants'
-import { TanStackStartServerRoutesVite } from './start-server-routes-plugin/plugin'
+import { tanStackStartRouter } from './start-router-plugin/plugin'
 import { loadEnvPlugin } from './load-env-plugin/plugin'
 import { devServerPlugin } from './dev-server-plugin/plugin'
 import { resolveVirtualEntriesPlugin } from './resolve-virtual-entries-plugin/plugin'
@@ -35,11 +35,6 @@ export type TanStackStartOutputConfig = ReturnType<
   typeof getTanStackStartOptions
 >
 
-declare global {
-  // eslint-disable-next-line no-var
-  var TSS_APP_BASE: string
-}
-
 export interface TanStackStartVitePluginCoreOptions {
   framework: CompileStartFrameworkOptions
   getVirtualServerRootHandler: (ctx: {
@@ -57,11 +52,9 @@ export function TanStackStartVitePluginCore(
   startConfig: TanStackStartOutputConfig,
 ): Array<PluginOption> {
   return [
-    tanstackRouter({
-      verboseFileRoutes: false,
+    tanStackStartRouter({
       ...startConfig.tsr,
       target: opts.framework,
-      enableRouteGeneration: true,
       autoCodeSplitting: true,
     }),
     resolveVirtualEntriesPlugin(opts, startConfig),
@@ -162,18 +155,13 @@ export function TanStackStartVitePluginCore(
               '@tanstack/start-router-manifest',
               '@tanstack/start-config',
               '@tanstack/server-functions-plugin',
-              'tanstack-start-router-manifest:v',
-              'tanstack-start-server-fn-manifest:v',
               'nitropack',
               '@tanstack/**start**',
+              ...Object.values(VIRTUAL_MODULES),
             ],
           },
           optimizeDeps: {
-            exclude: [
-              'tanstack-start-server-fn-manifest:v',
-              'tanstack-start-router-manifest:v',
-              'tanstack-start-server-routes-manifest:v',
-            ],
+            exclude: [...Object.values(VIRTUAL_MODULES)],
           },
           /* prettier-ignore */
           define: {
@@ -197,9 +185,14 @@ export function TanStackStartVitePluginCore(
     TanStackServerFnPluginEnv({
       // This is the ID that will be available to look up and import
       // our server function manifest and resolve its module
-      manifestVirtualImportId: 'tanstack-start-server-fn-manifest:v',
-      manifestOutputFilename:
-        '.tanstack-start/build/server/server-functions-manifest.json',
+      manifestVirtualImportId: VIRTUAL_MODULES.serverFnManifest,
+      manifestOutputFilename: path.join(
+        '.tanstack',
+        'start',
+        'build',
+        'server',
+        'server-functions-manifest.json',
+      ),
       client: {
         getRuntimeCode: () =>
           `import { createClientRpc } from '@tanstack/${opts.framework}-start/server-functions-client'`,
@@ -225,13 +218,9 @@ export function TanStackStartVitePluginCore(
       },
     }),
     loadEnvPlugin(startConfig),
-    startRoutesManifestPlugin(startConfig),
+    startManifestPlugin(startConfig),
     devServerPlugin(),
     nitroPlugin(startConfig, () => ssrBundle),
-    TanStackStartServerRoutesVite({
-      ...startConfig.tsr,
-      target: opts.framework,
-    }),
   ]
 }
 

package/src/start-compiler-plugin.ts

@@ -20,6 +20,7 @@ const transformFuncs = [
   'clientOnly',
   'createIsomorphicFn',
   'createServerFileRoute',
+  'createServerRootRoute',
 ]
 
 const tokenRegex = new RegExp(transformFuncs.join('|'))
@@ -52,24 +53,29 @@ export function startCompilerPlugin(
     applyToEnvironment(env) {
       return [opts.client.envName, opts.server.envName].includes(env.name)
     },
-    transform(code, id) {
-      const env =
-        this.environment.name === opts.client.envName
-          ? 'client'
-          : this.environment.name === opts.server.envName
-            ? 'server'
-            : (() => {
-                throw new Error(
-                  `Environment ${this.environment.name} not configured`,
-                )
-              })()
-
-      return transformCode({
-        code,
-        id,
-        env,
-        framework,
-      })
+    transform: {
+      filter: {
+        code: tokenRegex,
+      },
+      handler(code, id) {
+        const env =
+          this.environment.name === opts.client.envName
+            ? 'client'
+            : this.environment.name === opts.server.envName
+              ? 'server'
+              : (() => {
+                  throw new Error(
+                    `Environment ${this.environment.name} not configured`,
+                  )
+                })()
+
+        return transformCode({
+          code,
+          id,
+          env,
+          framework,
+        })
+      },
     },
   }
 }
@@ -87,12 +93,6 @@ function transformCode(opts: {
   url.searchParams.delete('v')
   id = fileURLToPath(url).replace(/\\/g, '/')
 
-  const includesToken = tokenRegex.test(code)
-
-  if (!includesToken) {
-    return null
-  }
-
   if (debug) console.info(`${env} Compiling Start: `, id)
 
   const compileStartOutput = compileStartOutputFactory(framework)

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

@@ -0,0 +1,249 @@
+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 { resolveViteId } from '../utils'
+import { CLIENT_DIST_DIR } from '../constants'
+import type {
+  PluginOption,
+  ResolvedConfig,
+  Manifest as ViteManifest,
+  ManifestChunk as ViteManifestChunk,
+} from 'vite'
+import type { RouterManagedTag } from '@tanstack/router-core'
+import type { TanStackStartOutputConfig } from '../plugin'
+
+const getCSSRecursively = (
+  file: ViteManifestChunk,
+  filesByRouteFilePath: ViteManifest,
+  basePath: string,
+) => {
+  const result: Array<RouterManagedTag> = []
+
+  // Get all css imports from the file
+  for (const cssFile of file.css ?? []) {
+    result.push({
+      tag: 'link',
+      attrs: {
+        rel: 'stylesheet',
+        href: joinURL(basePath, cssFile),
+        type: 'text/css',
+      },
+    })
+  }
+
+  // Recursively get CSS from imports
+  for (const imp of file.imports ?? []) {
+    const importInfo = filesByRouteFilePath[imp]
+    if (importInfo) {
+      result.push(
+        ...getCSSRecursively(importInfo, filesByRouteFilePath, basePath),
+      )
+    }
+  }
+
+  return result
+}
+
+const resolvedModuleId = resolveViteId(VIRTUAL_MODULES.startManifest)
+export function startManifestPlugin(
+  opts: TanStackStartOutputConfig,
+): PluginOption {
+  let config: ResolvedConfig
+
+  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) {
+        if (id === VIRTUAL_MODULES.startManifest) {
+          return resolvedModuleId
+        }
+        return undefined
+      },
+    },
+    load: {
+      filter: {
+        id: new RegExp(resolvedModuleId),
+      },
+      handler(id) {
+        if (id === resolvedModuleId) {
+          if (this.environment.config.consumer !== 'server') {
+            // this will ultimately fail the build if the plugin is used outside the server environment
+            // TODO: do we need special handling for `serve`?
+            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}'!`,
+            )
+          }
+
+          // 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`
+          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,
+                  )
+                }
+                entryFile = v
+              }
+
+              const rPath = k.split('?')[0]
+
+              return [rPath, v]
+            }, {}),
+          )
+
+          const routesDirectoryFromRoot = path.relative(
+            opts.root,
+            opts.tsr.routesDirectory,
+          )
+
+          // 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
+              })
+
+              // 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',
+                },
+              },
+            ]
+          }
+
+          const recurseRoute = (
+            route: {
+              preloads?: Array<string>
+              children?: Array<any>
+            },
+            seenPreloads = {} as Record<string, true>,
+          ) => {
+            route.preloads = route.preloads?.filter((preload) => {
+              if (seenPreloads[preload]) {
+                return false
+              }
+              seenPreloads[preload] = true
+              return true
+            })
+
+            if (route.children) {
+              route.children.forEach((child) => {
+                const childRoute = routeTreeRoutes[child]!
+                recurseRoute(childRoute, { ...seenPreloads })
+              })
+            }
+          }
+
+          // @ts-expect-error
+          recurseRoute(routeTreeRoutes[rootRouteId])
+
+          const routesManifest = {
+            routes: routeTreeRoutes,
+          }
+
+          return `export const tsrStartManifest = () => (${JSON.stringify(routesManifest)})`
+        }
+
+        return undefined
+      },
+    },
+  }
+}

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

@@ -0,0 +1,43 @@
+import { rootRouteId } from '@tanstack/router-core'
+
+import type { GeneratorPlugin } from '@tanstack/router-generator'
+
+/**
+ * this plugin builds the routes manifest and stores it on globalThis
+ * so that it can be accessed later (e.g. from a vite plugin)
+ */
+export function routesManifestPlugin(): GeneratorPlugin {
+  return {
+    name: 'routes-manifest-plugin',
+    onRouteTreesChanged: ({ routeTrees, rootRouteNode }) => {
+      const routeTree = routeTrees.find((tree) => tree.exportName === 'Route')
+      if (!routeTree) {
+        throw new Error(
+          'No route tree found with export name "Route". Please ensure your routes are correctly defined.',
+        )
+      }
+      const routesManifest = {
+        [rootRouteId]: {
+          filePath: rootRouteNode.filePath,
+          children: routeTree.acc.routeTree.map((d) => d.routePath),
+        },
+        ...Object.fromEntries(
+          routeTree.acc.routeNodes.map((d) => {
+            const filePathId = d.routePath
+
+            return [
+              filePathId,
+              {
+                filePath: d.filePath,
+                parent: d.parent?.routePath ? d.parent.routePath : undefined,
+                children: d.children?.map((childRoute) => childRoute.routePath),
+              },
+            ]
+          }),
+        ),
+      }
+
+      globalThis.TSS_ROUTES_MANIFEST = { routes: routesManifest }
+    },
+  }
+}

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

@@ -0,0 +1,138 @@
+import {
+  checkRouteFullPathUniqueness,
+  ensureStringArgument,
+  hasChildWithExport,
+} from '@tanstack/router-generator'
+
+import type {
+  GeneratorPluginWithTransform,
+  ImportDeclaration,
+  TransformImportsConfig,
+} from '@tanstack/router-generator'
+
+const EXPORT_NAME = 'ServerRoute'
+export function serverRoutesPlugin(): GeneratorPluginWithTransform {
+  return {
+    name: 'server-routes-plugin',
+    transformPlugin: {
+      name: 'server-routes-transform',
+      exportName: EXPORT_NAME,
+      imports: (ctx) => {
+        const targetModule = `@tanstack/${ctx.target}-start/server`
+        const imports: TransformImportsConfig = {}
+        if (ctx.verboseFileRoutes === false) {
+          imports.banned = [
+            {
+              source: targetModule,
+              specifiers: [{ imported: 'createServerFileRoute' }],
+            },
+          ]
+        } else {
+          imports.required = [
+            {
+              source: targetModule,
+              specifiers: [{ imported: 'createServerFileRoute' }],
+            },
+          ]
+        }
+        return imports
+      },
+      onExportFound: ({ ctx, decl }) => {
+        let appliedChanges = false
+        if (decl.init?.type === 'CallExpression') {
+          let call = decl.init
+          let callee = call.callee
+
+          while (
+            callee.type === 'MemberExpression' &&
+            callee.object.type === 'CallExpression'
+          ) {
+            call = callee.object
+            callee = call.callee
+          }
+          if (
+            call.callee.type === 'Identifier' &&
+            call.callee.name === 'createServerFileRoute'
+          ) {
+            if (!ctx.verboseFileRoutes) {
+              if (call.arguments.length) {
+                call.arguments = []
+                appliedChanges = true
+              }
+            } else {
+              appliedChanges = ensureStringArgument(
+                call,
+                ctx.routeId,
+                ctx.preferredQuote,
+              )
+            }
+          } else {
+            throw new Error(
+              `Expected "createServerFileRoute" call, but got "${call.callee.type}"`,
+            )
+          }
+        }
+        return appliedChanges
+      },
+    },
+    moduleAugmentation: ({ generator }) => ({
+      module: `@tanstack/${generator.config.target}-start/server`,
+      interfaceName: 'ServerFileRoutesByPath',
+    }),
+    onRouteTreesChanged: ({ routeTrees, generator }) => {
+      const tree = routeTrees.find((tree) => tree.exportName === EXPORT_NAME)
+      if (tree) {
+        checkRouteFullPathUniqueness(tree.sortedRouteNodes, generator.config)
+      }
+    },
+    imports: (ctx) => {
+      const imports: Array<ImportDeclaration> = []
+
+      const targetModule = `@tanstack/${ctx.generator.config.target}-start/server`
+      if (ctx.generator.config.verboseFileRoutes === false) {
+        imports.push({
+          specifiers: [
+            { imported: 'CreateServerFileRoute' },
+            { imported: 'ServerFileRoutesByPath' },
+          ],
+          source: targetModule,
+          importKind: 'type',
+        })
+      }
+      // don't add the import if there are no server routes defined
+      const hasMatchingRouteFiles = ctx.acc.routeNodes.length > 0
+      if (hasMatchingRouteFiles) {
+        // needs a virtual root route
+        if (!ctx.rootRouteNode.exports?.includes(EXPORT_NAME)) {
+          imports.push({
+            specifiers: [{ imported: 'createServerRootRoute' }],
+            source: targetModule,
+          })
+        }
+      }
+      return imports
+    },
+    routeModuleAugmentation: ({ routeNode }) => {
+      // server routes don't support lazy routes
+      if (routeNode._fsRouteType === 'lazy') {
+        return undefined
+      }
+      return `const createServerFileRoute: CreateServerFileRoute<
+          ServerFileRoutesByPath['${routeNode.routePath}']['parentRoute'],
+          ServerFileRoutesByPath['${routeNode.routePath}']['id'],
+          ServerFileRoutesByPath['${routeNode.routePath}']['path'],
+          ServerFileRoutesByPath['${routeNode.routePath}']['fullPath'],
+          ${hasChildWithExport(routeNode, 'ServerRoute') ? `${routeNode.variableName}ServerRouteChildren` : 'unknown'}
+        >`
+    },
+    createRootRouteCode: () => `createServerRootRoute()`,
+    createVirtualRouteCode: ({ node }) =>
+      `createServerFileRoute('${node.routePath}')`,
+    config: ({ sortedRouteNodes }) => {
+      const hasMatchingRouteFiles = sortedRouteNodes.length > 0
+      return {
+        virtualRootRoute: hasMatchingRouteFiles,
+      }
+    },
+  }
+}

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

@@ -0,0 +1,35 @@
+/*
+what is this plugin doing, especially compared to one already existing in the @tanstack/router-plugin package?
+
+it configures:
+1. the generator to generate both the render-route-tree as well as the server-route-tree
+2. the code-splitter plugin, so it could possibly be enabled per environment (e.g. disable on the server)
+3. the auto import plugin for both environments
+4. the route tree client plugin, which removes the server part from the generated route tree
+5. the virtual route tree plugin, which provides the route tree to the server
+*/
+
+import {
+  tanStackRouterCodeSplitter,
+  tanstackRouterAutoImport,
+  tanstackRouterGenerator,
+} from '@tanstack/router-plugin/vite'
+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'
+
+export function tanStackStartRouter(config: Config): Array<PluginOption> {
+  return [
+    tanstackRouterGenerator({
+      ...config,
+      plugins: [serverRoutesPlugin(), routesManifestPlugin()],
+    }),
+    tanStackRouterCodeSplitter(config),
+    tanstackRouterAutoImport(config),
+    routeTreeClientPlugin(config),
+    virtualRouteTreePlugin(config),
+  ]
+}