render function

Element render (
  1. BaseContext ctx
)

Implementation

Element render(BaseContext ctx) {
  var dom = document.createElement(ctx.tagName);
  ctx.el = dom;
  // setup props
  if (ctx.props != null && ctx.props.isNotEmpty) {
    ctx.props.forEach((key, value) {
      if (key is String) {
        if(key.startsWith('on')) {
          return;
        }
      }
      dom.setAttribute(key, value);
    });

    Map<String, Function>events = ctx.props['on'] ?? {};
    if (events.isNotEmpty) {
      events.forEach((key, value) => dom.addEventListener('${key.toLowerCase()}', value));
    }
  }
  // setup children
  if (ctx.childrens!= null && ctx.childrens.isNotEmpty) {
    var doms = ctx.childrens.map((c) {
      if (c is BaseContext) {
        return render(c);
      } else {
        return createTextNode(c);
      }
    });
    dom.children.addAll(doms);
  }
  return dom;
}