` with `data-island-*`
+ attributes, and the runtime injected by `IslandProcessor` hydrates it
+ according to the configured strategy (`load`, `idle`, `visible`,
+ `media`, `interaction`, or `none`).
+
+ Attributes:
+ name: Component name used by the client registry (`__registerIsland`).
+ component: A callable or object that renders the server-side HTML.
+ Callables are invoked with `**props`; nitro-ui elements returned
+ by the callable are rendered via `.render()`.
+ props: JSON-serializable props passed to the server render and
+ forwarded to the client via `data-props`.
+ client: Hydration strategy. See the module docstring for options.
+ client_only: Skip server rendering; emit a placeholder comment.
+ media: Media query used when `client="media"`.
+
+ Example:
+ >>> from nitro import Island
+ >>> island = Island(
+ ... name="Counter",
+ ... component=lambda start: f"
{start}",
+ ... props={"start": 0},
+ ... client="visible",
+ ... )
"""
name: str
@@ -62,7 +94,22 @@ def __post_init__(self):
self._id = f"{self.name}-{props_hash}"
def render(self) -> str:
- """Render the island with hydration markers."""
+ """Render the island as HTML with hydration markers.
+
+ Produces a `
` wrapping the server-rendered output (or a
+ placeholder comment when `client_only` is True) and annotated with
+ `data-island`, `data-island-id`, `data-hydrate`, and optionally
+ `data-props` / `data-media` so the client runtime can match and
+ hydrate it. Render failures are caught and surfaced as an HTML
+ comment rather than propagated.
+
+ Returns:
+ A single `
…
` HTML fragment.
+
+ Example:
+ >>> Island(name="Hello", component=lambda: "
hi
").render()
+ '
'
+ """
# Render the component (server-side)
if self.client_only:
inner_html = ""
@@ -108,13 +155,38 @@ def __str__(self) -> str:
class IslandProcessor:
- """Processes HTML to handle islands."""
+ """Post-process HTML to wire up island hydration.
+
+ Scans rendered HTML for `data-island` markers and, if any are present,
+ injects a small vanilla-JS runtime before `