BloomIsland class

Emits a server-rendered island placeholder element configured with the given hydration strategy and props.

Wraps child (or children) inside an element tagged with bloomIslandAttribute matching name. During server-side rendering (renderToHtml), the static HTML markup of child is emitted into the stream alongside serialized props and strategy metadata. In the browser, BloomIslandOrchestrator discovers the placeholder and hydrates the interactive subtree in place.

Example

Server-Side SSR Rendering:

BloomIsland(
  name: 'counter',
  strategy: HydrationStrategy.visible,
  props: {'initialCount': 5},
  child: Div(
    className: 'counter-box',
    children: [
      const Span(text: 'Count: 5'),
      Button(text: '+1'),
    ],
  ),
)

Client-Side Registration & Hydration:

registerIsland('counter', (props) {
  final count = signal(props['initialCount'] as int? ?? 0);
  return Div(
    className: 'counter-box',
    children: [
      Live(() => Span(text: 'Count: ${count.value}')),
      Button(text: '+1', on: {'click': (_) => count.value++}),
    ],
  );
});

void main() {
  orchestrateIslands();
}