fix: Revert bundle optimization (fixes #634, fixes #635)

- The bundle size was only reduced by date-fns-tz package, as date-fns is already tree-shaken, however, date-fns-tz misses some internal modules that way
Vuepic · Nov 6, 2023 · b9d486a · b9d486a
1 parent c54d391
commit b9d486a
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 115 deletions.
diff --git a/env.d.ts b/env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module 'date-fns-tz/esm';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0"
+    "date-fns-tz": "^1.3.7"
   },
   "peerDependencies": {
     "vue": ">=3.2.0"

diff --git a/src/VueDatePicker/components/DatePicker/DpCalendar.vue b/src/VueDatePicker/components/DatePicker/DpCalendar.vue
@@ -132,8 +132,7 @@
 
 <script lang="ts" setup>
     import { computed, nextTick, onMounted, ref } from 'vue';
-    import getISOWeek from 'date-fns/getISOWeek/index';
-    import getWeek from 'date-fns/getWeek/index';
+    import { getISOWeek, getWeek } from 'date-fns';
 
     import { checkStopPropagation, getDayNames, getDefaultMarker, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useDefaults } from '@/composables';

diff --git a/src/VueDatePicker/components/DatePicker/date-picker.ts b/src/VueDatePicker/components/DatePicker/date-picker.ts
@@ -1,15 +1,17 @@
 import { computed, onMounted, ref, nextTick, watch } from 'vue';
-import add from 'date-fns/add/index';
-import addDays from 'date-fns/addDays/index';
-import addMonths from 'date-fns/addMonths/index';
-import getHours from 'date-fns/getHours/index';
-import getMinutes from 'date-fns/getMinutes/index';
-import getMonth from 'date-fns/getMonth/index';
-import getSeconds from 'date-fns/getSeconds/index';
-import getYear from 'date-fns/getYear/index';
-import set from 'date-fns/set/index';
-import startOfWeek from 'date-fns/startOfWeek/index';
-import subMonths from 'date-fns/subMonths/index';
+import {
+    add,
+    addDays,
+    addMonths,
+    getHours,
+    getMinutes,
+    getMonth,
+    getSeconds,
+    getYear,
+    set,
+    startOfWeek,
+    subMonths,
+} from 'date-fns';
 
 import {
     getDate,

diff --git a/src/VueDatePicker/components/MonthPicker/month-picker.ts b/src/VueDatePicker/components/MonthPicker/month-picker.ts
@@ -1,6 +1,5 @@
 import { computed, ref } from 'vue';
-import getMonth from 'date-fns/getMonth/index';
-import getYear from 'date-fns/getYear/index';
+import { getMonth, getYear } from 'date-fns';
 
 import { checkMinMaxValue, getMonths, groupListAndMap } from '@/utils/util';
 import {

diff --git a/src/VueDatePicker/components/QuarterPicker/quarter-picker.ts b/src/VueDatePicker/components/QuarterPicker/quarter-picker.ts
@@ -1,15 +1,17 @@
 import { computed, ref } from 'vue';
-import eachQuarterOfInterval from 'date-fns/eachQuarterOfInterval/index';
-import endOfQuarter from 'date-fns/endOfQuarter/index';
-import endOfYear from 'date-fns/endOfYear/index';
-import format from 'date-fns/format/index';
-import getMonth from 'date-fns/getMonth/index';
-import getQuarter from 'date-fns/getQuarter/index';
-import getYear from 'date-fns/getYear/index';
-import isSameQuarter from 'date-fns/isSameQuarter/index';
-import set from 'date-fns/set/index';
-import startOfQuarter from 'date-fns/startOfQuarter/index';
-import startOfYear from 'date-fns/startOfYear/index';
+import {
+    eachQuarterOfInterval,
+    endOfQuarter,
+    endOfYear,
+    format,
+    getMonth,
+    getQuarter,
+    getYear,
+    isSameQuarter,
+    set,
+    startOfQuarter,
+    startOfYear,
+} from 'date-fns';
 
 import { useDefaults, useModel, useValidation } from '@/composables';
 import { useMonthOrQuarterPicker } from '@/components/shared/month-quarter-picker';

diff --git a/src/VueDatePicker/components/TimePicker/TimeInput.vue b/src/VueDatePicker/components/TimePicker/TimeInput.vue
@@ -130,15 +130,7 @@
 
 <script lang="ts" setup>
     import { computed, onMounted, reactive, ref } from 'vue';
-    import add from 'date-fns/add/index';
-    import getHours from 'date-fns/getHours/index';
-    import getMinutes from 'date-fns/getMinutes/index';
-    import getSeconds from 'date-fns/getSeconds/index';
-    import isAfter from 'date-fns/isAfter/index';
-    import isBefore from 'date-fns/isBefore/index';
-    import isEqual from 'date-fns/isEqual/index';
-    import set from 'date-fns/set/index';
-    import sub from 'date-fns/sub/index';
+    import { add, getHours, getMinutes, getSeconds, isAfter, isBefore, isEqual, set, sub } from 'date-fns';
 
     import { ChevronUpIcon, ChevronDownIcon, ClockIcon } from '@/components/Icons';
     import SelectionOverlay from '@/components/Common/SelectionOverlay.vue';

diff --git a/src/VueDatePicker/components/TimePicker/time-picker-utils.ts b/src/VueDatePicker/components/TimePicker/time-picker-utils.ts
@@ -1,9 +1,6 @@
 import { computed } from 'vue';
 
-import isAfter from 'date-fns/isAfter/index';
-import isBefore from 'date-fns/isBefore/index';
-import setMilliseconds from 'date-fns/setMilliseconds/index';
-import setSeconds from 'date-fns/setSeconds/index';
+import { isAfter, isBefore, setMilliseconds, setSeconds } from 'date-fns';
 
 import { getDate, isDateEqual, setDateTime } from '@/utils/date-utils';
 

diff --git a/src/VueDatePicker/components/TimePicker/time-picker.ts b/src/VueDatePicker/components/TimePicker/time-picker.ts
@@ -1,5 +1,5 @@
 import { onMounted } from 'vue';
-import set from 'date-fns/set/index';
+import { set } from 'date-fns';
 
 import { useDefaults, useModel } from '@/composables';
 import { useTimePickerUtils } from '@/components/TimePicker/time-picker-utils';

diff --git a/src/VueDatePicker/components/YearPicker/year-picker.ts b/src/VueDatePicker/components/YearPicker/year-picker.ts
@@ -1,6 +1,5 @@
 import { computed, ref } from 'vue';
-import getYear from 'date-fns/getYear/index';
-import setYear from 'date-fns/setYear/index';
+import { getYear, setYear } from 'date-fns';
 
 import { useDefaults, useModel } from '@/composables';
 import { checkMinMaxValue, getYears, groupListAndMap } from '@/utils/util';

diff --git a/src/VueDatePicker/components/shared/month-quarter-picker.ts b/src/VueDatePicker/components/shared/month-quarter-picker.ts
@@ -1,9 +1,5 @@
 import { computed, onMounted, ref } from 'vue';
-import addYears from 'date-fns/addYears/index';
-import getMonth from 'date-fns/getMonth/index';
-import getYear from 'date-fns/getYear/index';
-import set from 'date-fns/set/index';
-import subYears from 'date-fns/subYears/index';
+import { addYears, getMonth, getYear, set, subYears } from 'date-fns';
 
 import { checkHighlightYear, getDate, getMinMaxYear, resetDate, validateMonthYear } from '@/utils/date-utils';
 import { checkMinMaxValue, getYears, groupListAndMap } from '@/utils/util';

diff --git a/src/VueDatePicker/composables/calendar-class.ts b/src/VueDatePicker/composables/calendar-class.ts
@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import addDays from 'date-fns/addDays/index';
+import { addDays } from 'date-fns';
 
 import { useDefaults, useValidation } from '@/composables/index';
 import { isModelAuto } from '@/utils/util';

diff --git a/src/VueDatePicker/composables/external-internal-mapper.ts b/src/VueDatePicker/composables/external-internal-mapper.ts
@@ -1,12 +1,5 @@
 import { ref, toRef, watch } from 'vue';
-import format from 'date-fns/format/index';
-import getHours from 'date-fns/getHours/index';
-import getMinutes from 'date-fns/getMinutes/index';
-import getMonth from 'date-fns/getMonth/index';
-import getSeconds from 'date-fns/getSeconds/index';
-import getYear from 'date-fns/getYear/index';
-import parse from 'date-fns/parse/index';
-import setYear from 'date-fns/setYear/index';
+import { format, getHours, getMinutes, getMonth, getSeconds, getYear, parse, setYear } from 'date-fns';
 
 import {
     checkPartialRangeValue,

diff --git a/src/VueDatePicker/composables/model.ts b/src/VueDatePicker/composables/model.ts
@@ -1,8 +1,5 @@
 import { computed, ref, reactive } from 'vue';
-import getHours from 'date-fns/getHours/index';
-import getMinutes from 'date-fns/getMinutes/index';
-import getMonth from 'date-fns/getMonth/index';
-import getYear from 'date-fns/getYear/index';
+import { getHours, getMinutes, getMonth, getYear } from 'date-fns';
 
 import { getDate, getZonedDate } from '@/utils/date-utils';
 

diff --git a/src/VueDatePicker/composables/month-year.ts b/src/VueDatePicker/composables/month-year.ts
@@ -1,12 +1,5 @@
 import { computed } from 'vue';
-import addMonths from 'date-fns/addMonths/index';
-import addYears from 'date-fns/addYears/index';
-import getMonth from 'date-fns/getMonth/index';
-import getYear from 'date-fns/getYear/index';
-import set from 'date-fns/set/index';
-import setYear from 'date-fns/setYear/index';
-import subMonths from 'date-fns/subMonths/index';
-import subYears from 'date-fns/subYears/index';
+import { addMonths, addYears, getMonth, getYear, set, setYear, subMonths, subYears } from 'date-fns';
 
 import { useDefaults, useValidation } from '@/composables/index';
 import { validateMonthYear } from '@/utils/date-utils';

diff --git a/src/VueDatePicker/composables/validation.ts b/src/VueDatePicker/composables/validation.ts
@@ -1,10 +1,4 @@
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays/index';
-import eachDayOfInterval from 'date-fns/eachDayOfInterval/index';
-import getDay from 'date-fns/getDay/index';
-import getHours from 'date-fns/getHours/index';
-import getMinutes from 'date-fns/getMinutes/index';
-import getMonth from 'date-fns/getMonth/index';
-import getYear from 'date-fns/getYear/index';
+import { differenceInCalendarDays, eachDayOfInterval, getDay, getHours, getMinutes, getMonth, getYear } from 'date-fns';
 import {
     checkTimeMinMax,
     getDate,

diff --git a/src/VueDatePicker/utils/date-utils.ts b/src/VueDatePicker/utils/date-utils.ts
@@ -1,30 +1,31 @@
-import parse from 'date-fns/parse/index';
-import isDate from 'date-fns/isDate/index';
-import isValid from 'date-fns/isValid/index';
-import setHours from 'date-fns/setHours/index';
-import setMinutes from 'date-fns/setMinutes/index';
-import setSeconds from 'date-fns/setSeconds/index';
-import setMilliseconds from 'date-fns/setMilliseconds/index';
-import isBefore from 'date-fns/isBefore/index';
-import isEqual from 'date-fns/isEqual/index';
-import isAfter from 'date-fns/isAfter/index';
-import set from 'date-fns/set/index';
-import getHours from 'date-fns/getHours/index';
-import getMinutes from 'date-fns/getMinutes/index';
-import getSeconds from 'date-fns/getSeconds/index';
-import getYear from 'date-fns/getYear/index';
-import getMonth from 'date-fns/getMonth/index';
-import parseISO from 'date-fns/parseISO/index';
-import eachDayOfInterval from 'date-fns/eachDayOfInterval/index';
-import addMonths from 'date-fns/addMonths/index';
-import startOfWeek from 'date-fns/startOfWeek/index';
-import endOfWeek from 'date-fns/endOfWeek/index';
-import setMonth from 'date-fns/setMonth/index';
-import setYear from 'date-fns/setYear/index';
-import subMonths from 'date-fns/subMonths/index';
-import format from 'date-fns/format/index';
-import utcToZonedTime from 'date-fns-tz/utcToZonedTime';
-import zonedTimeToUtc from 'date-fns-tz/zonedTimeToUtc';
+import {
+    parse,
+    isDate,
+    isValid,
+    setHours,
+    setMinutes,
+    setSeconds,
+    setMilliseconds,
+    isBefore,
+    isEqual,
+    isAfter,
+    set,
+    getHours,
+    getMinutes,
+    getSeconds,
+    getYear,
+    getMonth,
+    parseISO,
+    eachDayOfInterval,
+    addMonths,
+    startOfWeek,
+    endOfWeek,
+    setMonth,
+    setYear,
+    subMonths,
+    format,
+} from 'date-fns';
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz/esm';
 import { errors } from '@/utils/util';
 
 import type {

diff --git a/src/VueDatePicker/utils/util.ts b/src/VueDatePicker/utils/util.ts
@@ -1,5 +1,5 @@
 import { unref } from 'vue';
-import format from 'date-fns/format/index';
+import { format } from 'date-fns';
 
 import type { Config, IDefaultSelect, IMarker, MaybeElementRef, ModelValue, OverlayGridItem } from '@/interfaces';
 import type { ComponentPublicInstance } from 'vue';

diff --git a/tests/unit/utils.spec.ts b/tests/unit/utils.spec.ts
@@ -16,7 +16,7 @@ import {
     startOfWeek,
     endOfWeek,
 } from 'date-fns';
-import { getTimezoneOffset, zonedTimeToUtc } from 'date-fns-tz';
+import { getTimezoneOffset, zonedTimeToUtc } from 'date-fns-tz/esm';
 import { reactive } from 'vue';
 
 import {

diff --git a/vite.config.ts b/vite.config.ts
@@ -42,13 +42,12 @@ export default defineConfig({
             fileName: 'vue-datepicker',
         },
         rollupOptions: {
-            external: f === 'iife' ? /^vue$/ : /^(vue$|date-fns\/|date-fns-tz\/)/,
+            external: f === 'iife' ? ['vue'] : ['vue', 'date-fns', 'date-fns-tz'],
             output: {
-                globals: (name) => {
-                    if (name === 'vue') return 'Vue';
-                    if (name.startsWith('date-fns/')) return 'dateFns' + name.substring(9);
-                    if (name.startsWith('date-fns-tz/')) return 'dateFnsTz' + name.substring(12);
-                    return name;
+                globals: {
+                    vue: 'Vue',
+                    'date-fns': 'dateFns',
+                    'date-fns-tz': 'dateFnsTz',
                 },
             },
         },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference types="vite/client" />
		declare module 'date-fns-tz/esm';