Skip to content
This repository was archived by the owner on Mar 22, 2024. It is now read-only.
This repository was archived by the owner on Mar 22, 2024. It is now read-only.

New partial hydration modes #20

@ghost

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 to lazy because a) visible could be associated with the display and visibility properties in CSS (which can cause confusion), and b) this feature is often compared to lazy 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 to eager to add a yin to lazy's yang. It also made less sense to use load after switching from client to hydrate for the prop name (i.e. client:load makes sense, but hydrate="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 😄

Metadata

Metadata

Assignees

No one assigned

    Labels

    ✏️ documentationImprovements or additions to documentation🙋 RFCRequest for comments🚀 featureNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions