React-styleguidist: Recursive rendering of nested props

[n1313]

Sometimes, the components may have a complicated prop structure. For example, you may have a set of simple components (like Button, Textfield, and Checkbox) that are combined into a bigger, more complicated component (like LoginForm), and you'd like to keep its internals opaque. This approach often leads to properties of the "internal" components being "lifted" into the parent component, and may result in a somewhat complicated structure of nested props. Objects of arrays of objects of arrays, etc.

The problem with this is that RSG currently does not provide a way to render such a structure in full detail, with prop names, types and comments on every level. This is understandable, because rendering of arbitrary trees of unbounded depth is not an easy task. Nonetheless, I would like to discuss this topic with the community to understand if this really is a problem that needs solving, and if there is a way to improve the situation in some way.

So, dear community,

• is recursive rendering of nested props important?
• is there a way to render an arbitrary tree of props in a nice way that fits the current UI of RSG?
• given that unbounded trees are difficult, is there a reasonable limitation we could impose on it to make the task easier? For example, rendering the first N levels of props could be sufficient for the majority of the projects (especially if N is made configurable)

Any input is appreciated.

[sapegin]

Do you have any good examples?

I think if we’re going to implement it we should find the simplest possible way to do it. For example I don't think an option to define maximum level would be useful ;-) we should probably just render one or two levels. But we should collect more real world examples first.

[n1313]

I don't have any examples for nested properties in technical documentation. We could take something like comment threads on Reddit or a similar website as an example of displaying infinitely nested data.

And I think that if we are going to implement recursive rendering with depth restriction then making this depth configurable will come at almost no cost. And if we get the default depth limit wrong then making it configurable will allow people to modify it for their projects without needing to create tickets on github. Easy win, no?

[sapegin]

I mean examples of components ;-)

Easy win, no?

I don’t think so — it very quickly will be unredable.

[n1313]

unreadable

Not sure I understand. If someone has -- for some reason -- a project with a 10-level deep tree of properties, and wants to display all 10 levels of them, then why should RSG interfere with that and decide how many of them it is okay to display? RSG is not a code style police, is it?

[sapegin]

Do you remember LiveJournal? They allow to nest comments infinitely. I don’t want to provide an option to switch UI to a terrible mode if we can avoid it ;-)

[sapegin]

Anyway it’s to early to discuss it.

[n1313]

I'm lost. Why is it too early to discuss it?

[sapegin]

Because we don’t know what we should do: how important this issue is, what are the real world use cases, etc.

[n1313]

The real world use case is in my current project: a configuration object for a complex data table. The object is like this:

  config: React.PropTypes.objectOf(
    React.PropTypes.arrayOf(
      React.PropTypes.shape({
        id: React.PropTypes.string.isRequired,
        type: React.PropTypes.oneOf([
           ...
        ]),
        ...
      })
    )
  ),

[KatGr]

Hi all,

I am trying to document a project at work using styleguidist but I found a problem which seems to fit in here. The problem occurs when I am trying to render a tree. In fact, I have different tree Items in which everyone can have another treeItem as a prop but it only shows the first "layer" of tree Items.

It would look something like this:

<Tree title:"Tree">
  <TreeItem title="Item1">
    <TreeItem title="Item2"/>
    <TreeItem title="Item3"/>
  </TreeItem>
  <TreeItem title="Item4"/>
</Tree>

This example only shows Item1 and Item4.
Could this be the problem you talk about or is this another issue?
If yes, is there any way to solve this at the moment :O ?

[n1313]

@KatGr we are talking about rendering props of the elements, not elements themselves. I don't think your problem is related to this discussion (and it looks like your <TreeItem> doesn't render their children the way <Tree> does).

[n1313]

@sapegin In fact, even just having a shape with an enum field is enough to find yourself in a situation where something like recursive rendering is needed, because you don't get to see the allowed values for that field:

[oleksii-udovychenko]

Any luck with this?

[sapegin]

I’m closing this for now. Feel free to submit a pull request if you need this.