Vident is a Ruby gem designed to help developers create and maintain view component libraries for their applications.

It provides a number of helpful features for working with Stimulus JS when using either ViewComponent or Phlex.

With Vident, developers can create more flexible and maintainable UI libraries. It provides:

  • a Component mixin to add to components, which provides a helper method to easily create the “root element” of the component, allowing classes and stimulus attributes to be added to the element easily from the render site,
  • a TypedComponent mixin which allows for the definition of typed attributes, ensuring that the correct types are passed to the component parameters,
  • it provides a number of helper methods to make configuring and adding Stimulus to your view as easy as coding in Ruby. Controllers, targets, actions, classes and outlets are all supported.

With this suite of features, developers can easily create and maintain a component library that is both flexible and maintainable.

<!-- render the Greeter ViewComponent (that uses Vident) -->
<%= render ::GreeterComponent.new do |greeter| %%>
  <%# this component has a slot called `trigger` that renders a `ButtonComponent` (which also uses Vident) %%> 
  <% greeter.trigger(
       # The button component has attributes that are typed
       before_clicked: "Greet",
       after_clicked: "Greeted! Reset?",
       
       # A stimulus action is added to the button that triggers the `greet` action on the greeter stimulus controller.
       # This action will be added to any defined on the button component itself
       actions: [
         greeter.action(:click, :greet),
       ],
       
       # We can also override the default button classes of our component, or set other HTML attributes
       html_options: {
         class: "bg-red-500 hover:bg-red-700"
       }
     ) %%>
<% end %%>