fix: useParams on page should also return dir slug params w/ layouts

packages/one/src/fork/getStateFromPath.ts

@@ -461,6 +461,7 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
           }, {})
 
         if (params && Object.keys(params).length) {
+          Object.assign(allParams, params) // @modified: let page access layout params
           return { name, params }
         }
 

tests/test/app/layouts/index.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'one'
+
+export default function LayoutTestsIndex() {
+  return (
+    <>
+      <Link
+        testID="link-to-nested-layout-with-slug-layout-folder"
+        href="/layouts/nested-layout/with-slug-layout-folder/someLayoutParam"
+      >
+        Nested layout with slug layout folder
+      </Link>
+      {/* <Link href="/layouts/nested-layout/with-param/someLayoutParam/with-page-param/somePageParam">
+        Nested layout with layout and page params
+      </Link> */}
+    </>
+  )
+}

tests/test/app/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]/_layout.tsx

@@ -0,0 +1,13 @@
+import { Slot, useParams } from 'one'
+import { Text } from 'tamagui'
+
+export default function LayoutWithParam() {
+  const params = useParams()
+
+  return (
+    <>
+      <Text testID="layout-params-json">{JSON.stringify(params)}</Text>
+      <Slot />
+    </>
+  )
+}

tests/test/app/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]/index+ssr.tsx

@@ -0,0 +1,12 @@
+import { Link, useParams, usePathname } from 'one'
+import { View, Text } from 'tamagui'
+
+export default function HooksTestingPage() {
+  const params = useParams()
+
+  return (
+    <View>
+      <Text testID="page-params-json">{JSON.stringify(params)}</Text>
+    </View>
+  )
+}

tests/test/routes.d.ts

@@ -6,9 +6,9 @@ import type { OneRouter } from 'one'
 declare module 'one' {
   export namespace OneRouter {
     export interface __routes<T extends string = string> extends Record<string, unknown> {
-      StaticRoutes: `/` | `/(auth-guard)` | `/(auth-guard)/auth-guard` | `/(blog)` | `/(blog)/blog/my-first-post` | `/(marketing)/about` | `/(sub-page-group)` | `/(sub-page-group)/sub-page` | `/(sub-page-group)/sub-page/sub` | `/(sub-page-group)/sub-page/sub2` | `/_sitemap` | `/about` | `/auth-guard` | `/blog/my-first-post` | `/expo-video` | `/hooks` | `/hooks/contents` | `/hooks/contents/page-1` | `/hooks/contents/page-2` | `/loader` | `/loader/other` | `/middleware` | `/not-found/deep/test` | `/not-found/fallback/test` | `/not-found/test` | `/server-data` | `/sheet` | `/spa/spapage` | `/ssr/basic` | `/sub-page` | `/sub-page/sub` | `/sub-page/sub2` | `/web-extensions`
-      DynamicRoutes: `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/${string}` | `/spa/${OneRouter.SingleRoutePart<T>}` | `/ssr/${OneRouter.SingleRoutePart<T>}` | `/ssr/${string}`
-      DynamicRouteTemplate: `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/[...subpath]` | `/spa/[spaparams]` | `/ssr/[...rest]` | `/ssr/[param]`
+      StaticRoutes: `/` | `/(auth-guard)` | `/(auth-guard)/auth-guard` | `/(blog)` | `/(blog)/blog/my-first-post` | `/(marketing)/about` | `/(sub-page-group)` | `/(sub-page-group)/sub-page` | `/(sub-page-group)/sub-page/sub` | `/(sub-page-group)/sub-page/sub2` | `/_sitemap` | `/about` | `/auth-guard` | `/blog/my-first-post` | `/expo-video` | `/hooks` | `/hooks/contents` | `/hooks/contents/page-1` | `/hooks/contents/page-2` | `/layouts` | `/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]/` | `/loader` | `/loader/other` | `/middleware` | `/not-found/deep/test` | `/not-found/fallback/test` | `/not-found/test` | `/server-data` | `/sheet` | `/spa/spapage` | `/ssr/basic` | `/sub-page` | `/sub-page/sub` | `/sub-page/sub2` | `/web-extensions`
+      DynamicRoutes: `/layouts/nested-layout/with-slug-layout-folder/${OneRouter.SingleRoutePart<T>}` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/${string}` | `/spa/${OneRouter.SingleRoutePart<T>}` | `/ssr/${OneRouter.SingleRoutePart<T>}` | `/ssr/${string}`
+      DynamicRouteTemplate: `/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/[...subpath]` | `/spa/[spaparams]` | `/ssr/[...rest]` | `/ssr/[param]`
       IsTyped: true
     }
   }

tests/test/tests/layouts.test.ts

@@ -0,0 +1,41 @@
+import { type Browser, type BrowserContext, chromium } from 'playwright'
+import { afterAll, beforeAll, expect, test, describe } from 'vitest'
+
+const serverUrl = process.env.ONE_SERVER_URL
+const isDebug = !!process.env.DEBUG
+
+let browser: Browser
+let context: BrowserContext
+
+beforeAll(async () => {
+  browser = await chromium.launch({ headless: !isDebug })
+  context = await browser.newContext()
+})
+
+afterAll(async () => {
+  await browser.close()
+})
+
+describe('layouts', async () => {
+  test('nested layout with param', async () => {
+    const page = await context.newPage()
+    await page.goto(serverUrl + '/layouts')
+
+    // This is part of the test - should be able to navigate to the page via link
+    const linkToTestPage = await page.getByTestId('link-to-nested-layout-with-slug-layout-folder')
+    linkToTestPage.click()
+
+    const layoutParamsText = await page.getByTestId('layout-params-json').textContent()
+    const pageParamsText = await page.getByTestId('page-params-json').textContent()
+    const layoutParams = JSON.parse(layoutParamsText || '{}')
+    const pageParams = JSON.parse(pageParamsText || '{}')
+    expect(
+      layoutParams.layoutSlug,
+      'useParams in _layout should return expected param value for slug on layout directory'
+    ).toBe('someLayoutParam')
+    expect(
+      pageParams.layoutSlug,
+      'useParams in page should return expected param value for slug on layout directory'
+    ).toBe('someLayoutParam')
+  })
+})