From d9f7785a7d66e5a04597b5ff12c6e87a3e2c6709 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Fri, 11 Mar 2022 00:12:57 -0500
Subject: [PATCH] Dynamically load Intl modules to allow code splitting

---
 src/index.ts  | 85 ++++++++++++++++++++++++++-------------------------
 src/intl.d.ts |  1 +
 2 files changed, 44 insertions(+), 42 deletions(-)
 create mode 100644 src/intl.d.ts

diff --git a/src/index.ts b/src/index.ts
index 15cca68..bc765d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -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.refetchEvents();
-  calendar.today();
+  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();
+}
diff --git a/src/intl.d.ts b/src/intl.d.ts
new file mode 100644
index 0000000..187e25f
--- /dev/null
+++ b/src/intl.d.ts
@@ -0,0 +1 @@
+declare module 'intl/locale-data/jsonp/en.js';