Storybook: info addon cannot get source when using render props

[amacleay]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

_Please provide issue details here - What did you expect to happen? What happened instead?_

The Source Code section in the Info addon is unable to show source code when it is in a render prop.

Why would this be a useful feature?

I would like to document a component which is a React consumer:

<SessionConsumer>
  { (session) => <h1>Hello {session.username}!</h1> }
</SessionConsumer>

However, the info addon chooses to decompose the React element it's received, rather than just parse the text out of the source code. I gather it does this to enable MaxProps etc and perhaps to standardize spacing?

I wonder if these features are worth the difficulty they introduce: namely, that the info addon can only show source code that can be trivially traversed as react element trees. It seems to me that the 95% use case for the source code panel is to see _identically_ the code in the story. Alternatively, should there be another (mutually exclusive) option to try to provide the source from the story?

Steps to reproduce

Can be seen here: https://github.com/amacleay/storybook/tree/render-prop-source

• Pull down the repro repo
• Set up: yarn bootstrap
• Go into examples/cra-kitchen-sink and run it: yarn storybook
• Look at the new example: with info and a render prop
  
  
  
  • Note that the source in the Info tab does not show the full source
  
  

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react : 4.0.0-alpha.10
• @storybook/[email protected]

Affected platforms

All

Screenshots / Screencast / Code Snippets (Optional)

const PassthroughRenderProp = ({ children }) => children();
...
  .add(
    'with info and a render prop',
    withInfo('The source code should be visible')(() => (
      <PassthroughRenderProp>
        {() => (
          <div>
            <span>Check it</span>
            Shouldn't my source code be visible?
          </div>
        )}
      </PassthroughRenderProp>
    ))
  )

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[raygesualdo]

I'm seeing the same behavior. Any way we could get this looked at? I can help, if need be.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[LimWJie]

Why is this closed?
This is still an issue in version 5.1.9