feat: add support for route handle (#37)

Author: mammadataei

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 dist
 .idea
+cache

example/src/components/Breadcrumbs.tsx

@@ -0,0 +1,22 @@
+import { useMatches } from 'react-router-dom'
+
+export function Breadcrumbs() {
+  const matches = useMatches()
+
+  const crumbs: Array<string> = matches
+    .filter((match) => Boolean((match.handle as any)?.crumb))
+    .map((match) => (match.handle as any)?.crumb(match.params))
+
+  return (
+    <nav>
+      <ol className="flex space-x-2 text-gray-600 text-sm">
+        {crumbs.map((crumb, index) => (
+          <>
+            <li key={index}>{crumb}</li>
+            {index < crumbs.length - 1 && <li className="text-gray-300">/</li>}
+          </>
+        ))}
+      </ol>
+    </nav>
+  )
+}

example/src/routes/__panel/users.tsx

@@ -0,0 +1,13 @@
+import { Link, Outlet } from 'react-router-dom'
+
+export default function UsersLayout() {
+  return <Outlet />
+}
+
+export const handle = {
+  crumb: () => (
+    <Link to="/users" className="text-blue-500">
+      Users
+    </Link>
+  ),
+}

example/src/routes/__panel/users/$user.tsx

@@ -1,10 +1,14 @@
 import { NavLink, Outlet, useParams } from 'react-router-dom'
+import { Breadcrumbs } from '../../../components/Breadcrumbs'
 
 export default function () {
   const { user } = useParams()
+
   return (
     <div>
-      <h1 className="text-2xl">User: {user}</h1>
+      <Breadcrumbs />
+
+      <h1 className="text-2xl mt-8">User: {user}</h1>
 
       <div className="mt-8">
         <div className="flex border-b border-gray-200 text-gray-500">
@@ -41,3 +45,9 @@ export default function () {
     </div>
   )
 }
+
+export const handle = {
+  crumb: ({ user }: { user: string }) => (
+    <span className="capitalize">{user}</span>
+  ),
+}

example/src/routes/__panel/users/$user/index.tsx

@@ -1,3 +1,7 @@
 export default function () {
   return <h2 className="text-2xl">Overview</h2>
 }
+
+export const handle = {
+  crumb: () => 'Overview',
+}

example/src/routes/__panel/users/$user/profile.tsx

@@ -1,3 +1,7 @@
 export default function () {
   return <h2 className="text-2xl">Profile</h2>
 }
+
+export const handle = {
+  crumb: () => 'Profile',
+}

example/src/routes/__panel/users/$user/settings.tsx

@@ -1,3 +1,7 @@
 export default function () {
   return <h2 className="text-2xl">Settings</h2>
 }
+
+export const handle = {
+  crumb: () => 'Settings',
+}

src/__snapshots__/buildRouteTree.test.ts.snap

@@ -96,7 +96,7 @@ RouteNode {
             },
           ],
           "isDirectory": true,
-          "layoutPath": undefined,
+          "layoutPath": "example/src/routes/__panel/users.tsx",
           "name": "users",
           "path": "example/src/routes/__panel/users",
         },

src/__snapshots__/generateRoutesModule.test.ts.snap

@@ -7,6 +7,11 @@ import { ErrorElement as EXAMPLE_SRC_ROUTES___PANEL_POSTS_$SLUG_ERROR_ELEMENT }
 import { action as example_src_routes___panel_posts_create_ACTION } from '/example/src/routes/__panel/posts/create.tsx';
 import { loader as example_src_routes___panel_posts_index_LOADER } from '/example/src/routes/__panel/posts/index.tsx';
 import { ErrorBoundary as EXAMPLE_SRC_ROUTES___PANEL_POSTS_INDEX_ERROR_ELEMENT } from '/example/src/routes/__panel/posts/index.tsx';
+import { handle as example_src_routes___panel_users_HANDLE } from '/example/src/routes/__panel/users';
+import { handle as example_src_routes___panel_users_$user_HANDLE } from '/example/src/routes/__panel/users/$user';
+import { handle as example_src_routes___panel_users_$user_index_HANDLE } from '/example/src/routes/__panel/users/$user/index.tsx';
+import { handle as example_src_routes___panel_users_$user_profile_HANDLE } from '/example/src/routes/__panel/users/$user/profile.tsx';
+import { handle as example_src_routes___panel_users_$user_settings_HANDLE } from '/example/src/routes/__panel/users/$user/settings.tsx';
 
 export const routes = [{
   \\"path\\": \\"/\\",
@@ -49,6 +54,7 @@ export const routes = [{
           ]
         },
         {
+          \\"element\\": React.createElement(React.lazy(() => import(\\"/example/src/routes/__panel/users.tsx\\"))),
           \\"path\\": \\"users\\",
           \\"children\\": [
             {
@@ -57,23 +63,28 @@ export const routes = [{
               \\"children\\": [
                 {
                   \\"index\\": true,
+                  \\"handle\\": example_src_routes___panel_users_$user_index_HANDLE,
                   \\"element\\": React.createElement(React.lazy(() => import(\\"/example/src/routes/__panel/users/$user/index.tsx\\")))
                 },
                 {
                   \\"path\\": \\"profile\\",
+                  \\"handle\\": example_src_routes___panel_users_$user_profile_HANDLE,
                   \\"element\\": React.createElement(React.lazy(() => import(\\"/example/src/routes/__panel/users/$user/profile.tsx\\")))
                 },
                 {
                   \\"path\\": \\"settings\\",
+                  \\"handle\\": example_src_routes___panel_users_$user_settings_HANDLE,
                   \\"element\\": React.createElement(React.lazy(() => import(\\"/example/src/routes/__panel/users/$user/settings.tsx\\")))
                 }
-              ]
+              ],
+              \\"handle\\": example_src_routes___panel_users_$user_HANDLE
             },
             {
               \\"index\\": true,
               \\"element\\": React.createElement(React.lazy(() => import(\\"/example/src/routes/__panel/users/index.tsx\\")))
             }
-          ]
+          ],
+          \\"handle\\": example_src_routes___panel_users_HANDLE
         }
       ]
     },

src/generateRoutesModule.ts

@@ -6,6 +6,7 @@ import {
   hasAction,
   hasErrorBoundary,
   hasErrorElement,
+  hasHandle,
   hasLoader,
   normalizeFilenameToRoute,
   toAbsolutePath,
@@ -40,12 +41,20 @@ function createRouteObject(node: RouteNode) {
 }
 
 function createLayoutRoute(node: RouteNode): RouteObject {
+  let handle: string | undefined = undefined
+
+  if (node.layoutPath) {
+    const code = fs.readFileSync(toAbsolutePath(node.layoutPath), 'utf8')
+    handle = resolveHandle(node.path, code)
+  }
+
   return {
     element: node.layoutPath && createRouteElement(node.layoutPath),
     path: node.name.startsWith('__')
       ? undefined
       : normalizeFilenameToRoute(node.name),
     children: node.children.map((child) => createRouteObject(child)),
+    handle,
   }
 }
 
@@ -62,6 +71,7 @@ function createPageRoute(node: RouteNode): RouteObject {
     loader: resolveLoader(node.path, code) as LoaderFunction | undefined,
     action: resolveAction(node.path, code) as ActionFunction | undefined,
     errorElement: resolveErrorElement(node.path, code),
+    handle: resolveHandle(node.path, code),
     element: createRouteElement(node.path),
   }
 }
@@ -117,3 +127,15 @@ function resolveErrorElement(filePath: string, code: string) {
 
   return undefined
 }
+
+function resolveHandle(filePath: string, code: string) {
+  if (hasHandle(code)) {
+    const importName = createImportName(filePath, 'HANDLE')
+
+    imports.push(`import { handle as ${importName} } from '/${filePath}';`)
+
+    return `::${importName}::`
+  }
+
+  return undefined
+}