@tanstack/start-plugin-core 1.132.0-alpha.2 → 1.132.0-alpha.20

package/src/create-server-fn-plugin/plugin.ts

@@ -0,0 +1,138 @@
+import { VITE_ENVIRONMENT_NAMES } from '../constants'
+import { ServerFnCompiler } from './compiler'
+import type { ViteEnvironmentNames } from '../constants'
+import type { PluginOption } from 'vite'
+import type { CompileStartFrameworkOptions } from '../start-compiler-plugin/compilers'
+
+function cleanId(id: string): string {
+  return id.split('?')[0]!
+}
+
+export function createServerFnPlugin(
+  framework: CompileStartFrameworkOptions,
+): PluginOption {
+  const libName = `@tanstack/${framework}-start`
+  const rootExport = 'createServerFn'
+
+  const SERVER_FN_LOOKUP = 'server-fn-module-lookup'
+
+  const compilers: Partial<Record<ViteEnvironmentNames, ServerFnCompiler>> = {}
+  return [
+    {
+      name: 'tanstack-start-core:capture-server-fn-module-lookup',
+      // we only need this plugin in dev mode
+      apply: 'serve',
+      applyToEnvironment(env) {
+        return [
+          VITE_ENVIRONMENT_NAMES.client,
+          VITE_ENVIRONMENT_NAMES.server,
+        ].includes(env.name as ViteEnvironmentNames)
+      },
+      transform: {
+        filter: {
+          id: new RegExp(`${SERVER_FN_LOOKUP}$`),
+        },
+        handler(code, id) {
+          const compiler =
+            compilers[this.environment.name as ViteEnvironmentNames]
+          compiler?.ingestModule({ code, id: cleanId(id) })
+        },
+      },
+    },
+    {
+      name: 'tanstack-start-core::server-fn',
+      enforce: 'pre',
+
+      applyToEnvironment(env) {
+        return [
+          VITE_ENVIRONMENT_NAMES.client,
+          VITE_ENVIRONMENT_NAMES.server,
+        ].includes(env.name as ViteEnvironmentNames)
+      },
+      transform: {
+        filter: {
+          id: {
+            exclude: new RegExp(`${SERVER_FN_LOOKUP}$`),
+          },
+          code: {
+            // only scan files that mention `.handler(`
+            include: [/\.handler\(/],
+          },
+        },
+        async handler(code, id) {
+          let compiler =
+            compilers[this.environment.name as ViteEnvironmentNames]
+          if (!compiler) {
+            const env =
+              this.environment.name === VITE_ENVIRONMENT_NAMES.client
+                ? 'client'
+                : this.environment.name === VITE_ENVIRONMENT_NAMES.server
+                  ? 'server'
+                  : (() => {
+                      throw new Error(
+                        `Environment ${this.environment.name} not configured`,
+                      )
+                    })()
+
+            compiler = new ServerFnCompiler({
+              env,
+              libName,
+              rootExport,
+              loadModule: async (id: string) => {
+                if (this.environment.mode === 'build') {
+                  const loaded = await this.load({ id })
+                  if (!loaded.code) {
+                    throw new Error(`could not load module ${id}`)
+                  }
+                  compiler!.ingestModule({ code: loaded.code, id })
+                } else if (this.environment.mode === 'dev') {
+                  /**
+                   * in dev, vite does not return code from `ctx.load()`
+                   * so instead, we need to take a different approach
+                   * we must force vite to load the module and run it through the vite plugin pipeline
+                   * we can do this by using the `fetchModule` method
+                   * the `captureServerFnModuleLookupPlugin` captures the module code via its transform hook and invokes analyzeModuleAST
+                   */
+                  await this.environment.fetchModule(
+                    id + '?' + SERVER_FN_LOOKUP,
+                  )
+                } else {
+                  throw new Error(
+                    `could not load module ${id}: unknown environment mode ${this.environment.mode}`,
+                  )
+                }
+              },
+              resolveId: async (source: string, importer?: string) => {
+                const r = await this.resolve(source, importer)
+                return r ? cleanId(r.id) : null
+              },
+            })
+            compilers[this.environment.name as ViteEnvironmentNames] = compiler
+          }
+
+          id = cleanId(id)
+          const result = await compiler.compile({ id, code })
+          return result
+        },
+      },
+
+      hotUpdate(ctx) {
+        const compiler =
+          compilers[this.environment.name as ViteEnvironmentNames]
+
+        ctx.modules.forEach((m) => {
+          if (m.id) {
+            const deleted = compiler?.invalidateModule(m.id)
+            if (deleted) {
+              m.importers.forEach((importer) => {
+                if (importer.id) {
+                  compiler?.invalidateModule(importer.id)
+                }
+              })
+            }
+          }
+        })
+      },
+    },
+  ]
+}

package/src/output-directory.ts

@@ -1,18 +1,25 @@
 import { join } from 'pathe'
 import { VITE_ENVIRONMENT_NAMES } from './constants'
+import type { ViteEnvironmentNames } 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')
-  )
+  return getOutputDirectory(userConfig, VITE_ENVIRONMENT_NAMES.client, 'client')
 }
 
 export function getServerOutputDirectory(userConfig: vite.UserConfig) {
+  return getOutputDirectory(userConfig, VITE_ENVIRONMENT_NAMES.server, 'server')
+}
+
+function getOutputDirectory(
+  userConfig: vite.UserConfig,
+  environmentName: ViteEnvironmentNames,
+  directoryName: string,
+) {
   const rootOutputDirectory = userConfig.build?.outDir ?? 'dist'
+
   return (
-    userConfig.environments?.[VITE_ENVIRONMENT_NAMES.server]?.build?.outDir ??
-    rootOutputDirectory
+    userConfig.environments?.[environmentName]?.build?.outDir ??
+    join(rootOutputDirectory, directoryName)
   )
 }

package/src/plugin.ts

@@ -6,7 +6,7 @@ import * as vite from 'vite'
 import { crawlFrameworkPkgs } from 'vitefu'
 import { join } from 'pathe'
 import { startManifestPlugin } from './start-manifest-plugin/plugin'
-import { startCompilerPlugin } from './start-compiler-plugin'
+import { startCompilerPlugin } from './start-compiler-plugin/plugin'
 import { ENTRY_POINTS, VITE_ENVIRONMENT_NAMES } from './constants'
 import { tanStackStartRouter } from './start-router-plugin/plugin'
 import { loadEnvPlugin } from './load-env-plugin/plugin'
@@ -18,10 +18,11 @@ import {
   getServerOutputDirectory,
 } from './output-directory'
 import { postServerBuild } from './post-server-build'
+import { createServerFnPlugin } from './create-server-fn-plugin/plugin'
 import type { ViteEnvironmentNames } from './constants'
 import type { TanStackStartInputConfig } from './schema'
 import type { PluginOption } from 'vite'
-import type { CompileStartFrameworkOptions } from './compilers'
+import type { CompileStartFrameworkOptions } from './start-compiler-plugin/compilers'
 
 export interface TanStackStartVitePluginCoreOptions {
   framework: CompileStartFrameworkOptions
@@ -29,11 +30,6 @@ export interface TanStackStartVitePluginCoreOptions {
     client: string
     server: string
   }
-  crawlPackages?: (opts: {
-    name: string
-    peerDependencies: Record<string, any>
-    exports?: Record<string, any> | string
-  }) => 'include' | 'exclude' | undefined
 }
 
 export function TanStackStartVitePluginCore(
@@ -56,7 +52,7 @@ export function TanStackStartVitePluginCore(
 
   return [
     tanStackStartRouter({
-      ...startConfig.tsr,
+      ...startConfig.router,
       target: corePluginOpts.framework,
       autoCodeSplitting: true,
     }),
@@ -67,7 +63,7 @@ export function TanStackStartVitePluginCore(
         globalThis.TSS_APP_BASE = viteAppBase
 
         const root = viteConfig.root || process.cwd()
-        const resolvedSrcDirectory = join(root, startConfig.tsr.srcDirectory)
+        const resolvedSrcDirectory = join(root, startConfig.srcDirectory)
 
         const routerFilePath = resolveEntry({
           type: 'router entry',
@@ -132,13 +128,8 @@ export function TanStackStartVitePluginCore(
           return nitroOutputPublicDir
         })()*/
 
-        const startPackageName = `@tanstack/${corePluginOpts.framework}-start`
-        const routerPackageName = `@tanstack/${corePluginOpts.framework}-router`
-
-        const additionalOptimizeDeps = {
-          include: new Set<string>(),
-          exclude: new Set<string>(),
-        }
+        const startPackageName =
+          `@tanstack/${corePluginOpts.framework}-start` as const
 
         // crawl packages that have start in "peerDependencies"
         // see https://github.com/svitejs/vitefu/blob/d8d82fa121e3b2215ba437107093c77bde51b63b/src/index.js#L95-L101
@@ -146,34 +137,16 @@ export function TanStackStartVitePluginCore(
         // this is currently uncached; could be implemented similarly as vite handles lock file changes
         // see https://github.com/vitejs/vite/blob/557f797d29422027e8c451ca50dd84bf8c41b5f0/packages/vite/src/node/optimizer/index.ts#L1282
 
-        const result = await crawlFrameworkPkgs({
+        const crawlFrameworkPkgsResult = await crawlFrameworkPkgs({
           root: process.cwd(),
           isBuild: command === 'build',
           isFrameworkPkgByJson(pkgJson) {
-            if ([routerPackageName, startPackageName].includes(pkgJson.name)) {
-              return false
-            }
-
             const peerDependencies = pkgJson['peerDependencies']
 
             if (peerDependencies) {
-              const internalResult = corePluginOpts.crawlPackages?.({
-                name: pkgJson.name,
-                peerDependencies,
-                exports: pkgJson.exports,
-              })
-              if (internalResult) {
-                if (internalResult === 'exclude') {
-                  additionalOptimizeDeps.exclude.add(pkgJson.name)
-                } else {
-                  additionalOptimizeDeps.include.add(pkgJson.name)
-                }
-              }
-              return (
-                startPackageName in peerDependencies ||
-                routerPackageName in peerDependencies
-              )
+              return startPackageName in peerDependencies
             }
+
             return false
           },
         })
@@ -187,9 +160,6 @@ export function TanStackStartVitePluginCore(
             [VITE_ENVIRONMENT_NAMES.client]: {
               consumer: 'client',
               build: {
-                emptyOutDir:
-                  viteConfig.environments?.[VITE_ENVIRONMENT_NAMES.client]
-                    ?.build?.emptyOutDir ?? true,
                 rollupOptions: {
                   input: {
                     main: ENTRY_POINTS.client,
@@ -201,9 +171,6 @@ export function TanStackStartVitePluginCore(
             [VITE_ENVIRONMENT_NAMES.server]: {
               consumer: 'server',
               build: {
-                emptyOutDir:
-                  viteConfig.environments?.[VITE_ENVIRONMENT_NAMES.server]
-                    ?.build?.emptyOutDir ?? false,
                 ssr: true,
                 rollupOptions: {
                   input:
@@ -218,42 +185,18 @@ export function TanStackStartVitePluginCore(
                   viteConfig.environments?.[VITE_ENVIRONMENT_NAMES.server]
                     ?.build?.copyPublicDir ?? false,
               },
-              optimizeDeps: {
-                exclude: [
-                  ...Object.values(VIRTUAL_MODULES),
-                  ...result.optimizeDeps.exclude.sort(),
-                  ...additionalOptimizeDeps.exclude,
-                  `@tanstack/${corePluginOpts.framework}-start/server-functions-server`,
-                ],
-                include: [
-                  ...additionalOptimizeDeps.include,
-                  ...result.optimizeDeps.include.sort(),
-                ],
-              },
             },
           },
           resolve: {
             noExternal: [
               '@tanstack/start**',
               `@tanstack/${corePluginOpts.framework}-start**`,
-              ...Object.values(VIRTUAL_MODULES),
-              startPackageName,
-              ...result.ssr.noExternal.sort(),
+              ...crawlFrameworkPkgsResult.ssr.noExternal.sort(),
             ],
-            dedupe: [startPackageName],
             alias: {
               ...entryAliasConfiguration,
             },
           },
-          optimizeDeps: {
-            exclude: [
-              ...Object.values(VIRTUAL_MODULES),
-              startPackageName,
-              ...result.optimizeDeps.exclude.sort(),
-              ...additionalOptimizeDeps.exclude,
-            ],
-            include: [...additionalOptimizeDeps.include],
-          },
           /* prettier-ignore */
           define: {
             // define is an esbuild function that replaces the any instances of given keys with the given values
@@ -261,7 +204,7 @@ export function TanStackStartVitePluginCore(
             // This is not the same as injecting environment variables.
 
             ...defineReplaceEnv('TSS_SERVER_FN_BASE', startConfig.serverFns.base),
-            ...defineReplaceEnv('TSS_OUTPUT_PUBLIC_DIR', getClientOutputDirectory(viteConfig)),
+            ...defineReplaceEnv('TSS_CLIENT_OUTPUT_DIR', getClientOutputDirectory(viteConfig)),
             ...defineReplaceEnv('TSS_APP_BASE', viteAppBase),
             ...(command === 'serve' ? defineReplaceEnv('TSS_SHELL', startConfig.spa?.enabled ? 'true' : 'false') : {}),
             ...defineReplaceEnv('TSS_DEV_SERVER', command === 'serve' ? 'true' : 'false'),
@@ -295,27 +238,23 @@ export function TanStackStartVitePluginCore(
         }
       },
     },
+    createServerFnPlugin(corePluginOpts.framework),
     // N.B. TanStackStartCompilerPlugin must be before the TanStackServerFnPluginEnv
-    startCompilerPlugin(corePluginOpts.framework, {
-      client: { envName: VITE_ENVIRONMENT_NAMES.client },
-      server: { envName: VITE_ENVIRONMENT_NAMES.server },
-    }),
+    startCompilerPlugin(corePluginOpts.framework),
     TanStackServerFnPluginEnv({
       // This is the ID that will be available to look up and import
       // our server function manifest and resolve its module
       manifestVirtualImportId: VIRTUAL_MODULES.serverFnManifest,
       client: {
         getRuntimeCode: () =>
-          `import { createClientRpc } from '@tanstack/${corePluginOpts.framework}-start/server-functions-client'`,
-        replacer: (d) =>
-          `createClientRpc('${d.functionId}', '${startConfig.serverFns.base}')`,
+          `import { createClientRpc } from '@tanstack/${corePluginOpts.framework}-start/client'`,
+        replacer: (d) => `createClientRpc('${d.functionId}')`,
         envName: VITE_ENVIRONMENT_NAMES.client,
       },
       server: {
         getRuntimeCode: () =>
-          `import { createServerRpc } from '@tanstack/${corePluginOpts.framework}-start/server-functions-server'`,
-        replacer: (d) =>
-          `createServerRpc('${d.functionId}', '${startConfig.serverFns.base}', ${d.fn})`,
+          `import { createServerRpc } from '@tanstack/${corePluginOpts.framework}-start/server'`,
+        replacer: (d) => `createServerRpc('${d.functionId}', ${d.fn})`,
         envName: VITE_ENVIRONMENT_NAMES.server,
       },
     }),

package/src/schema.ts

@@ -2,35 +2,28 @@ import path from 'node:path'
 import { z } from 'zod'
 import { configSchema, getConfig } from '@tanstack/router-generator'
 
-const tsrConfig = configSchema
-  .omit({ autoCodeSplitting: true })
-  .partial()
-  .extend({
-    // this is relative to vite root
-    // TODO why is this nested under tsr?
-    srcDirectory: z.string().optional().default('src'),
-  })
+const tsrConfig = configSchema.omit({ autoCodeSplitting: true }).partial()
 
 export function parseStartConfig(
   opts?: z.input<typeof tanstackStartOptionsSchema>,
 ) {
   const options = tanstackStartOptionsSchema.parse(opts)
 
-  const srcDirectory = options.tsr.srcDirectory
+  const srcDirectory = options.srcDirectory
 
   const routesDirectory =
-    options.tsr.routesDirectory ?? path.join(srcDirectory, 'routes')
+    options.router.routesDirectory ?? path.join(srcDirectory, 'routes')
 
   const generatedRouteTree =
-    options.tsr.generatedRouteTree ??
+    options.router.generatedRouteTree ??
     path.join(srcDirectory, 'routeTree.gen.ts')
 
   return {
     ...options,
-    tsr: {
-      ...options.tsr,
+    router: {
+      ...options.router,
       ...getConfig({
-        ...options.tsr,
+        ...options.router,
         routesDirectory,
         generatedRouteTree,
       }),
@@ -121,12 +114,13 @@ const pageSchema = pageBaseSchema.extend({
 
 const tanstackStartOptionsSchema = z
   .object({
-    tsr: tsrConfig.optional().default({}),
+    srcDirectory: z.string().optional().default('src'),
     router: z
       .object({
-        // TODO naming?
+        // TODO this will move to 'start' once we have `createStart`
         entry: z.string().optional(),
       })
+      .and(tsrConfig.optional().default({}))
       .optional()
       .default({}),
     client: z

package/src/start-compiler-plugin/compilers.ts

@@ -0,0 +1,195 @@
+import * as babel from '@babel/core'
+import * as t from '@babel/types'
+
+import {
+  deadCodeElimination,
+  findReferencedIdentifiers,
+} from 'babel-dead-code-elimination'
+import { generateFromAst, parseAst } from '@tanstack/router-utils'
+import { transformFuncs } from './constants'
+import { handleCreateServerFileRouteCallExpressionFactory } from './serverFileRoute'
+import { handleCreateIsomorphicFnCallExpression } from './isomorphicFn'
+import { handleCreateMiddlewareCallExpression } from './middleware'
+import {
+  handleCreateClientOnlyFnCallExpression,
+  handleCreateServerOnlyFnCallExpression,
+} from './envOnly'
+import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
+
+export type CompileStartFrameworkOptions = 'react' | 'solid'
+
+type Identifiers = { [K in (typeof transformFuncs)[number]]: IdentifierConfig }
+const getIdentifiers = (
+  framework: CompileStartFrameworkOptions,
+): Identifiers => ({
+  createServerRootRoute: {
+    name: 'createServerRootRoute',
+    handleCallExpression: handleCreateServerFileRouteCallExpressionFactory(
+      framework,
+      'createServerRootRoute',
+    ),
+    paths: [],
+  },
+  createServerRoute: {
+    name: 'createServerRoute',
+    handleCallExpression: handleCreateServerFileRouteCallExpressionFactory(
+      framework,
+      'createServerRoute',
+    ),
+    paths: [],
+  },
+  createServerFileRoute: {
+    name: 'createServerFileRoute',
+    handleCallExpression: handleCreateServerFileRouteCallExpressionFactory(
+      framework,
+      'createServerFileRoute',
+    ),
+    paths: [],
+  },
+  createMiddleware: {
+    name: 'createMiddleware',
+    handleCallExpression: handleCreateMiddlewareCallExpression,
+    paths: [],
+  },
+  createServerOnlyFn: {
+    name: 'createServerOnlyFn',
+    handleCallExpression: handleCreateServerOnlyFnCallExpression,
+    paths: [],
+  },
+  createClientOnlyFn: {
+    name: 'createClientOnlyFn',
+    handleCallExpression: handleCreateClientOnlyFnCallExpression,
+    paths: [],
+  },
+  createIsomorphicFn: {
+    name: 'createIsomorphicFn',
+    handleCallExpression: handleCreateIsomorphicFnCallExpression,
+    paths: [],
+  },
+})
+
+export function compileStartOutputFactory(
+  framework: CompileStartFrameworkOptions,
+) {
+  return function compileStartOutput(opts: CompileOptions): GeneratorResult {
+    const ast = parseAst(opts)
+
+    const doDce = opts.dce ?? true
+    // find referenced identifiers *before* we transform anything
+    const refIdents = doDce ? findReferencedIdentifiers(ast) : undefined
+
+    babel.traverse(ast, {
+      Program: {
+        enter(programPath) {
+          const identifiers = getIdentifiers(framework)
+          programPath.traverse({
+            ImportDeclaration: (path) => {
+              if (path.node.source.value !== `@tanstack/${framework}-start`) {
+                return
+              }
+
+              // handle a destructured imports being renamed like "import { createServerFn as myCreateServerFn } from '@tanstack/react-start';"
+              path.node.specifiers.forEach((specifier) => {
+                transformFuncs.forEach((identifierKey) => {
+                  const identifier = identifiers[identifierKey]
+
+                  if (
+                    specifier.type === 'ImportSpecifier' &&
+                    specifier.imported.type === 'Identifier'
+                  ) {
+                    if (specifier.imported.name === identifierKey) {
+                      identifier.name = specifier.local.name
+                    }
+                  }
+
+                  // handle namespace imports like "import * as TanStackStart from '@tanstack/react-start';"
+                  if (specifier.type === 'ImportNamespaceSpecifier') {
+                    identifier.name = `${specifier.local.name}.${identifierKey}`
+                  }
+                })
+              })
+            },
+            CallExpression: (path) => {
+              transformFuncs.forEach((identifierKey) => {
+                // Check to see if the call expression is a call to the
+                // identifiers[identifierKey].name
+                if (
+                  t.isIdentifier(path.node.callee) &&
+                  path.node.callee.name === identifiers[identifierKey].name
+                ) {
+                  // The identifier could be a call to the original function
+                  // in the source code. If this is case, we need to ignore it.
+                  // Check the scope to see if the identifier is a function declaration.
+                  // if it is, then we can ignore it.
+
+                  if (
+                    path.scope.getBinding(identifiers[identifierKey].name)?.path
+                      .node.type === 'FunctionDeclaration'
+                  ) {
+                    return
+                  }
+
+                  return identifiers[identifierKey].paths.push(path)
+                }
+
+                // handle namespace imports like "import * as TanStackStart from '@tanstack/react-start';"
+                // which are then called like "TanStackStart.createServerFn()"
+                if (t.isMemberExpression(path.node.callee)) {
+                  if (
+                    t.isIdentifier(path.node.callee.object) &&
+                    t.isIdentifier(path.node.callee.property)
+                  ) {
+                    const callname = [
+                      path.node.callee.object.name,
+                      path.node.callee.property.name,
+                    ].join('.')
+
+                    if (callname === identifiers[identifierKey].name) {
+                      identifiers[identifierKey].paths.push(path)
+                    }
+                  }
+                }
+
+                return
+              })
+            },
+          })
+
+          transformFuncs.forEach((identifierKey) => {
+            identifiers[identifierKey].paths.forEach((path) => {
+              identifiers[identifierKey].handleCallExpression(
+                path as babel.NodePath<t.CallExpression>,
+                opts,
+              )
+            })
+          })
+        },
+      },
+    })
+
+    if (doDce) {
+      deadCodeElimination(ast, refIdents)
+    }
+
+    return generateFromAst(ast, {
+      sourceMaps: true,
+      sourceFileName: opts.filename,
+      filename: opts.filename,
+    })
+  }
+}
+
+export type CompileOptions = ParseAstOptions & {
+  env: 'server' | 'client'
+  dce?: boolean
+  filename: string
+}
+
+export type IdentifierConfig = {
+  name: string
+  handleCallExpression: (
+    path: babel.NodePath<t.CallExpression>,
+    opts: CompileOptions,
+  ) => void
+  paths: Array<babel.NodePath>
+}

package/src/start-compiler-plugin/constants.ts

@@ -0,0 +1,9 @@
+export const transformFuncs = [
+  'createMiddleware',
+  'createServerOnlyFn',
+  'createClientOnlyFn',
+  'createIsomorphicFn',
+  'createServerRoute',
+  'createServerFileRoute',
+  'createServerRootRoute',
+] as const