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

feat: support containerless rehydration #48

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

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.

None yet

1 participant