fix(create-pages): nested layouts missing (#1063)

fix for #1055

Co-authored-by: Tyler <[email protected]>

Author: tylersayshi

e2e/21_create-pages_standalone.spec.ts

@@ -33,6 +33,11 @@ async function testRouterExample(page: Page, port: number) {
   await page.goto(`http://localhost:${port}/foo`);
   await expect(page.getByRole('heading', { name: 'Foo' })).toBeVisible();
 
+  await page.goto(`http://localhost:${port}/nested/baz`);
+  await expect(
+    page.getByRole('heading', { name: 'Nested Layout' }),
+  ).toBeVisible();
+
   const backgroundColor = await page.evaluate(() =>
     window.getComputedStyle(document.body).getPropertyValue('background-color'),
   );

examples/11_fs-router/src/pages/nested/_layout.tsx

@@ -0,0 +1,10 @@
+const NestedLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h3>Nested Layout</h3>
+      {children}
+    </div>
+  );
+};
+
+export default NestedLayout;

examples/21_create-pages/src/components/NestedLayout.tsx

@@ -0,0 +1,10 @@
+const NestedLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h3>Nested Layout</h3>
+      {children}
+    </div>
+  );
+};
+
+export default NestedLayout;

examples/21_create-pages/src/entries.tsx

@@ -8,6 +8,7 @@ import BarPage from './components/BarPage';
 import NestedBazPage from './components/NestedBazPage';
 import NestedQuxPage from './components/NestedQuxPage';
 import Root from './components/Root';
+import NestedLayout from './components/NestedLayout';
 
 const pages = createPages(async ({ createPage, createLayout, createRoot }) => [
   createRoot({
@@ -58,6 +59,12 @@ const pages = createPages(async ({ createPage, createLayout, createRoot }) => [
     component: NestedQuxPage,
   }),
 
+  createLayout({
+    render: 'static',
+    path: '/nested',
+    component: NestedLayout,
+  }),
+
   createPage({
     render: 'static',
     path: '/nested/[id]',

packages/waku/src/router/create-pages.ts

@@ -372,10 +372,10 @@ export const createPages = <
   const getLayouts = (spec: PathSpec): string[] => {
     const pathSegments = spec.reduce<string[]>(
       (acc, segment, index) => {
-        if (acc[index - 1] === '/') {
-          acc.push('/' + segment);
+        if (index === 0) {
+          acc.push('/' + segment.name);
         } else {
-          acc.push(acc[index - 1] + '/' + segment);
+          acc.push(acc[index - 1] + '/' + segment.name);
         }
         return acc;
       },

packages/waku/tests/create-pages.test.ts

@@ -627,6 +627,50 @@ describe('createPages', () => {
     expect(Object.keys(route.elements)).toEqual(['root', 'page:/test/nested']);
   });
 
+  it('creates a nested static page with nested layout', async () => {
+    const TestPage = () => null;
+    createPages(async ({ createPage, createLayout }) => [
+      createPage({
+        render: 'static',
+        path: '/test/nested',
+        component: TestPage,
+      }),
+      createLayout({
+        render: 'static',
+        path: '/test/nested',
+        component: () => null,
+      }),
+    ]);
+    const { getPathConfig, renderRoute } = injectedFunctions();
+    expect(await getPathConfig()).toEqual([
+      {
+        elements: {
+          root: { isStatic: true },
+          'page:/test/nested': { isStatic: true },
+        },
+        routeElement: { isStatic: true },
+        noSsr: false,
+        path: [
+          {
+            name: 'test',
+            type: 'literal',
+          },
+          {
+            name: 'nested',
+            type: 'literal',
+          },
+        ],
+        pattern: '^/test/nested$',
+      },
+    ]);
+    const route = await renderRoute('/test/nested', {
+      query: '?skip=[]',
+    });
+    expect(route).toBeDefined();
+    expect(route.routeElement).toBeDefined();
+    expect(Object.keys(route.elements)).toEqual(['root', 'page:/test/nested']);
+  });
+
   it('creates a nested dynamic page', async () => {
     const TestPage = () => null;
     createPages(async ({ createPage }) => [