To JSON Middleware

[tbranyen]

At work someone asked about good XML -> JSON parsers. As diffHTML's parser is based on node-fast-html-parser, I thought it would be interesting to see how it'd look flattening the vTrees to just name, attributes, and nodes.

https://codesandbox.io/s/prod-leaf-hx267?file=/src/index.js

I think this is pretty cool usage of the render transaction tasks. Being able to change the return value makes for a more seamless API.

import { innerHTML, use } from 'diffhtml';
import toJsonMiddleware from './to-json-middleware';

use(toJsonMiddleware);

const result = innerHTML([], `
  <some ns:attr="attr">
    <other name="test" />
    <other name="test-2" />
    test
  </some>
`);

// Returns
{
  "some": {
    "attributes": {
      "ns:attr": "attr"
    },
    "nodes": [
      {
        "other": {
          "attributes": {
            "name": "test"
          },
          "nodes": []
        }
      },
      {
        "other": {
          "attributes": {
            "name": "test-2"
          },
          "nodes": []
        }
      },
      "test"
    ]
  }
}

[tbranyen]

const formatVTree = vTree => {
  if (vTree.nodeType === 1) {
    return {
      [vTree.rawNodeName]: {
        attributes: vTree.attributes,
        nodes: vTree.childNodes.map(formatVTree).filter(Boolean)
      }
    };
  } else if (vTree.nodeType === 11) {
    return vTree.childNodes.map(formatVTree);
  } else if (vTree.nodeType === 3 && vTree.nodeValue.trim()) {
    return vTree.nodeValue.trim();
  }
};

export default transaction =>
  transaction.tasks.push(() => {
    const trees = transaction.oldTree.childNodes
      .map(formatVTree)
      .filter(Boolean);
    return trees.length === 1 ? trees[0] : trees;
  });

Saving here in case Codesandbox removes the content.