search

simon360 / react-from-markup

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

feat: support custom rehydratable query selectors #49

Open chrisvxd opened 4 years ago

chrisvxd commented 4 years ago

Blocked by #48, and have based this on that.

What?

Enables custom query selectors, which can eliminate any custom markup.

Instead of this

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

You can now have this

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

By configuring your rehydrate method with the new getQuerySelector() method

import rehydrate from 'react-from-markup';
import { ClockRehydrator } from 'my-components';

rehydrate(
  root,
  {
    Clock: ClockRehydrator
  },
  {
    getQuerySelector: key => `.${key}`
  }
);

How?

This PR extends replaces reading of the data-rehydratable attribute with a query selector. By default, this query selector will check for data-rehydratable, but this can be overridden using the getQuerySelector param.

You can get quite creative with your selectors, targeting whatever you want.

Breaking changes

This PR contains no breaking changes

Considerations

There is a slight performance penalty to doing this instead of reading the data-rehydratable attribute directly, in particular due to the introduction of some new loops. I'll do my best to point them out via PR line comments.

TODO