Merge pull request #62 from vordgi/get-61

get-56 improve intercepted routes parsing in get-params

package/src/utils.ts

@@ -8,8 +8,11 @@ export const normalizePathname = (pathname: string) => {
 export const normalizePagePath = (pagePath: string) => {
     const cleanPagePath = pagePath && new URL(pagePath, "http://n").pathname;
     const pagePathWithoutFileType = cleanPagePath?.replace(/(\/page|\/_not-found)$/, "");
-    const pagePathWithoutGroups = pagePathWithoutFileType.replace(/\/(\([^)]+\)|\@.+)/g, "");
-    return pagePathWithoutGroups || "/";
+    const pagePathWithoutGroups = pagePathWithoutFileType
+        .split("/")
+        .filter((segment) => !segment.match(/^(\([^)]+\)$|^\@.+$)/g));
+
+    return pagePathWithoutGroups.join("/") || "/";
 };
 
 export const parseSegments = (pagePathParts: string[], pathnameParts: string[]) => {

tests/nextjs-app/app/(group1)/(.)intercepted/page.tsx

@@ -0,0 +1,18 @@
+import { getPathname } from "@nimpl/getters/get-pathname";
+import { getParams } from "@nimpl/getters/get-params";
+import Nav from "../../../components/Nav";
+
+export default function Page() {
+    const pathname = getPathname();
+    const params = getParams();
+
+    return (
+        <div id="intercepted-page">
+            <Nav />
+            <div>
+                <p id="intercepted-get-pathname">{pathname}</p>
+                <p id="intercepted-get-params">{JSON.stringify(params)}</p>
+            </div>
+        </div>
+    );
+}

tests/nextjs-app/app/(frontend)/(corporate)/groups/page.tsx → tests/nextjs-app/app/(group1)/(group2)/groups/page.tsx

@@ -1,7 +1,5 @@
 import { getPathname } from "@nimpl/getters/get-pathname";
 import { getParams } from "@nimpl/getters/get-params";
-import { NamespaceServerContext } from "../../../../components/NamespaceServerContext";
-import BlockWithContext from "../../../../components/BlockWithContext";
 import Nav from "../../../../components/Nav";
 
 export default function Page() {
@@ -14,9 +12,6 @@ export default function Page() {
             <div>
                 <p id="get-pathname">{pathname}</p>
                 <p id="get-params">{JSON.stringify(params)}</p>
-                <NamespaceServerContext.Provider value={{ namespace: "dynamic-auto" }}>
-                    <BlockWithContext />
-                </NamespaceServerContext.Provider>
             </div>
         </div>
     );

tests/nextjs-app/app/(group1)/groups.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from "@playwright/test";
+
+test("should return correct page params and pathname for nested groups", async ({ page }) => {
+    await page.goto("/groups");
+    page.waitForSelector("#groups-page");
+
+    const pathname = await page.$("#get-pathname");
+    const pathnameRow = await pathname?.textContent();
+    expect(pathnameRow).toEqual("/groups");
+
+    const params = await page.$("#get-params");
+    const paramsRow = await params?.textContent();
+    expect(paramsRow && JSON.parse(paramsRow)).toEqual({});
+});
+
+test("should return correct page params and pathname for intercepting route", async ({ page }) => {
+    await page.goto("/intercepted");
+    page.waitForSelector("#intercepted-page");
+
+    const pathname = await page.$("#get-pathname");
+    const pathnameRow = await pathname?.textContent();
+    expect(pathnameRow).toEqual("/intercepted");
+
+    const params = await page.$("#get-params");
+    const paramsRow = await params?.textContent();
+    expect(paramsRow && JSON.parse(paramsRow)).toEqual({});
+});
+
+test("should return correct page params and pathname for intercepted route", async ({ page }) => {
+    await page.goto("/");
+    await page.waitForSelector("#home-page");
+    page.click("#to-intercepted");
+    await page.waitForSelector("#intercepted-page");
+
+    const pathname = await page.$("#intercepted-get-pathname");
+    const pathnameRow = await pathname?.textContent();
+    expect(pathnameRow).toEqual("/intercepted");
+
+    const params = await page.$("#intercepted-get-params");
+    const paramsRow = await params?.textContent();
+    expect(paramsRow && JSON.parse(paramsRow)).toEqual({});
+});
+
+test("should return correct page params and pathname for nested intercepted route", async ({ page }) => {
+    await page.goto("/nested");
+    await page.waitForSelector("#nested-page");
+    page.click("#to-nested-intercepted");
+    await page.waitForSelector("#nested-intercepted-page");
+
+    const pathname = await page.$("#intercepted-get-pathname");
+    const pathnameRow = await pathname?.textContent();
+    expect(pathnameRow).toEqual("/nested-intercepted");
+
+    const params = await page.$("#intercepted-get-params");
+    const paramsRow = await params?.textContent();
+    expect(paramsRow && JSON.parse(paramsRow)).toEqual({});
+});

tests/nextjs-app/app/(group1)/intercepted/page.tsx

@@ -0,0 +1,16 @@
+import { getPathname } from "@nimpl/getters/get-pathname";
+import { getParams } from "@nimpl/getters/get-params";
+
+export default function Page() {
+    const pathname = getPathname();
+    const params = getParams();
+
+    return (
+        <div id="intercepted-page">
+            <div>
+                <p id="get-pathname">{pathname}</p>
+                <p id="get-params">{JSON.stringify(params)}</p>
+            </div>
+        </div>
+    );
+}

tests/nextjs-app/app/(group1)/nested-intercepted/page.tsx

@@ -0,0 +1,16 @@
+import { getPathname } from "@nimpl/getters/get-pathname";
+import { getParams } from "@nimpl/getters/get-params";
+
+export default function Page() {
+    const pathname = getPathname();
+    const params = getParams();
+
+    return (
+        <div id="nested-intercepted-page">
+            <div>
+                <p id="get-pathname">{pathname}</p>
+                <p id="get-params">{JSON.stringify(params)}</p>
+            </div>
+        </div>
+    );
+}

tests/nextjs-app/app/(group1)/nested/(..)nested-intercepted/page.tsx

@@ -0,0 +1,18 @@
+import { getPathname } from "@nimpl/getters/get-pathname";
+import { getParams } from "@nimpl/getters/get-params";
+import Nav from "../../../../components/Nav";
+
+export default function Page() {
+    const pathname = getPathname();
+    const params = getParams();
+
+    return (
+        <div id="nested-intercepted-page">
+            <Nav />
+            <div>
+                <p id="intercepted-get-pathname">{pathname}</p>
+                <p id="intercepted-get-params">{JSON.stringify(params)}</p>
+            </div>
+        </div>
+    );
+}

tests/nextjs-app/app/(group1)/nested/page.tsx

@@ -0,0 +1,9 @@
+import Nav from "../../../components/Nav";
+
+export default function Page() {
+    return (
+        <div id="nested-page">
+            <Nav />
+        </div>
+    );
+}

tests/nextjs-app/components/Nav/index.tsx

@@ -1,9 +1,20 @@
 import Link from "next/link";
 
 export default function Nav() {
-  return (
-    <nav>
-      <Link href="/dynamic/auto">dynamic/auto</Link>
-    </nav>
-  );
+    return (
+        <nav>
+            <Link href="/dynamic/auto" id="to-dynamic-auto">
+                dynamic/auto
+            </Link>
+            <Link href="/intercepted" id="to-intercepted">
+                intercepted
+            </Link>
+            <Link href="/nested" id="to-nested">
+                nested
+            </Link>
+            <Link href="/nested-intercepted" id="to-nested-intercepted">
+                nested-intercepted
+            </Link>
+        </nav>
+    );
 }