fix(js): dynamic import with import keyword does not work on ffx[60,68]
This commit is contained in:
parent
3a16905d79
commit
a736c8300a
6 changed files with 49 additions and 49 deletions
|
@ -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();
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue