feat: support containerless rehydration

Open chrisvxd opened this issue 5 years ago • 0 comments

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:

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

Breaking changes

It also introduces two breaking changes:

rehydrateChildren now returns an object containing container and rehydrated
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.

Sep 07 '20 17:09 chrisvxd