WIP: (feat) - debugging tables

[JoviDeCroock]

This is a first try, I don't know all use cases for tables so I would really appreciate a second/... pair of eyes on this.

Thanks in advance!

[coveralls]

Coverage decreased (-70.9%) to 29.067% when pulling ab3d9e7 on feat/debugHtmlMarkup into 98f0d7e on master.

[developit]

I'm thinking this might not work if there are components in the tree, right?

const TableRow = ({ a, b, c }) => <tr><td>{a}</td><td>{b}</td><td>{c}</td></tr>
render(<table>{data.map(row => <TableRow {...row} />)}</table>, document.body)

Just a thought as I read through: what about triggering validation when encountering a child that can only be nested in a given parent (rather than when encountering a parent that can only accept certain children)? Something like:

function getParentType(vnode) {
  return vnode._dom && vnode._dom.parentNode && vnode._dom.parentNode.localName;
}
options.diffed = vnode => {
  if (vnode.type == 'tr') {
    const parentType = getParentType(vnode);
    if (parentType !== 'tbody' && parentType !== 'thead') {
      console.warn(`Warning: improper nesting of table row\n<tr> can only be placed inside <tbody> or <thead>.\n    ${serializeVnode(vnode)}`);
    }
  }
};

[JoviDeCroock]

Good point, I'll rewrite it for this case and add tests for it aswell. parentNode never seems to be defined though :/

[andrewiggins]

FWIW, now that we have the _parent pointer, checking that the first parent DOM vnode is of type tr, etc. shouldn't be too hard

[JoviDeCroock]

@andrewiggins I'll try to pick this up asap