Example source code in Previews

[AlecRust]

Feature request

In our Styleguide I would like to display example source code under each component, so it's quick and easy for other developers to understand how to use a component or one particular variant of a component.

Have you considered providing a helper method for this, or building it in to the Previews feature?

e.g. such a helper could output a string containing the contents of the associated method in:

test/components/previews/address_component_preview.rb

Or if the example was in a view file, it would output the contents of:

test/components/previews/address_component_preview/default.html.erb

This could then be used in a <pre> underneath the rendered version of each component preview.

Motivation

Every so often I revisit migrating our home-grown component styleguide over to view_component Previews. With recent developments I'm now close to taking the plunge but this is one hurdle that seems like it might be suited to being provided by this gem.

Here's an example of what we're currently doing:

[joelhawksley]

@AlecRust this is lovely! I'd love to see us provide something like this for ViewComponent. Would you like to pair on it? If so, send me an email: joelhawksley@github.com ❤️

[allmarkedup]

@AlecRust We are currently doing this with ViewComponent using a patched version of the Method source gem. The patch is literally just to change one line to remove file caching - our fork is here: https://github.com/allmarkedup/method_source

Still a work in progress but it look like this:

It's not perfect because often I find the rendering for the preview might use a few helpers for generating dummy data that I wouldn't use in a real-world example. So the next iteration will also hopefully have support for pulling in code examples from method-related comments in the preview files (or possibly the component files themselves) - something which should also be possible using that method source gem, I believe.

Of course I'd love if something like this was natively supported in ViewComponent but just a heads up that you can still hack it in there if you need it :-)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[joelhawksley]

@AlecRust @allmarkedup I'd love to see this added to ViewComponent if either of you'd be interested in taking it on!

[johannesengl]

@joelhawksley Happy to help out on this one. What would be the best way to approach this? Should we quickly sync to refine the requirements for this feature?

[joelhawksley]

@johannesengl sure thing! Email me: joelhawksley@github.com

[johannesengl]

Created a first draft pr for this #667 which is still work in progress.

[johannesengl]

The PR got merged. @Spone @joelhawksley Should we close this issue?