This repository was archived by the owner on Mar 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 41
This repository was archived by the owner on Mar 22, 2024. It is now read-only.
New partial hydration modes #20
Copy link
Copy link
Closed
Labels
✏️ documentationImprovements or additions to documentationImprovements or additions to documentation🙋 RFCRequest for commentsRequest for comments🚀 featureNew feature or requestNew feature or request
Description
Is your feature request related to a problem? Please describe.
I want to have finer control over when my component is hydrated on the page. I expect these 5 methods from Astro's partial hydration to work:
- load: Hydrate when the DOM is finished parsing
- idle: Hydrate when the main thread is no longer busy (aka DOM is done parsing, and any JS outside my component is finished running)
- visible: Hydrate when my component has scrolled into view
- media: Hydrate when a media query is met
- none: Never hydrate
Describe the solution you'd like
I'd like to see a new API similar to Astro's client:property
helper. We'll use some new naming for Slinkity though:
Prop name change: hydrate (instead of Astro's client
)
- this describes the "purpose" of the prop better than
client
in my opinion: to hydrate your static markup - ties directly into the feature's name on our documentation: Partial Hydration
- hey, hydrate or diedrate am I right?
Comparison of Astro and Slinkity syntax
Astro:
import ReactComponent from '...'
---
<ReactComponent client:visible />
Slinkity:
{% react 'components/ReactComponent' hydrate="lazy" %}
Value naming
Slinkity | Astro |
---|---|
eager | load |
lazy | visible |
none | [empty] |
- we changed
visible
tolazy
because a)visible
could be associated with thedisplay
andvisibility
properties in CSS (which can cause confusion), and b) this feature is often compared tolazy
image loading in the DOM. Yes, lazy is often an overloaded term in CS. But if we're going to choose a short and concise name, why not choose something similar to existing browser features? - we also changed
load
toeager
to add a yin tolazy
's yang. It also made less sense to useload
after switching fromclient
tohydrate
for the prop name (i.e.client:load
makes sense, buthydrate="load"
doesn't as much) - we allow
hydrate="none"
as a potential value, since we will allow users to choose a default hydration method for their project (but no hydration is the default!). Including a "none" allows users to override whatever default they've chosen to opt-out of hydration
Handling idle, media, etc
You may have noticed a few hydration modes like idle
, media
, and client:only
are missing from that table. Well, we have a special plan for those... check out this proposal in the comments 😄
marlonmarcello
Metadata
Metadata
Assignees
Labels
✏️ documentationImprovements or additions to documentationImprovements or additions to documentation🙋 RFCRequest for commentsRequest for comments🚀 featureNew feature or requestNew feature or request