fix(file-router): enable file routes + layout + fallback combination (#…

…2989)
vaadin · Dec 10, 2024 · 56e1ab8 · 56e1ab8
1 parent a44eafc
commit 56e1ab8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/packages/ts/file-router/src/runtime/RouterConfigurationBuilder.ts b/packages/ts/file-router/src/runtime/RouterConfigurationBuilder.ts
@@ -43,8 +43,8 @@ export type RouteTransformer<T> = (opts: RouteTransformerOptions<T>) => RouteObj
 
 type RoutesModifier = (routes: RouteList | undefined) => RouteList | undefined;
 
-function createRouteEntry<T extends RouteBase>(route: T): readonly [key: string, value: T] {
-  return [`${route.path ?? ''}-${route.children ? 'n' : 'i'}`, route];
+function createRouteKey<T extends RouteBase>(route: T): string {
+  return `${route.path ?? ''}-${route.children ? 'n' : 'i'}`;
 }
 
 enum RouteHandleFlags {
@@ -314,14 +314,14 @@ export class RouterConfigurationBuilder {
           if (original && added) {
             // If we have both original and added routes, we have to merge them.
             const final: Array<RouteObject | undefined> = [];
-            const paths = new Set([...original.map(({ path }) => path), ...added.map(({ path }) => path)]);
+            const pathKeys = new Set([...original.map(createRouteKey), ...added.map(createRouteKey)]);
 
-            for (const path of paths) {
+            for (const pathKey of pathKeys) {
               // We can have multiple routes with the same path, so we have to
               // consider all of them.
-              const originalRoutes = original.filter((r) => r.path === path);
+              const originalRoutes = original.filter((r) => createRouteKey(r) === pathKey);
               // We can have only one route with the same path in the added list.
-              const addedRoutes = added.filter((r) => r.path === path);
+              const addedRoutes = added.filter((r) => createRouteKey(r) === pathKey);
 
               if (addedRoutes.length > 1) {
                 throw new Error('Adding multiple routes with the same path is not allowed');

diff --git a/packages/ts/file-router/test/runtime/RouterConfigurationBuilder.spec.tsx b/packages/ts/file-router/test/runtime/RouterConfigurationBuilder.spec.tsx
@@ -178,6 +178,9 @@ describe('RouterBuilder', () => {
             {
               path: '/test',
               element: <div>Test</div>,
+            },
+            {
+              path: '/test',
               children: [
                 {
                   path: '/child-test',
@@ -880,4 +883,35 @@ describe('RouterBuilder', () => {
       ]);
     });
   });
+
+  describe('combinations', () => {
+    it('should support file routes with server layout and fallback', () => {
+      const { routes } = new RouterConfigurationBuilder()
+        .withFileRoutes([
+          {
+            path: '/next-test',
+            module: {
+              default: NextTest,
+              config: {
+                flowLayout: true,
+              },
+            },
+          },
+        ])
+        .withFallback(Server)
+        .build();
+
+      expect(routes).to.be.like([
+        {
+          element: <Server />,
+          handle: {
+            ignoreFallback: true,
+          },
+          children: [{ path: '/next-test', element: <NextTest /> }],
+        },
+        { path: '*', element: <Server /> },
+        { index: true, element: <Server /> },
+      ]);
+    });
+  });
 });