javascript organization

app/javascript/application.js

@@ -1,2 +1,6 @@
 import "initializers"
-import "controllers"
+
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

app/javascript/controllers/application.js

@@ -3,7 +3,7 @@ import { Application } from "@hotwired/stimulus"
 const application = Application.start()
 
 // Configure Stimulus development experience
-application.debug = false
-window.Stimulus   = application
+application.debug = true
+window.Stimulus = application
 
 export { application }

app/javascript/controllers/index.js

@@ -1,4 +0,0 @@
-// Import and register all your controllers from the importmap via controllers/**/*_controller
-import { application } from "controllers/application"
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)

config/importmap.rb

@@ -1,9 +1,7 @@
-# Pin npm packages by running ./bin/importmap
-
 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/javascript/initializers', under: 'initializers'
+pin_all_from 'app/javascript/controllers', under: 'controllers'