I don't know what to call this.

app.js

import { KeyValueStore } from './storage';
import { d } from './dom';

window.addEventListener('load', function () {
  var dom = d(
    d.h1(settings.get('name').then(greet)),
    d.div(
      'This app has been run ',
      d.b(
        {id: 'foo', style: 'color:red'},
        counter.get('timesRun')
      ),
      ' times.'
    )
  );
  document.getElementById('out').appendChild(dom.toDom());
});

function greet(name) {
  return 'Namaste, ' + name + '!';
}

var counter = new KeyValueStore('counter');
var settings = new KeyValueStore('settings');

settings.get('name').then(function(name) {
  if (!name) {
    name = prompt('it seems we haven\'t met! What\'s your name?');
    settings.set('name', name);
  }
});

counter.get('timesRun').then(function (num) {
  if (!Number(num)) {
    num = 1;
  }
  num = num + 1;
  counter.set('timesRun', num);
}).catch(barf);


function barf() {
  console.log('um', Array.prototype.slice.apply(arguments));
}

dom.js

import { Promise } from 'es6-promise';

var elements = "a abbr b blockquote div em fieldset form h1 h2 h3 h4 h5 h6 hr img input label s span strong u".split(' ');

function d() {
  var attrs = {};
  var contents = [];
  var args = Array.prototype.slice.apply(arguments);
  args.forEach(function (arg) {
    if (arg instanceof DOM || arg instanceof Promise) {
      contents.push(arg);
    } else if (typeof arg === 'object') {
      for (var attr in arg) {
        attrs[attr] = arg[attr];
      }
    } else {
      contents.push(arg);
    }
  });
  return new DOM(null, attrs, contents);
}

elements.forEach(function (elem) {
  d[elem] = function () {
    var result = d.apply(this, Array.prototype.slice.apply(arguments));
    result.tag = elem;
    return result;
  };
});

function DOM(tag, attrs, contents) {
  this.tag = tag;
  this.attrs = attrs;
  this.contents = contents || [];
}

DOM.prototype = {
  toString: function () {
    var s = '';
    if (this.tag) {
      s += '<' + this.tag;
      for (var attr in this.attrs) {
        s += ' ' + attr + '="' + this.attrs[attr].replace('"', '\"');
      }
      s += '>';
    }

    this.contents.forEach(function (node) {
      s += node.toString();
    });

    if (this.tag) {
      s += '</' + this.tag + '>';
    }
    return s;
  },
  toDom: function () {
    var parent;
    if (this.tag) {
      parent = document.createElement(this.tag);
    } else {
      parent = document.createDocumentFragment();
    }

    var attrs = this.attrs;
    if (this.tag) {
      for (var attr in attrs) {
        parent.setAttribute(attr, attrs[attr]);
      }
    }

    this.contents.forEach(function (node) {
      if (node instanceof DOM) {
        parent.appendChild(node.toDom());
      } else if (typeof node === 'object' && node.then) {
        var placeholder = document.createComment('placeholder');
        parent.appendChild(placeholder);
        node.then(function (val) {
          parent.insertBefore(d(val).toDom(), placeholder);
          parent.removeChild(placeholder);
        });
      } else {
        parent.appendChild(document.createTextNode(node));
      }
    });

    return parent;
  }
};

export { d };