Support nested roots (#18)

* feat: remove isLoader route property

* fix: has-parent-route fs-router util

* feat: handle routeGenerator nested __root

* feat: enable multiple roots with nested dynamic paths

* feat: enable nested routes

* fix: prevent route path creation for __root

* feat: prevent wrong path on subfolder index routes

* chore: cleaned tutorial example folder

* feat: update version to v0.8.0

packages/fs-router-vite-plugin/src/build-route-config.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { buildRouteConfig } from './build-route-config'
+
+const routes = [
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/my-post',
+    cleanedPath: '/posts/my-post',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/home/valerio/Documents/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/',
+    cleanedPath: '/posts/',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostspostIndex',
+    parent: {
+      filePath: 'posts/__root.tsx',
+      fullPath:
+        '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+      routePath: '/posts/__root',
+      variableName: 'Postsroot',
+      path: '/posts/__root',
+      cleanedPath: '/posts',
+      children: undefined,
+    },
+    path: '/posts/',
+    cleanedPath: '/posts/',
+  },
+]
+
+describe('buildRouteConfig works', async () => {
+  it('Should build the correct config', () => {
+    const expectedConfig =
+      'PostsMyPostRoute,PostsIndexRoute,PostspostIndexRoute'
+    const config = buildRouteConfig(routes)
+    expect(config).toStrictEqual(expectedConfig)
+  })
+})

packages/fs-router-vite-plugin/src/build-route-config.ts

@@ -0,0 +1,17 @@
+import { spaces } from './utils'
+import type { RouteNode } from './types'
+
+export function buildRouteConfig(nodes: RouteNode[], depth = 1): string {
+  const children = nodes.map((node) => {
+    const route = `${node.variableName}Route`
+
+    if (node.children?.length) {
+      const childConfigs = buildRouteConfig(node.children, depth + 1)
+      return `${route}.addChildren([${spaces(depth * 4)}${childConfigs}])`
+    }
+
+    return route
+  })
+
+  return children.filter(Boolean).join(`,`)
+}

packages/fs-router-vite-plugin/src/generator.ts

@@ -1,15 +1,17 @@
 import * as fsp from 'fs/promises'
 import path from 'path'
+import { buildRouteConfig } from './build-route-config'
+import { hasParentRoute } from './has-parent-route'
 
 import {
   cleanPath,
   determineNodePath,
   multiSortBy,
-  spaces,
   replaceBackslash,
   removeExt,
   routePathToVariable,
   removeGroups,
+  removeLastSlash,
   removeUnderscores,
   removeLayoutSegments,
 } from './utils'
@@ -18,6 +20,7 @@ import type { Config, RouteNode } from './types'
 import { ROUTES_FOLDER, ROOT_PATH_ID, GENERATED_ROUTE_TREE } from './constants'
 
 import { format } from 'prettier'
+import { sortRouteNodes } from './sort-route-nodes'
 
 let latestTask = 0
 
@@ -56,9 +59,6 @@ async function getRouteNodes(
 
           // Remove the index from the route path and
           // if the route path is empty, use `/'
-
-          const isLoader = routePath.includes('-loading')
-
           if (routePath === 'index') {
             routePath = '/'
           }
@@ -69,7 +69,6 @@ async function getRouteNodes(
             filePath,
             fullPath,
             routePath,
-            isLoader,
             variableName,
           })
         } else if (fullPath.match(/\.(rs)$/)) {
@@ -95,38 +94,6 @@ async function getRouteNodes(
   return { routeNodes, rustHandlersNodes }
 }
 
-export function hasParentRoute(
-  routes: RouteNode[],
-  node: RouteNode,
-  routePathToCheck: string | undefined,
-): RouteNode | null {
-  if (!routePathToCheck || routePathToCheck === '/') {
-    return null
-  }
-
-  const sortedNodes = multiSortBy(routes, [
-    (d): number => d.routePath.length * -1,
-    (d): string | undefined => d.variableName,
-  ]).filter((d) => d.routePath !== `/${ROOT_PATH_ID}`)
-
-  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, node, parentRoutePath)
-}
-
 export async function routeGenerator(config = defaultConfig): Promise<void> {
   if (!isFirst) {
     isFirst = true
@@ -149,25 +116,12 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
   const { routeNodes: beforeRouteNodes, rustHandlersNodes } =
     await getRouteNodes(config)
 
-  const preRouteNodes = multiSortBy(beforeRouteNodes, [
-    (d): number => (d.routePath === '/' ? -1 : 1),
-    (d): number => d.routePath.split('/').length,
-    (d): number => (d.filePath.match(/[./]index[.]/) ? 1 : -1),
-    (d): number =>
-      d.filePath.match(
-        /[./](component|errorComponent|pendingComponent|loader|lazy)[.]/,
-      )
-        ? 1
-        : -1,
-    (d): number => (d.filePath.match(/[./]route[.]/) ? -1 : 1),
-    (d): number => (d.routePath.endsWith('/') ? -1 : 1),
-    (d): string => d.routePath,
-  ]).filter((d) => ![`/${ROOT_PATH_ID}`].includes(d.routePath || ''))
+  const preRouteNodes = sortRouteNodes(beforeRouteNodes)
+
+  const routeNodes: RouteNode[] = []
 
   // Loop over the flat list of routeNodes and
   // build up a tree based on the routeNodes' routePath
-  const routeNodes: RouteNode[] = []
-
   const handleNode = async (node: RouteNode): Promise<void> => {
     const parentRoute = hasParentRoute(routeNodes, node, node.routePath)
 
@@ -175,8 +129,8 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
     node.path = determineNodePath(node)
 
-    node.cleanedPath = removeGroups(
-      removeUnderscores(removeLayoutSegments(node.path)) ?? '',
+    node.cleanedPath = removeLastSlash(
+      removeGroups(removeUnderscores(removeLayoutSegments(node.path)) ?? ''),
     )
 
     if (node.parent) {
@@ -190,25 +144,6 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
     await handleNode(node)
   }
 
-  function buildRouteConfig(nodes: RouteNode[], depth = 1): string {
-    const children = nodes.map((node) => {
-      if (node.isLayout) {
-        return
-      }
-
-      const route = `${node.variableName}Route`
-
-      if (node.children?.length) {
-        const childConfigs = buildRouteConfig(node.children, depth + 1)
-        return `${route}.addChildren([${spaces(depth * 4)}${childConfigs}])`
-      }
-
-      return route
-    })
-
-    return children.filter(Boolean).join(`,`)
-  }
-
   const routeConfigChildrenText = buildRouteConfig(routeNodes)
 
   const sortedRouteNodes = multiSortBy(routeNodes, [
@@ -237,7 +172,10 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const createRoutes = [
     ...sortedRouteNodes.map((node) => {
-      return `const ${node.variableName} = createRoute({ component: ${node.variableName}Import })`
+      const isRoot = node.routePath.endsWith(ROOT_PATH_ID)
+      const rootDeclaration = isRoot ? ', isRoot: true' : ''
+
+      return `const ${node.variableName} = createRoute({ component: ${node.variableName}Import${rootDeclaration} })`
     }),
   ].join('\n')
 
@@ -247,7 +185,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
         return [
           `const ${node.variableName}Route = ${node.variableName}.update({
           ${[
-            `path: '${node.cleanedPath}'`,
+            !node.path?.endsWith(ROOT_PATH_ID) && `path: '${node.cleanedPath}'`,
             `getParentRoute: () => ${node.parent?.variableName ?? 'root'}Route`,
             rustHandlersNodes.includes(node.path || '')
               ? 'hasHandler: true'

packages/fs-router-vite-plugin/src/has-parent-route.spec.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import { hasParentRoute } from './has-parent-route'
+
+const routes = [
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+    path: '/posts/[post]',
+    cleanedPath: '/posts/[post]',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+    path: '/posts/__root',
+    cleanedPath: '/posts',
+  },
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+    path: '/posts/my-post',
+    cleanedPath: '/posts/my-post',
+  },
+]
+
+const parent = {
+  filePath: 'posts/__root.tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/__root.tsx',
+  routePath: '/posts/__root',
+  variableName: 'Postsroot',
+  path: '/posts/__root',
+  cleanedPath: '/posts',
+}
+
+const myPost = {
+  filePath: 'posts/my-post.tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/my-post.tsx',
+  routePath: '/posts/my-post',
+  variableName: 'PostsMyPost',
+  path: '/posts/my-post',
+  cleanedPath: '/posts/my-post',
+}
+
+const dynamicRoute = {
+  filePath: 'posts/[post].tsx',
+  fullPath:
+    '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root/routes/posts/[post].tsx',
+  routePath: '/posts/[post]',
+  variableName: 'Postspost',
+  path: '/posts/[post]',
+  cleanedPath: '/posts/[post]',
+}
+
+describe('hasParentRoute works', async () => {
+  it('Should detect parent route', () => {
+    const parentRoute = hasParentRoute(routes, myPost, myPost.path)
+    expect(parentRoute).toStrictEqual(parent)
+  })
+
+  it('Should detect parent route for dynamic routes', () => {
+    const parentRoute = hasParentRoute(routes, dynamicRoute, dynamicRoute.path)
+    expect(parentRoute).toStrictEqual(parent)
+  })
+})

packages/fs-router-vite-plugin/src/has-parent-route.ts

@@ -0,0 +1,37 @@
+import { ROOT_PATH_ID } from './constants'
+import { multiSortBy } from './utils'
+import type { RouteNode } from './types'
+
+export function hasParentRoute(
+  routes: RouteNode[],
+  node: RouteNode,
+  routePathToCheck = '/',
+): RouteNode | null {
+  const segments = routePathToCheck.split('/')
+  segments.pop() // Remove the last segment
+  const parentRoutePath = segments.join('/')
+
+  if (!parentRoutePath || parentRoutePath === '/') {
+    return null
+  }
+
+  const sortedNodes = multiSortBy(routes, [
+    (d): number => d.routePath.length * -1,
+    (d): string | undefined => d.variableName,
+  ])
+    // Exclude base __root file
+    .filter((d) => d.routePath !== `/${ROOT_PATH_ID}`)
+
+  for (const route of sortedNodes) {
+    if (route.routePath === '/') continue
+
+    if (
+      route.routePath.startsWith(parentRoutePath) &&
+      route.routePath.endsWith(ROOT_PATH_ID)
+    ) {
+      return route
+    }
+  }
+
+  return hasParentRoute(routes, node, parentRoutePath)
+}

packages/fs-router-vite-plugin/src/sort-route-nodes.spec.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect } from 'vitest'
+import { sortRouteNodes } from './sort-route-nodes'
+
+const routes = [
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'about.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+    routePath: '/about',
+    variableName: 'About',
+    path: '/about',
+    cleanedPath: '/about',
+  },
+  {
+    filePath: '__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/__root.tsx',
+    routePath: '/__root',
+    variableName: 'root',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+  },
+]
+
+const expectedSorting = [
+  {
+    filePath: 'index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/index.tsx',
+    routePath: '/',
+    variableName: 'Index',
+    path: '/',
+    cleanedPath: '/',
+  },
+  {
+    filePath: 'about.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/about.tsx',
+    routePath: '/about',
+    variableName: 'About',
+    path: '/about',
+    cleanedPath: '/about',
+  },
+  {
+    filePath: 'posts/__root.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/__root.tsx',
+    routePath: '/posts/__root',
+    variableName: 'Postsroot',
+  },
+  {
+    filePath: 'posts/my-post.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/my-post.tsx',
+    routePath: '/posts/my-post',
+    variableName: 'PostsMyPost',
+  },
+  {
+    filePath: 'posts/index.tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/index.tsx',
+    routePath: '/posts/',
+    variableName: 'PostsIndex',
+  },
+  {
+    filePath: 'posts/[post].tsx',
+    fullPath:
+      '/tuono/packages/fs-router-vite-plugin/tests/generator/multi-level-root-dynamic/routes/posts/[post].tsx',
+    routePath: '/posts/[post]',
+    variableName: 'Postspost',
+  },
+]
+
+describe('sortRouteNodes works', async () => {
+  it('Should correctly sort the nodes', () => {
+    const sorted = sortRouteNodes(routes)
+    expect(sorted).toStrictEqual(expectedSorting)
+  })
+})

packages/fs-router-vite-plugin/src/sort-route-nodes.ts

@@ -0,0 +1,17 @@
+import type { RouteNode } from './types'
+import { multiSortBy } from './utils'
+import { ROOT_PATH_ID } from './constants'
+
+// Routes need to be sorted in order to iterate over the handleNode fn
+// with first the items that might be parent routes
+export const sortRouteNodes = (routes: RouteNode[]): RouteNode[] =>
+  multiSortBy(routes, [
+    (d): number => (d.routePath === '/' ? -1 : 1),
+    (d): number => d.routePath.split('/').length,
+    // Dynamic route
+    (d): number => (d.routePath.endsWith(']') ? 1 : -1),
+    (d): number => (d.filePath.match(/[./]index[.]/) ? 1 : -1),
+    (d): number => (d.filePath.match(/[./]route[.]/) ? -1 : 1),
+    (d): number => (d.routePath.endsWith('/') ? -1 : 1),
+    (d): string => d.routePath,
+  ]).filter((d) => ![`/${ROOT_PATH_ID}`].includes(d.routePath || ''))

packages/fs-router-vite-plugin/src/types.ts

@@ -5,7 +5,6 @@ export interface RouteNode {
   path?: string
   cleanedPath?: string
   isLayout?: boolean
-  isLoader: boolean
   children?: RouteNode[]
   parent?: RouteNode
   variableName?: string

packages/fs-router-vite-plugin/src/utils.ts

@@ -100,6 +100,12 @@ export function trimPathLeft(pathToTrim: string): string {
   return pathToTrim === '/' ? pathToTrim : pathToTrim.replace(/^\/{1,}/, '')
 }
 
+export function removeLastSlash(str: string): string {
+  if (str.length > 1 && str.endsWith('/'))
+    return str.substring(0, str.length - 1)
+  return str
+}
+
 /**
  * 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.