createFlintApp function

void createFlintApp(String selector, { Map<String, FlintPageBuilder>? pages, FlintComponentRegistry? registry, List<FlintPageMiddleware> middlewares = const [], List<StyleSheet> stylesheets = const [], RootDesign? rootDesign, FlintComponent missingPage(String component)?, })

Mounts a Flint UI app into the element matching selector.

The host element must contain a data-flint-page payload generated by FlintDart's page response helpers.

Implementation

void createFlintApp(
  String selector, {
  Map<String, FlintPageBuilder>? pages,
  FlintComponentRegistry? registry,
  List<FlintPageMiddleware> middlewares = const [],
  List<StyleSheet> stylesheets = const [],
  RootDesign? rootDesign,
  FlintComponent Function(String component)? missingPage,
}) {
  final host = web.document.querySelector(selector);

  if (host == null) {
    throw StateError('No element found for selector "$selector".');
  }

  registerRootDesign(
    RootDesign(
      name: 'flint-animations',
      keyframes: [StyleKeyframes.spin(), StyleKeyframes.fadeIn()],
    ),
  );

  if (rootDesign != null) {
    registerRootDesign(rootDesign);
  }

  for (final stylesheet in stylesheets) {
    registerStyleSheet(stylesheet);
  }

  final page = _readPage(host);
  final context = FlintPageContext(host: host, page: page);

  for (final middleware in middlewares) {
    middleware(context);
    if (context.stopped) return;
  }

  final builder = registry?[page.component] ?? pages?[page.component];
  final component =
      builder?.call(page.props) ??
      missingPage?.call(page.component) ??
      MissingFlintPage(page.component);

  createRootForElement(host).render(component);
}