What is the difference between stimulus-vite-helpers and simply just using:

# app/frontend/entrypoints/application.js

import "~/controllers/index.js";

# app/frontend/controllers/index.js

import { application } from "./application"

import SomeController from "./some_controller_controller.js"
application.register("some", SomeController)

...

# app/frontend/controllers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }

import { Application } from '@hotwired/stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
application.debug = false
const controllers = import.meta.globEager('../../../../components/ui/bentries/log/**/*_controller.js')
console.log("import.meta.globEager =>", controllers);
window.Stimulus   = application
registerControllers(application, controllers)

As you can see, window.Stimulus.controllers is empty, is that a bug or just my issue?

That works by the old way:

import { Application } from '@hotwired/stimulus'

const application = Application.start()
application.debug = false
window.Stimulus   = application
import LogComponent from "../../../../components/ui/bentries/log/log_component/log_component_controller";
application.register("ui--bentries--log--log-component", LogComponent);

Our project uses a convention where we have a sidecar folder for each component, containing all related files - e.g.:

components/button
  - component.rb
  - component.html.erb
  - component.css
  - controller.ts

Unfortunately, this does not work together with this package. After some digging, I found that the regex would need to be adapted from

^(?:.*?(?:controllers|components)\/|\.?\.\/)?(.+)(?:[_-]controller\..+?)$

to

^(?:.*?(?:controllers|components)\/|\.?\.\/)?(.+)(?:[_-]?controller\..+?)$

See https://regex101.com/r/nZEqLU/1 for an example. Would that be possible? I could spin up a PR if you want! Thank you for building Vite-Ruby, it really is a joy to work with 🙏

Hi!

I'm currently working on migrating our codebase from webpacker to vite_ruby, and today I ran into a small issue.
In our app, we have namespaced our controllers by the module they belong to. Our structure looks something like this.

# Admin module
app/javascript/controllers/admin/frontpage/*_controller.js
app/javascript/controllers/admin/dashboard/*_controller.js

# Core module
app/javascript/controllers/core/users/*_controller.js
app/javascript/controllers/core/buildings/*_controller.js

With webpacker, we are able to use require.context("path", true, /\.js$/) to ignore the module namespace folder, but I'm having a hard time figuring out how to do the same with vite and import.meta.globEager. I did find a solution, but it's not elegant.

With webpacker we get users--index_controller, dashboard--edit_controller, etc.

const context = require.context("controllers/admin", true, /\.js$/)
application.load(definitionsFromContext(context))

With vite we have to do this to achieve the same result. This is because globEager includes the entire path.

const controllers = definitionsFromGlob(import.meta.globEager("/controllers/admin/**/*_controller.js"))
controllers.forEach(entry => {
  entry.identifier = entry.identifier.replace("admin--", "")
})
application.load(controllers)

It would be nice if registerControllers allowed us to pass in an option to skip the first n namespaces.

const controllers = import.meta.globEager("/controllers/admin/users/index_controller.js", { skipNamespace: 0 }) // The default
// admin--users--index

const controllers = import.meta.globEager("/controllers/admin/users/index_controller.js", { skipNamespace: 1 })
// users--index

Hi,

I tried using stimulus-vite-helpers and have run into a problem, it doesn't seem to register my controllers. I have debugged a bit:

First, Im using the following, which is very similar to the code in the README, but with Typescript controllers instead:

const application = Application.start()
const controllers = import.meta.globEager('./controllers/**/*_controller.ts')
registerControllers(application, controllers)

The reason it then doesn't work for me is that it prefixes the controllers with controllers--.

I digged a bit into the code and found out that if I have a controller in app/javascript/controllers/dashboard_controller.ts then logicalName in identifierForGlobKey is controllers/dashboard. It should have been dashboard.

By changing CONTROLLER_FILENAME_REGEX from
/^(?:\.\/|.*?(?:controllers|components)\/)?(.+)(?:[_-]controller\..+?)$/ to
^(?:(?:\.\/|.*)?(?:controllers|components)\/)?(.+)(?:[_-]controller\..+?)$ I got it to work. So properly making the OR part of a group.

It seems like the OR in the regex doesn't work properly, at least in my case.