A lightweight Virtual DOM implementation in Dart

virtual_dom.dart

import 'dart:html';

void main() {
  var vApp = createElement('div',
    attrs: {
      'id': 'app',
    },
    children: [
      'Hello Cat!',
      createElement('img', 
        attrs: {
          'src': 'https://media.giphy.com/media/cuPm4p4pClZVC/giphy.gif',
        }),
    ]
  );
  
  mount(render(vApp), querySelector('body'));
}

// Builds a map representing an HTML DOM element
createElement(tagName, {attrs = const {}, List children = const []}) => {
  'tagName': tagName,
  'attrs': attrs,
  'children': children
};

// Renders the config into an actual DOM element
renderElem(vNode) {
  var $el = document.createElement(vNode['tagName']);
  
  vNode['attrs'].forEach((key, value) {
    $el.setAttribute(key, value);
  });
  
  for (var child in vNode['children']) {
    $el.append(render(child));
  }
  
  return $el;
}

// Strategy to determine what to render
render(vNode) {
  if (vNode is String) {
    return Text(vNode);
  }
  
  return renderElem(vNode);
}

// Inserts it in the target element
mount(Element vNode, Element target) {
  target.replaceWith(vNode);
  return vNode;
}