An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Rails ViewComponent helper
Ruby Dev's like me don't like verbosity no matter how small, syntactic sugar is one of the underlying attractions of Ruby.
Rails ViewComponents are a superb addition to Rails especially when paired with utility style CSS like Tailwind.
However, repeatedly writing these render
's gnaws at my OCD.
Constants in a view template, :shock:, the overloaded render
method, all those parens!
render(SomeAwesomeComponent.new) do |component| Render(AlertComponent.new(type: 'success') do |component| render(ButtonComponent.new(classes: 'justify-end ml-2 items-start') endend
What if I told you, you could create a helper, obvious right?
more awesome, more lowercase, less parens, easier on the eyes
component :some_awesome_component do |awesome| component :alert, type: 'success' do |alert| component :button, classes: 'justify-end ml-2 items-start' endend
I chose to use component
but if you want to go super succinct, you could even do
vc :some_awesome_component do |awesome| vc :alert, type: 'success' do |alert| vc :button, classes: 'justify-end ml-2 items-start' endend
This could be yours for the low low price of... reading below.
def component(name, context: nil, **args, &block) return render_component_in(context, name, **args, &block) if context render component_class_for(name).new(args), &block end def render_component_in(context, name, **args, &block) component_class_for(name).new(args).render_in(context, &block) end private def component_class_for(path) name, namespace = path.to_s.split('/').reverse file_name = "#{name}_component" component_name = file_name.classify namespace ||= namespace(file_name) return "#{namespace.capitalize}::#{component_name}".constantize unless namespace == 'components' component_name.constantize end
What's more if you follow some design pattern like atomic, and structure your components as such, you can create a separate namespace
method to discover the component path allowing you to communicate your design system like
organism :some_awesome_component do |awesome| molecule :alert, type: 'success' do |alert| atom :button, classes: 'justify-end ml-2 items-start' endend
You can find the RailsByte here https://railsbytes.com/templates/xjNsDY
Original Link: https://dev.to/scottbarrow/rails-viewcomponent-helper-ibn
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To