search

simon360 / react-from-markup

Declare your React components with static HTML
MIT License
18 stars 4 forks source link

feat: support containerless rehydration #48

Open chrisvxd opened 4 years ago

chrisvxd commented 4 years ago

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

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.