I’ve wanted more compact syntax for rendering #ViewComponent in #Rails and finally got around to making a proof-of-concept.
Before:
<%= render Admin::HeadingComponent.new(“Hi”) %>
After:
<%= c.heading “Hi” %>
Inspired by the `tag.strong “Hi”` Rails tag proxy.
Curious if others do anything similar!
https://gist.github.com/henrik/d053195e891b08e13c35338a82927f0a
ViewComponents reduce bloat, simplify data, and create reusable consistent frontend styling. Despite these benefits, they're often under-utilized in the Rails community. I've written a blog post outlining an overview of how they work by refactoring a real-world example into isolated ViewComponents.
💎 Check it out 💎
https://joshfrankel.me/blog/viewcomponents-the-missing-view-layer-for-rails/
🤔 random thought—does DHH's recent "system tests are dead" proclamation open the door to ViewComponents (or Phlex, or ?) being stock Rails features? I like ViewComponents because I can test UI things without the browser overhead—even if I only use a component once in my whole app. #RubyOnRails #RSpec #ViewComponent #phlex
Happy to hear that there will be a ViewComponent-related talk by @jeremysmithco at @balticruby on June 13-15 in Malmö! Join us!
#ViewComponent
If you use VSCode and have a lot of View Components, configuring explorer.fileNesting might clean up your `app/components` in the explorer a lot:
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*_component.rb": "_${capture}_component_*.html.erb, ${capture}_component.html.erb, ${capture}_component.js, ${capture}_component_controller.js, ${capture}_component.scss"
},
I've always felt rendering ViewComponent with Rails is a bit too verbose.
Especially if you have namespaces. E.g:
render(Admin::Navigation::Item.new(label: 'Example'))
I've used a helper to make it nicer on 2 projects so far:
vc.admin.navigation.item(label: 'Example')
Maybe make it into a gem?
(Might seem a bit over-engineered on a first glance. But it's something that might be called 100s-1000s of time on a page, so had to make sure it's fast enough.
New on the Honeybadger Developer Blog:
Building reusable UI components in Rails with ViewComponent :ruby:
Harness the power of modularity in Rails. Learn how to build reusable UI components to reduce code duplication and scale your design system.
What do you even do when presented with this situation? Bug in #haml? Bug in #viewcomponent? Bug in my brain?? #ruby
TIL how to capture all the output of a block when doing your own slot like API for #ViewComponent
The trick is to use `viewcontext.capture(data_to_yield, &some_block)`
https://github.com/RolandStuder/til/blob/master/view_component/capture_a_block.md
Ever since using the elegance and simplicity of #Phlex I have been wondering, if I can't reach some of that expressiveness with #ViewComponent : https://rstuder.ch/2023-calling-view-component-instance-methods/
Thoughts on having ActiveRecord queries within a ViewComponent? I've got a sidebar component that's used in several controllers, but not the whole app, and need to load some data for it. I feel like I'm re-inventing React "smart" vs "dumb" components... #ruby #viewcomponent
Suchst Du frische Impulse für deine #Ruby Projekte? ☕ Unser #Tech Kafi am 12. Juni ist die Lösung! Lerne, mit Rails #ViewComponent deinen Code besser zu strukturieren 🛠️. Triff Gleichgesinnte in Bern 🏢 oder online 💻. #Community 🚀
https://www.puzzle.ch/de/blog/articles/2023/06/06/tech-kafi-ruby-viewcomponent
This blog post about #rubyonrails Turbo Streams + #viewcomponent by @jasonyork was helpful to me! It demonstrates how all of the pieces fit together and includes recent changes as of #hotwire turbo-rails 1.4.0 to help rendering, introduced by @joeldrapper
https://predicatemethod.com/posts/using-viewcomponents-with-turbo/
Continuing the exploration of this "previews as unit tests" theme, I wish #ViewComponent previews were written like #RSpec specs. Specifically, I miss using nested contexts as a way to vary the state of components I'm previewing. Someone should look into that.
Exciting times for ViewComponent!
#ViewComponent v3 release candidate is available for testing
https://github.com/ViewComponent/view_component/releases/tag/v3.0.0.rc1
#Lookbook v2 beta is just out, including preview embeds, support for #Phlex components and ActionView partials, and a completely rewritten file watching/live updates system!
https://github.com/ViewComponent/lookbook/discussions/310
And ViewComponent::Form has an updated roadmap to v1
https://github.com/pantographe/view_component-form/issues/5
We'd love to have your feedback on this!
@stevediaconou mind contributing this to the (work in progress) #ViewComponent Cookbook?
https://github.com/ViewComponent/view_component/discussions/1621
