--wip--

__fixtures__/test-project-rsc-kitchen-sink/web/src/ClientApp.tsx

@@ -0,0 +1,103 @@
+import { VirtualClientRouter } from '@redwoodjs/router/dist/client-router'
+// @ts-expect-error - something with the types for our vite package is off
+import { renderFromRscServer } from '@redwoodjs/vite/client'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
+
+import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage'
+
+import './index.css'
+import './scaffold.css'
+
+// const NavigationLayout = renderFromRscServer('NavigationLayout')
+const NavigationLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <h1>ClientApp NavigationLayout</h1>
+      {children}
+    </>
+  )
+}
+
+const wrappers = {
+  NavigationLayout,
+}
+
+const serializedRoutes = {
+  pathRouteMap: {
+    '/': {
+      redirect: null,
+      name: 'home',
+      path: '/',
+      whileLoadingPage: undefined,
+      page: 'HomePage',
+      sets: [
+        {
+          id: '1',
+          wrappers: ['NavigationLayout'],
+          isPrivate: false,
+          props: {},
+        },
+      ],
+    },
+    '/about': {
+      redirect: null,
+      name: 'about',
+      path: '/about',
+      whileLoadingPage: undefined,
+      page: 'AboutPage',
+      sets: [
+        {
+          id: '1',
+          wrappers: ['NavigationLayout'],
+          isPrivate: false,
+          props: {},
+        },
+      ],
+    },
+  },
+  hasHomeRoute: true,
+  NotFoundPage: 'NotFoundPage',
+  activeRoutePath: '/',
+}
+
+const analyzedRoutes = {
+  pathRouteMap: Object.fromEntries(
+    Object.entries(serializedRoutes.pathRouteMap).map(([path, route]) => [
+      path,
+      {
+        ...route,
+        page: renderFromRscServer(route.page),
+
+        sets: route.sets.map((set) => {
+          return {
+            ...set,
+            // wrappers: set.wrappers.map((w) => renderFromRscServer(w)),
+            wrappers: set.wrappers.map((w) => wrappers[w]),
+          }
+        }),
+      },
+    ])
+  ),
+  hasHomeRoute: serializedRoutes.hasHomeRoute,
+  NotFoundPage: serializedRoutes.NotFoundPage
+    ? renderFromRscServer(serializedRoutes.NotFoundPage)
+    : null,
+  activeRoutePath: serializedRoutes.activeRoutePath,
+}
+
+const App = () => {
+  console.log('ClientApp')
+
+  return (
+    <FatalErrorBoundary page={FatalErrorPage}>
+      <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+        <RedwoodApolloProvider>
+          <VirtualClientRouter analyzedRoutes={analyzedRoutes} />
+        </RedwoodApolloProvider>
+      </RedwoodProvider>
+    </FatalErrorBoundary>
+  )
+}
+
+export default App

__fixtures__/test-project-rsc-kitchen-sink/web/src/entry.client.tsx

@@ -1,6 +1,7 @@
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
-import App from './App'
+import App from './ClientApp'
+
 /**
  * When `#redwood-app` isn't empty then it's very likely that you're using
  * prerendering. So React attaches event listeners to the existing markup

__fixtures__/test-project-rsc-kitchen-sink/web/src/layouts/NavigationLayout/NavigationLayout.tsx

@@ -1,42 +1,9 @@
-import { namedRoutes as routes } from '@redwoodjs/router/dist/namedRoutes'
-
-import './NavigationLayout.css'
-
-type NavigationLayoutProps = {
+interface NavigationLayoutProps {
   children?: React.ReactNode
-  rnd?: number
-}
-
-const Link = (props: any) => {
-  return <a href={props.to}>{props.children}</a>
 }
 
-const NavigationLayout = ({ children, rnd }: NavigationLayoutProps) => {
-  return (
-    <div className="navigation-layout">
-      <nav>
-        <ul>
-          <li>
-            <Link to={routes.home()}>Home</Link>
-          </li>
-          <li>
-            <Link to={routes.about()}>About</Link>
-          </li>
-          <li>
-            <Link to={routes.userExamples()}>User Examples</Link>
-          </li>
-          <li>
-            <Link to={routes.emptyUsers()}>Empty Users</Link>
-          </li>
-          <li>
-            <Link to={routes.multiCell()}>Multi Cell</Link>
-          </li>
-        </ul>
-      </nav>
-      <div id="rnd">{Math.round(rnd * 100)}</div>
-      <main>{children}</main>
-    </div>
-  )
+const NavigationLayout = ({ children }: NavigationLayoutProps) => {
+  return <>{children}</>
 }
 
 export default NavigationLayout

packages/babel-config/src/plugins/babel-plugin-redwood-routes-auto-loader.ts

@@ -43,6 +43,12 @@ export default function (
   // @NOTE: This var gets mutated inside the visitors
   let pages = processPagesDir().map(withRelativeImports)
 
+  console.log('•••••••••••••••••••••••••••••••••••••••••••••••••••')
+  console.log('•••••••••••••••••••••••••••••••••••••••••••••••••••')
+  console.log('•••••      babel plugin routes auto loader     ••••')
+  console.log('•••••••••••••••••••••••••••••••••••••••••••••••••••')
+  console.log('•••••••••••••••••••••••••••••••••••••••••••••••••••')
+
   // Currently processPagesDir() can return duplicate entries when there are multiple files
   // ending in Page in the individual page directories. This will cause an error upstream.
   // Here we check for duplicates and throw a more helpful error message.

packages/router/src/active-route-loader.tsx

@@ -56,6 +56,10 @@ export const ActiveRouteLoader = ({
     !globalThis.RWJS_EXP_STREAMING_SSR &&
     (globalThis.__REDWOOD__PRERENDERING || (isPrerendered && firstLoad))
 
+  console.log('activeRouteLoader.tsx spec', spec)
+  console.log('activeRouteLoader.tsx params', params)
+  console.log('activeRouteLoader.tsx usePrerenderLoader', usePrerenderLoader)
+
   const LazyRouteComponent = usePrerenderLoader
     ? spec.prerenderLoader(spec.name).default
     : spec.LazyComponent
@@ -89,6 +93,9 @@ export const ActiveRouteLoader = ({
     delete params['key']
   }
 
+  console.log('ActiveRouteLoader.tsx Level 3/3 (ActiveRouteLoader)')
+  console.log('params', params)
+
   // Level 3/3 (ActiveRouteLoader)
   // This is where we actually render the page component. Either using a
   // prerender loader or the lazy component

packages/router/src/analyzeRoutes.ts

@@ -40,7 +40,7 @@ type RoutePath = string
  * but it allows for page and redirect to be null or undefined
  * Keeping the shape consistent makes it easier to use
  */
-interface AnalyzedRoute {
+export interface AnalyzedRoute {
   path: RoutePath
   name: string | null
   whileLoadingPage?: WhileLoadingPage
@@ -170,7 +170,8 @@ export function analyzeRoutes(
             sets: previousSets,
           }
 
-          // e.g. namedRoutesMap.homePage = () => '/home'
+          // Example: namedRoutesMap.home = () => '/home'
+          // Example: namedRoutesMap.userExample = (args) => `/user-examples/${args.id}`
           namedRoutesMap[name] = (args = {}) => replaceParams(path, args)
         }
       }