Search code examples
javascriptruby-on-railsruby

How to make ViewComponent works with Importmap-Rails?

I tried to add view_component in rails 7 with importmap-rails.

I thought it would be simple:

  1. Update config/initializers/assets.rb with: Rails.application.config.assets.paths << Rails.root.join('app', 'components')
  2. Update app/assets/config/manifest.js with: //= link_tree ../../components .js.
  3. Update config/importmap.rb with: pin_all_from "app/components", preload: true.

Then I executed this command, bin/importmap json, to check if everything was fine:

{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
    "@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-e6261367928db8327c9ed7b698df4a65be8e60f1e405dd2831e4fab49f716e56.js",
    "@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-b2f78229539fa8488bcc30c90ec212a3c2558a7ad04cbc9d43f3ecd85c5671f3.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/foo_controller": "/assets/controllers/foo_controller-45f660adade47dc60929737489aaf6a096ec0bdefa5dc52e509d79ee66982a6c.js",
    "controllers": "/assets/controllers/index-c3026cd9f10d126c4d910db40cdee4112b916f0b357ed0d0489c4c493627d462.js",
    "foo/bar_component_controller": "/assets/foo/bar_component_controller-04024382391bb910584145d8113cf35ef376b55d125bb4516cebeb14ce788597.js",
    "foo_component_controller": "/assets/foo_component_controller-0e1379f58b8281a0e5ac54ad8748d2bce7b5da5ddbcb72d91895cf97e47060f2.js"
  }
}

I saw, in the last line, my foo_component_controller.js, a file that I created for a view_component. Okay, everything seems fine, but nothing happens on the UI, why?

I forgot to update app/javascript/controllers/index.js. I need to tell stimulus-rails to register all controllers inside "app/view_components" folder.

My first thought was to add eagerLoadControllersFrom("components", application) to "app/javascript/controllers/index.js" and update my configuration in importmap from pin_all_from "app/components", preload: true to pin_all_from "app/components", under: "components", preload: true, but I notice, after running bin/importmap json, that the file went missing:

{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js",
    "@hotwired/stimulus": "/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-e6261367928db8327c9ed7b698df4a65be8e60f1e405dd2831e4fab49f716e56.js",
    "@hotwired/stimulus-importmap-autoloader": "/assets/stimulus-importmap-autoloader-b2f78229539fa8488bcc30c90ec212a3c2558a7ad04cbc9d43f3ecd85c5671f3.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/foo_controller": "/assets/controllers/foo_controller-45f660adade47dc60929737489aaf6a096ec0bdefa5dc52e509d79ee66982a6c.js",
    "controllers": "/assets/controllers/index-c3026cd9f10d126c4d910db40cdee4112b916f0b357ed0d0489c4c493627d462.js"
  }
}

Why? Let's talk about sprockets. To be more precise, let’s talk about a method that tries to find the files:

https://github.com/rails/sprockets/blob/e36620745d7150fc33eccffeaf79e741a774499c/lib/sprockets/resolve.rb#L142-L161

      def resolve_logical_path(paths, logical_path, accept)
        extname, mime_type = PathUtils.match_path_extname(logical_path, config[:mime_exts])
        logical_name = logical_path.chomp(extname)

        extname, pipeline = PathUtils.match_path_extname(logical_name, config[:pipeline_exts])
        logical_name = logical_name.chomp(extname)

        parsed_accept = parse_accept_options(mime_type, accept)
        transformed_accepts = expand_transform_accepts(parsed_accept)

        filename, mime_type, deps, index_alias = resolve_under_paths(paths, logical_name, transformed_accepts)

        if filename
          deps << build_file_digest_uri(filename)
          type = resolve_transform_type(mime_type, parsed_accept)
          return filename, type, pipeline, deps, index_alias
        else
          return nil, nil, nil, deps
        end
      end

The variable paths hold all assets paths of the application, example:

["/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/config",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/images",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/app/assets/stylesheets",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/lib/assets/javascript",
 "/home/pedro/.rvm/gems/ruby-3.1.2/gems/view_component-2.59.0/app/assets/vendor",
 "/home/pedro/.rvm/gems/ruby-3.1.2/gems/stimulus-rails-1.1.0/app/assets/javascripts",
 "/home/pedro/.rvm/gems/ruby-3.1.2/gems/turbo-rails-1.1.1/app/assets/javascripts",
 "/home/pedro/.rvm/gems/ruby-3.1.2/gems/actionview-7.0.3.1/lib/assets/compiled",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/app/components",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/app/javascript",
 "/home/pedro/tempo-livre/importmap-view-component-stimulus/vendor/javascript"]

In the last lines, we can see app/components as expected, but "logical_paths" holds "components/foo_component_controller.js" and it can't find the file because it concat both strings resulting in:

/home/pedro/tempo-livre/importmap-view-component-stimulus/app/components/components/foo_component_controller.js.

Folder components appeared twice.

If we create a controller inside javascript/controllers the logical_paths variable will be controllers/foo_controller.js. Resulting in:

/home/pedro/tempo-livre/importmap-view-component-stimulus/app/javascript/controllers/foo_controller.js. The perfect path. That's why it works.

I’m stuck. It seems necessary to make a contribution to make this work properly, I would love to do that, but I was wondering if anyone had found another way. Maybe I’m missing something. I could be wrong because I don't know much about ViewComponent + SprocketRails + ImportmapRails + StimulusRails.

Solution

  • You can create pins yourself for component controllers:

    # config/importmap.rb

components_path = Rails.root.join("app/components")
components_path.glob("**/*_controller.js").each do |controller|
  name = controller.relative_path_from(components_path).to_s.chomp(".js")
  pin "components/#{name}", to: name
  #    ^                        ^ 
  #    |                        |
  # match what                  '- with what `sprockets` expects 
  # `eagerLoadControllersFrom`
  # expects                           
end

# NOTE: since importmap-rails v1.2.1+ you could do this:

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

    // app/javascript/controllers/index.js

import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"

// import every "*_controller.js" from importmap that begins with "components"
eagerLoadControllersFrom("components", application)

    # config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("app/components")

    // app/assets/config/manifest.js

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

    @mingle that's a good idea:

    # config/environments/development.rb

config.importmap.cache_sweepers << Rails.root.join("app/components")