@tanstack/router-generator 1.19.0 → 1.19.3

package/src/generator.ts

@@ -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
@@ -89,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'],
@@ -126,6 +132,7 @@ async function getRouteNodes(config: Config) {
             isPendingComponent,
             isLoader,
             isLazy,
+            isLayout,
           })
         }
       }),
@@ -205,72 +212,90 @@ 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, 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,
+        node.routePath,
+      )
+      if (possibleParentRoute) {
+        parentRoute = possibleParentRoute
+      }
+    }
+
     if (parentRoute) node.parent = parentRoute
 
-    node.path = node.parent
-      ? node.routePath?.replace(node.parent.routePath!, '') || '/'
-      : node.routePath
+    node.path = determineNodePath(node)
 
     const trimmedPath = trimPathLeft(node.path ?? '')
 
     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
+    // 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}')({
+      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}')({
+          ].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')
+          ].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) {
-      logger.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 (
@@ -312,9 +337,58 @@ export async function generator(config: Config) {
       return
     }
 
+    const cleanedPathIsEmpty = (node.cleanedPath || '').length === 0
+
+    node.isVirtualParentRequired = node.isLayout
+      ? !cleanedPathIsEmpty && !node.parent
+      : false
+
+    if (!node.isVirtual && node.isVirtualParentRequired) {
+      const parentRoutePath = removeLastSegmentFromPath(node.routePath) || '/'
+      const parentVariableName = routePathToVariable(parentRoutePath)
+
+      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: parentVariableName,
+          isVirtual: true,
+          isLayout: false,
+          isVirtualParentRoute: true,
+          isVirtualParentRequired: false,
+        }
+
+        parentNode.children = parentNode.children ?? []
+        parentNode.children.push(node)
+
+        node.parent = parentNode
+
+        if (node.isLayout) {
+          // since `node.path` is used as the `id` on the route definition, we need to update it
+          node.path = determineNodePath(node)
+        }
+
+        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)
     }
@@ -333,6 +407,10 @@ export async function generator(config: Config) {
         return
       }
 
+      if (node.isLayout && !node.children?.length) {
+        return
+      }
+
       const route = `${node.variableName}Route`
 
       if (node.children?.length) {
@@ -370,7 +448,20 @@ export async function generator(config: Config) {
     .filter((d) => d[1])
     .map((d) => d[0])
 
-  const virtualRouteNodes = sortedRouteNodes.filter((d) => d.isVirtual)
+  const virtualRouteNodes = sortedRouteNodes
+    .filter((d) => d.isVirtual)
+    .reduce((acc, route) => {
+      // ensuring we don't have any duplicated virtual routes or clashes with pre-existing routes
+      const existingPreNode = preRouteNodes.filter(
+        (d) => d.routePath === route.routePath,
+      )
+
+      if (existingPreNode.length === 0) {
+        acc.push(route)
+      }
+
+      return acc
+    }, [] as RouteNode[])
 
   const rootPathIdExtension =
     config.addExtensions && rootRouteNode
@@ -425,6 +516,14 @@ export async function generator(config: Config) {
       .join('\n'),
     '// Create/Update Routes',
     sortedRouteNodes
+      .reduce((acc, node) => {
+        // ensuring we update a unique route only once
+        if (acc.find((d) => d.routePath === node.routePath)) {
+          return acc
+        }
+        acc.push(node)
+        return acc
+      }, [] as RouteNode[])
       .map((node) => {
         const loaderNode = routePiecesByPath[node.routePath!]?.loader
         const componentNode = routePiecesByPath[node.routePath!]?.component
@@ -510,9 +609,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'
           }
         }`
       })
@@ -637,8 +738,49 @@ function removeGroups(s: string) {
   return s.replaceAll(routeGroupPatternRegex, '').replaceAll('//', '/')
 }
 
+/**
+ * The `node.path` is used as the `id` in the route definition.
+ * This function checks if the given node has a parent and if so, it determines the correct path for the given node.
+ * @param node - The node to determine the path for.
+ * @returns The correct path for the given node.
+ */
+function determineNodePath(node: RouteNode) {
+  return (node.path = node.parent
+    ? node.routePath?.replace(node.parent.routePath!, '') || '/'
+    : node.routePath)
+}
+
+/**
+ * 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[],
+  node: RouteNode,
   routePathToCheck: string | undefined,
 ): RouteNode | null {
   if (!routePathToCheck || routePathToCheck === '/') {
@@ -650,19 +792,32 @@ export function hasParentRoute(
     (d) => d.variableName,
   ]).filter((d) => d.routePath !== `/${rootPathId}`)
 
-  for (const route of sortedNodes) {
-    if (route.routePath === '/') continue
+  if (node.isLayout) {
+    for (const route of sortedNodes) {
+      if (route.routePath === '/') continue
 
-    if (
-      routePathToCheck.startsWith(`${route.routePath}/`) &&
-      route.routePath !== routePathToCheck
-    ) {
-      return route
+      // a layout route's parent has to exactly match the layout route minus, the layout segment
+      const exactParentRoutePath = removeLastSegmentFromPath(node.routePath)
+      if (route.routePath === exactParentRoutePath) {
+        return route
+      }
+    }
+  } else {
+    for (const route of sortedNodes) {
+      if (route.routePath === '/') continue
+
+      if (
+        routePathToCheck.startsWith(`${route.routePath}/`) &&
+        route.routePath !== routePathToCheck
+      ) {
+        return route
+      }
     }
   }
+
   const segments = routePathToCheck.split('/')
   segments.pop() // Remove the last segment
   const parentRoutePath = segments.join('/')
 
-  return hasParentRoute(routes, parentRoutePath)
+  return hasParentRoute(routes, node, parentRoutePath)
 }