如何使 ViewComponent 与 Importmap-Rails 配合使用？

Question

我尝试使用 importmap-rails 在 Rails 7 中添加 view_component 。

\n

我以为这很简单：

\n

\n
1. 更新config/initializers/assets.rb为：Rails.application.config.assets.paths << Rails.root.join(\'app\', \'components\')
\n
2. 更新app/assets/config/manifest.js为：//= link_tree ../../components .js.
\n
3. 更新config/importmap.rb为：pin_all_from "app/components", preload: true.
\n

\n

然后我执行了这个命令，bin/importmap json检查一切是否正常：

\n

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

\n

我在最后一行看到了我的 foo_component_controller.js，这是我为 view_component 创建的文件。好吧，一切看起来都很好，但 UI 上没有任何反应，为什么？

\n

我忘记更新了app/javascript/controllers/index.js。我需要告诉刺激轨道注册“app/view_components”文件夹内的所有控制器。

\n

我的第一个想法是添加eagerLoadControllersFrom("components", application)到“app/javascript/controllers/index.js”并更新 importmap 中的配置 from pin_all_from "app/components", preload: trueto pin_all_from "app/components", under: "components", preload: true，但我注意到，运行后bin/importmap json，该文件丢失了：

\n

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

\n

为什么？我们来谈谈链轮。更准确地说，让\xe2\x80\x99s 谈谈尝试查找文件的方法：

\n

https://github.com/rails/sprockets/blob/e36620745d7150fc33eccffeaf79e74​​1a774499c/lib/sprockets/resolve.rb#L142-L161

\n

      def resolve_logical_path(paths, logical_path, accept)\n        extname, mime_type = PathUtils.match_path_extname(logical_path, config[:mime_exts])\n        logical_name = logical_path.chomp(extname)\n\n        extname, pipeline = PathUtils.match_path_extname(logical_name, config[:pipeline_exts])\n        logical_name = logical_name.chomp(extname)\n\n        parsed_accept = parse_accept_options(mime_type, accept)\n        transformed_accepts = expand_transform_accepts(parsed_accept)\n\n        filename, mime_type, deps, index_alias = resolve_under_paths(paths, logical_name, transformed_accepts)\n\n        if filename\n          deps << build_file_digest_uri(filename)\n          type = resolve_transform_type(mime_type, parsed_accept)\n          return filename, type, pipeline, deps, index_alias\n        else\n          return nil, nil, nil, deps\n        end\n      end\n

\n

变量路径保存应用程序的所有资产路径，例如：

\n

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

\n

在最后几行中，我们可以看到app/components预期的结果，但是“逻辑路径”包含“components/foo_component_controller.js”，并且它找不到该文件，因为它连接了两个字符串，导致：

\n

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

\n

文件夹组件出现两次。

\n

如果我们在 javascript/controllers 中创建一个控制器，则逻辑路径变量将为controllers/foo_controller.js。导致：

\n

/home/pedro/tempo-livre/importmap-view-component-stimulus/app/javascript/controllers/foo_controller.js。完美的道路。这就是它起作用的原因。

\n

我\xe2\x80\x99m 卡住了。似乎有必要做出贡献才能使这项工作正常进行，我很乐意这样做，但我想知道是否有人找到了另一种方法。也许我\xe2\x80\x99m 缺少一些东西。我可能是错的，因为我对 ViewComponent + SprocketRails + ImportmapRails + StimulusRails 不太了解。

\n

Answer 1

您可以自己为组件控制器创建引脚：

# 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.remove(/\.js$/)
  pin "components/#{name}", to: name
  #    ^                        ^ 
  #    |                        |
  # match what                  '- with what `sprockets` expects 
  # `eagerLoadControllersFrom`
  # expects                           
end

# app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
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 这是个好主意：

# config/environments/development.rb
config.importmap.cache_sweepers << Rails.root.join("app/components") 

有关pin和 的一些详细信息pin_all_from：/sf/answers/5099899381/