Merge pull request #7510 from tchak/fix-dynamic-import
fix(vite): temporary use legacy build in all browsers
This commit is contained in:
commit
8a729ae5ee
8 changed files with 74 additions and 55 deletions
|
@ -189,4 +189,21 @@ module ApplicationHelper
|
|||
Rails.env.production? || ENV['VITE_LEGACY'] == 'enabled'
|
||||
end
|
||||
end
|
||||
|
||||
def ds_vite_legacy_javascript_tag(name, asset_type: :javascript)
|
||||
legacy_name = name.sub(/(\..+)|$/, '-legacy\1')
|
||||
import_tag = tag(:script) do
|
||||
# rubocop:disable Rails/OutputSafety
|
||||
"System.import('#{vite_asset_path(legacy_name, type: asset_type)}')".html_safe
|
||||
# rubocop:enable Rails/OutputSafety
|
||||
end
|
||||
|
||||
safe_join [ds_vite_legacy_polyfill_tag, import_tag]
|
||||
end
|
||||
|
||||
# Internal: Renders the vite-legacy-polyfill to enable code splitting in
|
||||
# browsers that do not support modules.
|
||||
def ds_vite_legacy_polyfill_tag
|
||||
tag(:script, nil, src: vite_asset_path('legacy-polyfills', type: :virtual))
|
||||
end
|
||||
end
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
||||
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);
|
||||
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.
|
||||
//
|
||||
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -15,9 +15,14 @@
|
|||
|
||||
= vite_client_tag
|
||||
= vite_react_refresh_tag
|
||||
= vite_javascript_tag 'application'
|
||||
- if administrateur_signed_in?
|
||||
= vite_javascript_tag 'track-admin'
|
||||
- if vite_legacy?
|
||||
= ds_vite_legacy_javascript_tag 'application'
|
||||
- if administrateur_signed_in?
|
||||
= ds_vite_legacy_javascript_tag 'track-admin'
|
||||
- else
|
||||
= vite_javascript_tag 'application'
|
||||
- if administrateur_signed_in?
|
||||
= vite_javascript_tag 'track-admin'
|
||||
|
||||
= preload_link_tag(asset_url("Muli-Regular.woff2"))
|
||||
= preload_link_tag(asset_url("Muli-Bold.woff2"))
|
||||
|
@ -43,9 +48,6 @@
|
|||
- if content_for?(:footer)
|
||||
= content_for(:footer)
|
||||
|
||||
- if vite_legacy?
|
||||
= vite_legacy_javascript_tag 'application'
|
||||
|
||||
= yield :charts_js
|
||||
|
||||
// Container for custom turbo-stream actions
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue