@tanstack/start-plugin-core 1.132.0-alpha.6 → 1.132.0-alpha.8

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

@@ -0,0 +1,79 @@
+import * as t from '@babel/types'
+import { getRootCallExpression } from './utils'
+import type * as babel from '@babel/core'
+
+import type { CompileOptions } from './compilers'
+
+export function handleCreateMiddlewareCallExpression(
+  path: babel.NodePath<t.CallExpression>,
+  opts: CompileOptions,
+) {
+  const rootCallExpression = getRootCallExpression(path)
+
+  // if (debug)
+  //   console.info(
+  //     'Handling createMiddleware call expression:',
+  //     rootCallExpression.toString(),
+  //   )
+
+  const callExpressionPaths = {
+    middleware: null as babel.NodePath<t.CallExpression> | null,
+    validator: null as babel.NodePath<t.CallExpression> | null,
+    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 (callExpressionPaths.validator) {
+    const innerInputExpression = callExpressionPaths.validator.node.arguments[0]
+
+    if (!innerInputExpression) {
+      throw new Error(
+        'createMiddleware().validator() must be called with a validator!',
+      )
+    }
+
+    // If we're on the client, remove the validator call expression
+    if (opts.env === 'client') {
+      if (t.isMemberExpression(callExpressionPaths.validator.node.callee)) {
+        callExpressionPaths.validator.replaceWith(
+          callExpressionPaths.validator.node.callee.object,
+        )
+      }
+    }
+  }
+
+  const serverFnPath = callExpressionPaths.server?.get(
+    'arguments.0',
+  ) as babel.NodePath<any>
+
+  if (
+    callExpressionPaths.server &&
+    serverFnPath.node &&
+    opts.env === 'client'
+  ) {
+    // If we're on the client, remove the server call expression
+    if (t.isMemberExpression(callExpressionPaths.server.node.callee)) {
+      callExpressionPaths.server.replaceWith(
+        callExpressionPaths.server.node.callee.object,
+      )
+    }
+  }
+}

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

@@ -1,7 +1,11 @@
 import { fileURLToPath, pathToFileURL } from 'node:url'
+import { createRequire } from 'node:module'
 import { logDiff } from '@tanstack/router-utils'
 
 import { VIRTUAL_MODULES } from '@tanstack/start-server-core'
+import { normalizePath } from 'vite'
+import path from 'pathe'
+import { VITE_ENVIRONMENT_NAMES } from '../constants'
 import { compileStartOutputFactory } from './compilers'
 import { transformFuncs } from './constants'
 import type { Plugin } from 'vite'
@@ -17,6 +21,20 @@ export type TanStackStartViteOptions = {
 
 const tokenRegex = new RegExp(transformFuncs.join('|'))
 
+const require = createRequire(import.meta.url)
+
+function resolveRuntimeFiles(opts: { package: string; files: Array<string> }) {
+  const pkgRoot = resolvePackage(opts.package)
+  const basePath = path.join(pkgRoot, 'dist', 'esm')
+
+  return opts.files.map((file) => normalizePath(path.join(basePath, file)))
+}
+
+function resolvePackage(packageName: string): string {
+  const pkgRoot = path.dirname(require.resolve(packageName + '/package.json'))
+  return pkgRoot
+}
+
 export function startCompilerPlugin(
   framework: CompileStartFrameworkOptions,
   inputOpts?: {
@@ -30,15 +48,17 @@ export function startCompilerPlugin(
 ): Plugin {
   const opts = {
     client: {
-      envName: 'client',
+      envName: VITE_ENVIRONMENT_NAMES.client,
       ...inputOpts?.client,
     },
     server: {
-      envName: 'server',
+      envName: VITE_ENVIRONMENT_NAMES.server,
       ...inputOpts?.server,
     },
   }
 
+  const compileStartOutput = compileStartOutputFactory(framework)
+
   return {
     name: 'tanstack-start-core:compiler',
     enforce: 'pre',
@@ -49,7 +69,36 @@ export function startCompilerPlugin(
       filter: {
         code: tokenRegex,
         id: {
-          exclude: VIRTUAL_MODULES.serverFnManifest,
+          exclude: [
+            VIRTUAL_MODULES.serverFnManifest,
+            // N.B. the following files either just re-export or provide the runtime implementation of those functions
+            // we do not want to include them in the transformation
+            // however, those packages (especially start-client-core ATM) also USE these functions
+            // (namely `createIsomorphicFn` in `packages/start-client-core/src/getRouterInstance.ts`) and thus need to be transformed
+            ...resolveRuntimeFiles({
+              package: '@tanstack/start-client-core',
+              files: [
+                'index.js',
+                'createIsomorphicFn.js',
+                'envOnly.js',
+                'createServerFn.js',
+                'createMiddleware.js',
+                'serverFnFetcher.js',
+              ],
+            }),
+            ...resolveRuntimeFiles({
+              package: '@tanstack/start-server-core',
+              files: [
+                'index.js',
+                'server-functions-handler.js',
+                'serverRoute.js',
+              ],
+            }),
+            ...resolveRuntimeFiles({
+              package: `@tanstack/${framework}-start-client`,
+              files: ['index.js'],
+            }),
+          ],
         },
       },
       handler(code, id) {
@@ -64,43 +113,25 @@ export function startCompilerPlugin(
                   )
                 })()
 
-        return transformCode({
+        const url = pathToFileURL(id)
+        url.searchParams.delete('v')
+        id = fileURLToPath(url).replace(/\\/g, '/')
+
+        if (debug) console.info(`${env} Compiling Start: `, id)
+
+        const compiled = compileStartOutput({
           code,
-          id,
+          filename: id,
           env,
-          framework,
         })
-      },
-    },
-  }
-}
-
-function transformCode(opts: {
-  code: string
-  id: string
-  env: 'server' | 'client'
-  framework: CompileStartFrameworkOptions
-}) {
-  const { code, env, framework } = opts
-  let { id } = opts
 
-  const url = pathToFileURL(id)
-  url.searchParams.delete('v')
-  id = fileURLToPath(url).replace(/\\/g, '/')
+        if (debug) {
+          logDiff(code, compiled.code)
+          console.log('Output:\n', compiled.code + '\n\n')
+        }
 
-  if (debug) console.info(`${env} Compiling Start: `, id)
-
-  const compileStartOutput = compileStartOutputFactory(framework)
-  const compiled = compileStartOutput({
-    code,
-    filename: id,
-    env,
-  })
-
-  if (debug) {
-    logDiff(code, compiled.code)
-    console.log('Output:\n', compiled.code + '\n\n')
+        return compiled
+      },
+    },
   }
-
-  return compiled
 }

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

@@ -0,0 +1,59 @@
+import * as t from '@babel/types'
+import type * as babel from '@babel/core'
+
+import type { CompileOptions, CompileStartFrameworkOptions } from './compilers'
+
+export function handleCreateServerFileRouteCallExpressionFactory(
+  framework: CompileStartFrameworkOptions,
+  method:
+    | 'createServerFileRoute'
+    | 'createServerRoute'
+    | 'createServerRootRoute',
+) {
+  return function handleCreateServerFileRouteCallExpression(
+    path: babel.NodePath<t.CallExpression>,
+    opts: CompileOptions,
+  ) {
+    const PACKAGES = { start: `@tanstack/${framework}-start/server` }
+
+    let highestParent: babel.NodePath<any> = path
+
+    while (highestParent.parentPath && !highestParent.parentPath.isProgram()) {
+      highestParent = highestParent.parentPath
+    }
+
+    const programPath = highestParent.parentPath as babel.NodePath<t.Program>
+
+    // If we're on the client, remove the entire variable
+    if (opts.env === 'client') {
+      highestParent.remove()
+      return
+    }
+
+    let isCreateServerFileRouteImported = false as boolean
+
+    programPath.traverse({
+      ImportDeclaration(importPath) {
+        const importSource = importPath.node.source.value
+        if (importSource === PACKAGES.start) {
+          const specifiers = importPath.node.specifiers
+          isCreateServerFileRouteImported ||= specifiers.some((specifier) => {
+            return (
+              t.isImportSpecifier(specifier) &&
+              t.isIdentifier(specifier.imported) &&
+              specifier.imported.name === method
+            )
+          })
+        }
+      },
+    })
+
+    if (!isCreateServerFileRouteImported) {
+      const importDeclaration = t.importDeclaration(
+        [t.importSpecifier(t.identifier(method), t.identifier(method))],
+        t.stringLiteral(PACKAGES.start),
+      )
+      programPath.node.body.unshift(importDeclaration)
+    }
+  }
+}

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

@@ -0,0 +1,163 @@
+import * as t from '@babel/types'
+import { codeFrameError, getRootCallExpression } from './utils'
+import type * as babel from '@babel/core'
+
+import type { CompileOptions } from './compilers'
+
+export function handleCreateServerFnCallExpression(
+  path: babel.NodePath<t.CallExpression>,
+  opts: CompileOptions,
+) {
+  // Traverse the member expression and find the call expressions for
+  // the validator, handler, and middleware methods. Check to make sure they
+  // are children of the createServerFn call expression.
+
+  const calledOptions = path.node.arguments[0]
+    ? (path.get('arguments.0') as babel.NodePath<t.ObjectExpression>)
+    : null
+
+  const shouldValidateClient = !!calledOptions?.node.properties.find((prop) => {
+    return (
+      t.isObjectProperty(prop) &&
+      t.isIdentifier(prop.key) &&
+      prop.key.name === 'validateClient' &&
+      t.isBooleanLiteral(prop.value) &&
+      prop.value.value === true
+    )
+  })
+
+  const callExpressionPaths = {
+    middleware: null as babel.NodePath<t.CallExpression> | null,
+    validator: null as babel.NodePath<t.CallExpression> | null,
+    handler: null as babel.NodePath<t.CallExpression> | null,
+  }
+
+  const validMethods = Object.keys(callExpressionPaths)
+
+  const rootCallExpression = getRootCallExpression(path)
+
+  // if (debug)
+  //   console.info(
+  //     'Handling createServerFn call expression:',
+  //     rootCallExpression.toString(),
+  //   )
+
+  // Check if the call is assigned to a variable
+  if (!rootCallExpression.parentPath.isVariableDeclarator()) {
+    throw new Error('createServerFn must be assigned to a variable!')
+  }
+
+  // Get the identifier name of the variable
+  const variableDeclarator = rootCallExpression.parentPath.node
+  const existingVariableName = (variableDeclarator.id as t.Identifier).name
+
+  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 (callExpressionPaths.validator) {
+    const innerInputExpression = callExpressionPaths.validator.node.arguments[0]
+
+    if (!innerInputExpression) {
+      throw new Error(
+        'createServerFn().validator() must be called with a validator!',
+      )
+    }
+
+    // If we're on the client, and we're not validating the client, remove the validator call expression
+    if (
+      opts.env === 'client' &&
+      !shouldValidateClient &&
+      t.isMemberExpression(callExpressionPaths.validator.node.callee)
+    ) {
+      callExpressionPaths.validator.replaceWith(
+        callExpressionPaths.validator.node.callee.object,
+      )
+    }
+  }
+
+  // First, we need to move the handler function to a nested function call
+  // that is applied to the arguments passed to the server function.
+
+  const handlerFnPath = callExpressionPaths.handler?.get(
+    'arguments.0',
+  ) as babel.NodePath<any>
+
+  if (!callExpressionPaths.handler || !handlerFnPath.node) {
+    throw codeFrameError(
+      opts.code,
+      path.node.callee.loc!,
+      `createServerFn must be called with a "handler" property!`,
+    )
+  }
+
+  const handlerFn = handlerFnPath.node
+
+  // So, the way we do this is we give the handler function a way
+  // to access the serverFn ctx on the server via function scope.
+  // The 'use server' extracted function will be called with the
+  // payload from the client, then use the scoped serverFn ctx
+  // to execute the handler function.
+  // This way, we can do things like data and middleware validation
+  // in the __execute function without having to AST transform the
+  // handler function too much itself.
+
+  // .handler((optsOut, ctx) => {
+  //   return ((optsIn) => {
+  //     'use server'
+  //     ctx.__execute(handlerFn, optsIn)
+  //   })(optsOut)
+  // })
+
+  // If the handler function is an identifier and we're on the client, we need to
+  // remove the bound function from the file.
+  // If we're on the server, you can leave it, since it will get referenced
+  // as a second argument.
+
+  if (t.isIdentifier(handlerFn)) {
+    if (opts.env === 'client') {
+      // Find the binding for the handler function
+      const binding = handlerFnPath.scope.getBinding(handlerFn.name)
+      // Remove it
+      if (binding) {
+        binding.path.remove()
+      }
+    }
+    // If the env is server, just leave it alone
+  }
+
+  handlerFnPath.replaceWith(
+    t.arrowFunctionExpression(
+      [t.identifier('opts'), t.identifier('signal')],
+      t.blockStatement(
+        // Everything in here is server-only, since the client
+        // will strip out anything in the 'use server' directive.
+        [
+          t.returnStatement(
+            t.callExpression(
+              t.identifier(`${existingVariableName}.__executeServer`),
+              [t.identifier('opts'), t.identifier('signal')],
+            ),
+          ),
+        ],
+        [t.directive(t.directiveLiteral('use server'))],
+      ),
+    ),
+  )
+
+  if (opts.env === 'server') {
+    callExpressionPaths.handler.node.arguments.push(handlerFn)
+  }
+}

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

@@ -0,0 +1,41 @@
+import { codeFrameColumns } from '@babel/code-frame'
+import type * as t from '@babel/types'
+import type * as babel from '@babel/core'
+
+export function getRootCallExpression(path: babel.NodePath<t.CallExpression>) {
+  // Find the highest callExpression parent
+  let rootCallExpression: babel.NodePath<t.CallExpression> = path
+
+  // Traverse up the chain of CallExpressions
+  while (rootCallExpression.parentPath.isMemberExpression()) {
+    const parent = rootCallExpression.parentPath
+    if (parent.parentPath.isCallExpression()) {
+      rootCallExpression = parent.parentPath
+    }
+  }
+
+  return rootCallExpression
+}
+
+export function codeFrameError(
+  code: string,
+  loc: {
+    start: { line: number; column: number }
+    end: { line: number; column: number }
+  },
+  message: string,
+) {
+  const frame = codeFrameColumns(
+    code,
+    {
+      start: loc.start,
+      end: loc.end,
+    },
+    {
+      highlightCode: true,
+      message,
+    },
+  )
+
+  return new Error(frame)
+}