Dynamically load Intl modules to allow code splitting

This commit is contained in:
Adam Goldsmith 2022-03-11 00:12:57 -05:00
parent 8e4202d658
commit d9f7785a7d
2 changed files with 44 additions and 42 deletions

View File

@ -1,13 +1,4 @@
// TODO: could probably be a dynamic import
import intl from 'intl';
import 'intl/locale-data/jsonp/en.js';
if (!window.Intl) {
// No `Intl`, so use and load the polyfill.
window.Intl = intl;
}
import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
import { Calendar, CalendarOptions } from '@fullcalendar/core';
import iCalendarPlugin from '@fullcalendar/icalendar';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
@ -31,22 +22,6 @@ const colors: string[] = unique_colors(Object.keys(calendars).length);
const urlParams = new URLSearchParams(window.location.search);
const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
function eventDataTransform(eventData: EventInput): EventInput {
// clear the url to prevent clicking on the event
delete eventData.url;
const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
if (match) {
const [, member, shop, tool] = match;
eventData.title = `${member}`;
eventData.resourceId = tool;
if (!toolFilter) {
calendar.addResource({ id: tool, title: tool }, false);
}
}
return eventData;
}
const calendarOptions: CalendarOptions = {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
plugins: [iCalendarPlugin, resourceTimeGridPlugin],
@ -62,14 +37,6 @@ const calendarOptions: CalendarOptions = {
startTime: '10:00',
endTime: '21:00',
},
eventSources: Object.values(calendars).map((id, idx) => {
return {
url: '/calendar/ical/' + id + '/public/basic.ics',
format: 'ics',
color: colors[idx],
eventDataTransform: eventDataTransform,
};
}),
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
@ -90,15 +57,49 @@ const calendarOptions: CalendarOptions = {
: [],
};
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl!, calendarOptions);
function main() {
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl!, calendarOptions);
Object.values(calendars).forEach((id, idx) =>
calendar.addEventSource({
url: '/calendar/ical/' + id + '/public/basic.ics',
format: 'ics',
color: colors[idx],
eventDataTransform: (eventData) => {
// clear the url to prevent clicking on the event
delete eventData.url;
calendar.render();
const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
if (match) {
const [, member, shop, tool] = match;
eventData.title = `${member}`;
eventData.resourceId = tool;
if (!toolFilter) {
calendar.addResource({ id: tool, title: tool }, false);
}
}
return eventData;
},
})
);
function refresh() {
calendar.render();
function refresh() {
calendar.refetchEvents();
calendar.today();
}
// refresh data every five minutes
window.setInterval(refresh, 5 * 60 * 1000);
}
// refresh data every five minutes
window.setInterval(refresh, 5 * 60 * 1000);
if (!window.Intl) {
// No `Intl`, so use and load the polyfill.
import('intl').then((intl) => {
window.Intl = intl;
import('intl/locale-data/jsonp/en.js').then((_) => main());
});
} else {
main();
}

1
src/intl.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'intl/locale-data/jsonp/en.js';