hydrate function

BloomMountHandle hydrate(
  1. BloomNode root,
  2. String selector
)

Hydrates a server-rendered DOM tree matching selector with event listeners in place.

Looks up the target DOM element via web.document.querySelector(selector) and delegates to hydrateElement. Throws a StateError if selector matches no element.

void main() {
  final handle = hydrate(
    Div(
      className: 'interactive-card',
      children: [
        const H1(text: 'Server Rendered Title'),
        Button(
          text: 'Activate',
          on: {'click': (e) => print('Activated')},
        ),
      ],
    ),
    '#app',
  );
}

Implementation

BloomMountHandle hydrate(BloomNode root, String selector) {
  final el = web.document.querySelector(selector);
  if (el == null) {
    throw StateError('Bloom hydrate: selector "$selector" matched no element.');
  }
  return hydrateElement(root, el);
}