Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve JSON documentation & output #13

Open
hdaggett opened this issue Jan 13, 2020 · 6 comments · May be fixed by #17
Open

Improve JSON documentation & output #13

hdaggett opened this issue Jan 13, 2020 · 6 comments · May be fixed by #17

Comments

@hdaggett
Copy link

@hdaggett hdaggett commented Jan 13, 2020

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.

@prevwong

This comment has been minimized.

Copy link
Owner

@prevwong prevwong commented Jan 14, 2020

Thank you for the suggestion. I like the idea of having the cleaner serialised output, will look into it for sure!

Unfortunately, we currently do not support custom serialisers. If you'd like, could you file a new feature request for it ?

@prateekrastogi

This comment was marked as spam.

Copy link

@prateekrastogi prateekrastogi commented Jan 14, 2020

Unfortunately, enlightenment has no virtue here...

@Hyperkid123

This comment has been minimized.

Copy link

@Hyperkid123 Hyperkid123 commented Jan 15, 2020

@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.

@hdaggett

This comment has been minimized.

Copy link
Author

@hdaggett hdaggett commented Jan 15, 2020

@Hyperkid123 Yes, please create a PR if @prevwong isn't already on it! A cleaner, hierarchical JSON format would make this much more powerful.

@prateekrastogi

This comment has been minimized.

Copy link

@prateekrastogi prateekrastogi commented Jan 15, 2020

@hdaggett @Hyperkid123 PR is much needed herein

@prevwong

This comment has been minimized.

Copy link
Owner

@prevwong prevwong commented Jan 16, 2020

@Hyperkid123 Sure, go ahead! 👌🏽

@prevwong prevwong assigned prevwong and unassigned prevwong Jan 16, 2020
@Hyperkid123 Hyperkid123 linked a pull request that will close this issue Jan 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.