Dynamically load Intl modules to allow code splitting

src/index.ts

@@ -1,13 +1,4 @@
-// TODO: could probably be a dynamic import
+import { Calendar, CalendarOptions } from '@fullcalendar/core';
-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 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');
+function main() {
-const calendar = new Calendar(calendarEl!, calendarOptions);
+  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
+if (!window.Intl) {
-window.setInterval(refresh, 5 * 60 * 1000);
+  // 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();
+}

src/intl.d.ts

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