feat(router): Implement routing with Suspense

[dac09]

Working with @KrisCoulson to pull in the Suspense router into main.

Tasks:

• Finish remaining tests
  • The old router tests don't work - we just need equivalent tests in the new style (analyzeRoutes.test and redirect.test)
• Check that prerendered pages don't flash
  • Don't think there's a flash, but does look like there's hydration errors 🤷
• Accessibility stuff - this is currently commented out because it was causing hydration errors on SSR. Without SSR maybe it works fine!
• Should we reimplement auth redirects using replace instead of push (e.g. logout then go back)?
• ok to remove the regular "loader" component?
  • Remove from Spec type def in utils.ts
  • Remove from babel-routes-autoloader plugin
• Fix error on production build when navigating to the About page. This is a legit failure, I can reproduce locally (but the error logs aren't helpful) with webpack

[replay-io]

19 replays were recorded for 09e9cd2.

0 Failed

19 Passed

• requireAuth graphql checks
• useAuth hook, auth redirects checks

  locator.waitFor: Target closed
  =========================== logs ===========================
  waiting for locator('text=Username `testuser@bazinga.com` already in use') to be visible
  ============================================================

• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that rehydration works for page not wrapped in Set
• Check that rehydration works for page with Cell in Set
• Check that rehydration works for page with code split chunks
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user

  locator.waitFor: Target closed
  =========================== logs ===========================
  waiting for locator('text=Username `admin@bazinga.com` already in use') to be visible
  ============================================================

• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[dac09]

19 replays were recorded for 6211e5c.
1 Failed

* [Smoke test with rw serve](https://app.replay.io/recording/f1a576db-7962-4d19-b4f4-e1a906a09762)page.textContent: Target closed
  =========================== logs ===========================
  waiting for locator('text=This site was created to demonstrate my mastery of Redwood: Look on my works, ye')
  ============================================================

18 Passed

View test run on Replay ↗︎

@KrisCoulson this looks like a legit failure. Only happens on build (currently only checking with Webpack).

To reproduce: yarn rw build && yarn rw serve, then navigate to about page

[KrisCoulson]

@dac09 looking into this today

[KrisCoulson]

All tests from the old router are now passing. There are two things to look into

currently we are skipping 1 test that handles page loading delay.
and we are getting a sort of regression on some prerender console errors due to react 18.

We sort of solved this with a temporary fix with release of React 18 but now we are using two Suspense boundaries so we are seeing some regressions.

[KrisCoulson]

There is an issue with prerendering cell content that causes a mismatch. We can fix this issue by storing the cell prerender data in the head of a prerendered page and then prepopulate the apollo cache before page loads.

Current limitation is the cache that is being stored on the server during prerender is slightly different then the cache that is used client side. We need to figure out a way to use the same cache object

[KrisCoulson]

I figured out how to actually get pre-render working. We can restore the Apollo cache to preload the data on the initial render this will make sure the first pre-rendered page you go to is server rendered and there are no React errors for mismatched data.

Note pre-render isn't actually 100% working on the main branch so this isn't technically Suspense router specific.

On thing this does include would be injecting a global variable in the head of pre-rendered pages.

We should discuss naming conventions of this variable. and if we want to move forward with this implementation here in the Suspense Router PR or break this out into its own issue.