@tanstack/router-cli 0.0.1-beta.69 → 1.0.0

package/src/generator.ts

@@ -1,61 +1,105 @@
-import klaw from 'klaw'
-import through2 from 'through2'
 import path from 'path'
 import fs from 'fs-extra'
-import crypto from 'crypto'
-import {
-  detectExports,
-  ensureBoilerplate,
-  generateRouteConfig,
-  isolatedProperties,
-  isolateOptionToExport,
-} from './transformCode'
+import * as prettier from 'prettier'
 import { Config } from './config'
+import { cleanPath, trimPathLeft } from '@tanstack/react-router'
 
 let latestTask = 0
-export const rootRouteName = '__root'
-export const rootRouteClientName = '__root.client'
+export const rootPathId = '__root'
+export const fileRouteRegex = /new\s+FileRoute\(([^)]*)\)/g
 
 export type RouteNode = {
-  filename: string
-  clientFilename: string
-  fileNameNoExt: string
+  filePath: string
   fullPath: string
-  fullDir: string
-  isDirectory: boolean
-  isIndex: boolean
-  variable: string
-  childRoutesDir?: string
-  genPath: string
-  genDir: string
-  genPathNoExt: string
-  parent?: RouteNode
-  hash?: string
-  importedFiles?: string[]
-  version?: number
-  changed?: boolean
-  new?: boolean
+  variableName: string
+  routePath?: string
+  cleanedPath?: string
+  path?: string
+  isNonPath?: boolean
+  isNonLayout?: boolean
   isRoot?: boolean
   children?: RouteNode[]
+  parent?: RouteNode
 }
 
-export type IsolatedExport = {
-  key: string
-  exported: boolean
-  code?: string | null
+async function getRouteNodes(config: Config) {
+  const { routeFilePrefix, routeFileIgnorePrefix } = config
+
+  let routeNodes: RouteNode[] = []
+
+  async function recurse(dir: string) {
+    const fullDir = path.resolve(config.routesDirectory, dir)
+    let dirList = await fs.readdir(fullDir)
+
+    dirList = dirList.filter((d) => {
+      if (
+        d.startsWith('.') ||
+        (routeFileIgnorePrefix && d.startsWith(routeFileIgnorePrefix))
+      ) {
+        return false
+      }
+
+      if (routeFilePrefix) {
+        return d.startsWith(routeFilePrefix)
+      }
+
+      return true
+    })
+
+    await Promise.all(
+      dirList.map(async (fileName) => {
+        const fullPath = path.join(fullDir, fileName)
+        const relativePath = path.join(dir, fileName)
+        const stat = await fs.stat(fullPath)
+
+        if (stat.isDirectory()) {
+          await recurse(relativePath)
+        } else {
+          const filePath = path.join(dir, fileName)
+          const filePathNoExt = removeExt(filePath)
+          let routePath =
+            replaceBackslash(
+              cleanPath(`/${filePathNoExt.split('.').join('/')}`),
+            ) ?? ''
+          const variableName = fileToVariable(routePath)
+
+          // Remove the index from the route path and
+          // if the route path is empty, use `/'
+          if (routePath === 'index') {
+            routePath = '/'
+          } else if (routePath.endsWith('/index')) {
+            routePath = routePath.replace(/\/index$/, '/')
+          }
+
+          routeNodes.push({
+            filePath,
+            fullPath,
+            routePath,
+            variableName,
+          })
+        }
+      }),
+    )
+
+    return routeNodes
+  }
+
+  await recurse('./')
+
+  return routeNodes
 }
 
-let nodeCache: RouteNode[] = undefined!
+let first = false
+let skipMessage = false
 
 export async function generator(config: Config) {
   console.log()
 
-  let first = false
-
-  if (!nodeCache) {
-    first = true
+  if (!first) {
     console.log('🔄 Generating routes...')
-    nodeCache = []
+    first = true
+  } else if (skipMessage) {
+    skipMessage = false
   } else {
     console.log('♻️  Regenerating routes...')
   }
@@ -65,7 +109,7 @@ export async function generator(config: Config) {
 
   const checkLatest = () => {
     if (latestTask !== taskId) {
-      console.log(`- Skipping since file changes were made while generating.`)
+      skipMessage = true
       return false
     }
 
@@ -73,398 +117,208 @@ export async function generator(config: Config) {
   }
 
   const start = Date.now()
-  let routeConfigImports: string[] = []
-  let routeConfigClientImports: string[] = []
-
-  let nodesChanged = false
-  const fileQueue: [string, string][] = []
-  const queueWriteFile = (filename: string, content: string) => {
-    fileQueue.push([filename, content])
-  }
-
-  async function reparent(dir: string): Promise<RouteNode[]> {
-    let dirList
-
-    try {
-      dirList = await fs.readdir(dir)
-    } catch (err) {
-      console.log()
-      console.error(
-        'TSR: Error reading the config.routesDirectory. Does it exist?',
-      )
-      console.log()
-      throw err
+  const routePathIdPrefix = config.routeFilePrefix ?? ''
+
+  let routeNodes = await getRouteNodes(config)
+
+  routeNodes = multiSortBy(routeNodes, [
+    (d) => (d.routePath === '/' ? -1 : 1),
+    (d) => d.routePath?.split('/').length,
+    (d) => (d.routePath?.endsWith('/') ? -1 : 1),
+    (d) => d.routePath,
+  ]).filter((d) => d.routePath !== `/${routePathIdPrefix + rootPathId}`)
+
+  const routeTree: RouteNode[] = []
+
+  // Loop over the flat list of routeNodes and
+  // build up a tree based on the routeNodes' routePath
+  routeNodes.forEach((node) => {
+    // routeNodes.forEach((existingNode) => {
+    //   if (
+    //     node.routePath?.startsWith(`${existingNode?.routePath ?? ''}/`)
+    //     // node.routePath.length > existingNode.routePath!.length
+    //   ) {
+    //     node.parent = existingNode
+    //   }
+    // })
+    const parentRoute = hasParentRoute(routeNodes, node.routePath)
+    if (parentRoute) node.parent = parentRoute
+
+    node.path = node.parent
+      ? node.routePath?.replace(node.parent.routePath!, '') || '/'
+      : node.routePath
+
+    const trimmedPath = trimPathLeft(node.path ?? '')
+
+    const split = trimmedPath?.split('/') ?? []
+    let first = split[0] ?? trimmedPath ?? ''
+
+    node.isNonPath = first.startsWith('_')
+    node.isNonLayout = first.endsWith('_')
+
+    node.cleanedPath = removeUnderscores(node.path) ?? ''
+
+    if (node.parent) {
+      node.parent.children = node.parent.children ?? []
+      node.parent.children.push(node)
+    } else {
+      routeTree.push(node)
     }
-
-    const dirListCombo = multiSortBy(
-      await Promise.all(
-        dirList.map(async (filename): Promise<RouteNode> => {
-          const fullPath = path.resolve(dir, filename)
-          const stat = await fs.lstat(fullPath)
-          const ext = path.extname(filename)
-
-          const clientFilename = filename.replace(ext, `.client${ext}`)
-
-          const pathFromRoutes = path.relative(config.routesDirectory, fullPath)
-          const genPath = path.resolve(config.routeGenDirectory, pathFromRoutes)
-
-          const genPathNoExt = removeExt(genPath)
-          const genDir = path.resolve(genPath, '..')
-
-          const fileNameNoExt = removeExt(filename)
-
-          return {
-            filename,
-            clientFilename,
-            fileNameNoExt,
-            fullPath,
-            fullDir: dir,
-            genPath,
-            genDir,
-            genPathNoExt,
-            variable: fileToVariable(removeExt(pathFromRoutes)),
-            isDirectory: stat.isDirectory(),
-            isIndex: fileNameNoExt === 'index',
-          }
-        }),
-      ),
-      [
-        (d) => (d.fileNameNoExt === 'index' ? -1 : 1),
-        (d) => d.fileNameNoExt,
-        (d) => (d.isDirectory ? 1 : -1),
-      ],
-    )
-
-    const reparented: typeof dirListCombo = []
-
-    dirListCombo.forEach(async (d, i) => {
-      if (d.isDirectory) {
-        const parent = reparented.find(
-          (dd) => !dd.isDirectory && dd.fileNameNoExt === d.filename,
-        )
-
-        if (parent) {
-          parent.childRoutesDir = d.fullPath
-        } else {
-          reparented.push(d)
-        }
-      } else {
-        reparented.push(d)
-      }
-    })
-
-    return Promise.all(
-      reparented.map(async (d) => {
-        if (d.childRoutesDir) {
-          const children = await reparent(d.childRoutesDir)
-
-          d = {
-            ...d,
-            children,
-          }
-
-          children.forEach((child) => (child.parent = d))
-
-          return d
-        }
-        return d
-      }),
-    )
-  }
-
-  const reparented = await reparent(config.routesDirectory)
+  })
 
   async function buildRouteConfig(
     nodes: RouteNode[],
     depth = 1,
   ): Promise<string> {
-    const children = nodes.map(async (n) => {
-      let node = nodeCache.find((d) => d.fullPath === n.fullPath)!
-
-      if (node) {
-        node.new = false
-      } else {
-        node = n
-        nodeCache.push(node)
-        if (!first) {
-          node.new = true
-        }
-      }
-
-      node.version = latestTask
-      if (node.fileNameNoExt === '__root') {
-        node.isRoot = true
-      }
-
+    const children = nodes.map(async (node) => {
       const routeCode = await fs.readFile(node.fullPath, 'utf-8')
 
-      const hashSum = crypto.createHash('sha256')
-      hashSum.update(routeCode)
-      const hash = hashSum.digest('hex')
-
-      node.changed = node.hash !== hash
-      if (node.changed) {
-        nodesChanged = true
-        node.hash = hash
-
-        try {
-          // Ensure the boilerplate for the route exists
-          const code = await ensureBoilerplate(node, routeCode)
-
-          if (code) {
-            await fs.writeFile(node.fullPath, code)
-          }
-
-          let imports: IsolatedExport[] = []
-
-          if (!node.isRoot) {
-            // Generate the isolated files
-            const transforms = await Promise.all(
-              isolatedProperties.map(async (key): Promise<IsolatedExport> => {
-                let exported = false
-                let exports: string[] = []
-
-                const transformed = await isolateOptionToExport(
-                  node,
-                  routeCode,
-                  {
-                    isolate: key,
-                  },
-                )
-
-                if (transformed) {
-                  exports = await detectExports(transformed)
-                  if (exports.includes(key)) {
-                    exported = true
-                  }
-                }
-
-                return { key, exported, code: transformed }
-              }),
-            )
-
-            imports = transforms.filter(({ exported }) => exported)
-
-            node.importedFiles = await Promise.all(
-              imports.map(({ key, code }) => {
-                const importFilename = `${node.genPathNoExt}-${key}.tsx`
-                queueWriteFile(importFilename, code!)
-                return importFilename
-              }),
-            )
-          }
-
-          const routeConfigCode = await generateRouteConfig(
-            node,
-            routeCode,
-            imports,
-            false,
-          )
-
-          const clientRouteConfigCode = await generateRouteConfig(
-            node,
-            routeCode,
-            imports,
-            true,
-          )
-
-          queueWriteFile(node.genPath, routeConfigCode)
-          queueWriteFile(
-            path.resolve(node.genDir, node.clientFilename),
-            clientRouteConfigCode,
-          )
-        } catch (err) {
-          node.hash = ''
-        }
+      // Ensure the boilerplate for the route exists
+      if (node.isRoot) {
+        return
       }
 
-      routeConfigImports.push(
-        `import { route as ${node.variable}Route } from './${removeExt(
-          path
-            .relative(config.routeGenDirectory, node.genPath)
-            .replace(/\\/gi, '/'),
-        )}'`,
+      // Ensure that new FileRoute(anything?) is replace with FileRoute(${node.routePath})
+      // routePath can contain $ characters, which have special meaning when used in replace
+      // so we have to escape it by turning all $ into $$. But since we do it through a replace call
+      // we have to double escape it into $$$$. For more information, see
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement
+      const escapedRoutePath = node.routePath?.replaceAll('$', '$$$$') ?? ''
+      const replaced = routeCode.replace(
+        fileRouteRegex,
+        `new FileRoute('${escapedRoutePath}')`,
       )
 
-      routeConfigClientImports.push(
-        `import { route as ${node.variable}Route } from './${removeExt(
-          path
-            .relative(
-              config.routeGenDirectory,
-              path.resolve(node.genDir, node.clientFilename),
-            )
-            .replace(/\\/gi, '/'),
-        )}'`,
-      )
-
-      if (node.isRoot) {
-        return undefined
+      if (replaced !== routeCode) {
+        await fs.writeFile(node.fullPath, replaced)
       }
 
-      const route = `${node.variable}Route`
+      const route = `${node.variableName}Route`
 
       if (node.children?.length) {
         const childConfigs = await buildRouteConfig(node.children, depth + 1)
-        return `${route}.addChildren([\n${spaces(
-          depth * 4,
-        )}${childConfigs}\n${spaces(depth * 2)}])`
+        return `${route}.addChildren([${spaces(depth * 4)}${childConfigs}])`
       }
 
       return route
     })
 
-    return (await Promise.all(children))
-      .filter(Boolean)
-      .join(`,\n${spaces(depth * 2)}`)
+    return (await Promise.all(children)).filter(Boolean).join(`,`)
   }
 
-  const routeConfigChildrenText = await buildRouteConfig(reparented)
-
-  routeConfigImports = multiSortBy(routeConfigImports, [
-    (d) => (d.includes('__root') ? -1 : 1),
-    (d) => d.split('/').length,
-    (d) => (d.endsWith("index'") ? -1 : 1),
-    (d) => d,
-  ])
-
-  routeConfigClientImports = multiSortBy(routeConfigClientImports, [
-    (d) => (d.includes('__root') ? -1 : 1),
-    (d) => d.split('/').length,
-    (d) => (d.endsWith("index.client'") ? -1 : 1),
-    (d) => d,
-  ])
-
-  const routeConfig = `export const routeTree = rootRoute.addChildren([\n  ${routeConfigChildrenText}\n])\nexport type __GeneratedRouteConfig = typeof routeTree`
-  const routeConfigClient = `export const routeTreeClient = rootRoute.addChildren([\n  ${routeConfigChildrenText}\n]) as __GeneratedRouteConfig`
-
-  const routeConfigFileContent = [
-    routeConfigImports.join('\n'),
-    routeConfig,
-  ].join('\n\n')
-
-  const routeConfigClientFileContent = [
-    `import type { __GeneratedRouteConfig } from './routeTree'`,
-    routeConfigClientImports.join('\n'),
-    routeConfigClient,
-  ].join('\n\n')
-
-  if (nodesChanged) {
-    queueWriteFile(
-      path.resolve(config.routeGenDirectory, 'routeTree.ts'),
-      routeConfigFileContent,
-    )
-    queueWriteFile(
-      path.resolve(config.routeGenDirectory, 'routeTree.client.ts'),
-      routeConfigClientFileContent,
-    )
-  }
+  const routeConfigChildrenText = await buildRouteConfig(routeTree)
 
-  // Do all of our file system manipulation at the end
-  await fs.mkdir(config.routeGenDirectory, { recursive: true })
+  const routeImports = [
+    `import { Route as rootRoute } from './${sanitize(
+      path.relative(
+        path.dirname(config.generatedRouteTree),
+        path.resolve(config.routesDirectory, routePathIdPrefix + rootPathId),
+      ),
+    )}'`,
+    ...multiSortBy(routeNodes, [
+      (d) =>
+        d.routePath?.includes(`/${routePathIdPrefix + rootPathId}`) ? -1 : 1,
+      (d) => d.routePath?.split('/').length,
+      (d) => (d.routePath?.endsWith("index'") ? -1 : 1),
+      (d) => d,
+    ]).map((node) => {
+      return `import { Route as ${node.variableName}Route } from './${sanitize(
+        removeExt(
+          path.relative(
+            path.dirname(config.generatedRouteTree),
+            path.resolve(config.routesDirectory, node.filePath),
+          ),
+        ),
+      )}'`
+    }),
+  ].join('\n')
+
+  const routeTypes = `declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    ${routeNodes
+      .map((routeNode) => {
+        return `'${routeNode.routePath}': {
+          parentRoute: typeof ${routeNode.parent?.variableName ?? 'root'}Route
+        }`
+      })
+      .join('\n')}
+  }
+}`
+
+  const routeOptions = routeNodes
+    .map((routeNode) => {
+      return `Object.assign(${routeNode.variableName ?? 'root'}Route.options, {
+        ${[
+          routeNode.isNonPath
+            ? `id: '${routeNode.cleanedPath}'`
+            : `path: '${routeNode.cleanedPath}'`,
+          `getParentRoute: () => ${
+            routeNode.parent?.variableName ?? 'root'
+          }Route`,
+          // `\n// ${JSON.stringify(
+          //   {
+          //     ...routeNode,
+          //     parent: undefined,
+          //     children: undefined,
+          //     fullPath: undefined,
+          //     variableName: undefined,
+          //   },
+          //   null,
+          //   2,
+          // )
+          //   .split('\n')
+          //   .join('\n// ')}`,
+        ]
+          .filter(Boolean)
+          .join(',')}
+      })`
+    })
+    .join('\n\n')
 
-  if (!checkLatest()) return
+  const routeConfig = `export const routeTree = rootRoute.addChildren([${routeConfigChildrenText}])`
 
-  await Promise.all(
-    fileQueue.map(async ([filename, content]) => {
-      await fs.ensureDir(path.dirname(filename))
-      const exists = await fs.pathExists(filename)
-      let current = ''
-      if (exists) {
-        current = await fs.readFile(filename, 'utf-8')
-      }
-      if (current !== content) {
-        await fs.writeFile(filename, content)
-      }
-    }),
+  const routeConfigFileContent = await prettier.format(
+    [routeImports, routeTypes, routeOptions, routeConfig].join('\n\n'),
+    {
+      semi: false,
+      parser: 'typescript',
+    },
   )
 
-  if (!checkLatest()) return
-
-  const allFiles = await getAllFiles(config.routeGenDirectory)
+  const routeTreeContent = await fs
+    .readFile(path.resolve(config.generatedRouteTree), 'utf-8')
+    .catch((err: any) => {
+      if (err.code === 'ENOENT') {
+        return undefined
+      }
+      throw err
+    })
 
   if (!checkLatest()) return
 
-  const removedNodes: RouteNode[] = []
-
-  nodeCache = nodeCache.filter((d) => {
-    if (d.version !== latestTask) {
-      removedNodes.push(d)
-      return false
-    }
-    return true
-  })
-
-  const newNodes = nodeCache.filter((d) => d.new)
-  const updatedNodes = nodeCache.filter((d) => !d.new && d.changed)
-
-  const unusedFiles = allFiles.filter((d) => {
-    if (
-      d === path.resolve(config.routeGenDirectory, 'routeTree.ts') ||
-      d === path.resolve(config.routeGenDirectory, 'routeTree.client.ts')
-    ) {
-      return false
-    }
-
-    let node = nodeCache.find(
-      (n) =>
-        n.genPath === d ||
-        path.resolve(n.genDir, n.clientFilename) === d ||
-        n.importedFiles?.includes(d),
+  if (routeTreeContent !== routeConfigFileContent) {
+    await fs.ensureDir(path.dirname(path.resolve(config.generatedRouteTree)))
+    if (!checkLatest()) return
+    await fs.writeFile(
+      path.resolve(config.generatedRouteTree),
+      routeConfigFileContent,
     )
-
-    return !node
-  })
-
-  await Promise.all(
-    unusedFiles.map((d) => {
-      fs.remove(d)
-    }),
-  )
+  }
 
   console.log(
-    `🌲 Processed ${nodeCache.length} routes in ${Date.now() - start}ms`,
+    `🌲 Processed ${routeNodes.length} routes in ${Date.now() - start}ms`,
   )
-
-  if (newNodes.length || updatedNodes.length || removedNodes.length) {
-    if (newNodes.length) {
-      console.log(`🥳 Added ${newNodes.length} new routes`)
-    }
-
-    if (updatedNodes.length) {
-      console.log(`✅ Updated ${updatedNodes.length} routes`)
-    }
-
-    if (removedNodes.length) {
-      console.log(`🗑 Removed ${removedNodes.length} unused routes`)
-    }
-  } else {
-    console.log(`🎉 No changes were found. Carry on!`)
-  }
 }
 
-function getAllFiles(dir: string): Promise<string[]> {
-  return new Promise((resolve, reject) => {
-    const excludeDirFilter = through2.obj(function (item, enc, next) {
-      if (!item.stats.isDirectory()) this.push(item)
-      next()
-    })
-
-    const items: string[] = []
-
-    klaw(dir)
-      .pipe(excludeDirFilter)
-      .on('data', (item) => items.push(item.path))
-      .on('error', (err) => reject(err))
-      .on('end', () => resolve(items))
-  })
-}
-
-function fileToVariable(d: string) {
-  return d
-    .split('/')
-    .map((d, i) => (i > 0 ? capitalize(d) : d))
-    .join('')
-    .replace(/([^a-zA-Z0-9]|[\.])/gm, '')
+function fileToVariable(d: string): string {
+  return (
+    removeUnderscores(d)
+      ?.replace(/\$/g, '')
+      ?.split(/[/-]/g)
+      .map((d, i) => (i > 0 ? capitalize(d) : d))
+      .join('')
+      .replace(/([^a-zA-Z0-9]|[\.])/gm, '') ?? ''
+  )
 }
 
 export function removeExt(d: string) {
@@ -511,3 +365,45 @@ function capitalize(s: string) {
   if (typeof s !== 'string') return ''
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
+
+function sanitize(s?: string) {
+  return replaceBackslash(s?.replace(/\\index/gi, ''))
+}
+
+function removeUnderscores(s?: string) {
+  return s?.replace(/(^_|_$)/, '').replace(/(\/_|_\/)/, '/')
+}
+
+function replaceBackslash(s?: string) {
+  return s?.replace(/\\/gi, '/')
+}
+
+export function hasParentRoute(
+  routes: RouteNode[],
+  routeToCheck: string | undefined,
+): RouteNode | null {
+  if (!routeToCheck || routeToCheck === '/') {
+    return null
+  }
+
+  const sortedNodes = multiSortBy(routes, [
+    (d) => d.routePath!.length * -1,
+    (d) => d.variableName,
+  ]).filter((d) => d.routePath !== `/${rootPathId}`)
+
+  for (const route of sortedNodes) {
+    if (route.routePath === '/') continue
+
+    if (
+      routeToCheck.startsWith(`${route.routePath}/`) &&
+      route.routePath !== routeToCheck
+    ) {
+      return route
+    }
+  }
+  const segments = routeToCheck.split('/')
+  segments.pop() // Remove the last segment
+  const parentRoute = segments.join('/')
+
+  return hasParentRoute(routes, parentRoute)
+}