feature request: Add "props" property on jsx node types

[alexandernanberg]

Subject of the issue

AFAIK there is no way to pass props to the component from a plugin without inlining it in the value e.g. <Image foo="bar" />. What I'd like to see is the ability to add props with a node.props field as well. That would be helpful if you need to pass props that are an object for example.

Plugins would then be able to do this:

node.type = 'jsx'
node.value = `<MyComponent />`
node.props = {
  foo: { bar: 'baz' },
}

[johno]

Interesting 🤔. Would you then expect the JSX output to be?:

<MyComponent foo={{ bar: 'baz' }} />

Also, could you elaborate on your use case a bit?

[alexandernanberg]

Yeah exactly!

I guess the use case would be whenever you need to pass a prop that is an object. In my specific use case I'm trying to emulate gatsby-remark-images but with a custom React component instead of a regular <img /> element. My current solution.

There might be a better solution to my problem that I'm unaware of 😄

[alexandernanberg]

Just noticed that children of the component aren't presented as children in the AST. This makes it a bit difficult to work with imo.

So

<Column width="50%">
  
  ![](../path-to-image.jpg)

</Column>

is parsed as

{ type: 'jsx',
  value: '<Column width="50%">',
  position: [Position] },
{ type: 'text', value: '\n' },
{ type: 'element',
  tagName: 'img',
  properties: [Object],
  children: [],
  position: [Object] },
{ type: 'text', value: '\n' },
{ type: 'jsx', value: '</Column>', position: [Position] },

I might be unaware of any underlying issues but I think it would be a lot easier if it instead parsed to

{ type: 'jsx',
  value: 'Column',
  props: {width: '50%' },
  position: [Position],
 children: [
   { type: 'text', value: '\n' },
  { type: 'element',
    tagName: 'img',
    properties: [Object],
    children: [],
    position: [Object] },
  { type: 'text', value: '\n' },
 ]
},

[johno]

Based on this comment this is something we can address in #241 for 1.1.0.