feat: support custom rehydratable query selectors #49
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chrisvxd
commented
Sep 8, 2020
| const rehydratorName = el.getAttribute("data-rehydratable"); | ||
| const rehydratorSelector = Object.keys(options.allSelectors).find(selector => | ||
| el.matches(selector) | ||
| ); |
There was a problem hiding this comment.
Performance consideration: This introduces a find loop on each call of rehydratableToReactElement.
There was a problem hiding this comment.
chrisvxd
commented
Sep 8, 2020
| if ( | ||
| node.nodeType === Node.ELEMENT_NODE && | ||
| (node as Element).hasAttribute("data-rehydratable") | ||
| (node as Element).matches(options.compoundSelector) |
There was a problem hiding this comment.
Performance consideration: How does .matches compare to hasAttribute?
chrisvxd
commented
Sep 8, 2020
| ); | ||
|
|
||
| const compoundSelector = Object.keys(allSelectors).reduce( | ||
| (acc: string, selector: string) => `${acc ? `${acc}, ` : ""}${selector}`, |
There was a problem hiding this comment.
Performance consideration: Additional loop on each hydrate, but only called once per hydrate.
chrisvxd
force-pushed
the
chrisvxd/custom-query-selectors
branch
from
27b8f22 to
b7ffe51
Compare
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Blocked by #48, and have based this on that.
What?
Enables custom query selectors, which can eliminate any custom markup.
Instead of this
You can now have this
By configuring your rehydrate method with the new
getQuerySelector()methodHow?
This PR extends replaces reading of the
data-rehydratableattribute with a query selector. By default, this query selector will check fordata-rehydratable, but this can be overridden using thegetQuerySelectorparam.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-rehydratableattribute 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