@tanstack/router-plugin 1.121.0-alpha.26 → 1.121.0-alpha.28

package/src/core/code-splitter/compilers.ts

@@ -12,7 +12,7 @@ import { createIdentifier } from './path-ids'
 import { getFrameworkOptions } from './framework-options'
 import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from '../constants'
-import type { Config } from '../config'
+import type { Config, DeletableNodes } from '../config'
 
 type SplitNodeMeta = {
   routeIdent: SplitRouteIdentNodes
@@ -92,13 +92,24 @@ function removeSplitSearchParamFromFilename(filename: string) {
   return bareFilename!
 }
 
+const splittableCreateRouteFns = ['createFileRoute']
+const unsplittableCreateRouteFns = [
+  'createRootRoute',
+  'createRootRouteWithContext',
+]
+const allCreateRouteFns = [
+  ...splittableCreateRouteFns,
+  ...unsplittableCreateRouteFns,
+]
+
 export function compileCodeSplitReferenceRoute(
   opts: ParseAstOptions & {
-    runtimeEnv: 'dev' | 'prod'
     codeSplitGroupings: CodeSplitGroupings
+    deleteNodes?: Set<DeletableNodes>
     targetFramework: Config['target']
     filename: string
     id: string
+    addHmr?: boolean
   },
 ): GeneratorResult {
   const ast = parseAst(opts)
@@ -116,6 +127,8 @@ export function compileCodeSplitReferenceRoute(
   const LAZY_ROUTE_COMPONENT_IDENT = frameworkOptions.idents.lazyRouteComponent
   const LAZY_FN_IDENT = frameworkOptions.idents.lazyFn
 
+  let createRouteFn: string
+
   babel.traverse(ast, {
     Program: {
       enter(programPath) {
@@ -136,29 +149,48 @@ export function compileCodeSplitReferenceRoute(
               return
             }
 
-            if (
-              !(
-                path.node.callee.name === 'createRoute' ||
-                path.node.callee.name === 'createFileRoute'
-              )
-            ) {
+            if (!allCreateRouteFns.includes(path.node.callee.name)) {
               return
             }
 
+            createRouteFn = path.node.callee.name
+
             function babelHandleReference(routeOptions: t.Node | undefined) {
               const hasImportedOrDefinedIdentifier = (name: string) => {
                 return programPath.scope.hasBinding(name)
               }
 
               if (t.isObjectExpression(routeOptions)) {
+                if (opts.deleteNodes && opts.deleteNodes.size > 0) {
+                  routeOptions.properties = routeOptions.properties.filter(
+                    (prop) => {
+                      if (t.isObjectProperty(prop)) {
+                        if (t.isIdentifier(prop.key)) {
+                          if (opts.deleteNodes?.has(prop.key.name as any)) {
+                            return false
+                          }
+                        }
+                      }
+                      return true
+                    },
+                  )
+                }
+                if (!splittableCreateRouteFns.includes(createRouteFn)) {
+                  // we can't split this route but we still add HMR handling if enabled
+                  if (opts.addHmr) {
+                    programPath.pushContainer('body', routeHmrStatement)
+                  }
+                  // exit traversal so this route is not split
+                  return programPath.stop()
+                }
                 routeOptions.properties.forEach((prop) => {
                   if (t.isObjectProperty(prop)) {
                     if (t.isIdentifier(prop.key)) {
+                      const key = prop.key.name
+
                       // If the user has not specified a split grouping for this key
                       // then we should not split it
-                      const codeSplitGroupingByKey = findIndexForSplitNode(
-                        prop.key.name,
-                      )
+                      const codeSplitGroupingByKey = findIndexForSplitNode(key)
                       if (codeSplitGroupingByKey === -1) {
                         return
                       }
@@ -168,7 +200,6 @@ export function compileCodeSplitReferenceRoute(
                         ),
                       ]
 
-                      const key = prop.key.name
                       // find key in nodeSplitConfig
                       const isNodeConfigAvailable = SPLIT_NODES_CONFIG.has(
                         key as any,
@@ -178,6 +209,16 @@ export function compileCodeSplitReferenceRoute(
                         return
                       }
 
+                      // Exit early if the value is undefined
+                      // Since we don't need to run an import just to get the value of `undefined`
+                      // This is useful for cases like: `createFileRoute('/')({ component: undefined })`
+                      if (
+                        t.isIdentifier(prop.value) &&
+                        prop.value.name === 'undefined'
+                      ) {
+                        return
+                      }
+
                       const splitNodeMeta = SPLIT_NODES_CONFIG.get(key as any)!
 
                       // We need to extract the existing search params from the filename, if any
@@ -222,7 +263,6 @@ export function compileCodeSplitReferenceRoute(
                         // Prepend the import statement to the program along with the importer function
                         // Check to see if lazyRouteComponent is already imported before attempting
                         // to import it again
-
                         if (
                           !hasImportedOrDefinedIdentifier(
                             LAZY_ROUTE_COMPONENT_IDENT,
@@ -249,19 +289,12 @@ export function compileCodeSplitReferenceRoute(
                           ])
                         }
 
-                        // If it's a component, we need to pass the function to check the Route.ssr value
-                        if (key === 'component') {
-                          prop.value = template.expression(
-                            `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}', () => Route.ssr)`,
-                          )()
-                        } else {
-                          prop.value = template.expression(
-                            `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
-                          )()
-                        }
+                        prop.value = template.expression(
+                          `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
+                        )()
 
                         // add HMR handling
-                        if (opts.runtimeEnv !== 'prod') {
+                        if (opts.addHmr) {
                           programPath.pushContainer('body', routeHmrStatement)
                         }
                       }
@@ -416,12 +449,7 @@ export function compileCodeSplitVirtualRoute(
               return
             }
 
-            if (
-              !(
-                path.node.callee.name === 'createRoute' ||
-                path.node.callee.name === 'createFileRoute'
-              )
-            ) {
+            if (!splittableCreateRouteFns.includes(path.node.callee.name)) {
               return
             }
 
@@ -442,6 +470,14 @@ export function compileCodeSplitVirtualRoute(
 
                       const value = prop.value
 
+                      // If the value for the `key` is `undefined`, then we don't need to include it
+                      // in the split file, so we can just return, since it will kept in-place in the
+                      // reference file
+                      // This is useful for cases like: `createFileRoute('/')({ component: undefined })`
+                      if (t.isIdentifier(value) && value.name === 'undefined') {
+                        return
+                      }
+
                       let isExported = false
                       if (t.isIdentifier(value)) {
                         isExported = hasExport(ast, value)
@@ -706,12 +742,9 @@ export function compileCodeSplitVirtualRoute(
  */
 export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): {
   groupings: CodeSplitGroupings | undefined
-  routeId: string
 } {
   const ast = parseAst(opts)
 
-  let routeId = ''
-
   let codeSplitGroupings: CodeSplitGroupings | undefined = undefined
 
   babel.traverse(ast, {
@@ -732,26 +765,11 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): {
               return
             }
 
-            if (t.isCallExpression(path.parentPath.node)) {
-              // Extract out the routeId
-              if (t.isCallExpression(path.parentPath.node.callee)) {
-                const callee = path.parentPath.node.callee
-
-                if (t.isIdentifier(callee.callee)) {
-                  const firstArg = callee.arguments[0]
-                  if (t.isStringLiteral(firstArg)) {
-                    routeId = firstArg.value
-                  }
-                }
-              }
-
-              // Extracting the codeSplitGroupings
-              const options = resolveIdentifier(
-                path,
-                path.parentPath.node.arguments[0],
-              )
-              if (t.isObjectExpression(options)) {
-                options.properties.forEach((prop) => {
+            function babelHandleSplittingGroups(
+              routeOptions: t.Node | undefined,
+            ) {
+              if (t.isObjectExpression(routeOptions)) {
+                routeOptions.properties.forEach((prop) => {
                   if (t.isObjectProperty(prop)) {
                     if (t.isIdentifier(prop.key)) {
                       if (prop.key.name === 'codeSplitGroupings') {
@@ -786,13 +804,32 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): {
                 })
               }
             }
+
+            // Extracting the codeSplitGroupings
+            if (t.isCallExpression(path.parentPath.node)) {
+              // createFileRoute('/')({ ... })
+              const options = resolveIdentifier(
+                path,
+                path.parentPath.node.arguments[0],
+              )
+
+              babelHandleSplittingGroups(options)
+            } else if (t.isVariableDeclarator(path.parentPath.node)) {
+              // createFileRoute({ ... })
+              const caller = resolveIdentifier(path, path.parentPath.node.init)
+
+              if (t.isCallExpression(caller)) {
+                const options = resolveIdentifier(path, caller.arguments[0])
+                babelHandleSplittingGroups(options)
+              }
+            }
           },
         })
       },
     },
   })
 
-  return { groupings: codeSplitGroupings, routeId }
+  return { groupings: codeSplitGroupings }
 }
 
 function getImportSpecifierAndPathFromLocalName(
@@ -849,12 +886,10 @@ function resolveIdentifier(path: any, node: any): t.Node | undefined {
   return node
 }
 
-function removeIdentifierLiteral(path: any, node: any) {
-  if (t.isIdentifier(node)) {
-    const binding = path.scope.getBinding(node.name)
-    if (binding) {
-      binding.path.remove()
-    }
+function removeIdentifierLiteral(path: babel.NodePath, node: t.Identifier) {
+  const binding = path.scope.getBinding(node.name)
+  if (binding) {
+    binding.path.remove()
   }
 }
 

package/src/core/config.ts

@@ -55,12 +55,28 @@ export type CodeSplittingOptions = {
    * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']]
    */
   defaultBehavior?: CodeSplitGroupings
+
+  /**
+   * The nodes that shall be deleted from the route.
+   * @default undefined
+   */
+  deleteNodes?: Array<DeletableNodes>
+
+  /**
+   * @default true
+   */
+  addHmr?: boolean
 }
 
+const DELETABLE_NODES = ['ssr'] as const
+export const deletableNodesSchema = z.enum(DELETABLE_NODES)
 const codeSplittingOptionsSchema = z.object({
   splitBehavior: z.function().optional(),
   defaultBehavior: splitGroupingsSchema.optional(),
+  deleteNodes: z.array(deletableNodesSchema).optional(),
+  addHmr: z.boolean().optional().default(true),
 })
+export type DeletableNodes = (typeof DELETABLE_NODES)[number]
 
 export const configSchema = generatorConfigSchema.extend({
   enableRouteGeneration: z.boolean().optional(),
@@ -69,6 +85,15 @@ export const configSchema = generatorConfigSchema.extend({
       return codeSplittingOptionsSchema.parse(v)
     })
     .optional(),
+  plugin: z
+    .object({
+      vite: z
+        .object({
+          environmentName: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
 })
 
 export const getConfig = (inlineConfig: Partial<Config>, root: string) => {

package/src/core/route-autoimport-plugin.ts

@@ -2,7 +2,7 @@ import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
 import babel from '@babel/core'
 import * as template from '@babel/template'
 import { getConfig } from './config'
-import { debug, fileIsInRoutesDirectory } from './utils'
+import { debug } from './utils'
 import type { Config } from './config'
 import type { UnpluginFactory } from 'unplugin'
 
@@ -16,70 +16,76 @@ export const unpluginRouteAutoImportFactory: UnpluginFactory<
   let userConfig = options as Config
 
   return {
-    name: 'router-autoimport-plugin',
+    name: 'tanstack-router:autoimport',
     enforce: 'pre',
 
-    transform(code, id) {
-      let routeType: 'createFileRoute' | 'createLazyFileRoute'
-      if (code.includes('export const Route = createFileRoute(')) {
-        routeType = 'createFileRoute'
-      } else if (code.includes('export const Route = createLazyFileRoute(')) {
-        routeType = 'createLazyFileRoute'
-      } else {
-        return null
-      }
+    transform: {
+      filter: {
+        // this is necessary for webpack / rspack to avoid matching .html files
+        id: /\.(m|c)?(j|t)sx?$/,
+        code: /createFileRoute\(|createLazyFileRoute\(/,
+      },
+      handler(code, id) {
+        if (!globalThis.TSR_ROUTES_BY_ID_MAP?.has(id)) {
+          return null
+        }
+        let routeType: 'createFileRoute' | 'createLazyFileRoute'
+        if (code.includes('createFileRoute(')) {
+          routeType = 'createFileRoute'
+        } else if (code.includes('createLazyFileRoute(')) {
+          routeType = 'createLazyFileRoute'
+        } else {
+          return null
+        }
 
-      const routerImportPath = `@tanstack/${userConfig.target}-router`
+        const routerImportPath = `@tanstack/${userConfig.target}-router`
 
-      const ast = parseAst({ code })
+        const ast = parseAst({ code })
 
-      let isCreateRouteFunctionImported = false as boolean
+        let isCreateRouteFunctionImported = false as boolean
 
-      babel.traverse(ast, {
-        Program: {
-          enter(programPath) {
-            programPath.traverse({
-              ImportDeclaration(path) {
-                const importedSpecifiers = path.node.specifiers.map(
-                  (specifier) => specifier.local.name,
-                )
-                if (
-                  importedSpecifiers.includes(routeType) &&
-                  path.node.source.value === routerImportPath
-                ) {
-                  isCreateRouteFunctionImported = true
-                }
-              },
-            })
+        babel.traverse(ast, {
+          Program: {
+            enter(programPath) {
+              programPath.traverse({
+                ImportDeclaration(path) {
+                  const importedSpecifiers = path.node.specifiers.map(
+                    (specifier) => specifier.local.name,
+                  )
+                  if (
+                    importedSpecifiers.includes(routeType) &&
+                    path.node.source.value === routerImportPath
+                  ) {
+                    isCreateRouteFunctionImported = true
+                  }
+                },
+              })
+            },
           },
-        },
-      })
+        })
 
-      if (!isCreateRouteFunctionImported) {
-        if (debug) console.info('Adding autoimports to route ', id)
+        if (!isCreateRouteFunctionImported) {
+          if (debug) console.info('Adding autoimports to route ', id)
 
-        const autoImportStatement = template.statement(
-          `import { ${routeType} } from '${routerImportPath}'`,
-        )()
-        ast.program.body.unshift(autoImportStatement)
+          const autoImportStatement = template.statement(
+            `import { ${routeType} } from '${routerImportPath}'`,
+          )()
+          ast.program.body.unshift(autoImportStatement)
 
-        const result = generateFromAst(ast, {
-          sourceMaps: true,
-          filename: id,
-          sourceFileName: id,
-        })
-        if (debug) {
-          logDiff(code, result.code)
-          console.log('Output:\n', result.code + '\n\n')
+          const result = generateFromAst(ast, {
+            sourceMaps: true,
+            filename: id,
+            sourceFileName: id,
+          })
+          if (debug) {
+            logDiff(code, result.code)
+            console.log('Output:\n', result.code + '\n\n')
+          }
+          return result
         }
-        return result
-      }
-
-      return null
-    },
 
-    transformInclude(id) {
-      return fileIsInRoutesDirectory(id, userConfig.routesDirectory)
+        return null
+      },
     },
 
     vite: {