Use default export in controllers, add functions to load and lazy load controllers

Author: sean-yeoh

CHANGELOG.md

@@ -1,10 +1,22 @@
 ## [Unreleased] - YYYY-MM-DD
+
 ### Added
+
+- Helper function to load stimulus JS controllers
+- Helper function to lazy load stimulus JS controllers with [stimulus-controller-resolver](https://github.com/danieldiekmeier/stimulus-controller-resolver)
+
 ### Changed
+
+- Convert stimulus JS controllers to default export
+
 ### Deprecated
+
 ### Removed
+
 ### Fixed
-- Accordion: hide content on initialize to prevent FOUC
+
+- Hide accordion content on initialize to prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
+
 ### Security
 
 ## [1.0.0] - 2025-08-04

app/typescript/controllers/accordion_controller.ts

@@ -6,7 +6,7 @@ import {
   getPreviousEnabledIndex,
 } from '../utils'
 
-const AccordionController = class extends Controller<HTMLElement> {
+const Accordion = class extends Controller<HTMLElement> {
   static name = 'accordion'
 
   // targets
@@ -132,7 +132,4 @@ const AccordionController = class extends Controller<HTMLElement> {
   }
 }
 
-type Accordion = InstanceType<typeof AccordionController>
-
-export { AccordionController }
-export type { Accordion }
+export default Accordion

app/typescript/controllers/alert_dialog_controller.ts

@@ -1,14 +1,11 @@
-import { DialogController } from './dialog_controller'
+import Dialog from './dialog_controller'
 
-const AlertDialogController = class extends DialogController {
+const AlertDialog = class extends Dialog {
   static name = 'alert-dialog'
 
   protected onDOMClick() {
     return
   }
 }
 
-type AlertDialog = InstanceType<typeof AlertDialogController>
-
-export { AlertDialogController }
-export type { AlertDialog }
+export default AlertDialog

app/typescript/controllers/avatar_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-const AvatarController = class extends Controller {
+const Avatar = class extends Controller {
   static name = 'avatar'
 
   // targets
@@ -20,7 +20,4 @@ const AvatarController = class extends Controller {
   }
 }
 
-type Avatar = InstanceType<typeof AvatarController>
-
-export { AvatarController }
-export type { Avatar }
+export default Avatar

app/typescript/controllers/checkbox_controller.ts

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 
-const CheckboxController = class extends Controller<HTMLElement> {
+const Checkbox = class extends Controller<HTMLElement> {
   static name = 'checkbox'
 
   // targets
@@ -37,7 +37,4 @@ const CheckboxController = class extends Controller<HTMLElement> {
   }
 }
 
-type Checkbox = InstanceType<typeof CheckboxController>
-
-export { CheckboxController }
-export type { Checkbox }
+export default Checkbox

app/typescript/controllers/collapsible_controller.ts

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import { hideContent, showContent } from '../utils'
 
-const CollapsibleController = class extends Controller {
+const Collapsible = class extends Controller {
   static name = 'collapsible'
 
   // targets
@@ -48,7 +48,4 @@ const CollapsibleController = class extends Controller {
   }
 }
 
-type Collapsible = InstanceType<typeof CollapsibleController>
-
-export { CollapsibleController }
-export type { Collapsible }
+export default Collapsible

app/typescript/controllers/combobox_controller.ts

@@ -24,7 +24,7 @@ import {
 
 import { useClickOutside, useDebounce } from 'stimulus-use'
 
-const ComboboxController = class extends Controller<HTMLElement> {
+const Combobox = class extends Controller<HTMLElement> {
   static name = 'combobox'
 
   // targets
@@ -371,7 +371,4 @@ const ComboboxController = class extends Controller<HTMLElement> {
   }
 }
 
-type Combobox = InstanceType<typeof ComboboxController>
-
-export { ComboboxController }
-export type { Combobox }
+export default Combobox

app/typescript/controllers/command_controller.ts

@@ -30,7 +30,7 @@ declare global {
   }
 }
 
-const CommandController = class extends Controller<HTMLElement> {
+const Command = class extends Controller<HTMLElement> {
   static name = 'command'
 
   // targets
@@ -297,7 +297,4 @@ const CommandController = class extends Controller<HTMLElement> {
   }
 }
 
-type Command = InstanceType<typeof CommandController>
-
-export { CommandController }
-export type { Command }
+export default Command

app/typescript/controllers/date_picker_controller.ts

@@ -27,7 +27,7 @@ const isSmallScreen = () => {
 
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
-const DatePickerController = class extends Controller<HTMLElement> {
+const DatePicker = class extends Controller<HTMLElement> {
   static name = 'date-picker'
 
   // targets
@@ -348,7 +348,4 @@ const DatePickerController = class extends Controller<HTMLElement> {
   }
 }
 
-type DatePicker = InstanceType<typeof DatePickerController>
-
-export { DatePickerController }
-export type { DatePicker }
+export default DatePicker

app/typescript/controllers/date_range_picker_controller.ts

@@ -1,5 +1,5 @@
 import { Calendar, Options } from 'vanilla-calendar-pro'
-import { DatePickerController } from './date_picker_controller'
+import DatePicker from './date_picker_controller'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import utc from 'dayjs/plugin/utc'
@@ -9,7 +9,7 @@ dayjs.extend(utc)
 const DELIMITER = ' - '
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
-const DateRangePickerController = class extends DatePickerController {
+const DateRangePicker = class extends DatePicker {
   static name = 'date-range-picker'
 
   // targets
@@ -249,7 +249,4 @@ const DateRangePickerController = class extends DatePickerController {
   }
 }
 
-type DateRangePicker = InstanceType<typeof DateRangePickerController>
-
-export { DateRangePickerController }
-export type { DateRangePicker }
+export default DateRangePicker