How to configure stimulus using the new rails 7 asset pipeline

[brunoprietog]

Feature request

Hello, how could this be done? In the javascript documentation the configuration needed to use webpack is indicated, but I am interested in using stimulus using importmap and sprockets, as it will be in rails 7 by default, using the asset pipeline.

Could this be added to the documentation?

Thanks!

Motivation

Motivated by those post by DHH:

• Modern web apps without JavaScript bundling or transpiling
• Rails 7 will have three great answers to JavaScript in 2021+

[joelhawksley]

@brunoprietog I'd be happy to add it to the documentation. Are you able to look into this?

[liaden]

I got this hooked up today. To do this you should:

1. Make sure you are using this change which is in version 0.5.2.
2. Add pin_all_from "app/components" to config/importmaps.rb
3. Add Rails.application.config.assets.paths << "app/components" to config/initializers/assets.rb
4. Add Rails.application.config.assets.debug = true to config/initializers/assets.rb. I double checked this one by removing it, and sadly it is needed. Maybe there is a better configuration that would alleviate this?
5. Add config.assets.check_precompiled_asset = false to config/environments/development.rb. Same as item 4, but without this we get an error page.

I was initializing my component with be rails g component hello_world --sidecar --stimulus for what it is worth.

[seanharmer]

I'm struggling to get this working with Rails 7 using the esbuild approach too. So far I've had to put the view_component stimulus controllers within the app/javascripts hierarchy. esbuild complains if I add import "../components" to the application.js file.

I got this hooked up today. To do this you should:

1. Make sure you are using this change which is in version 0.5.2.
2. Add pin_all_from "app/components" to config/importmaps.rb
3. Add Rails.application.config.assets.paths << "app/components" to config/initializers/assets.rb
4. Add Rails.application.config.assets.debug = true to config/initializers/assets.rb. I double checked this one by removing it, and sadly it is needed. Maybe there is a better configuration that would alleviate this?
5. Add config.assets.check_precompiled_asset = false to config/environments/development.rb. Same as item 4, but without this we get an error page.

I was initializing my component with be rails g component hello_world --sidecar --stimulus for what it is worth.

Maybe this needs to be added in app/assets/config/manifest.js?
//= link_tree ../../components .js

I think you also need to set the cache_sweeper to refresh the importmap: https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test

I'm struggling to get this working with Rails 7 using the esbuild approach too. So far I've had to put the view_component stimulus controllers within the app/javascripts hierarchy. esbuild complains if I add import "../components" to the application.js file.

I don't have a problem when using esbuild.

In app/javascript/controller/index.js I add an import like this:
import AlertController from "../../components/alert_controller";
and then I can register it:
application.register("alert", AlertController);

[chunlea]

I come up with a solution based on https://github.com/hotwired/stimulus-rails/blob/main/lib/tasks/stimulus_tasks.rake#L29-L46. I use esbuild with jsbundling-rails.

So I added a view_component.rake to my project, with those content:

# frozen_string_literal: true

namespace :view_component do
  namespace :stimulus_manifest do
    task display: :environment do
      puts Stimulus::Manifest.generate_from(Rails.root.join('app/components'))
    end

    task update: :environment do
      manifest =
        Stimulus::Manifest.generate_from(Rails.root.join('app/components'))

      File.open(Rails.root.join('app/components/index.js'), 'w+') do |index|
        index.puts '// This file is auto-generated by ./bin/rails view_component:stimulus_manifest:update'
        index.puts '// Run that command whenever you add a new controller in ViewComponent'
        index.puts
        index.puts %(import { application } from "../javascript/controllers/application")
        index.puts manifest
      end
    end
  end
end

if Rake::Task.task_defined?('stimulus:manifest:update')
  Rake::Task['stimulus:manifest:update'].enhance do
    Rake::Task['view_component:stimulus_manifest:update'].invoke
  end
end

And it will generate file app/components/index.js everytime you run the stimulus:manifest:update. Why I put this file inside app/components/ is because stimulus-rails only generate the manifest content based on relative of /app/javascript/controllers/.

And then we can just simple use import '../components'; in app/javascript/application.js.

And it works well for me.

[wdiechmann]

@chunlea thank you so much for sharing! I've been banging my head on this too many hours!

🥳

[seanbjornsson]

I have just started a new Rails 7 project, with View Component and Stimulus. I am working with just vanilla Importmap Rails, no jsbundling-rails or esbuild. My file structure is as created by the component generator with the sidecar and stimulus flags as @liaden was using.

Has anyone found a solution that automatically loads sidecar stimulus controllers as they are added without having to register them manually, using only importmap-rails or the vanilla asset pipeline/sprockets?

I have a feeling this sort of abuses what importmap was built to do, so I wouldn't be surprised if the answer was no. But I also feel like there must be a way to accomplish this. Honestly, this could also be more of a question for the Importmap team, but it's all based on trying to sidecar stimulus controllers with ViewComponents, so here I am...
I was hoping this would be the case (automatic registration) with the suggestions above, but that is not the case (for me at least)

I've tried:

• Turning app/javascript/controllers/index.js into an erb file and doing a little metaprogramming to cycle through all the controllers in app/components/**/*_controller.js and using the manual registration technique that is already working.
  • no dice. I think it's cause it doesn't get processed into a js file before importmap looks to pin it. Honestly not sure at this point. This approach might work eventually, but it feels very hacky.
• Dynamically (iterate over files using ruby) calling pin_all_for in importmap.rb on each component dir. I was hoping I could do this using the under: 'components' flag to add these controllers to the "controllers/" prefix in the import map.
  • However, this doesn't work because importmap really just seems to take the prefix off your file path. Ex stimulus install adds pin_all_from "app/javascript/controllers", under: "controllers" but all it really does is remove app/javascript from the path when requiring it. (I honestly don't think that's the whole story, but I'm still slowly working through the importmap code).
  • Therefore you get this error (cause you're basically trying to change the "directory" that the asset lives in

  The asset "controllers/hello_component/hello_component_controller.js" is not present in the asset pipeline.
  Importmap skipped missing path: controllers/hello_component/hello_component_controller.js
  

• Adding //=link_tree ../../components .js to app/assets/config/manifest.js. I honestly thought this would work but it doesn't. I'm not familiar enough yet with debugging the asset pipeline to troubleshoot this approach.

Following @liaden 's suggestions, I can get a stimulus controller working in a sidecar folder only by also using @roelandmoors 's suggestion of manually loading and registering the controller. see below for what I'm starting with.

File structure

├── hello_component
│   ├── hello_component_controller.js
│   └── hello_component.html.erb
└── hello_component.rb

config/initializers/assets.rb

Rails.application.config.assets.paths << "app/components"
Rails.application.config.assets.debug = true

config/importmap.rb

pin "application", preload: true
# ... Hotwire stuff ...
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/components" <- new line

app/javascript/controllers/index.js

// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

import HelloComponentController from "hello_component/hello_component_controller";
application.register("hello-component", HelloComponentController);

and I actually didn't need step 5 (updating development.rb).

Anyway, I'm excited about ViewComponent, and will use it if I can't get this automatically loading sidecar controllers thing to work. But it would be pretty nice! I'll post back if I figure it out....

[imustafin]

I've came up with a very dirty (IMHO) solution a while ago, but waited for someone to suggest a cleaner one 😅

My solution doesn't require manual controller registration.

The main idea is to add app to asset paths so that we have our controllers by the components/controller.js path in the asset pipeline. To make it a bit cleaner, we add it as the last path:

# config/application.rb

initializer "app_assets", after: "importmap.assets" do
  Rails.application.config.assets.paths << Rails.root.join('app') # for component sidecar js
end

# Sweep importmap cache for components
config.importmap.cache_sweepers << Rails.root.join('app/components')

Then we can add component JS files to the asset pipeline:

// app/assets/config/manifest.js

//= link_tree ../../components .js

Now importmap can pick them up:

# config/importmap.rb

pin_all_from "app/components", under: "components"

Optionally, lazy load controllers:

// app/javascript/controllers/index.js

import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
lazyLoadControllersFrom("components", application)

That's it.

My hobby app has all of this in one commit together with a sample component https://github.com/imustafin/sibrowser/commit/12fb4aecb32775243c2924ef1f2b7c30fdf045c2.

Running this setup for a month, faced no problems yet.

Possible drawback
Unwanted application code from the app dir can get included into the asset pipeline, if you are not careful enough in the manifest

I'm not sure if this can be "the officially recommended way", but if so, I could send a PR with the documentation.

[seanbjornsson]

Wow, thank you so much @imustafin !! I was hoping hoping that someone out there had figured this out.
From the perspective of someone just finding ViewComponents, your post is exactly the documentation I was looking for but couldn't find. So I support some documentation!

I'm also curious what people think about an install task something like rails viewcomponent:install --sidecar --importmap (sorta clunky, but you get the idea).
Although I need to read some more code, I'm unfamiliar if any of this exists already. And/or if there's a neat way to wrap this all into the gem or a single file/config.

[spnv]

@imustafin For me this one is not optional to make it works.

// app/javascript/controllers/index.js

import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
lazyLoadControllersFrom("components", application)