fix: render type test issues with new_createPages

e2e/fixtures/render-type/src/Echo.tsx

@@ -1,8 +1,9 @@
-export function Echo({ echo, timestamp }: { echo: string; timestamp: number }) {
+export function Echo(props: any) {
+  console.log('Echo', props); // FIXME echo is undefined
   return (
     <div>
-      <p data-testid="echo">{echo}</p>
-      <p data-testid="timestamp">{timestamp}</p>
+      <p data-testid="echo">{props.echo}</p>
+      <p data-testid="timestamp">{props.timestamp}</p>
     </div>
   );
 }

e2e/fixtures/render-type/src/ServerEcho.tsx

@@ -1,5 +1,6 @@
 import { Echo } from './Echo.js';
 
-export function ServerEcho({ echo }: { echo: string }) {
-  return <Echo echo={echo} timestamp={Date.now()} />;
+export function ServerEcho(props: any) {
+  console.log('ServerEcho', props); // FIXME echo is undefined
+  return <Echo echo={props.echo} timestamp={Date.now()} />;
 }

e2e/fixtures/render-type/src/entries.tsx

@@ -1,4 +1,4 @@
-import { createPages } from 'waku/router/server';
+import { new_createPages as createPages } from 'waku/router/server';
 
 import { ServerEcho } from './ServerEcho.js';
 import { ClientEcho } from './ClientEcho.js';

e2e/fixtures/render-type/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import { Router } from 'waku/router/client';
+import { NewRouter as Router } from 'waku/router/client';
 
 const rootElement = (
   <StrictMode>

packages/waku/src/router/create-pages.ts

@@ -500,6 +500,22 @@ export const new_createPages = <
   let rootItem: RootItem | undefined = undefined;
   const noSsrSet = new WeakSet<PathSpec>();
 
+  /** helper to find dynamic path when slugs are used */
+  const getRoutePath: (path: string) => string | undefined = (path) => {
+    if (staticComponentMap.has(joinPath(path, 'page').slice(1))) {
+      return path;
+    }
+    const allPaths = [
+      ...dynamicPagePathMap.keys(),
+      ...wildcardPagePathMap.keys(),
+    ];
+    for (const p of allPaths) {
+      if (new RegExp(path2regexp(parsePathWithSlug(p))).test(path)) {
+        return p;
+      }
+    }
+  };
+
   const registerStaticComponent = (
     id: string,
     component: FunctionComponent<any>,
@@ -644,7 +660,11 @@ export const new_createPages = <
         if (segment === '') {
           return acc;
         }
-        acc.push(acc[index - 1] + '/' + segment);
+        if (acc[index - 1] === '/') {
+          acc.push('/' + segment);
+        } else {
+          acc.push(acc[index - 1] + '/' + segment);
+        }
         return acc;
       },
       ['/'],
@@ -755,29 +775,37 @@ export const new_createPages = <
     renderRoute: async (path) => {
       await configure();
 
+      // path without slugs
+      const routePath = getRoutePath(path);
+      if (!routePath) {
+        throw new Error('Route not found: ' + path);
+      }
+
       const pageComponent = (staticComponentMap.get(
-        joinPath(path, 'page').slice(1), // feels like a hack
-      ) ?? dynamicPagePathMap.get(path)?.[1])!;
+        joinPath(routePath, 'page').slice(1), // feels like a hack
+      ) ?? dynamicPagePathMap.get(routePath)?.[1])!;
 
       const result: Record<string, ReactNode> = {
         root: createElement(
           rootItem ? rootItem.component : DefaultRoot,
           null,
           createElement(Children),
         ),
-        [`page:${path}`]: createElement(
+        [`page:${routePath}`]: createElement(
           pageComponent,
           null,
           createElement(Children),
         ),
       };
 
-      const layoutPaths = getLayouts(path);
+      // this is wrong because getLayouts assumes normal path and routePath is a regex
+      const layoutPaths = getLayouts(routePath);
 
       for (const segment of layoutPaths) {
         const layout =
           dynamicLayoutPathMap.get(segment)?.[1] ??
           staticComponentMap.get(joinPath(segment, 'layout').slice(1)); // feels like a hack
+        // console.log({ layout });
         // always true
         if (layout) {
           const id = 'layout:' + segment;
@@ -791,7 +819,7 @@ export const new_createPages = <
           component: Slot,
           props: { id: `layout:${lPath}` },
         })),
-        { component: Slot, props: { id: `page:${path}` } },
+        { component: Slot, props: { id: `page:${routePath}` } },
       ];
 
       return {