@tanstack/start-plugin-core 1.131.6 → 1.132.0-alpha.0

package/src/{nitro-plugin/build-sitemap.ts → build-sitemap.ts}

@@ -1,8 +1,8 @@
 import { writeFileSync } from 'node:fs'
 import path from 'node:path'
 import { create } from 'xmlbuilder2'
-import { createLogger } from '../utils'
-import type { TanStackStartOutputConfig } from '../plugin'
+import { createLogger } from './utils'
+import type { TanStackStartOutputConfig } from './schema'
 import type { XMLBuilder } from 'xmlbuilder2/lib/interfaces'
 
 export type SitemapUrl = {
@@ -123,17 +123,17 @@ function jsonToXml(sitemapData: SitemapData): string {
 }
 
 export function buildSitemap({
-  options,
+  startConfig,
   publicDir,
 }: {
-  options: TanStackStartOutputConfig
+  startConfig: TanStackStartOutputConfig
   publicDir: string
 }) {
   const logger = createLogger('sitemap')
 
-  let sitemapOptions = options.sitemap
+  let sitemapOptions = startConfig.sitemap
 
-  if (!sitemapOptions && options.pages.length) {
+  if (!sitemapOptions && startConfig.pages.length) {
     sitemapOptions = { enabled: true, outputPath: 'sitemap.xml' }
   }
 
@@ -144,7 +144,7 @@ export function buildSitemap({
   const { host, outputPath } = sitemapOptions
 
   if (!host) {
-    if (!options.sitemap) {
+    if (!startConfig.sitemap) {
       logger.info(
         'Hint: Pages found, but no sitemap host has been set. To enable sitemap generation, set the `sitemap.host` option.',
       )
@@ -159,7 +159,7 @@ export function buildSitemap({
     throw new Error('Sitemap output path is not set')
   }
 
-  const { pages } = options
+  const { pages } = startConfig
 
   if (!pages.length) {
     logger.info('No pages were found to build the sitemap. Skipping...')

package/src/constants.ts

@@ -1,5 +1,3 @@
-import path from 'node:path'
-
 export const VITE_ENVIRONMENT_NAMES = {
   // 'ssr' is chosen as the name for the server environment to ensure backwards compatibility
   // with vite plugins that are not compatible with the new vite environment API (e.g. tailwindcss)
@@ -7,10 +5,15 @@ export const VITE_ENVIRONMENT_NAMES = {
   client: 'client',
 } as const
 
-export const CLIENT_DIST_DIR = path.join(
-  '.tanstack',
-  'start',
-  'build',
-  'client-dist',
-)
-export const SSR_ENTRY_FILE = 'ssr.mjs'
+export type ViteEnvironmentNames =
+  (typeof VITE_ENVIRONMENT_NAMES)[keyof typeof VITE_ENVIRONMENT_NAMES]
+
+// for client and router:
+// if a user has a custom server/client entry point file, resolve.alias will point to this
+// otherwise it will be aliased to the default entry point in the respective framework plugin
+export const ENTRY_POINTS = {
+  client: 'virtual:tanstack-start-client-entry',
+  server: 'virtual:tanstack-start-server-request-entry',
+  // the router entry point must always be provided by the user
+  router: '#tanstack-start-router-entry',
+} as const

package/src/dev-server-plugin/plugin.ts

@@ -1,117 +1,136 @@
-import { createEvent, getHeader, sendWebResponse } from 'h3'
 import { isRunnableDevEnvironment } from 'vite'
-import { VITE_ENVIRONMENT_NAMES } from '../constants'
+import { VIRTUAL_MODULES } from '@tanstack/start-server-core'
+import { NodeRequest, sendNodeResponse } from 'srvx/node'
+import { ENTRY_POINTS, VITE_ENVIRONMENT_NAMES } from '../constants'
+import { resolveViteId } from '../utils'
 import { extractHtmlScripts } from './extract-html-scripts'
-import type { Connect, DevEnvironment, Plugin } from 'vite'
+import type { Connect, DevEnvironment, PluginOption } from 'vite'
+import type { TanStackStartOutputConfig } from '../schema'
 
-/* eslint-disable no-var */
-declare global {
-  var TSS_INJECTED_HEAD_SCRIPTS: string | undefined
-}
-
-export function devServerPlugin(): Plugin {
-  // let config: UserConfig
+export function devServerPlugin({
+  startConfig,
+}: {
+  startConfig: TanStackStartOutputConfig
+}): PluginOption {
   let isTest = false
 
-  return {
-    name: 'start-dev-ssr-plugin',
-    config(userConfig, { mode }) {
-      // config = userConfig
-      isTest = isTest ? isTest : mode === 'test'
-      // see https://vite.dev/config/shared-options.html#apptype
-      // this will prevent vite from injecting middlewares that we don't want
-      userConfig.appType = 'custom'
-    },
-    async configureServer(viteDevServer) {
-      if (isTest) {
-        return
-      }
-
-      // Extract the scripts that Vite plugins would inject into the initial HTML
-      const templateHtml = `<html><head></head><body></body></html>`
-      const transformedHtml = await viteDevServer.transformIndexHtml(
-        '/',
-        templateHtml,
-      )
-      const scripts = extractHtmlScripts(transformedHtml)
-      globalThis.TSS_INJECTED_HEAD_SCRIPTS = scripts
-        .map((script) => script.content ?? '')
-        .join(';')
+  let injectedHeadScripts: string | undefined
 
-      return () => {
-        // do not install middleware in middlewareMode
-        if (viteDevServer.config.server.middlewareMode) {
+  return [
+    {
+      name: 'tanstack-start-core:dev-server',
+      config(_userConfig, { mode }) {
+        isTest = isTest ? isTest : mode === 'test'
+      },
+      async configureServer(viteDevServer) {
+        if (isTest) {
           return
         }
-        viteDevServer.middlewares.use(async (req, res, next) => {
-          // Create an H3Event to have it passed into the server entry
-          // i.e: event => defineEventHandler(event)
 
-          // fix the request URL to match the original URL
-          // otherwise, the request URL will '/index.html'
-          if (req.originalUrl) {
-            req.url = req.originalUrl
-          }
-          const event = createEvent(req, res)
+        // Extract the scripts that Vite plugins would inject into the initial HTML
+        const templateHtml = `<html><head></head><body></body></html>`
+        const transformedHtml = await viteDevServer.transformIndexHtml(
+          '/',
+          templateHtml,
+        )
+        const scripts = extractHtmlScripts(transformedHtml)
+        injectedHeadScripts = scripts
+          .flatMap((script) => script.content ?? [])
+          .join(';')
 
+        return () => {
           const serverEnv = viteDevServer.environments[
             VITE_ENVIRONMENT_NAMES.server
           ] as DevEnvironment | undefined
 
-          try {
-            if (!serverEnv) {
-              throw new Error(
-                `Server environment ${VITE_ENVIRONMENT_NAMES.server} not found`,
-              )
+          if (!serverEnv) {
+            throw new Error(
+              `Server environment ${VITE_ENVIRONMENT_NAMES.server} not found`,
+            )
+          }
+          const installMiddleware = startConfig.vite?.installDevServerMiddleware
+          if (installMiddleware === false) {
+            return
+          }
+          if (installMiddleware == undefined) {
+            // do not install middleware in middlewareMode by default
+            if (viteDevServer.config.server.middlewareMode) {
+              return
             }
 
-            if (!isRunnableDevEnvironment(serverEnv)) {
-              return next()
+            // do not install middleware if SSR env in case another plugin already did
+            if (
+              !isRunnableDevEnvironment(serverEnv) ||
+              // do not check via `isFetchableDevEnvironment` since nitro does implement the `FetchableDevEnvironment` interface but not via inheritance (which this helper checks)
+              'dispatchFetch' in serverEnv
+            ) {
+              return
             }
+          }
 
-            // Import and resolve the request by running the server entry point
-            // i.e export default defineEventHandler((event) => { ... })
-            const serverEntry = await serverEnv.runner.import(
-              '/~start/server-entry',
+          if (!isRunnableDevEnvironment(serverEnv)) {
+            throw new Error(
+              'cannot install vite dev server middleware for TanStack Start since the SSR environment is not a RunnableDevEnvironment',
             )
-            const response = await serverEntry['default'](event)
+          }
 
-            return sendWebResponse(event, response)
-          } catch (e) {
-            console.error(e)
-            viteDevServer.ssrFixStacktrace(e as Error)
+          viteDevServer.middlewares.use(async (req, res) => {
+            // fix the request URL to match the original URL
+            // otherwise, the request URL will '/index.html'
+            if (req.originalUrl) {
+              req.url = req.originalUrl
+            }
+            const webReq = new NodeRequest({ req, res })
 
-            if (
-              getHeader(event, 'content-type')?.includes('application/json')
-            ) {
-              return sendWebResponse(
-                event,
-                new Response(
-                  JSON.stringify(
+            try {
+              // Import and resolve the request by running the server request entry point
+              // this request entry point must implement the `fetch` API as follows:
+              /**
+               * export default {
+               *  fetch(req: Request): Promise<Response>
+               * }
+               */
+              const serverEntry = await serverEnv.runner.import(
+                ENTRY_POINTS.server,
+              )
+              const webRes = await serverEntry['default'].fetch(webReq)
+
+              return sendNodeResponse(res, webRes)
+            } catch (e) {
+              console.error(e)
+              viteDevServer.ssrFixStacktrace(e as Error)
+
+              if (
+                webReq.headers.get('content-type')?.includes('application/json')
+              ) {
+                return sendNodeResponse(
+                  res,
+                  new Response(
+                    JSON.stringify(
+                      {
+                        status: 500,
+                        error: 'Internal Server Error',
+                        message:
+                          'An unexpected error occurred. Please try again later.',
+                        timestamp: new Date().toISOString(),
+                      },
+                      null,
+                      2,
+                    ),
                     {
                       status: 500,
-                      error: 'Internal Server Error',
-                      message:
-                        'An unexpected error occurred. Please try again later.',
-                      timestamp: new Date().toISOString(),
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
                     },
-                    null,
-                    2,
                   ),
-                  {
-                    status: 500,
-                    headers: {
-                      'Content-Type': 'application/json',
-                    },
-                  },
-                ),
-              )
-            }
+                )
+              }
 
-            return sendWebResponse(
-              event,
-              new Response(
-                `
+              return sendNodeResponse(
+                res,
+                new Response(
+                  `
               <!DOCTYPE html>
               <html lang="en">
                 <head>
@@ -128,19 +147,41 @@ export function devServerPlugin(): Plugin {
                 </body>
               </html>
             `,
-                {
-                  status: 500,
-                  headers: {
-                    'Content-Type': 'text/html',
+                  {
+                    status: 500,
+                    headers: {
+                      'Content-Type': 'text/html',
+                    },
                   },
-                },
-              ),
-            )
-          }
-        })
-      }
+                ),
+              )
+            }
+          })
+        }
+      },
     },
-  }
+    {
+      name: 'tanstack-start-core:dev-server:injected-head-scripts',
+      sharedDuringBuild: true,
+      applyToEnvironment: (env) => env.config.consumer === 'server',
+      resolveId: {
+        filter: { id: new RegExp(VIRTUAL_MODULES.injectedHeadScripts) },
+        handler(_id) {
+          return resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)
+        },
+      },
+      load: {
+        filter: {
+          id: new RegExp(resolveViteId(VIRTUAL_MODULES.injectedHeadScripts)),
+        },
+        handler() {
+          const mod = `
+        export const injectedHeadScripts = ${JSON.stringify(injectedHeadScripts) || 'undefined'}`
+          return mod
+        },
+      },
+    },
+  ]
 }
 
 /**

package/src/global.d.ts

@@ -1,10 +1,8 @@
 import type { Manifest } from '@tanstack/router-core'
-import type { Rollup } from 'vite'
 
 /* eslint-disable no-var */
 declare global {
   var TSS_APP_BASE: string
   var TSS_ROUTES_MANIFEST: Manifest
-  var TSS_CLIENT_BUNDLE: Rollup.OutputBundle
 }
 export {}

package/src/index.ts

@@ -1,8 +1,4 @@
-export {
-  createTanStackConfig,
-  createTanStackStartOptionsSchema,
-  pageSchema,
-} from './schema'
+export type { TanStackStartInputConfig } from './schema'
 
 export { TanStackStartVitePluginCore } from './plugin'
 export { resolveViteId } from './utils'

package/src/load-env-plugin/plugin.ts

@@ -1,17 +1,12 @@
-import * as vite from 'vite'
-import type { TanStackStartOutputConfig } from '../plugin'
+import { loadEnv } from 'vite'
+import type { Plugin } from 'vite'
 
-export function loadEnvPlugin(
-  startOpts: TanStackStartOutputConfig,
-): vite.Plugin {
+export function loadEnvPlugin(): Plugin {
   return {
-    name: 'tanstack-vite-plugin-nitro-load-env',
+    name: 'tanstack-start-core:load-env',
     enforce: 'pre',
-    config(userConfig, envConfig) {
-      Object.assign(
-        process.env,
-        vite.loadEnv(envConfig.mode, userConfig.root ?? startOpts.root, ''),
-      )
+    configResolved(config) {
+      Object.assign(process.env, loadEnv(config.mode, config.root))
     },
   }
 }

package/src/output-directory.ts

@@ -0,0 +1,18 @@
+import { join } from 'pathe'
+import { VITE_ENVIRONMENT_NAMES } from './constants'
+import type * as vite from 'vite'
+
+export function getClientOutputDirectory(userConfig: vite.UserConfig) {
+  return (
+    userConfig.environments?.[VITE_ENVIRONMENT_NAMES.client]?.build?.outDir ??
+    join(getServerOutputDirectory(userConfig), 'public')
+  )
+}
+
+export function getServerOutputDirectory(userConfig: vite.UserConfig) {
+  const rootOutputDirectory = userConfig.build?.outDir ?? 'dist'
+  return (
+    userConfig.environments?.[VITE_ENVIRONMENT_NAMES.server]?.build?.outDir ??
+    rootOutputDirectory
+  )
+}