hydrateAll function

void hydrateAll()

Hydrates all registered components found in the DOM.

This function:

  1. Finds all elements matching registered component tags
  2. Creates component instances
  3. Calls WebComponent.onMount on each

Example

void main() {
  registerComponent('my-counter', Counter.new);
  registerComponent('my-button', Button.new);
  hydrateAll();
}

Implementation

void hydrateAll() {
  if (!kIsBrowser) return;

  for (final entry in _componentRegistry.entries) {
    final tagName = entry.key;
    final factory = entry.value;

    final elements = web.document.querySelectorAll(tagName);
    for (var i = 0; i < elements.length; i++) {
      final element = elements.item(i);
      if (element != null) {
        // Custom elements are HTMLElement instances by definition
        final component = factory();

        // Skip hydration if not a WebComponent
        if (component is! WebComponent) {
          continue;
        }

        component._hydrate(element as web.HTMLElement);
      }
    }
  }
}