ViewComponent Cookbook

[Spone]

I'm trying to gather recipes and patterns that could be a starting point for publishing a Cookbook, either in the docs or separately. I'll post a first list below:

Feel free to add links and examples, or suggest better phrasing for the links above! I'll update this message.
Once we reach enough content, I'll figure out where to publish it.

ping @boardfish since we discussed this a couple times already ;)

Slots

• Inject params to a slot
• Conditional renders_many slot
• "Fallback" slots
• Render slots by default
• Adding methods on the component instance, as an alternative to slots
• "Nested" slots
• Forwarding slots to subcomponents

Previews

• Access to URL helpers in previews

Helpers

These helpers provide syntactic sugar around component rendering:

• Generic component helper
• Dynamic *_component helper with method_missing

Ruby

• Using dry-effects to pass context around
• Base component class with dry-initializer
• Code organization (extended sidecar)
• Wrapped components

CSS

• postcss-modules (blog post)

Javascript

• #controller_name for Stimulus
• Using ViewComponents with Turbo

Forms

Waiting for your contributions!

[boardfish]

@bradgessler's component helper might want a place in here. I'll set aside some time to go digging for some more of these, but you seem to have captured most of the ones we'll want to make some noise about. Nice work!

[Spone]

Added!

[joelhawksley]

@palkan got any Evil Martians VC tricks we might want to include here?

[palkan]

Sure, I'd be glad to add some (I see our #component helper is already there).

• Ruby:

  • Using dry-effects to pass context around: https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components#effects
  • Base component class with dry-initializer: https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components#base-classes
  • Code organization (extended sidecar): https://github.com/palkan/view_component-contrib#organizing-components-or-sidecar-pattern-extended
  • Wrapped components: https://github.com/palkan/view_component-contrib#wrapped-components (haven't been using it lately though)

• CSS:

  • postcss-modules: https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components#css (or https://github.com/palkan/view_component-contrib#isolating-css-with-postcss-modules)

• JS:

  • #controller_name for Stimulus: https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components#js

/cc @baygeldin

[Spone]

Added to the original post, thanks!

[boardfish]

I've got some fresh wizardry around nested slots. One more for the list?