feat: new create pages to use new defineRouter

[tylersayshi]

This adds a new version of createPages to use new_defineRouter as new_createPages

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
waku	⬜️ Ignored (Inspect)	Visit Preview	Nov 10, 2024 4:08am

[tylersayshi]

I'm working on replacing the structures here: https://github.com/dai-shi/waku/blob/main/packages/waku/src/router/create-pages.ts#L190-L205

with a lookup that will be from path to components for that path like is done here: https://github.com/dai-shi/waku/blob/main/examples/22_define-router/src/entries.tsx#L66-L87

Initially I thought this would be good to do after, but as I am seeing the new defineEntries style it seems clear that changing these structures first will be the best approach.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[dai-shi]

sorry for the delay.

[tylersayshi]

renderRoute is in a place where I am ready to test it

I need to work on getPathConfig to fix this comment now: #963 (comment)

I'll follow up here after fixing getPathConfig then digging into running and tested everything :)

[tylersayshi]

@dai-shi if this code had a layout at /bar/_layout.tsx https://github.com/dai-shi/waku/blob/main/examples/22_define-router/src/entries.tsx#L34-L43

would it change to the following?

      {
        pattern: '/bar',
        path: [{ type: 'literal', name: 'bar' }],
        components: {
          'route:/bar': { isStatic: true },
          root: { isStatic: true },
          'layout:/': { isStatic: true },
          'layout:/bar': { isStatic: true },
          'page:/bar': { isStatic: true },
        },
      },

[tylersayshi]

Should the other examples be moved to new_createPages as well with this PR?

[dai-shi]

So, I find it very difficult to prove correctness, mainly due to the lack of tests (my bad) for static/dynamic component behavior.
Let me play with it and see if I can find anything.

[dai-shi]

If we made this change,

diff --git a/examples/21_create-pages/src/components/NestedBazPage.tsx b/examples/21_create-pages/src/components/NestedBazPage.tsx
index ed7488f7..96f6ddd1 100644
--- a/examples/21_create-pages/src/components/NestedBazPage.tsx
+++ b/examples/21_create-pages/src/components/NestedBazPage.tsx
@@ -2,6 +2,7 @@ const Baz = () => (
   <div>
     <h2>Nested</h2>
     <h3>Baz</h3>
+    <p>{new Date().toISOString()}</p>
   </div>
 );
 
diff --git a/examples/21_create-pages/src/entries.tsx b/examples/21_create-pages/src/entries.tsx
index e214e5a4..9dcdbe81 100644
--- a/examples/21_create-pages/src/entries.tsx
+++ b/examples/21_create-pages/src/entries.tsx
@@ -48,7 +48,7 @@ const pages = new_createPages(
     }),
 
     createPage({
-      render: 'static',
+      render: 'dynamic',
       path: '/nested/baz',
       component: NestedBazPage,
     }),

we should see the latest date, but it's not.

I haven't looked into it wether the issue is in new_defineRouter and/or new_createPages.

[tylersayshi]

So, I find it very difficult to prove correctness, mainly due to the lack of tests (my bad) for static/dynamic component behavior. Let me play with it and see if I can find anything.

Changing the other createPages examples over to new_createPages should help test things a bit, right?

I can add a test for the date bug you mentioned as well though.

[tylersayshi]

we should see the latest date, but it's not.

I haven't looked into it wether the issue is in new_defineRouter and/or new_createPages.

hmmm did you run pnpm -F waku compile?

It seems like it's updating for me

Screen.Recording.2024-11-05.at.10.52.39.PM.mov

pretty sure this is the same diff but pasting to be 1000% sure haha

 !  ~/gitspace/waku   new-create-pages    git diff                                                                                     3m
diff --git a/examples/21_create-pages/src/components/NestedBazPage.tsx b/examples/21_create-pages/src/components/NestedBazPage.tsx
index ed7488f..96f6ddd 100644
--- a/examples/21_create-pages/src/components/NestedBazPage.tsx
+++ b/examples/21_create-pages/src/components/NestedBazPage.tsx
@@ -2,6 +2,7 @@ const Baz = () => (
   <div>
     <h2>Nested</h2>
     <h3>Baz</h3>
+    <p>{new Date().toISOString()}</p>
   </div>
 );
 
diff --git a/examples/21_create-pages/src/entries.tsx b/examples/21_create-pages/src/entries.tsx
index e214e5a..9dcdbe8 100644
--- a/examples/21_create-pages/src/entries.tsx
+++ b/examples/21_create-pages/src/entries.tsx
@@ -48,7 +48,7 @@ const pages = new_createPages(
     }),
 
     createPage({
-      render: 'static',
+      render: 'dynamic',
       path: '/nested/baz',
       component: NestedBazPage,
     }),

[dai-shi]

It seems like it's updating for me

I'm sorry, it was about when we do client navigation. Like, clicking "Home" and then clicking "Nested / Baz".

[dai-shi]

This is how it works with the current main.

Screen.Recording.2024-11-06.at.20.42.12.mov

[tylersayshi]

unsure if this fix is the best way to fix the issue, but the issue with nested/baz not re-rendering on client side navigation was because NewRouter was cacheing the path

5f927b6

[dai-shi]

element.isStatic should only be about the element.