How do you organize components?

[danturu]

Could you please tell us how do organize components in GitHub?

In React development there is a common rule - one component, one folder. For example in my daily work we have about 1000 components and it works great. In my recent Rails project I do the same:

If I follow the rule above I repeat component name twice

module ApplicationHeader
  class ApplicationHeader < ApplicationComponent
  end
end

I don't do

module ApplicationHeader
  class Component < ApplicationComponent
  end
end

because we found what it's simplify searching using ctrl+p (jump to file).

Any tips? Should we add some documentation?

[joelhawksley]

@rosendi a couple folks have brought up this same concern, both publicly and privately.

With the convention to organize class files in the module/class_name.rb format, giving each component its own folder unfortunately leads to naming issues as you've identified.

For now, we've been pretty aggressive about using modules to namespace / group our components.

We have app-specific components in app, and components we plan to extract to a gem (that don't depend on any app-specific code) in lib.

I'm hoping we can share some of these components with the public soon.

[danturu]

We have app-specific components in app, and components we plan to extract to a gem (that don't depend on any app-specific code) in lib.

We do exactly the same in our React app. We have a UI component library which we extracted into a npm package and the app-specific components which build on top the UI library. In our views we use layout-specific components (like you do I think - https://primer.style/css/utilities/layout), so our views don't have stylesheets at all.

For example our UI library:

With the convention to organize class files in the module/class_name.rb format, giving each component its own folder unfortunately leads to naming issues as you've identified.

In js we create an index.js file for each component which re-exports component and we can do: import Button from 'ui/button', instead of import Button from 'ui/button/button.

For now, we've been pretty aggressive about using modules to namespace / group our components.

Ideally a component should be self-packed, i.e. all the assets, js, css related to the component live together. I would say the component itself is a combination of that files. We found it very useful for growing apps. It would be messy to put all the files at the same level.

You mentioned before that you organize components by a feature, e.g PullRequest::Item. In our React app we use Fractal Project Structure - https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure but it doesn't suit Rails apps, because Rails has a flat structure.

I'm curious about that questions because currently I’m working on a new rails app I want 1) keep my components aligned as much as possible with the official gem and migrate to ActionView::Component later 2) bring best practices from the modern frontend development to Rails development.

Do you recommend to unwrap components to the same level folder? But if a component has images, svgs, where would you put them? In my example for each component I have a special folder called assets. One of way would prefix component's assets with the component name, e.g select_arrow.svg for the Select component and keep it with js, css, rb. All in all I think it would become messy for a big apps.

[joelhawksley]

@rosendi that's all super interesting.

What I like about the approach you're suggesting is how it leverages encapsulation to limit the scope of CSS/JS to the component. I'd love to see a proof of concept for how this might be done in practice.

Until we can provide encapsulation of sibling assets, I'm wary of including them in the same folder, as doing so would imply a relationship to the component that isn't enforced programmatically.

[anhari]

I think one approach that might work - although maybe a bit heavy handed - for encapsulating the sidecar CSS/JS would be:

• Wrapping the component in a div with a generated hash class at compile time
• Wrapping the css in a rule with the generated hash class, and modifying it to work with postcss-nesting
• Serving up the JS via webpacker

[nicolas-brousse]

👋 I'm currently doing some tries with a proof of concept application.

I initially worked on a custom FormBuilder to proxy form helper inside components. And by the same time I used this app to try a component organization.

I currently have the following structure.

app/components
├── alert
│   ├── alert.css
│   ├── alert.html.erb
│   ├── alert_component.rb
│   └── alert_controller.js
├── application_component.rb
└── button
    ├── button.css
    ├── button.html.erb
    ├── button_component.rb
    └── button_controller.js

app/javascript
├── channels
├── components.js
├── css
│   ├── _components.css
│   └── application.css
├── images
└── packs
    └── application.js

• css is loaded with @import in app/javascript/css/_components.css
• stimulus controllers are loaded dynamically in app/javascript/component.js
• I try to check if there is a way to have app/components/button/button_component.rb load ButtonComponent class without extra Button module (Particular usage of collapse method fxn/zeitwerk#111)

[joelmoss]

I'd love to see a config option to use directory based components...

app/components
|-- alert_component.rb
|-- alert
    |-- index.html.erb
    |-- index.css
    |-- index.js

I think that is much cleaner, otherwise we end up with fat directories. :(

I'd be happy to submit a PR if this is something that would be accepted.

[PedroAugustoRamalhoDuarte]

This is a excellent idea. A shorter sidecar generator, we have already this option? I found an example like that in the docs, but i cannot find the generator for that: https://viewcomponent.org/guide/javascript_and_css.html#stimulus

[mickenorlen]

Here's a way to dynamically have components with and without directories, while maintaining short namespaces.

app/components
...
└── form

    # Without directory
    form_field_component.rb

    # In own directory  
    └── form_component   
        ├── form_component.rb
        ├── form_component.css
        ├── form_component.html.erb
    ...

Form::FormFieldComponent.new
Form::FormComponent.new

---

Updated!

1. Loop through nested component paths in config.to_prepare. No need to restart server on file updates!

to_prepare, used eg here

"Registers a callback that will run once at application startup and every time the code is reloaded."

application.rb

config.to_prepare do
  require_dependency(Rails.root.join('lib', 'models', 'view_component_namespace_delegator.rb'))
  Dir.glob(Rails.root.join('app', 'components', '**', '*_component', '*_component.rb')).each do |file|
    ViewComponentNamespaceDelegator.apply_shorthand(file)
  end
end

2. Apply shorthand namespace delegation.

Form::FormComponent.new => Form::FormComponent::FormComponent.new

/lib/models/view_component_namespace_delegator.rb

module ViewComponentNamespaceDelegator
  def self.apply_shorthand(file)
    component_class_name = File.basename(file, ".rb").classify
    folder_path = File.dirname(file)
    folder_rel_path = Pathname.new( folder_path ).relative_path_from( Pathname.new( Rails.root.join('app', 'components') ) ).to_s
    folder_namespace = folder_rel_path.classify
    folder_module = folder_namespace.constantize

    if !folder_module.method_defined?(:new) && component_class_name == folder_namespace.split('::').last
      folder_module.define_singleton_method(:new) do |*args|
        "#{folder_namespace}::#{component_class_name}".constantize.new(*args)
      end
    end
  end
end

[mickenorlen]

Updated @joelmoss What do you think? ^^

[joelmoss]

Since my comment, I've changed how I organise my components...

app/components
|-- alert
    |-- component.rb
    |-- component.html.erb
    |-- component.css
    |-- component.js

Which is supported out of the box.

[johannesschobel]

what is your command / generator to create this structure?

[DRBragg]

We're organizing our components in the same way as @joelmoss is and it's been working great. We even adjusted the generators to spit out that structure by default.

[benkoshy]

I'll throw in my two cents, as well as my current approach:

I would very much prefer, like @danturu seems to approach it - for a parent component, and all it's associated child components - to be placed in the same folder.

./components
├── /feed_component
│   ├── line_item_invoice_state_component.html.erb
│   ├── line_item_invoice_state_component.rb
│   ├── line_item_issue_state_component.html.erb
│   ├── line_item_issue_state_component.rb
│   ├── project_state_component.html.erb
│   └── project_state_component.rb
├── feed_component.html.erb                  # outside the `feed_component` folder :'( - not preferred.
├── feed_component.rb                        # outside the `feed_component` folder :'(

# namespacing can get messy if we go more than one level deep
class FeedComponent::LineItemInvoiceStateComponent < ViewComponent::Base
    def initialize(line_item:)
      # etc
    end
end

# feed_component.html.erb
<%= render(FeedComponent::LineItemIssueStateComponent.new(line_item: nil)) %>
<%= render(FeedComponent::LineItemInvoiceStateComponent.new(line_item: nil)) %>
<%= render(FeedComponent::ProjectStateComponent.new(line_item: nil)) %>

Is there a canonical way to organise child components (into sidecars)?