Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support partial hydration for Remix clientLoader/clientAction #11033

Merged
merged 19 commits into from
Dec 4, 2023

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Nov 15, 2023

Adds support for a future.v7_partialHydration flag and a new route.Fallback property so we can provide partial hydrationData and render the UI up until the deepest Fallback while we run the remaining loaders.

To do:

  • Docs
  • Tests - still need unit tests for new error flow

Copy link

changeset-bot bot commented Nov 15, 2023

🦋 Changeset detected

Latest commit: 35fa15e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@remix-run/router Minor
react-router Patch
react-router-dom Patch
react-router-dom-v5-compat Patch
react-router-native Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -1665,14 +1665,12 @@ function testDomRouter(
let router = createTestRouter(
createRoutesFromElements(
<Route element={<Layout />}>
<Route index loader={() => "index"} element={<h1>index</h1>} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The unit test changes in this file can be ignored - before I added the future flag (and I started treating partial hydration data as non-initialized), I found a bunch of tests that inadvertently forgot or provide partial loader data so cleaned them up

state: RouterState;
}): React.ReactElement | null {
return useRoutesImpl(routes, undefined, state);
return useRoutesImpl(routes, undefined, state, future);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plumb down the router.future from RouterProvider so we can use it in renderMatches and only do the fallback stuff when enabled

Comment on lines +619 to +696
<DataRoutes
routes={router.routes}
future={router.future}
state={state}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plumb down the router.future from RouterProvider so we can use it in renderMatches and only do the fallback stuff when enabled

errorElement = match.route.errorElement || defaultErrorElement;

if (renderFallback) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Determine if we should be rendering a fallback element at this location in the tree

let t = initializeTest({
url: "/foo",
hydrationData: { loaderData: { root: "ROOT", foo: "FOO" } },
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above - these tests can be ignored as they just sure up the hydrationData for existing tests

@@ -98,119 +98,6 @@ afterEach(() => {

describe("a router", () => {
describe("init", () => {
it("initial state w/o hydrationData", async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved these tests to the new file above that deals strictly with router initialization/fallback tests

@@ -1536,6 +1331,7 @@ describe("a router", () => {
hydrationData: {
loaderData: {
root: "ROOT_DATA",
index: "INDEX_DATA",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure up hydration data

@brophdawg11 brophdawg11 marked this pull request as ready for review November 20, 2023 21:27
@brophdawg11 brophdawg11 merged commit 0d2a38c into dev Dec 4, 2023
3 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/client-data branch December 4, 2023 23:01
Copy link
Contributor

github-actions bot commented Dec 5, 2023

🤖 Hello there,

We just published version 6.21.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Copy link
Contributor

🤖 Hello there,

We just published version 6.21.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant