@tanstack/start-plugin-core 1.20.3-alpha.1

package/src/extractHtmlScripts.ts

@@ -0,0 +1,19 @@
+import * as cheerio from 'cheerio'
+
+export function extractHtmlScripts(
+  html: string,
+): Array<{ content?: string; src?: string }> {
+  const $ = cheerio.load(html)
+  const scripts: Array<{ content?: string; src?: string }> = []
+
+  $('script').each((_, element) => {
+    const src = $(element).attr('src')
+    const content = $(element).html() ?? undefined
+    scripts.push({
+      src,
+      content,
+    })
+  })
+
+  return scripts
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export type { CompileOptions, IdentifierConfig } from './compilers'
+
+export { compileStartOutputFactory } from './compilers'
+
+export type { PagesJson } from './nitro/build-sitemap'
+export { buildSitemap } from './nitro/build-sitemap'
+
+export {
+  createTanStackConfig,
+  createTanStackStartOptionsSchema,
+  pageSchema,
+} from './schema'
+
+export { TanStackStartVitePluginCore } from './plugin'
+export { TanStackStartServerRoutesVite } from './start-server-routes-plugin/plugin'

package/src/nitro/build-nitro.ts

@@ -0,0 +1,27 @@
+import { promises as fsp } from 'node:fs'
+import path from 'node:path'
+import { copyPublicAssets, prepare } from 'nitropack'
+import type { Nitro } from 'nitropack'
+
+export async function buildNitroEnvironment(
+  nitro: Nitro,
+  build: () => Promise<any>,
+) {
+  await prepare(nitro)
+  await copyPublicAssets(nitro)
+  await build()
+
+  const publicDir = nitro.options.output.publicDir
+
+  // As a part of the build process, the `.vite/` directory
+  // is copied over from `.tanstack-start/build/client-dist/`
+  // to the `publicDir` (e.g. `.output/public/`).
+  // This directory (containing the vite manifest) should not be
+  // included in the final build, so we remove it here.
+  const viteDir = path.resolve(publicDir, '.vite')
+  if (await fsp.stat(viteDir).catch(() => false)) {
+    await fsp.rm(viteDir, { recursive: true, force: true })
+  }
+
+  await nitro.close()
+}

package/src/nitro/build-sitemap.ts

@@ -0,0 +1,79 @@
+import { writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { create } from 'xmlbuilder2'
+import type { XMLBuilder } from 'xmlbuilder2/lib/interfaces'
+
+export type PagesJson = {
+  page: string
+  lastMod: string
+}
+
+export async function buildSitemap({
+  host,
+  routes,
+  outputDir,
+}: {
+  host: string
+  routes: Array<string | undefined> | (() => Promise<Array<string | undefined>>)
+  outputDir: string
+}) {
+  const routeList: Array<string> = await optionHasRoutes(routes)
+
+  if (routeList.length) {
+    const slash = checkSlash(host)
+    const sitemapData: Array<PagesJson> = routeList.map((page: string) => ({
+      page: `${host}${slash}${page.replace(/^\/+/g, '')}`,
+      lastMod: new Date().toISOString().split('T')[0]!,
+    }))
+
+    const sitemap = createXml('urlset')
+
+    for (const item of sitemapData) {
+      const page = sitemap.ele('url')
+      page.ele('loc').txt(item.page)
+      page.ele('lastmod').txt(item.lastMod)
+    }
+
+    const mapPath = `${resolve(outputDir)}/sitemap.xml`
+    try {
+      console.log(`Writing sitemap at ${mapPath}`)
+      writeFileSync(mapPath, sitemap.end({ prettyPrint: true }))
+    } catch (e) {
+      console.error(`Unable to write file at ${mapPath}`, e)
+    }
+  }
+}
+
+function createXml(elementName: 'urlset' | 'sitemapindex'): XMLBuilder {
+  return create({ version: '1.0', encoding: 'UTF-8' })
+    .ele(elementName, {
+      xmlns: 'https://www.sitemaps.org/schemas/sitemap/0.9',
+    })
+    .com(`This file was automatically generated by Analog.`)
+}
+
+function checkSlash(host: string): string {
+  const finalChar = host.slice(-1)
+  return finalChar === '/' ? '' : '/'
+}
+
+async function optionHasRoutes(
+  routes:
+    | Array<string | undefined>
+    | (() => Promise<Array<string | undefined>>),
+): Promise<Array<string>> {
+  let routeList: Array<string | undefined>
+
+  if (typeof routes === 'function') {
+    // returns an array or undefined
+    routeList = await routes()
+  } else if (Array.isArray(routes)) {
+    // returns an array of strings
+    routeList = routes
+  } else {
+    // default it to an empty of array
+    routeList = []
+  }
+
+  return routeList.filter(Boolean) as Array<string>
+}

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

@@ -0,0 +1,159 @@
+import { createEvent, getHeader, sendWebResponse } from 'h3'
+import { isRunnableDevEnvironment } from 'vite'
+import { extractHtmlScripts } from '../extractHtmlScripts'
+import type { Connect, Plugin, ViteDevServer } from 'vite'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var TSS_INJECTED_HEAD_SCRIPTS: string | undefined
+}
+
+export function devServerPlugin(): Plugin {
+  // let config: UserConfig
+  let isTest = false
+
+  return {
+    name: 'start-dev-ssr-plugin',
+    config(userConfig, { mode }) {
+      // config = userConfig
+      isTest = isTest ? isTest : mode === 'test'
+    },
+    configureServer(viteDevServer) {
+      if (isTest) {
+        return
+      }
+
+      ;(globalThis as any).viteDevServer = viteDevServer
+
+      return () => {
+        remove_html_middlewares(viteDevServer.middlewares)
+        let cachedScripts: string | undefined
+        viteDevServer.middlewares.use(async (req, res) => {
+          const event = createEvent(req, res)
+          const serverEnv = viteDevServer.environments['server']
+
+          try {
+            if (!serverEnv || !isRunnableDevEnvironment(serverEnv)) {
+              throw new Error('Server environment not found')
+            }
+            if (cachedScripts === undefined) {
+              const templateHtml = `<html><head></head><body></body></html>`
+              const transformedHtml = await viteDevServer.transformIndexHtml(
+                req.url || '/',
+                templateHtml,
+              )
+              const scripts = extractHtmlScripts(transformedHtml)
+              globalThis.TSS_INJECTED_HEAD_SCRIPTS = scripts
+                .map((script) => script.content ?? '')
+                .join(';')
+            }
+            const serverEntry = await serverEnv.runner.import(
+              '/~start/server-entry',
+            )
+            const response = await serverEntry['default'](event)
+
+            return sendWebResponse(event, response)
+          } catch (e) {
+            console.error(e)
+            viteDevServer.ssrFixStacktrace(e as Error)
+
+            if (
+              getHeader(event, 'content-type')?.includes('application/json')
+            ) {
+              return sendWebResponse(
+                event,
+                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,
+                    headers: {
+                      'Content-Type': 'application/json',
+                    },
+                  },
+                ),
+              )
+            }
+
+            return sendWebResponse(
+              event,
+              new Response(
+                `
+              <!DOCTYPE html>
+              <html lang="en">
+                <head>
+                  <meta charset="UTF-8" />
+                  <title>Error</title>
+                  <script type="module">
+                    import { ErrorOverlay } from '/@vite/client'
+                    document.body.appendChild(new ErrorOverlay(${JSON.stringify(
+                      prepareError(req, e),
+                    ).replace(/</g, '\\u003c')}))
+                  </script>
+                </head>
+                <body>
+                </body>
+              </html>
+            `,
+                {
+                  status: 500,
+                  headers: {
+                    'Content-Type': 'text/html',
+                  },
+                },
+              ),
+            )
+          }
+        })
+      }
+    },
+  }
+}
+
+/**
+ * Removes Vite internal middleware
+ *
+ * @param server
+ */
+function remove_html_middlewares(server: ViteDevServer['middlewares']) {
+  const html_middlewares = [
+    'viteIndexHtmlMiddleware',
+    'vite404Middleware',
+    'viteSpaFallbackMiddleware',
+  ]
+  for (let i = server.stack.length - 1; i > 0; i--) {
+    if (
+      html_middlewares.includes(
+        // @ts-expect-error
+        server.stack[i].handle.name,
+      )
+    ) {
+      server.stack.splice(i, 1)
+    }
+  }
+}
+
+/**
+ * Formats error for SSR message in error overlay
+ * @param req
+ * @param error
+ * @returns
+ */
+function prepareError(req: Connect.IncomingMessage, error: unknown) {
+  const e = error as Error
+  return {
+    message: `An error occured while server rendering ${req.url}:\n\n\t${
+      typeof e === 'string' ? e : e.message
+    } `,
+    stack: typeof e === 'string' ? '' : e.stack,
+  }
+}

package/src/nitro/nitro-plugin.ts

@@ -0,0 +1,161 @@
+import path from 'node:path'
+import { rmSync } from 'node:fs'
+import { build, createNitro } from 'nitropack'
+import { dirname, resolve } from 'pathe'
+import { clientDistDir, ssrEntryFile } from '../plugin'
+import { prerender } from '../prerender'
+import { devServerPlugin } from './dev-server-plugin'
+import { buildNitroEnvironment } from './build-nitro'
+import type { EnvironmentOptions, PluginOption, Rollup } from 'vite'
+import type { NitroConfig } from 'nitropack'
+import type { TanStackStartOutputConfig } from '../plugin'
+
+export function nitroPlugin(
+  options: TanStackStartOutputConfig,
+  getSsrBundle: () => Rollup.OutputBundle,
+): Array<PluginOption> {
+  const buildPreset =
+    process.env['START_TARGET'] ?? (options.target as string | undefined)
+
+  return [
+    devServerPlugin(),
+    {
+      name: 'tanstack-vite-plugin-nitro',
+      configEnvironment(name) {
+        if (name === 'server') {
+          return {
+            build: {
+              commonjsOptions: {
+                include: [],
+              },
+              ssr: true,
+              sourcemap: true,
+              rollupOptions: {
+                input: '/~start/server-entry',
+              },
+            },
+          } satisfies EnvironmentOptions
+        }
+
+        return null
+      },
+      config() {
+        return {
+          builder: {
+            sharedPlugins: true,
+            async buildApp(builder) {
+              const clientEnv = builder.environments['client']
+              const serverEnv = builder.environments['server']
+
+              if (!clientEnv) {
+                throw new Error('Client environment not found')
+              }
+
+              if (!serverEnv) {
+                throw new Error('SSR environment not found')
+              }
+
+              const clientOutputDir = resolve(options.root, clientDistDir)
+              rmSync(clientOutputDir, { recursive: true, force: true })
+              await builder.build(clientEnv)
+
+              await builder.build(serverEnv)
+
+              const nitroConfig: NitroConfig = {
+                dev: false,
+                // TODO do we need this? should this be made configurable?
+                compatibilityDate: '2024-11-19',
+                logLevel: 3,
+                preset: buildPreset,
+                publicAssets: [
+                  {
+                    dir: path.resolve(options.root, clientDistDir),
+                  },
+                ],
+                typescript: {
+                  generateTsConfig: false,
+                },
+                prerender: undefined,
+                renderer: ssrEntryFile,
+                rollupConfig: {
+                  plugins: [virtualBundlePlugin(getSsrBundle())],
+                },
+              }
+
+              const nitro = await createNitro(nitroConfig)
+
+              await buildNitroEnvironment(nitro, () => build(nitro))
+
+              if (options.prerender?.enabled) {
+                await prerender({
+                  options,
+                  nitro,
+                  builder,
+                })
+              }
+
+              // if (nitroConfig.prerender?.routes?.length && options.sitemap) {
+              //   console.log('Building Sitemap...')
+              //   // sitemap needs to be built after all directories are built
+              //   await buildSitemap({
+              //     host: options.sitemap.host,
+              //     routes: nitroConfig.prerender.routes,
+              //     outputDir: resolve(options.root, 'dist/public'),
+              //   })
+              // }
+
+              // console.log(
+              //   `\n\n✅ Client and server bundles successfully built.`,
+              // )
+            },
+          },
+        }
+      },
+    },
+  ]
+}
+
+function virtualBundlePlugin(ssrBundle: Rollup.OutputBundle): Rollup.Plugin {
+  type VirtualModule = { code: string; map: string | null }
+  const _modules = new Map<string, VirtualModule>()
+
+  // group chunks and source maps
+  for (const [fileName, content] of Object.entries(ssrBundle)) {
+    if (content.type === 'chunk') {
+      const virtualModule: VirtualModule = {
+        code: content.code,
+        map: null,
+      }
+      const maybeMap = ssrBundle[`${fileName}.map`]
+      if (maybeMap && maybeMap.type === 'asset') {
+        virtualModule.map = maybeMap.source as string
+      }
+      _modules.set(fileName, virtualModule)
+      _modules.set(resolve(fileName), virtualModule)
+    }
+  }
+
+  return {
+    name: 'virtual-bundle',
+    resolveId(id, importer) {
+      if (_modules.has(id)) {
+        return resolve(id)
+      }
+
+      if (importer) {
+        const resolved = resolve(dirname(importer), id)
+        if (_modules.has(resolved)) {
+          return resolved
+        }
+      }
+      return null
+    },
+    load(id) {
+      const m = _modules.get(id)
+      if (!m) {
+        return null
+      }
+      return m
+    },
+  }
+}

package/src/plugin.ts

@@ -0,0 +1,145 @@
+import path from 'node:path'
+import { createNitro } from 'nitropack'
+import {
+  createTanStackConfig,
+  createTanStackStartOptionsSchema,
+} from './schema'
+import { nitroPlugin } from './nitro/nitro-plugin'
+import { startManifestPlugin } from './routesManifestPlugin'
+import { TanStackStartCompilerPlugin } from './start-compiler-plugin'
+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
+>
+
+const defaultConfig = createTanStackConfig()
+export function getTanStackStartOptions(opts?: TanStackStartInputConfig) {
+  return defaultConfig.parse(opts)
+}
+
+export type TanStackStartOutputConfig = ReturnType<
+  typeof getTanStackStartOptions
+>
+
+export const clientDistDir = '.tanstack-start/build/client-dist'
+export const ssrEntryFile = 'ssr.mjs'
+
+// this needs to live outside of the TanStackStartVitePluginCore since it will be invoked multiple times by vite
+let ssrBundle: Rollup.OutputBundle
+
+export function TanStackStartVitePluginCore(
+  framework: CompileStartFrameworkOptions,
+  opts: TanStackStartOutputConfig,
+): Array<PluginOption> {
+  return [
+    {
+      name: 'tanstack-start-core:config-client',
+      async config() {
+        const nitroOutputPublicDir = await (async () => {
+          // Create a dummy nitro app to get the resolved public output path
+          const dummyNitroApp = await createNitro({
+            preset: opts.target,
+            compatibilityDate: '2024-12-01',
+          })
+
+          const nitroOutputPublicDir = dummyNitroApp.options.output.publicDir
+          await dummyNitroApp.close()
+
+          return nitroOutputPublicDir
+        })()
+
+        return {
+          environments: {
+            client: {
+              consumer: 'client',
+              build: {
+                manifest: true,
+                rollupOptions: {
+                  input: {
+                    main: opts.clientEntryPath,
+                  },
+                  output: {
+                    dir: path.resolve(opts.root, clientDistDir),
+                  },
+                  // TODO this should be removed
+                  external: ['node:fs', 'node:path', 'node:os', 'node:crypto'],
+                },
+              },
+            },
+            server: {
+              consumer: 'server',
+              build: {
+                ssr: true,
+                // we don't write to the file system as the below 'capture-output' plugin will
+                // capture the output and write it to the virtual file system
+                write: false,
+                copyPublicDir: false,
+                rollupOptions: {
+                  output: {
+                    entryFileNames: ssrEntryFile,
+                  },
+                  plugins: [
+                    {
+                      name: 'capture-output',
+                      generateBundle(options, bundle) {
+                        // TODO can this hook be called more than once?
+                        ssrBundle = bundle
+                      },
+                    },
+                  ],
+                },
+                commonjsOptions: {
+                  include: [/node_modules/],
+                },
+              },
+            },
+          },
+          resolve: {
+            noExternal: [
+              '@tanstack/start-client',
+              '@tanstack/start-client-core',
+              '@tanstack/start-server',
+              '@tanstack/start-server-core',
+              '@tanstack/start-server-functions-fetcher',
+              '@tanstack/start-server-functions-client',
+              '@tanstack/start-server-functions-server',
+              '@tanstack/start-router-manifest',
+              '@tanstack/start-config',
+              '@tanstack/server-functions-plugin',
+              'tanstack:start-manifest',
+              'tanstack:server-fn-manifest',
+              'nitropack',
+              '@tanstack/**',
+            ],
+            external: ['undici'],
+          },
+          /* prettier-ignore */
+          define: {
+            ...injectDefineEnv('TSS_PUBLIC_BASE', opts.public.base),
+            ...injectDefineEnv('TSS_CLIENT_BASE', opts.client.base),
+            ...injectDefineEnv('TSS_CLIENT_ENTRY', opts.clientEntryPath),
+            ...injectDefineEnv('TSS_SERVER_FN_BASE', opts.serverFns.base),
+            ...injectDefineEnv('TSS_OUTPUT_PUBLIC_DIR', nitroOutputPublicDir),
+          },
+        }
+      },
+    },
+    TanStackStartCompilerPlugin(framework),
+    startManifestPlugin(opts),
+    nitroPlugin(opts, () => ssrBundle),
+  ]
+}
+
+function injectDefineEnv<TKey extends string, TValue extends string>(
+  key: TKey,
+  value: TValue,
+): { [P in `process.env.${TKey}` | `import.meta.env.${TKey}`]: TValue } {
+  return {
+    [`process.env.${key}`]: JSON.stringify(value),
+    [`import.meta.env.${key}`]: JSON.stringify(value),
+  } as { [P in `process.env.${TKey}` | `import.meta.env.${TKey}`]: TValue }
+}