From 77771712f92ec4a159e0bbd731eb034a75a7731b Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Wed, 14 Jul 2021 12:14:07 -0700
Subject: [PATCH] fix(date-picker): load rangePlugin dynamically

---
 src/DatePicker/DatePicker.svelte      | 73 ++++++++++++++-------------
 src/DatePicker/DatePickerInput.svelte |  4 +-
 src/DatePicker/createCalendar.js      | 10 +++-
 3 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index c9b75c16..00a9c81c 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -128,43 +128,43 @@
     },
   });
 
+  async function initCalendar() {
+    calendar = await createCalendar({
+      options: {
+        appendTo: datePickerRef,
+        dateFormat,
+        defaultDate: $inputValue,
+        locale,
+        maxDate,
+        minDate,
+        mode: $mode,
+      },
+      base: inputRef,
+      input: inputRefTo,
+      dispatch: (event) => {
+        const detail = { selectedDates: calendar.selectedDates };
+
+        if ($range) {
+          const from = inputRef.value;
+          const to = inputRefTo.value;
+
+          detail.dateStr = {
+            from: inputRef.value,
+            to: inputRefTo.value,
+          };
+
+          valueFrom = from;
+          valueTo = to;
+        } else {
+          detail.dateStr = inputRef.value;
+        }
+
+        return dispatch(event, detail);
+      },
+    });
+  }
+
   afterUpdate(() => {
-    if ($hasCalendar && !calendar) {
-      calendar = createCalendar({
-        options: {
-          appendTo: datePickerRef,
-          dateFormat,
-          defaultDate: $inputValue,
-          locale,
-          maxDate,
-          minDate,
-          mode: $mode,
-        },
-        base: inputRef,
-        input: inputRefTo,
-        dispatch: (event) => {
-          const detail = { selectedDates: calendar.selectedDates };
-
-          if ($range) {
-            const from = inputRef.value;
-            const to = inputRefTo.value;
-
-            detail.dateStr = {
-              from: inputRef.value,
-              to: inputRefTo.value,
-            };
-
-            valueFrom = from;
-            valueTo = to;
-          } else {
-            detail.dateStr = inputRef.value;
-          }
-
-          return dispatch(event, detail);
-        },
-      });
-    }
-
     if (calendar) {
       if ($range) {
         calendar.setDate([$inputValueFrom, $inputValueTo]);
@@ -189,6 +189,7 @@
   $: valueFrom = $inputValueFrom;
   $: inputValueTo.set(valueTo);
   $: valueTo = $inputValueTo;
+  $: if ($hasCalendar && !calendar && inputRef) initCalendar();
 </script>
 
 <svelte:body
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index e1808863..92668423 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -72,9 +72,7 @@
 
   add({ id, labelText });
 
-  onMount(() => {
-    declareRef({ id, ref });
-  });
+  $: if (ref) declareRef({ id, ref });
 </script>
 
 <div
diff --git a/src/DatePicker/createCalendar.js b/src/DatePicker/createCalendar.js
index f1c516eb..8e625675 100644
--- a/src/DatePicker/createCalendar.js
+++ b/src/DatePicker/createCalendar.js
@@ -1,5 +1,4 @@
 import flatpickr from "flatpickr";
-import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 
 let l10n;
 
@@ -48,7 +47,7 @@ function updateMonthNode(instance) {
   }
 }
 
-function createCalendar({ options, base, input, dispatch }) {
+async function createCalendar({ options, base, input, dispatch }) {
   let locale = options.locale;
 
   if (options.locale === "en" && l10n && l10n.en) {
@@ -61,6 +60,13 @@ function createCalendar({ options, base, input, dispatch }) {
     locale = l10n.en;
   }
 
+  let rangePlugin;
+
+  if (options.mode === "range") {
+    const importee = await import("flatpickr/dist/esm/plugins/rangePlugin");
+    rangePlugin = importee.default;
+  }
+
   return new flatpickr(base, {
     ...options,
     allowInput: true,