From f85c97f96e7a757960166fba0dfe3de151d7e137 Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 29 Jun 2022 18:47:38 +0200 Subject: [PATCH] fix(js): dynamic import with import keyword does not work on ffx[60,68] --- .../controllers/chartkick_controller.ts | 5 +- .../controllers/react_controller.tsx | 58 ++++++++++--------- app/javascript/controllers/trix_controller.ts | 9 +-- app/javascript/entrypoints/application.js | 4 +- app/javascript/shared/polyfills.js | 11 ++++ vite.config.ts | 11 +--- 6 files changed, 49 insertions(+), 49 deletions(-) diff --git a/app/javascript/controllers/chartkick_controller.ts b/app/javascript/controllers/chartkick_controller.ts index 9398eedfc..5c89d314b 100644 --- a/app/javascript/controllers/chartkick_controller.ts +++ b/app/javascript/controllers/chartkick_controller.ts @@ -1,11 +1,10 @@ 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(); diff --git a/app/javascript/controllers/react_controller.tsx b/app/javascript/controllers/react_controller.tsx index cdaff89de..896f3b273 100644 --- a/app/javascript/controllers/react_controller.tsx +++ b/app/javascript/controllers/react_controller.tsx @@ -1,24 +1,38 @@ import { Controller } from '@hotwired/stimulus'; -import React, { lazy, Suspense, FunctionComponent } from 'react'; +import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import invariant from 'tiny-invariant'; type Props = Record; -type Loader = () => Promise<{ default: FunctionComponent }>; -const componentsRegistry = new Map>(); -const components = import.meta.glob('../components/*.tsx'); -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) - ); -} +const componentsRegistry = new Map(); + +import ComboAdresseSearch from '../components/ComboAdresseSearch'; +import ComboAnnuaireEducationSearch from '../components/ComboAnnuaireEducationSearch'; +import ComboCommunesSearch from '../components/ComboCommunesSearch'; +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('ComboDepartementsSearch', ComboDepartementsSearch); +componentsRegistry.set('ComboMultiple', ComboMultiple); +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. // @@ -54,19 +68,7 @@ export class ReactController extends Controller { render(, node); } - private getComponent(componentName: string): FunctionComponent | null { + private getComponent(componentName: string) { return componentsRegistry.get(componentName) ?? null; } } - -const Spinner = () =>
; - -function LoadableComponent(loader: Loader): FunctionComponent { - const LazyComponent = lazy(loader); - const Component: FunctionComponent = (props: Props) => ( - }> - - - ); - return Component; -} diff --git a/app/javascript/controllers/trix_controller.ts b/app/javascript/controllers/trix_controller.ts index 588ef1202..1426f91ca 100644 --- a/app/javascript/controllers/trix_controller.ts +++ b/app/javascript/controllers/trix_controller.ts @@ -1,8 +1,5 @@ import { Controller } from '@hotwired/stimulus'; +import 'trix'; +import '@rails/actiontext'; -export class TrixController extends Controller { - connect() { - import('trix'); - import('@rails/actiontext'); - } -} +export class TrixController extends Controller {} diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index bedb5083d..a5dd0bb7b 100644 --- a/app/javascript/entrypoints/application.js +++ b/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/sentry'); +import '../shared/track/matomo'; +import '../shared/track/sentry'; diff --git a/app/javascript/shared/polyfills.js b/app/javascript/shared/polyfills.js index f3dce4c0f..7d9941c78 100644 --- a/app/javascript/shared/polyfills.js +++ b/app/javascript/shared/polyfills.js @@ -1,4 +1,15 @@ 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) { diff --git a/vite.config.ts b/vite.config.ts index c1eefb422..ee780b273 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -44,16 +44,7 @@ if (shouldBuildLegacy()) { export default defineConfig({ resolve: { alias: { '@utils': '/shared/utils.ts' } }, build: { - sourcemap: true, - rollupOptions: { - output: { - manualChunks(id) { - if (id.match('maplibre') || id.match('mapbox')) { - return 'maplibre'; - } - } - } - } + sourcemap: true }, plugins });