Revert "Merge pull request #7509 from betagouv/US/fix-dynamic-imports-on-ff-60-69"

This reverts commit 8e13015e85, reversing
changes made to 3a16905d79.

app/javascript/controllers/chartkick_controller.ts

@@ -1,10 +1,11 @@
 import { Controller } from '@hotwired/stimulus';
 import { toggle, delegate } from '@utils';
-import Chartkick from 'chartkick';
-import Highcharts from 'highcharts';
 
 export class ChartkickController extends Controller {
   async connect() {
+    const Highcharts = await import('highcharts');
+    const Chartkick = await import('chartkick');
+
     Chartkick.use(Highcharts);
     const reflow = (nextChartId?: string) =>
       nextChartId && Chartkick.charts[nextChartId]?.getChartObject()?.reflow();

app/javascript/controllers/react_controller.tsx

@@ -1,38 +1,24 @@
 import { Controller } from '@hotwired/stimulus';
-import React from 'react';
+import React, { lazy, Suspense, FunctionComponent } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 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');
 
-const componentsRegistry = new Map();
+for (const [path, loader] of Object.entries(components)) {
-
+  const [filename] = path.split('/').reverse();
-import ComboAdresseSearch from '../components/ComboAdresseSearch';
+  const componentClassName = filename.replace(/\.(ts|tsx)$/, '');
-import ComboAnnuaireEducationSearch from '../components/ComboAnnuaireEducationSearch';
+  console.debug(
-import ComboCommunesSearch from '../components/ComboCommunesSearch';
+    `Registered lazy default export for "${componentClassName}" component`
-import ComboDepartementsSearch from '../components/ComboDepartementsSearch';
-import ComboMultiple from '../components/ComboMultiple';
-import ComboMultipleDropdownList from '../components/ComboMultipleDropdownList';
-import ComboPaysSearch from '../components/ComboPaysSearch';
-import ComboRegionsSearch from '../components/ComboRegionsSearch';
-import ComboSearch from '../components/ComboSearch';
-import MapEditor from '../components/MapEditor';
-import MapReader from '../components/MapReader';
-
-componentsRegistry.set('ComboAdresseSearch', ComboAdresseSearch);
-componentsRegistry.set(
-  'ComboAnnuaireEducationSearch',
-  ComboAnnuaireEducationSearch
   );
-componentsRegistry.set('ComboCommunesSearch', ComboCommunesSearch);
+  componentsRegistry.set(
-componentsRegistry.set('ComboDepartementsSearch', ComboDepartementsSearch);
+    componentClassName,
-componentsRegistry.set('ComboMultiple', ComboMultiple);
+    LoadableComponent(loader as Loader)
-componentsRegistry.set('ComboMultipleDropdownList', ComboMultipleDropdownList);
+  );
-componentsRegistry.set('ComboPaysSearch', ComboPaysSearch);
+}
-componentsRegistry.set('ComboRegionsSearch', ComboRegionsSearch);
-componentsRegistry.set('ComboSearch', ComboSearch);
-componentsRegistry.set('MapEditor', MapEditor);
-componentsRegistry.set('MapReader', MapReader);
 
 // Initialize React components when their markup appears into the DOM.
 //
@@ -68,7 +54,19 @@ export class ReactController extends Controller {
     render(<Component {...props} />, node);
   }
 
-  private getComponent(componentName: string) {
+  private getComponent(componentName: string): FunctionComponent<Props> | null {
     return componentsRegistry.get(componentName) ?? null;
   }
 }
+
+const Spinner = () => <div className="spinner left" />;
+
+function LoadableComponent(loader: Loader): FunctionComponent<Props> {
+  const LazyComponent = lazy(loader);
+  const Component: FunctionComponent<Props> = (props: Props) => (
+    <Suspense fallback={<Spinner />}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+  return Component;
+}

app/javascript/controllers/trix_controller.ts

@@ -1,5 +1,8 @@
 import { Controller } from '@hotwired/stimulus';
-import 'trix';
-import '@rails/actiontext';
 
-export class TrixController extends Controller {}
+export class TrixController extends Controller {
+  connect() {
+    import('trix');
+    import('@rails/actiontext');
+  }
+}

app/javascript/entrypoints/application.js

@@ -68,5 +68,5 @@ Turbo.session.drive = false;
 // Expose globals
 window.DS = window.DS || DS;
 
-import '../shared/track/matomo';
+import('../shared/track/matomo');
-import '../shared/track/sentry';
+import('../shared/track/sentry');

app/javascript/shared/polyfills.js

@@ -1,15 +1,4 @@
 import './polyfills/dataset';
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import 'dom4';
-import 'intersection-observer';
-import 'whatwg-fetch';
-import '@webcomponents/custom-elements';
-import '@webcomponents/template';
-import '@stimulus/polyfills';
-import 'formdata-polyfill';
-import 'event-target-polyfill';
-import 'yet-another-abortcontroller-polyfill';
 
 // IE 11 has no baseURI (required by turbo)
 if (document.baseURI == undefined) {

vite.config.ts

@@ -44,7 +44,16 @@ if (shouldBuildLegacy()) {
 export default defineConfig({
   resolve: { alias: { '@utils': '/shared/utils.ts' } },
   build: {
-    sourcemap: true
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.match('maplibre') || id.match('mapbox')) {
+            return 'maplibre';
+          }
+        }
+      }
+    }
   },
   plugins
 });