From ec0c41906ae44b6f4ed15faf9d05864e262fa754 Mon Sep 17 00:00:00 2001
From: Matt Hamlin <matthewjameshamlin@gmail.com>
Date: Fri, 21 Feb 2025 20:25:38 -0500
Subject: [PATCH] fix(create-pages): Ensure dynamic layouts receive path prop
 (#1256)

The logic seemed to be reversed when checking if the current layout
segment is dynamic or static (see `!` in create-pages.ts), so the `path`
prop was never provided.

Didn't run the E2E tests locally but verified by adding a temp test to
`create-pages.test.ts` locally.
---
 e2e/create-pages.spec.ts                         | 10 ++++++++++
 .../src/components/DynamicLayout.tsx             | 16 ++++++++++++++++
 e2e/fixtures/create-pages/src/entries.tsx        | 13 +++++++++++++
 packages/waku/src/router/create-pages.ts         |  2 +-
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 e2e/fixtures/create-pages/src/components/DynamicLayout.tsx

diff --git a/e2e/create-pages.spec.ts b/e2e/create-pages.spec.ts
index 9e702dd80..4cbb8efd6 100644
--- a/e2e/create-pages.spec.ts
+++ b/e2e/create-pages.spec.ts
@@ -35,6 +35,16 @@ for (const mode of ['DEV', 'PRD'] as const) {
       await expect(page.getByRole('heading', { name: 'Foo' })).toBeVisible();
     });
 
+    test('dynamic', async ({ page }) => {
+      await page.goto(`http://localhost:${port}/dynamic`);
+      await expect(page.getByRole('navigation')).toHaveText(
+        'Current path: /dynamic',
+      );
+      await expect(
+        page.getByRole('heading', { name: 'Dynamic Page' }),
+      ).toBeVisible();
+    });
+
     test('nested/foo', async ({ page }) => {
       // /nested/foo is defined as a staticPath of /nested/[id] which matches this layout
       await page.goto(`http://localhost:${port}/nested/foo`);
diff --git a/e2e/fixtures/create-pages/src/components/DynamicLayout.tsx b/e2e/fixtures/create-pages/src/components/DynamicLayout.tsx
new file mode 100644
index 000000000..9cb748f6a
--- /dev/null
+++ b/e2e/fixtures/create-pages/src/components/DynamicLayout.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export default function DynamicLayout({
+  children,
+  path,
+}: {
+  children: ReactNode;
+  path: string;
+}) {
+  return (
+    <>
+      <nav>Current path: {path}</nav>
+      {children}
+    </>
+  );
+}
diff --git a/e2e/fixtures/create-pages/src/entries.tsx b/e2e/fixtures/create-pages/src/entries.tsx
index 8dae9d499..ce09b722f 100644
--- a/e2e/fixtures/create-pages/src/entries.tsx
+++ b/e2e/fixtures/create-pages/src/entries.tsx
@@ -3,6 +3,7 @@ import type { PathsForPages } from 'waku/router';
 
 import FooPage from './components/FooPage.js';
 import HomeLayout from './components/HomeLayout.js';
+import DynamicLayout from './components/DynamicLayout.js';
 import HomePage from './components/HomePage.js';
 import NestedBazPage from './components/NestedBazPage.js';
 import NestedLayout from './components/NestedLayout.js';
@@ -140,6 +141,18 @@ const pages: ReturnType<typeof createPages> = createPages(
       exactPath: true,
       component: () => <h1>EXACTLY!!</h1>,
     }),
+
+    createLayout({
+      render: 'dynamic',
+      path: '/dynamic',
+      component: DynamicLayout,
+    }),
+
+    createPage({
+      render: 'dynamic',
+      path: '/dynamic',
+      component: () => <h1>Dynamic Page</h1>,
+    }),
   ],
 );
 
diff --git a/packages/waku/src/router/create-pages.ts b/packages/waku/src/router/create-pages.ts
index 020bfdc10..62f05c302 100644
--- a/packages/waku/src/router/create-pages.ts
+++ b/packages/waku/src/router/create-pages.ts
@@ -624,7 +624,7 @@ export const createPages = <
           dynamicLayoutPathMap.get(segment)?.[1] ??
           staticComponentMap.get(joinPath(segment, 'layout').slice(1)); // feels like a hack
 
-        const isDynamic = !dynamicLayoutPathMap.has(segment);
+        const isDynamic = dynamicLayoutPathMap.has(segment);
 
         // always true
         if (layout) {