Improve JSON documentation & output

I couldn’t find any examples of what the JSON format looked like, and I wanted to be sure the format was relatively independent of Craft itself. However, the JSON uses node IDs instead of nesting the nodes themselves, which I find confusing.

For example, with these Frame contents:

<Frame>
  <Canvas is={CraftContainer}>
    <CraftComponent>
      <TextComponent text="my text here" />
    </CraftComponent>
  </Canvas>
</Frame>

The JSON output from query.serialize() is:

{
  "canvas-ROOT": {
    "type": {
      "resolvedName": "CraftContainer"
    },
    "isCanvas": true,
    "props": {},
    "displayName": "Canvas",
    "custom": {},
    "nodes": [
      "node-yxVcZGJj"
    ]
  },
  "node-yxVcZGJj": {
    "type": {
      "resolvedName": "CraftComponent"
    },
    "props": {
      "children": [
        {
          "type": {},
          "props": {
            "text": "text component"
          }
        }
      ]
    },
    "displayName": "CraftComponent",
    "custom": {},
    "parent": "canvas-ROOT",
    "_childCanvas": {
      "d02fab54-ddf2-4356-b79d-5660d54915df": "canvas-u-wv625gX"
    }
  },
  "canvas-u-wv625gX": {
    "type": {
      "resolvedName": "CraftContainer"
    },
    "isCanvas": true,
    "props": {},
    "displayName": "Canvas",
    "custom": {},
    "parent": "node-yxVcZGJj",
    "nodes": [
      "node-aKYJYqPZ0"
    ]
  },
  "node-aKYJYqPZ0": {
    "type": {},
    "props": {
      "text": "my text here"
    },
    "displayName": "TextComponent",
    "custom": {},
    "parent": "canvas-u-wv625gX"
  }
}

I would expect something more like:

[
  {
    "type": "CraftContainer",
    "nodes": [
      {
        "type": "CraftComponent",
        "nodes": [
          {
            "type": "TextComponent",
            "props": {
              "text": "my text here"
            }
          }
        ]
      }
    ]
  }
]

It would also be nice to have some examples of implementing custom serializers, like SlateJS does. I’m currently using SlateJS as a WYSIWYG React editor, but I’d love to switch to Craft for the nicer drag & drop functionality.

[Hyperkid123]

@hdaggett @prevwong I am intrigued by this library. A hierarchical output of the state would be really nice. I think it can be done in consumer libraries/apps, but I also think that for generating the UI from the state, the nested JSON would be a preferable format than a flat object.

I would love to try it out and use this library for a form builder component for dynamic form library we are developing using in our projects. So I am more than willing to create a PR with this feature if you haven’t started working on it yet.

[prateekrastogi]

@hdaggett @Hyperkid123 PR is much needed herein