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

Support custom rehydratable query selectors #6

Merged
merged 1 commit into from
Sep 16, 2020

Conversation

chrisvxd
Copy link
Member

Blocked by #4. Migrated from simon360/react-from-markup#49.


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

  • Tests
  • Docs

@chrisvxd chrisvxd force-pushed the chrisvxd/automatically-rehydrate-children branch 2 times, most recently from 715f562 to 9b0f36e Compare September 15, 2020 16:29
@chrisvxd chrisvxd force-pushed the chrisvxd/custom-query-selectors branch 2 times, most recently from 04270af to d297aa9 Compare September 15, 2020 19:22
Base automatically changed from chrisvxd/automatically-rehydrate-children to master September 16, 2020 09:45
@chrisvxd chrisvxd force-pushed the chrisvxd/custom-query-selectors branch from d297aa9 to 9f9f234 Compare September 16, 2020 09:46
@chrisvxd chrisvxd merged commit 83cec13 into master Sep 16, 2020
@chrisvxd chrisvxd deleted the chrisvxd/custom-query-selectors branch September 16, 2020 09:46
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.

2 participants