Skip to content

Commit

Permalink
Properly handles Stimulus controller in parent folders
Browse files Browse the repository at this point in the history
If you try to register Stimulus controllers from another path than
`controller/` the regex do not process it properly.

Also we do not need to add `controllers--` for controller in controller
folder. See [doc](https://stimulus.hotwired.dev/handbook/installing#controller-filenames-map-to-identifiers).

Examples with dedicated stimulus view components controllers.

``js
import { Application } from "@hotwired/stimulus"

const application = Application.start()
window.Stimulus = application

import componentControllers from '../components/**/*_controller.js';
componentControllers.forEach((controller) => {
  application.register(controller.name, controller.module.default)
});

import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
  application.register(controller.name, controller.module.default)
})
```

To try this code.
```js
const ok =[
 'controllers/release_target_controller.js',
 'controllers/toggle_controller.js',
 '../components/deploy_slack_pref_component_controller.js'
].map((module) => module
            .replace(/_controller.[j|t]s$/, "")
            .replace(/^controllers\//, "") // do not namespace controllers in controllers directory
            .replace(/\.\.\//, "") // do not use parent folder anotation for controller name
            .replace(/\//g, "--")
            .replace(/_/g, '-')
          )
console.log(ok)
// [
//   'release-target',
//   'toggle',
//   'components--deploy-slack-pref-component'
// ]
```

Fix: excid3#15
  • Loading branch information
benoittgt committed Apr 25, 2023
1 parent 27d71db commit 5d8a230
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 0 deletions.
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,29 @@ import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
application.register(controller.name, controller.module.default)
})

// For view components
// import componentControllers from '../components/**/*_controller.js';
// ...

```

Controller identifiers will be the name of the file + the parent folder except in `controllers/` folder:

```
app
├── components
│   ├── pref_component.html.erb
│   ├── pref_component.rb
│   └── pref_component_controller.js // identifier 'components--deploy-pref-component'
└── javascript
   └── controllers
   ├── modal_controller.js // identifier 'modal'
└─- admin
└── status_controller.js // identifier 'admin--status'
```


#### Import ActionCable channels:

```javascript
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ const railsPlugin = (options = { matcher: /.+\..+/ }) => ({
const controllerNames = files
.map((module) => module
.replace(/_controller.[j|t]s$/, "")
.replace(/^controllers\//, "") // do not namespace controllers in controllers directory
.replace(/\.\.\//, "") // do not use parent folder anotation for controller name
.replace(/\//g, "--")
.replace(/_/g, '-')
)
Expand Down

0 comments on commit 5d8a230

Please sign in to comment.