Skip to content
This repository has been archived by the owner on Jul 28, 2023. It is now read-only.

Implement different hydration techniques #14

Merged
merged 4 commits into from
May 13, 2022

Conversation

cbravobernal
Copy link
Collaborator

Fixes #12

I added an initial approach to the different hydration techniques as Astro (copy-pasted from the issue and Astro's codebase, mainly).

Should be the technique a prop in block.json rather than an attribute? (I guess choosing the hydration technique on the editor is an overkill)

Should we allow the Block developer to choose the hydration technique or is it a complex concept for most developers? (I still have to check some docs about IntersectionObserver and RequestIdleCallback)

@cbravobernal cbravobernal marked this pull request as ready for review May 11, 2022 13:29
@cbravobernal
Copy link
Collaborator Author

Do you think we should include media-query-based hydration? Astro does, but you have to specify <SidebarToggle client:media="(max-width: 50em)" /> the media query as an HTML attribute.
Also, in their documentation , they mention:

If the component is already hidden and shown by a media query in your CSS, then it can be easier to just use client:visible and not pass that same media query into the directive.

In this case, if we don't include the option and just rely in CSS and its visible property, we would be skipping some use cases.

@cbravobernal cbravobernal changed the title Initial hydration techniques configuration Implement different hydration techniques May 11, 2022
@cbravobernal cbravobernal self-assigned this May 12, 2022
Copy link
Collaborator

@michalczaplinski michalczaplinski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

I think we can merge it as is and continue the conversation about the further details.

@michalczaplinski michalczaplinski merged commit 1562088 into main May 13, 2022
@luisherranz
Copy link
Member

Just a small note here if/when we propose this in Gutenberg: the intersection observer should also have a fallback.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement different hydration techniques
3 participants