chore: Adds pageIdentifier to route manifest (#10680)

Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>

.changesets/10680.md

@@ -0,0 +1,85 @@
+- chore: Adds pageIdentifier to route manifest (#10680) by @dthyresson
+
+This PR adds the `page_identifier_str` of `pageIdentifier` to the Route Manifest.
+
+Known what page belongs to the route can be useful to :
+
+* ensure if rendering a page/component that it belongs to the route and its auth permissions
+* for visualizing routes
+* general completeness in the manifest with the Routes jsx in manifest form
+
+## Example
+
+### Routes
+
+```jsx
+const Routes = () => {
+  return (
+    <Router>
+      <Set wrap={NavigationLayout}>
+        <Route path="/" page={HomePage} name="home" />
+        <Route path="/about" page={AboutPage} name="about" />
+        <PrivateSet unauthenticated="home" roles={['admin']}>
+          <Route path="/info" page={AboutPage} name="info" />
+        </PrivateSet>
+        <Route path="/multi-cell" page={MultiCellPage} name="multiCell" />
+
+```
+
+### Manifest
+
+```json
+{
+  "/": {
+    "name": "home",
+    "bundle": null,
+    "matchRegexString": "^/$",
+    "pathDefinition": "/",
+    "hasParams": false,
+    "routeHooks": null,
+    "redirect": null,
+    "relativeFilePath": "pages/HomePage/HomePage.tsx",
+    "isPrivate": false,
+    "pageIdentifier": "HomePage"
+  },
+  "/about": {
+    "name": "about",
+    "bundle": null,
+    "matchRegexString": "^/about$",
+    "pathDefinition": "/about",
+    "hasParams": false,
+    "routeHooks": null,
+    "redirect": null,
+    "relativeFilePath": "pages/AboutPage/AboutPage.tsx",
+    "isPrivate": false,
+    "pageIdentifier": "AboutPage"
+  },
+  "/info": {
+    "name": "info",
+    "bundle": null,
+    "matchRegexString": "^/info$",
+    "pathDefinition": "/info",
+    "hasParams": false,
+    "routeHooks": null,
+    "redirect": null,
+    "relativeFilePath": "pages/AboutPage/AboutPage.tsx",
+    "isPrivate": true,
+    "unauthenticated": "home",
+    "roles": [
+      "admin"
+    ],
+    "pageIdentifier": "AboutPage"
+  },
+  "/multi-cell": {
+    "name": "multiCell",
+    "bundle": null,
+    "matchRegexString": "^/multi-cell$",
+    "pathDefinition": "/multi-cell",
+    "hasParams": false,
+    "routeHooks": null,
+    "redirect": null,
+    "relativeFilePath": "pages/MultiCellPage/MultiCellPage.tsx",
+    "isPrivate": false,
+    "pageIdentifier": "MultiCellPage"
+  },
+```

packages/internal/src/routes.ts

@@ -76,6 +76,7 @@ export interface RWRouteManifestItem {
   isPrivate: boolean
   unauthenticated: string | null
   roles: string | string[] | null
+  pageIdentifier: string | null
   // Probably want isNotFound here, so we can attach a separate 404 handler
 }
 
@@ -119,6 +120,7 @@ export const getProjectRoutes = (): RouteSpec[] => {
       isPrivate: route.isPrivate,
       unauthenticated: route.unauthenticated,
       roles: route.roles,
+      pageIdentifier: route.page_identifier_str,
     }
   })
 }

packages/structure/src/model/__tests__/__snapshots__/model.test.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Redwood Route detection > detects the page identifier for a route 1`] = `
+[
+  "HomePage",
+  "TypeScriptPage",
+  "EditUserPage",
+  "FooPage",
+  "BarPage",
+  "PrivatePage",
+  "PrivatePage",
+  "PrivatePage",
+  "NotFoundPage",
+]
+`;

packages/structure/src/model/__tests__/model.test.ts

@@ -134,6 +134,16 @@ describe('Redwood Page detection', () => {
 })
 
 describe('Redwood Route detection', () => {
+  it('detects the page identifier for a route', async () => {
+    const projectRoot = getFixtureDir('example-todo-main')
+    const project = new RWProject({ projectRoot, host: new DefaultHost() })
+    const routes = project.getRouter().routes
+
+    const pageIdentifiers = routes.map((r) => r.page_identifier_str)
+
+    expect(pageIdentifiers.length).toBe(9)
+    expect(pageIdentifiers).toMatchSnapshot()
+  })
   it('detects routes with the prerender prop', async () => {
     const projectRoot = getFixtureDir('example-todo-main')
     const project = new RWProject({ projectRoot, host: new DefaultHost() })

packages/vite/src/buildRouteManifest.ts

@@ -50,6 +50,7 @@ export async function buildRouteManifest() {
       isPrivate: route.isPrivate,
       unauthenticated: route.unauthenticated,
       roles: route.roles,
+      pageIdentifier: route.pageIdentifier,
     }
 
     return acc