Addon-docs: Dynamic Source rendering for React

[shilman]

Issue: #8342 #8444

What I did

Work in progress for rendering JSX in the code snippet, based on https://github.com/storybookjs/addon-jsx (cc @hipstersmoothie). Now, for React (and eventually all view layers), the JSX of the story function output is rendered to an example snippet dynamically.

This solves the following issues:

• Show controls/knobs values dynamically Addon-docs: Show source block with generated knob values #8342
• Fix imported story functions from CSF into MDX Addon-docs: Bad source for CSF with MDX Docs #8444
• Fix Story.bind({}) source for args stories

Still to be done:

• Expanded test cases
  • Handle large objects/arrays gracefully
  • Handle corner cases like memo and refs
• Figure out source customization
• Figure out framework compatibility path forward

What I need

• Feedback on the approach and test cases we need to worry about to make this robust
• Volunteers to help port this to non-React frameworks

How to test

See official-storybook

[shilman]

Merging this and releasing so that React users can start trying it out to keep things moving.

[ndelangen]

I love this, and would love it even more, if you could switch to the HTML output as well somehow!

❤️ ♥️ ❤️

[maggiewachs]

@shilman is there an open issue that's tracking progress for non-React frameworks? Specifically, I'm looking for the code block to work with the web components build. (Many thanks for all of your work on this project! We're really digging it at Filament Group so far.)

[shilman]

Thanks @maggiewachs! There is now 😅 #11588

I had somebody else ask about lit-element support yesterday & volunteer to contribute, so hopefully we can get that going in 6.1

[ecarrera]

It will be really useful @shilman, great!! ❤️ I was thinking about it today.