@tanstack/start-plugin-core 1.132.0-alpha.1 → 1.132.0-alpha.10

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
@@ -56,7 +57,7 @@ export function TanStackStartVitePluginCore(
 
   return [
     tanStackStartRouter({
-      ...startConfig.tsr,
+      ...startConfig.router,
       target: corePluginOpts.framework,
       autoCodeSplitting: true,
     }),
@@ -67,7 +68,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',
@@ -187,9 +188,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 +199,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:
@@ -223,7 +218,7 @@ export function TanStackStartVitePluginCore(
                   ...Object.values(VIRTUAL_MODULES),
                   ...result.optimizeDeps.exclude.sort(),
                   ...additionalOptimizeDeps.exclude,
-                  `@tanstack/${corePluginOpts.framework}-start/server-functions-server`,
+                  `@tanstack/${corePluginOpts.framework}-start/server`,
                 ],
                 include: [
                   ...additionalOptimizeDeps.include,
@@ -261,7 +256,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 +290,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

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

@@ -0,0 +1,58 @@
+import * as t from '@babel/types'
+import type * as babel from '@babel/core'
+
+import type { CompileOptions } from './compilers'
+
+function capitalize(str: string) {
+  if (!str) return ''
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}
+
+function buildEnvOnlyCallExpressionHandler(env: 'client' | 'server') {
+  return function envOnlyCallExpressionHandler(
+    path: babel.NodePath<t.CallExpression>,
+    opts: CompileOptions,
+  ) {
+    // if (debug)
+    //   console.info(`Handling ${env}Only call expression:`, path.toString())
+
+    const isEnvMatch =
+      env === 'client' ? opts.env === 'client' : opts.env === 'server'
+
+    if (isEnvMatch) {
+      // extract the inner function from the call expression
+      const innerInputExpression = path.node.arguments[0]
+
+      if (!t.isExpression(innerInputExpression)) {
+        throw new Error(
+          `${env}Only() functions must be called with a function!`,
+        )
+      }
+
+      path.replaceWith(innerInputExpression)
+      return
+    }
+
+    // If we're on the wrong environment, replace the call expression
+    // with a function that always throws an error.
+    path.replaceWith(
+      t.arrowFunctionExpression(
+        [],
+        t.blockStatement([
+          t.throwStatement(
+            t.newExpression(t.identifier('Error'), [
+              t.stringLiteral(
+                `create${capitalize(env)}OnlyFn() functions can only be called on the ${env}!`,
+              ),
+            ]),
+          ),
+        ]),
+      ),
+    )
+  }
+}
+
+export const handleCreateServerOnlyFnCallExpression =
+  buildEnvOnlyCallExpressionHandler('server')
+export const handleCreateClientOnlyFnCallExpression =
+  buildEnvOnlyCallExpressionHandler('client')

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

@@ -0,0 +1,78 @@
+import * as t from '@babel/types'
+import { getRootCallExpression } from './utils'
+import type * as babel from '@babel/core'
+
+import type { CompileOptions } from './compilers'
+
+export function handleCreateIsomorphicFnCallExpression(
+  path: babel.NodePath<t.CallExpression>,
+  opts: CompileOptions,
+) {
+  const rootCallExpression = getRootCallExpression(path)
+
+  // if (debug)
+  //   console.info(
+  //     'Handling createIsomorphicFn call expression:',
+  //     rootCallExpression.toString(),
+  //   )
+
+  const callExpressionPaths = {
+    client: null as babel.NodePath<t.CallExpression> | null,
+    server: null as babel.NodePath<t.CallExpression> | null,
+  }
+
+  const validMethods = Object.keys(callExpressionPaths)
+
+  rootCallExpression.traverse({
+    MemberExpression(memberExpressionPath) {
+      if (t.isIdentifier(memberExpressionPath.node.property)) {
+        const name = memberExpressionPath.node.property
+          .name as keyof typeof callExpressionPaths
+
+        if (
+          validMethods.includes(name) &&
+          memberExpressionPath.parentPath.isCallExpression()
+        ) {
+          callExpressionPaths[name] = memberExpressionPath.parentPath
+        }
+      }
+    },
+  })
+
+  if (
+    validMethods.every(
+      (method) =>
+        !callExpressionPaths[method as keyof typeof callExpressionPaths],
+    )
+  ) {
+    const variableId = rootCallExpression.parentPath.isVariableDeclarator()
+      ? rootCallExpression.parentPath.node.id
+      : null
+    console.warn(
+      'createIsomorphicFn called without a client or server implementation!',
+      'This will result in a no-op function.',
+      'Variable name:',
+      t.isIdentifier(variableId) ? variableId.name : 'unknown',
+    )
+  }
+
+  const envCallExpression = callExpressionPaths[opts.env]
+
+  if (!envCallExpression) {
+    // if we don't have an implementation for this environment, default to a no-op
+    rootCallExpression.replaceWith(
+      t.arrowFunctionExpression([], t.blockStatement([])),
+    )
+    return
+  }
+
+  const innerInputExpression = envCallExpression.node.arguments[0]
+
+  if (!t.isExpression(innerInputExpression)) {
+    throw new Error(
+      `createIsomorphicFn().${opts.env}(func) must be called with a function!`,
+    )
+  }
+
+  rootCallExpression.replaceWith(innerInputExpression)
+}