render method

  1. @override
Morphic render()
override

Produces the Morphic tree for this component's current state.

Must be pure. Do not call morph or mutate state inside render. Do not use .map(), .where(), or .fold() directly in render — move those to getters instead:

// ✅ correct — computed in a getter
List<Morphic> get todoElements => filteredTodos.map(...).toList();

@override
Morphic render() => Ul()([todoElements]);

// ❌ wrong — lazy iteration inside render
@override
Morphic render() => Ul()([ todos.map((t) => TodoItem(todo: t)) ]);

Implementation

@override
Morphic render() {
  final path = window.location.pathname;
  final resolved = router.resolve(path);

  // Update current page
  if (_currentPage == null ||
      _currentPage.runtimeType != resolved.runtimeType) {
    _currentPage = resolved;

    // Recreate layout with a new page
    _layoutComponent = layoutBuilder(_currentPage!);
  }

  // Layout is a component - it'll be resolved by resolveNode()
  return _layoutComponent!.render();
}