Skip to content

Conversation

chrisvxd
Copy link
Collaborator

@chrisvxd chrisvxd commented Sep 7, 2020

What?

Implements support for containerless rehydration. Instead of

<html>
  <body>
    <div data-react-from-markup-container>
      <div class="Clock" data-rehydratable="Clock">
        15:21:11
      </div>
    </div>
  </body>
</html>

You can now have

<html>
  <body>
    <div class="Clock" data-rehydratable="Clock">
      15:21:11
    </div>
  </body>
</html>

How?

It does this by:

  1. Using the keys from the rehydrators object to query select all data-rehydratable tags
  2. Wrapping the root of that rehydratable in another element
  3. Using the new container as the React root

Breaking changes

It also introduces two breaking changes:

  1. rehydrateChildren now returns an object containing container and rehydrated
  2. data-rehydratable must now match the rehydrator key provided in rehydrators

The first of the two is perhaps not necessary, but I can't quite remember the behaviour of rehydrateChildren. It may be possible to avoid a breaking change to this, and instead just implement the container swizzle a layer above.

TODO

  • Tests
  • Docs

Aside

My goal is to eliminate any markup delta entirely by optionally supporting class names instead of data-rehydratable, but this has some performance considerations I need to hash out.

I'm also aware that you may have reasons other than those we have already discussed for wanting a container, so feel free to throw this back in my face.

BREAKING CHANGE: rehydrateChildren now returns an object containing 'container' and 'rehydrated'
BREAKING CHANGE: data-rehydratable must now match the rehydrator key provided in 'rehydrators'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant