refactor(react): eager load react components

app/javascript/components/MapEditor.tsx

@@ -0,0 +1,2 @@
+import Component from './MapEditor/index';
+export default Component;

app/javascript/components/MapReader.tsx

@@ -0,0 +1,2 @@
+import Component from './MapReader/index';
+export default Component;

app/javascript/controllers/react_controller.tsx

@@ -6,11 +6,18 @@ import invariant from 'tiny-invariant';
 type Props = Record<string, unknown>;
 type Loader = () => Promise<{ default: FunctionComponent<Props> }>;
 const componentsRegistry = new Map<string, FunctionComponent<Props>>();
+const components = import.meta.glob('../components/*.tsx');
 
-export function registerComponents(components: Record<string, Loader>): void {
-  for (const [className, loader] of Object.entries(components)) {
-    componentsRegistry.set(className, LoadableComponent(loader));
-  }
+for (const [path, loader] of Object.entries(components)) {
+  const [filename] = path.split('/').reverse();
+  const componentClassName = filename.replace(/\.(ts|tsx)$/, '');
+  console.debug(
+    `Registered lazy default export for "${componentClassName}" component`
+  );
+  componentsRegistry.set(
+    componentClassName,
+    LoadableComponent(loader as Loader)
+  );
 }
 
 // Initialize React components when their markup appears into the DOM.
@@ -18,7 +25,7 @@ export function registerComponents(components: Record<string, Loader>): void {
 // Example:
 //   <div data-controller="react" data-react-component-value="ComboMultiple" data-react-props-value="{}"></div>
 //
-export default class ReactController extends Controller {
+export class ReactController extends Controller {
   static values = {
     component: String,
     props: Object

app/javascript/entrypoints/application.js

@@ -10,7 +10,6 @@ import '../shared/safari-11-file-xhr-workaround';
 import '../shared/toggle-target';
 import '../shared/ujs-error-handling';
 
-import { registerComponents } from '../controllers/react_controller';
 import { registerControllers } from '../shared/stimulus-loader';
 
 import '../new_design/form-validation';
@@ -41,22 +40,6 @@ import {
   showNewAccountPasswordConfirmation
 } from '../new_design/fc-fusion';
 
-registerComponents({
-  ComboAdresseSearch: () => import('../components/ComboAdresseSearch'),
-  ComboAnnuaireEducationSearch: () =>
-    import('../components/ComboAnnuaireEducationSearch'),
-  ComboCommunesSearch: () => import('../components/ComboCommunesSearch'),
-  ComboDepartementsSearch: () =>
-    import('../components/ComboDepartementsSearch'),
-  ComboMultipleDropdownList: () =>
-    import('../components/ComboMultipleDropdownList'),
-  ComboMultiple: () => import('../components/ComboMultiple'),
-  ComboPaysSearch: () => import('../components/ComboPaysSearch'),
-  ComboRegionsSearch: () => import('../components/ComboRegionsSearch'),
-  MapEditor: () => import('../components/MapEditor'),
-  MapReader: () => import('../components/MapReader')
-});
-
 const application = Application.start();
 registerControllers(application);