Rails 7.1.5 | eagerLoad | importmaps | controllers in app/views/components/**

[FeanorKingofNoldor]

Hey guys, I have tried to find a solution to load my controllers, i have searched the topics related to my problem through the web but nothing seems to work. I have been trying to get this to work for at least 18 hours now, please someone be so kind and have a look. this is my setup:

app/views/components/alert
├── alert_controller.js
├── component.html.erb
├── component.rb
└── preview.rb

# config/importmap.rb

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/views/components", under: "components"

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

# manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link application.css
//= link_tree ../builds
//= link_tree ../../../app/views/components .js

require_relative "boot"

require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
# require "active_storage/engine"
require "action_controller/railtie"
require "action_mailer/railtie"
# require "action_mailbox/engine"
# require "action_text/engine"
require "action_view/railtie"
require "action_cable/engine"
# require "rails/test_unit/railtie"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Xspacegrow
  class Application < Rails::Application
    # ViewComponent configurations
    config.autoload_paths << Rails.root.join("app", "views", "components")
    config.view_component.preview_paths << Rails.root.join("app", "views", "components")

    # Asset pipeline configuration for component JavaScript
    initializer "app_assets", after: "importmap.assets" do
      config.assets.paths << Rails.root.join('app')
    end
    config.importmap.cache_sweepers << Rails.root.join('app/views/components')

    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.1
    config.log_level = :debug

    # Please, add to the `ignore` list any other `lib` subdirectories that do
    # not contain `.rb` files, or that should not be reloaded or eager loaded.
    # Common ones are `templates`, `generators`, or `middleware`, for example.
    config.autoload_lib(ignore: %w[assets tasks])

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")

    # Don't generate system test files.
    config.generators.system_tests = nil
  end
end

// app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"

// Load standard controllers
eagerLoadControllersFrom("controllers", application)
eagerLoadControllersFrom("components", application)`

`# app/helpers/application_helper.rb
module ApplicationHelper
  def component(name, *args, **kwargs, &block)
    component = name.to_s.camelize.constantize::Component
    render(component.new(*args, **kwargs), &block)
  end

  def component_identifier(name)
    component = "#{name.to_s.camelize}::Component".constantize
    component.identifier
  end
end

the component.html.erb:
<div 
  class="<%= style(variant:, dismissible: dismissible ? :yes : :no) %>"
  data-controller="alert"
  data-alert-debug="true"
  role="alert"
  data-alert-target="container">
  
<% if show_icon %>
  <div class="flex-shrink-0">
    <%= icon icon_name, class: icon_class %>
  </div>
<% end %>

  <div class="flex-1">
    <% if title %>
      <h3 class="font-medium"><%= title %></h3>
    <% end %>
    <div class="text-sm">
      <%= message || content %>
    </div>
  </div>

  <% if dismissible %>
    <button 
      type="button"
      class="absolute right-2 top-2 text-text-secondary hover:text-text-primary"
      data-action="alert#dismiss">
      <%= icon "x-mark", class: "h-5 w-5" %>
    </button>
  <% end %>
</div>](url)

the controller.js:
import { Controller } from "@hotwired/stimulus"

export class AlertController extends Controller {
  static targets = ["container"]

  connect() {
    console.log("Alert controller connected!")
  }

  dismiss() {
    console.log("Dismissing alert...")
    this.containerTarget.remove()
  }
}

# app/views/components/alert/component.rb
module Alert
  class Component < ApplicationViewComponent
    include ViewComponentContrib::StyleVariants
    include IconsHelper
    
    # Make title and message optional by providing default: nil
    option :variant, default: proc { :info }
    option :dismissible, default: proc { true }
    option :show_icon, default: proc { true } 
    option :title, default: proc { nil }
    option :message, default: proc { nil }
    
    def identifier
      self.class.identifier
    end

    # Rest of the component code stays the same
    style do
      base {
        %w[
          relative
          w-full
          rounded-lg
          p-4
          mb-4
          flex
          gap-3
          text-sm
        ]
      }

      variants {
        variant {
          info { %w[bg-blue-50 text-blue-800] }
          success { %w[bg-green-50 text-green-800] }
          warning { %w[bg-yellow-50 text-yellow-800] }
          error { %w[bg-red-50 text-red-800] }
        }

        dismissible {
          yes { "pr-8" }
          no { "" }
        }
      }

      defaults { {variant: :info, dismissible: :yes} }
    end

    private

    def icon_class
      case variant
      when :info then "h-10 w-10"
      when :success then "h-10 w-10"
      when :warning then "h-10 w-10"
      when :error then "h-10 w-10"
      end
    end

    def icon_name
      case variant
      when :info then "information-circle"
      when :success then "check-circle"
      when :warning then "exclamation-triangle"
      when :error then "x-circle"
      end
    end
  end
end

and last:

# app/views/components/application_view_component.rb
class ApplicationViewComponent < ViewComponentContrib::Base
  extend Dry::Initializer
  include ViewComponentContrib::StyleVariants
  include ApplicationHelper
  include IconsHelper

  style_config.postprocess_with do |classes|
    TailwindMerge::Merger.new.merge(classes.join(" "))
  end

  class << self
    def component_name
      @component_name ||= name.sub(/::"Component$"/, "").underscore
    end

    def identifier
      @identifier ||= component_name.gsub("_", "-").gsub("/", "--")	
    end 
    
    def self.identifier
      identifier
    end
  end
end

[boardfish]

@FeanorKingofNoldor Welcome, and thanks for opening this up 👋 Could you share some more info about what's not working here? Are there any error messages you're seeing or behaviour you're expecting that isn't working? It looks like this code relies on a few extra dependencies as well, so a Gemfile would be useful. Could you maybe put this reduced test case into a repo?

[FeanorKingofNoldor]

hey there. my controllers from app/views/components are not being loaded when i look at the page source in the browser. thats my main problem. I have to admit, im fairly new to coding (about 1 year), and mostly in C and C++ for microcontroller.
I followed the tutorial of a guy on YT, and he used this script to install ViewComponents:

rails app:template LOCATION="https://railsbytes.com/script/zJosO5"

this is the tutorial im referring to:
https://www.youtube.com/watch?v=veiOaH0tBI8&t=1760s

to be fair, he used esbuild instead of importmaps, but since my importmaps setup works fine, i thought that wouldnt be a big problem.

forgive me for not knowing what exactly you mean by that?

Could you maybe put this reduced test case into a repo?

heres my Gemfile:

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.2.2"

# Core Rails gems
gem "rails", "~> 7.1.5"
gem "sprockets-rails"
gem "pg", "~> 1.1"
gem "puma", "~> 6.0"
gem "importmap-rails"
gem "turbo-rails"
gem "stimulus-rails"
gem "tailwindcss-rails"
gem "bootsnap", require: false
gem "foreman", "~> 0.87.2"
gem "request_store"

# View Components
gem "view_component", "~> 3.20"
gem "view_component-contrib", "~> 0.2.3"
gem "dry-initializer", "~> 3.1"

# Authentication & Authorization
gem "devise"
gem "pundit"

# Background Processing & Real-time
gem "sidekiq"
gem "redis"
gem "redis-client"
gem "redis-namespace"

# Charting
gem "chartkick"

# Environment & Configuration
gem "dotenv-rails"

# Windows does not include zoneinfo files
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

group :development, :test do
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
  
  # Testing
  gem "rspec-rails"
  gem "factory_bot_rails"
  gem "faker"
  gem 'timecop'
  
  # Debugging
  gem "pry-rails"
  
  # Security
  gem "brakeman", require: false
  
  # Linting
  gem "rubocop", require: false
  gem "rubocop-rails", require: false
  gem "rubocop-rspec", require: false
end

group :development do
  # Development tools
  gem "web-console"
  gem "better_errors"
  gem "binding_of_caller"
  gem "annotate"
  
  # Performance
  gem "bullet"
  
  # Documentation
  gem "yard"
  
end
gem "tailwind_merge", "~> 0.13.3"

I really do like the concept of ViewComponent, but also, I really like the idea of having the controllers in the same folder like the ViewComponents. and I'd love to use it that way. If its easier to switch to esbuild, I can do that as well.

Thanks in advance, Feanor.