mountToElement function

BloomMountHandle mountToElement(
  1. BloomNode node,
  2. Element root
)

Mounts a BloomNode descriptor tree directly into the provided DOM root element.

Instantiates real DOM elements, sets up event handlers, and establishes reactive signal subscriptions managed by an internal cleanup scope (_Region). Appends the resulting DOM nodes to root.

Returns a BloomMountHandle holding cleanup disposers. If mounting fails with an uncaught exception and bloomDevErrorOverlayEnabled is active, renders an in-browser error overlay into root.

final container = web.document.getElementById('my-widget')!;
final handle = mountToElement(
  Button(
    text: 'Click Me',
    on: {'click': (e) => print('Clicked')},
  ),
  container,
);

Implementation

BloomMountHandle mountToElement(BloomNode node, web.Element root) {
  final region = _Region();
  try {
    final domNodes = _mountNode(node, region);
    for (final n in domNodes) {
      root.appendChild(n);
    }
    final handle = BloomMountHandle(root, region.disposers.toList());
    if (_isHotReloadTrackingActive()) {
      _activeDevMountHandle = handle;
      _installHotReloadHooks();
    }
    return handle;
  } catch (error, stackTrace) {
    for (final d in region.disposers) {
      try {
        d();
      } catch (_) {}
    }
    BloomJsDevTools.notify('mount-error', {
      'error': error.toString(),
      'stackTrace': stackTrace.toString(),
    });
    if (bloomDevErrorOverlayEnabled || _isHotReloadTrackingActive()) {
      root.textContent = '';
      final overlayHost = web.document.createElement('div');
      overlayHost.innerHTML = renderDevErrorOverlay(error, stackTrace).toJS;
      root.appendChild(overlayHost);
      final handle = BloomMountHandle(root, []);
      if (_isHotReloadTrackingActive()) {
        _activeDevMountHandle = handle;
        _installHotReloadHooks();
      }
      return handle;
    }
    rethrow;
  }
}