JSON schema? about svgson

[danmarshall]

🥇

The Maker.js GitHub is ok for general discussion 😃

[elrumordelaluz]

thanks @danmarshall, super happy about your words!

I am wondering if you have a JSON schema for the output format of the parse function?

Not really but thougt about it.
The output folllows this tree structure:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Element name, like svg, circle, line…"
    },
    "type": {
      "type": "string",
      "description": "Element type like element, text…"
    },
    "value": {
      "type": "string",
      "description": "Element value, used in text nodes."
    },
    "children": {
      "type": "array",
      "description": "List of elements children",
      "items": { "$ref": "#" }
    },
    "attributes": {
      "type": "object",
      "description": "Attributes for the element"
    }
  }
}

I think I'll add something like this in the Readme.

However you could transform that output through transformNode like here where name is transformed into name and attributes into props as well as removing children property in case the Array is emapty.

Please let me know your use case / needs so I can understand if could be useful to add something related.

[danmarshall]

First, I was wondering what are the possible values for the type property. I see element, but didn't know if other options would be fragment or text.

Second, I was also looking for a json format for some svg tools, so I also might adopt the same format you have 🤓.

Thirdly - it might make sense to make the serialize function a standalone project? That way other tools based on the format do not need the parse code. Just a thought 🤷‍♂️

[elrumordelaluz]

First, I was wondering what are the possible values for the type property…

Values for type could be element or text

Second, I was also looking for a json format for some svg tools…

Super curious about those tools! 🤓

Thirdly - it might make sense to make the serialize function a standalone project?

You mean the stringify one? Could absolutely make sense. The thing I am thinking is that svgson@^3 it should be tree shakable and you could import like

const { stringify } = require('svgson')

[danmarshall]

Also, I am using TypeScript. So, I will also be doing a conversion from from JSON schema to TypeScript interface.

I may use it in https://github.com/Microsoft/maker.js
My current build is not es6 based, so I will not be using tree shaking for a while.

[elrumordelaluz]

Also, I am using TypeScript

So you think is necessary to have ths Schema or it's enough what showed before?

I may use it in https://github.com/Microsoft/maker.js

Awesome, I started playing with maker.js trying to switch this library in something more accurate but (at least what I tried) didn't work for me. If you are interested in another thread/issue I can expose the idea, needs, etc.

My current build is not es6 based, so I will not be using tree shaking for a while.

Right, so you think could work something like svgson-stringify module? The only thing I am thinking in case remains also inside svgson package, the maintenance part.

[danmarshall]

I can use what you've already shared. I thought having a formal schema might also be an easy way to fully document it :)

Please open an issue on Maker.js - would love to know what didn't work for you. 👍

Yes, svgson-stringify could be cool, but don't want to add a maintenance burden.

[elrumordelaluz]

I thought having a formal schema might also be an easy way to fully document it

Will go with this to update the documentation.

Please open an issue on Maker.js

sure I will, however I think there isn't an issue directly related on maker.js, more on my approach.

Sorry to piggyback on this thread. I couldn't find anyplace else to ask a question. This looks really useful to me. I am a bit new to coding. I am working on a google polymer based app. I think in order to use this I would need to turn this into a web component. Is that something that a novice like me might be able to tackle?

[elrumordelaluz]

hi @jmeurer986 it's ok to ask questions as an issue here, if this will become a large thread maybe better to open a new one. I think you could create an svgson web-component without problem.