fix(js): dynamic import with import keyword does not work on ffx[60,68]

This commit is contained in:
Martin 2022-06-29 18:47:38 +02:00 committed by mfo
parent 3a16905d79
commit a736c8300a
6 changed files with 49 additions and 49 deletions

View file

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

View file

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

View file

@ -1,8 +1,5 @@
import { Controller } from '@hotwired/stimulus'; 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');
}
}

View file

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

View file

@ -1,4 +1,15 @@
import './polyfills/dataset'; 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) // IE 11 has no baseURI (required by turbo)
if (document.baseURI == undefined) { if (document.baseURI == undefined) {

View file

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