@tanstack/start-plugin-core 1.121.0-alpha.8 → 1.121.0

package/src/{prerender.ts → nitro-plugin/prerender.ts}

@@ -4,13 +4,13 @@ import path from 'node:path'
 import { getRollupConfig } from 'nitropack/rollup'
 import { build as buildNitro, createNitro } from 'nitropack'
 import { joinURL, withBase, withoutBase } from 'ufo'
+import { VITE_ENVIRONMENT_NAMES } from '../constants'
+import { createLogger } from '../utils'
 import { Queue } from './queue'
-import { buildNitroEnvironment } from './nitro/build-nitro'
-import { VITE_ENVIRONMENT_NAMES } from './constants'
 import type { ViteBuilder } from 'vite'
 import type { $Fetch, Nitro } from 'nitropack'
-import type { TanStackStartOutputConfig } from './plugin'
-import type { Page } from './schema'
+import type { TanStackStartOutputConfig } from '../plugin'
+import type { Page } from '../schema'
 
 export async function prerender({
   options,
@@ -21,7 +21,8 @@ export async function prerender({
   nitro: Nitro
   builder: ViteBuilder
 }) {
-  console.info('Prendering pages...')
+  const logger = createLogger('prerender')
+  logger.info('Prendering pages...')
 
   // If prerender is enabled but no pages are provided, default to prerendering the root page
   if (options.prerender?.enabled && !options.pages.length) {
@@ -42,7 +43,10 @@ export async function prerender({
 
   const prerenderOutputDir = path.resolve(
     options.root,
-    '.tanstack-start/build/prerenderer',
+    '.tanstack',
+    'start',
+    'build',
+    'prerenderer',
   )
 
   const nodeNitro = await createNitro({
@@ -72,7 +76,7 @@ export async function prerender({
     },
   }
 
-  await buildNitroEnvironment(nodeNitro, () => buildNitro(nodeNitro))
+  await buildNitro(nodeNitro)
 
   // Import renderer entry
   const serverFilename =
@@ -93,14 +97,14 @@ export async function prerender({
     // Crawl all pages
     const pages = await prerenderPages()
 
-    console.info(`Prerendered ${pages.length} pages:`)
+    logger.info(`Prerendered ${pages.length} pages:`)
     pages.forEach((page) => {
-      console.info(`- ${page}`)
+      logger.info(`- ${page}`)
     })
 
     // TODO: Write the prerendered pages to the output directory
   } catch (error) {
-    console.error(error)
+    logger.error(error)
   } finally {
     // Ensure server is always closed
     // server.process.kill()
@@ -126,7 +130,7 @@ export async function prerender({
     const seen = new Set<string>()
     const retriesByPath = new Map<string, number>()
     const concurrency = options.prerender?.concurrency ?? os.cpus().length
-    console.info(`Concurrency: ${concurrency}`)
+    logger.info(`Concurrency: ${concurrency}`)
     const queue = new Queue({ concurrency })
 
     options.pages.forEach((page) => addCrawlPageTask(page))
@@ -160,7 +164,7 @@ export async function prerender({
 
       // Add the task
       queue.add(async () => {
-        console.info(`Crawling: ${page.path}`)
+        logger.info(`Crawling: ${page.path}`)
         const retries = retriesByPath.get(page.path) || 0
         try {
           // Fetch the route
@@ -228,7 +232,7 @@ export async function prerender({
           }
         } catch (error) {
           if (retries < (prerenderOptions.retryCount ?? 0)) {
-            console.warn(`Encountered error, retrying: ${page.path} in 500ms`)
+            logger.warn(`Encountered error, retrying: ${page.path} in 500ms`)
             await new Promise((resolve) =>
               setTimeout(resolve, prerenderOptions.retryDelay),
             )

package/src/plugin.ts

@@ -1,24 +1,29 @@
 import path from 'node:path'
 import { createNitro } from 'nitropack'
-import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import { trimPathRight } from '@tanstack/router-core'
+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 { startManifestPlugin } from './start-manifest-plugin/plugin'
+import { startCompilerPlugin } from './start-compiler-plugin'
 import {
-  createTanStackConfig,
-  createTanStackStartOptionsSchema,
-} from './schema'
-import { nitroPlugin } from './nitro/nitro-plugin'
-import { startManifestPlugin } from './routesManifestPlugin'
-import { TanStackStartCompilerPlugin } from './start-compiler-plugin'
-import { VITE_ENVIRONMENT_NAMES } from './constants'
-import { TanStackStartServerRoutesVite } from './start-server-routes-plugin/plugin'
+  CLIENT_DIST_DIR,
+  SSR_ENTRY_FILE,
+  VITE_ENVIRONMENT_NAMES,
+} from './constants'
+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'
+import type { createTanStackStartOptionsSchema } from './schema'
 import type { PluginOption, Rollup } from 'vite'
 import type { z } from 'zod'
 import type { CompileStartFrameworkOptions } from './compilers'
 
-const TanStackStartOptionsSchema = createTanStackStartOptionsSchema()
 export type TanStackStartInputConfig = z.input<
-  typeof TanStackStartOptionsSchema
+  ReturnType<typeof createTanStackStartOptionsSchema>
 >
 
 const defaultConfig = createTanStackConfig()
@@ -30,11 +35,14 @@ export type TanStackStartOutputConfig = ReturnType<
   typeof getTanStackStartOptions
 >
 
-export const clientDistDir = '.tanstack-start/build/client-dist'
-export const ssrEntryFile = 'ssr.mjs'
-
 export interface TanStackStartVitePluginCoreOptions {
   framework: CompileStartFrameworkOptions
+  getVirtualServerRootHandler: (ctx: {
+    routerFilepath: string
+    serverEntryFilepath: string
+  }) => string
+  getVirtualServerEntry: (ctx: { routerFilepath: string }) => string
+  getVirtualClientEntry: (ctx: { routerFilepath: string }) => string
 }
 // this needs to live outside of the TanStackStartVitePluginCore since it will be invoked multiple times by vite
 let ssrBundle: Rollup.OutputBundle
@@ -44,16 +52,18 @@ export function TanStackStartVitePluginCore(
   startConfig: TanStackStartOutputConfig,
 ): Array<PluginOption> {
   return [
-    tanstackRouter({
-      verboseFileRoutes: false,
+    tanStackStartRouter({
       ...startConfig.tsr,
       target: opts.framework,
-      enableRouteGeneration: true,
       autoCodeSplitting: true,
     }),
+    resolveVirtualEntriesPlugin(opts, startConfig),
     {
       name: 'tanstack-start-core:config-client',
-      async config() {
+      async config(viteConfig) {
+        const viteAppBase = trimPathRight(viteConfig.base || '/')
+        globalThis.TSS_APP_BASE = viteAppBase
+
         const nitroOutputPublicDir = await (async () => {
           // Create a dummy nitro app to get the resolved public output path
           const dummyNitroApp = await createNitro({
@@ -77,13 +87,17 @@ export function TanStackStartVitePluginCore(
           )
             ? startConfig.clientEntryPath
             : vite.normalizePath(
-                path.resolve(startConfig.root, startConfig.clientEntryPath),
+                path.join(
+                  '/@fs',
+                  path.resolve(startConfig.root, startConfig.clientEntryPath),
+                ),
               )
 
           return entry
         }
 
         return {
+          base: viteAppBase,
           environments: {
             [VITE_ENVIRONMENT_NAMES.client]: {
               consumer: 'client',
@@ -94,9 +108,9 @@ export function TanStackStartVitePluginCore(
                     main: getClientEntryPath(startConfig),
                   },
                   output: {
-                    dir: path.resolve(startConfig.root, clientDistDir),
+                    dir: path.resolve(startConfig.root, CLIENT_DIST_DIR),
                   },
-                  // TODO this should be removed
+                  // TODO: this should be removed
                   external: ['node:fs', 'node:path', 'node:os', 'node:crypto'],
                 },
               },
@@ -111,13 +125,13 @@ export function TanStackStartVitePluginCore(
                 copyPublicDir: false,
                 rollupOptions: {
                   output: {
-                    entryFileNames: ssrEntryFile,
+                    entryFileNames: SSR_ENTRY_FILE,
                   },
                   plugins: [
                     {
                       name: 'capture-output',
-                      generateBundle(options, bundle) {
-                        // TODO can this hook be called more than once?
+                      generateBundle(_options, bundle) {
+                        // TODO: can this hook be called more than once?
                         ssrBundle = bundle
                       },
                     },
@@ -141,34 +155,44 @@ 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/**',
+              '@tanstack/**start**',
+              ...Object.values(VIRTUAL_MODULES),
             ],
           },
+          optimizeDeps: {
+            exclude: [...Object.values(VIRTUAL_MODULES)],
+          },
           /* prettier-ignore */
           define: {
-            ...injectDefineEnv('TSS_PUBLIC_BASE', startConfig.public.base),
-            ...injectDefineEnv('TSS_CLIENT_BASE', startConfig.client.base),
-            ...injectDefineEnv('TSS_CLIENT_ENTRY', getClientEntryPath(startConfig)), // This is consumed by the router-manifest, where the entry point is imported after the dev refresh runtime is resolved
-            ...injectDefineEnv('TSS_SERVER_FN_BASE', startConfig.serverFns.base),
-            ...injectDefineEnv('TSS_OUTPUT_PUBLIC_DIR', nitroOutputPublicDir),
+            // define is an esbuild function that replaces the any instances of given keys with the given values
+            // i.e: __FRAMEWORK_NAME__ can be replaced with JSON.stringify("TanStack Start")
+            // This is not the same as injecting environment variables.
+
+            ...defineReplaceEnv('TSS_CLIENT_ENTRY', getClientEntryPath(startConfig)), // This is consumed by the router-manifest, where the entry point is imported after the dev refresh runtime is resolved
+            ...defineReplaceEnv('TSS_SERVER_FN_BASE', startConfig.serverFns.base),
+            ...defineReplaceEnv('TSS_OUTPUT_PUBLIC_DIR', nitroOutputPublicDir),
+            ...defineReplaceEnv('TSS_APP_BASE', viteAppBase)
           },
         }
       },
     },
     // N.B. TanStackStartCompilerPlugin must be before the TanStackServerFnPluginEnv
-    TanStackStartCompilerPlugin(opts.framework, {
+    startCompilerPlugin(opts.framework, {
       client: { envName: VITE_ENVIRONMENT_NAMES.client },
       server: { envName: VITE_ENVIRONMENT_NAMES.server },
     }),
     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'`,
@@ -193,16 +217,14 @@ export function TanStackStartVitePluginCore(
         return serverEnv.runner.import(fn.extractedFilename)
       },
     }),
+    loadEnvPlugin(startConfig),
     startManifestPlugin(startConfig),
+    devServerPlugin(),
     nitroPlugin(startConfig, () => ssrBundle),
-    TanStackStartServerRoutesVite({
-      ...startConfig.tsr,
-      target: opts.framework,
-    }),
   ]
 }
 
-function injectDefineEnv<TKey extends string, TValue extends string>(
+function defineReplaceEnv<TKey extends string, TValue extends string>(
   key: TKey,
   value: TValue,
 ): { [P in `process.env.${TKey}` | `import.meta.env.${TKey}`]: TValue } {

package/src/resolve-virtual-entries-plugin/plugin.ts

@@ -0,0 +1,63 @@
+import path from 'node:path'
+import * as vite from 'vite'
+import type {
+  TanStackStartOutputConfig,
+  TanStackStartVitePluginCoreOptions,
+} from '../plugin'
+
+export function resolveVirtualEntriesPlugin(
+  opts: TanStackStartVitePluginCoreOptions,
+  startConfig: TanStackStartOutputConfig,
+): vite.Plugin {
+  let resolvedConfig: vite.ResolvedConfig
+
+  const modules = new Set<string>([
+    '/~start/server-entry',
+    '/~start/default-server-entry',
+    '/~start/default-client-entry',
+  ])
+
+  return {
+    name: 'tanstack-start-core:resolve-virtual-entries',
+    configResolved(config) {
+      resolvedConfig = config
+    },
+    resolveId(id) {
+      if (modules.has(id)) {
+        return `${id}.tsx`
+      }
+
+      return undefined
+    },
+    load(id) {
+      const routerFilepath = vite.normalizePath(
+        path.resolve(startConfig.root, startConfig.tsr.srcDirectory, 'router'),
+      )
+
+      if (id === '/~start/server-entry.tsx') {
+        const ssrEntryFilepath = startConfig.serverEntryPath.startsWith(
+          '/~start/default-server-entry',
+        )
+          ? startConfig.serverEntryPath
+          : vite.normalizePath(
+              path.resolve(resolvedConfig.root, startConfig.serverEntryPath),
+            )
+
+        return opts.getVirtualServerRootHandler({
+          routerFilepath,
+          serverEntryFilepath: ssrEntryFilepath,
+        })
+      }
+
+      if (id === '/~start/default-client-entry.tsx') {
+        return opts.getVirtualClientEntry({ routerFilepath })
+      }
+
+      if (id === '/~start/default-server-entry.tsx') {
+        return opts.getVirtualServerEntry({ routerFilepath })
+      }
+
+      return undefined
+    },
+  }
+}

package/src/start-compiler-plugin.ts

@@ -20,11 +20,12 @@ const transformFuncs = [
   'clientOnly',
   'createIsomorphicFn',
   'createServerFileRoute',
+  'createServerRootRoute',
 ]
 
 const tokenRegex = new RegExp(transformFuncs.join('|'))
 
-export function TanStackStartCompilerPlugin(
+export function startCompilerPlugin(
   framework: CompileStartFrameworkOptions,
   inputOpts?: {
     client?: {
@@ -52,24 +53,29 @@ export function TanStackStartCompilerPlugin(
     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
+      },
+    },
+  }
+}