components.js

// Loads stimulus controllers from ../components/ folder
//
// Normal output:
//   button/button_controller.js              => data-controller="button--button"
//   form/text_field/text_field_controller.js => data-controller="form--text-field--text-field"
//
// Expected output:
//   button/button_controller.js              => data-controller="button"
//   form/text_field/text_field_controller.js => data-controller="form--text-field"

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("../components/", true, /_controller\.js$/)
const definitions = definitionsFromContext(context)

definitions.map(definition => {
  definition["identifier"] = definition["identifier"].replace(/--/g, "_")
    .replace(/_[a-z-]+$/, "")
    .replace(/_/g, "--")

  return definition
})

application.load(definitions)

final.js

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("../components/", true, /_controller\.js$/)
const definitions = definitionsFromContext(context).map(definition => ({
  ...definition,
  identifier: definition.identifier.replace(/--[a-z]+(-[a-z]+)?$/, "")
}))

application.load(definitions)