@tanstack/router-generator 1.18.1 → 1.19.2

package/src/generator.ts

@@ -3,7 +3,7 @@ import * as fs from 'fs'
 import * as fsp from 'fs/promises'
 import * as prettier from 'prettier'
 import { Config } from './config'
-import { cleanPath, trimPathLeft } from './utils'
+import { cleanPath, logging, trimPathLeft } from './utils'
 
 let latestTask = 0
 export const rootPathId = '__root'
@@ -18,6 +18,9 @@ export type RouteNode = {
   path?: string
   isNonPath?: boolean
   isNonLayout?: boolean
+  isLayout?: boolean
+  isVirtualParentRequired?: boolean
+  isVirtualParentRoute?: boolean
   isRoute?: boolean
   isLoader?: boolean
   isComponent?: boolean
@@ -32,6 +35,7 @@ export type RouteNode = {
 
 async function getRouteNodes(config: Config) {
   const { routeFilePrefix, routeFileIgnorePrefix } = config
+  const logger = logging({ disabled: config.disableLogging })
 
   let routeNodes: RouteNode[] = []
 
@@ -88,6 +92,9 @@ async function getRouteNodes(config: Config) {
           let isPendingComponent = routePath?.endsWith('/pendingComponent')
           let isLoader = routePath?.endsWith('/loader')
 
+          const segments = (routePath ?? '').split('/')
+          let isLayout = segments[segments.length - 1]?.startsWith('_') || false
+
           ;(
             [
               [isComponent, 'component'],
@@ -97,7 +104,7 @@ async function getRouteNodes(config: Config) {
             ] as const
           ).forEach(([isType, type]) => {
             if (isType) {
-              console.warn(
+              logger.warn(
                 `WARNING: The \`.${type}.tsx\` suffix used for the ${filePath} file is deprecated. Use the new \`.lazy.tsx\` suffix instead.`,
               )
             }
@@ -125,6 +132,7 @@ async function getRouteNodes(config: Config) {
             isPendingComponent,
             isLoader,
             isLazy,
+            isLayout,
           })
         }
       }),
@@ -150,15 +158,16 @@ type RouteSubNode = {
 }
 
 export async function generator(config: Config) {
-  console.log('')
+  const logger = logging({ disabled: config.disableLogging })
+  logger.log('')
 
   if (!first) {
-    console.log('♻️  Generating routes...')
+    logger.log('♻️  Generating routes...')
     first = true
   } else if (skipMessage) {
     skipMessage = false
   } else {
-    console.log('♻️  Regenerating routes...')
+    logger.log('♻️  Regenerating routes...')
   }
 
   const taskId = latestTask + 1
@@ -203,7 +212,20 @@ export async function generator(config: Config) {
   let routeNodes: RouteNode[] = []
 
   const handleNode = async (node: RouteNode) => {
-    const parentRoute = hasParentRoute(routeNodes, node.routePath)
+    let parentRoute = hasParentRoute(routeNodes, node.routePath)
+
+    // if the parent route is a virtual parent route, we need to find the real parent route
+    if (parentRoute?.isVirtualParentRoute && parentRoute.children?.length) {
+      // only if this sub-parent route returns a valid parent route, we use it, if not leave it as it
+      const possibleParentRoute = hasParentRoute(
+        parentRoute.children,
+        node.routePath,
+      )
+      if (possibleParentRoute) {
+        parentRoute = possibleParentRoute
+      }
+    }
+
     if (parentRoute) node.parent = parentRoute
 
     node.path = node.parent
@@ -214,61 +236,67 @@ export async function generator(config: Config) {
 
     const split = trimmedPath?.split('/') ?? []
     let first = split[0] ?? trimmedPath ?? ''
+    const lastRouteSegment = split[split.length - 1] ?? trimmedPath ?? ''
 
-    node.isNonPath = first.startsWith('_')
+    node.isNonPath = lastRouteSegment.startsWith('_')
     node.isNonLayout = first.endsWith('_')
-    node.cleanedPath = removeGroups(removeUnderscores(node.path) ?? '')
 
-    // Ensure the boilerplate for the route exists
-    const routeCode = fs.readFileSync(node.fullPath, 'utf-8')
-
-    const escapedRoutePath = removeTrailingUnderscores(
-      node.routePath?.replaceAll('$', '$$') ?? '',
+    node.cleanedPath = removeGroups(
+      removeUnderscores(removeLayoutSegments(node.path)) ?? '',
     )
 
-    let replaced = routeCode
-
-    if (!routeCode) {
-      if (node.isLazy) {
-        replaced = [
-          `import { createLazyFileRoute } from '@tanstack/react-router'`,
-          `export const Route = createLazyFileRoute('${escapedRoutePath}')({
-  component: () => <div>Hello ${escapedRoutePath}!</div>
-})`,
-        ].join('\n\n')
-      } else if (
-        node.isRoute ||
-        (!node.isComponent &&
-          !node.isErrorComponent &&
-          !node.isPendingComponent &&
-          !node.isLoader)
-      ) {
-        replaced = [
-          `import { createFileRoute } from '@tanstack/react-router'`,
-          `export const Route = createFileRoute('${escapedRoutePath}')({
-  component: () => <div>Hello ${escapedRoutePath}!</div>
-})`,
-        ].join('\n\n')
+    // Ensure the boilerplate for the route exists, which can be skipped for virtual parent routes
+    if (!node.isVirtualParentRoute) {
+      const routeCode = fs.readFileSync(node.fullPath, 'utf-8')
+
+      const escapedRoutePath = removeTrailingUnderscores(
+        node.routePath?.replaceAll('$', '$$') ?? '',
+      )
+
+      let replaced = routeCode
+
+      if (!routeCode) {
+        if (node.isLazy) {
+          replaced = [
+            `import { createLazyFileRoute } from '@tanstack/react-router'`,
+            `export const Route = createLazyFileRoute('${escapedRoutePath}')({
+    component: () => <div>Hello ${escapedRoutePath}!</div>
+  })`,
+          ].join('\n\n')
+        } else if (
+          node.isRoute ||
+          (!node.isComponent &&
+            !node.isErrorComponent &&
+            !node.isPendingComponent &&
+            !node.isLoader)
+        ) {
+          replaced = [
+            `import { createFileRoute } from '@tanstack/react-router'`,
+            `export const Route = createFileRoute('${escapedRoutePath}')({
+    component: () => <div>Hello ${escapedRoutePath}!</div>
+  })`,
+          ].join('\n\n')
+        }
+      } else {
+        replaced = routeCode
+          .replace(
+            /(FileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
+            (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
+          )
+          .replace(
+            /(createFileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
+            (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
+          )
+          .replace(
+            /(createLazyFileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
+            (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
+          )
       }
-    } else {
-      replaced = routeCode
-        .replace(
-          /(FileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
-          (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
-        )
-        .replace(
-          /(createFileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
-          (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
-        )
-        .replace(
-          /(createLazyFileRoute\(\s*['"])([^\s]*)(['"],?\s*\))/g,
-          (match, p1, p2, p3) => `${p1}${escapedRoutePath}${p3}`,
-        )
-    }
 
-    if (replaced !== routeCode) {
-      console.log(`🟡 Updating ${node.fullPath}`)
-      await fsp.writeFile(node.fullPath, replaced)
+      if (replaced !== routeCode) {
+        logger.log(`🟡 Updating ${node.fullPath}`)
+        await fsp.writeFile(node.fullPath, replaced)
+      }
     }
 
     if (
@@ -310,9 +338,53 @@ export async function generator(config: Config) {
       return
     }
 
+    node.isVirtualParentRequired =
+      removeGroups(node.path ?? '')
+        .split('')
+        .filter((char) => char === '/').length >= 2 && // check that the parent route wouldn't be the root route
+      !node.parent &&
+      node.isLayout
+
+    if (!node.isVirtual && node.isVirtualParentRequired) {
+      const parentRoutePath = removeLastSegmentFromPath(node.routePath) || '/'
+
+      const anchorRoute = routeNodes.find(
+        (d) => d.routePath === parentRoutePath,
+      )
+
+      if (!anchorRoute) {
+        const parentNode = {
+          ...node,
+          path: removeLastSegmentFromPath(node.path) || '/',
+          filePath: removeLastSegmentFromPath(node.filePath) || '/',
+          fullPath: removeLastSegmentFromPath(node.fullPath) || '/',
+          routePath: parentRoutePath,
+          variableName: routePathToVariable(parentRoutePath),
+          isVirtual: true,
+          isLayout: false,
+          isVirtualParentRoute: true,
+          isVirtualParentRequired: false,
+        }
+
+        parentNode.children = parentNode.children ?? []
+        parentNode.children.push(node)
+
+        node.parent = parentNode
+
+        await handleNode(parentNode)
+      } else {
+        anchorRoute.children = anchorRoute.children ?? []
+        anchorRoute.children.push(node)
+
+        node.parent = anchorRoute
+      }
+    }
+
     if (node.parent) {
-      node.parent.children = node.parent.children ?? []
-      node.parent.children.push(node)
+      if (!node.isVirtualParentRequired) {
+        node.parent.children = node.parent.children ?? []
+        node.parent.children.push(node)
+      }
     } else {
       routeTree.push(node)
     }
@@ -508,9 +580,11 @@ export async function generator(config: Config) {
         return `'${removeTrailingUnderscores(routeNode.routePath)}': {
           preLoaderRoute: typeof ${routeNode.variableName}Import
           parentRoute: typeof ${
-            routeNode.parent?.variableName
-              ? `${routeNode.parent?.variableName}Import`
-              : 'rootRoute'
+            routeNode.isVirtualParentRequired
+              ? `${routeNode.parent?.variableName}Route`
+              : routeNode.parent?.variableName
+                ? `${routeNode.parent?.variableName}Import`
+                : 'rootRoute'
           }
         }`
       })
@@ -553,7 +627,7 @@ export async function generator(config: Config) {
     )
   }
 
-  console.log(
+  logger.log(
     `✅ Processed ${routeNodes.length === 1 ? 'route' : 'routes'} in ${
       Date.now() - start
     }ms`,
@@ -635,6 +709,34 @@ function removeGroups(s: string) {
   return s.replaceAll(routeGroupPatternRegex, '').replaceAll('//', '/')
 }
 
+/**
+ * Removes the last segment from a given path. Segments are considered to be separated by a '/'.
+ *
+ * @param {string} path - The path from which to remove the last segment. Defaults to '/'.
+ * @returns {string} The path with the last segment removed.
+ * @example
+ * removeLastSegmentFromPath('/workspace/_auth/foo') // '/workspace/_auth'
+ */
+export function removeLastSegmentFromPath(path: string = '/'): string {
+  const segments = path.split('/')
+  segments.pop() // Remove the last segment
+  return segments.join('/')
+}
+
+/**
+ * Removes all segments from a given path that start with an underscore ('_').
+ *
+ * @param {string} path - The path from which to remove segments. Defaults to '/'.
+ * @returns {string} The path with all underscore-prefixed segments removed.
+ * @example
+ * removeLayoutSegments('/workspace/_auth/foo') // '/workspace/foo'
+ */
+function removeLayoutSegments(path: string = '/'): string {
+  const segments = path.split('/')
+  const newSegments = segments.filter((segment) => !segment.startsWith('_'))
+  return newSegments.join('/')
+}
+
 export function hasParentRoute(
   routes: RouteNode[],
   routePathToCheck: string | undefined,

package/src/utils.ts

@@ -6,3 +6,23 @@ export function cleanPath(path: string) {
 export function trimPathLeft(path: string) {
   return path === '/' ? path : path.replace(/^\/{1,}/, '')
 }
+
+export function logging(config: { disabled: boolean }) {
+  return {
+    log: (...args: any[]) => {
+      if (!config.disabled) console.log(...args)
+    },
+    debug: (...args: any[]) => {
+      if (!config.disabled) console.debug(...args)
+    },
+    info: (...args: any[]) => {
+      if (!config.disabled) console.info(...args)
+    },
+    warn: (...args: any[]) => {
+      if (!config.disabled) console.warn(...args)
+    },
+    error: (...args: any[]) => {
+      if (!config.disabled) console.error(...args)
+    },
+  }
+}