Use JSX or similar for board definition

[jamesjacko]

Coming from a React-heavy frontend world I had a thought when reading the getting started docs. Could we use something like JSX to define boards alongside the current JSON or JS object definitions? The benefit of this is that it gives more options to the developer and can help simplify board creation for those coming from an XML-like world.

{
  "nodes": [
    {
      "id": "input-1",
      "type": "input"
    },
    {
      "id": "output-1",
      "type": "output"
    }
  ],
  "edges": [
    {
      "from": "input-1",
      "out": "say",
      "to": "output-1",
      "in": "hear"
    }
  ]
}

would become something like

<board>
  <nodes>
    <input id='input1' />
    <output id='output1' />
  </nodes>
  <edges>
    <edge from="input-1" out="say" to="output-1" in="hear" />
  </edges>
</board>

We could have a series of library "elements" and allow users to create their own. Initial thoughts are to investigate Babel plugins as most JSX transpiles to 'React.createElement()' fixed library function code via babel plugins. There is the babel-plugin-jsx-pragmatic that could have legs but we could also look into creating our own babel plugin.

I'm going to put together a getting-started POC to see how "out of the box" babel-plugin-jsx-pragmatic might be. It would also be interesting to see if this can also work alongside standard JSX.

[Mearman]

@jamesjacko and I have already discussed this a bit, but I'd love your eyes on it too @paullewis

[jamesjacko]

JXON is another option but it seems to be somewhat abandoned and JSX is a de facto industry standard

[Mearman]

putting this here for reference
https://npmtrends.com/fast-xml-parser-vs-jsdom-vs-xml2js

[Mearman]

started a bit of PoC https://github.com/ExaDev/breadboard/blob/xml-board/packages/xml/index.ts