fix(calendar): move utilities into separate file for Marko 4

src/components/ebay-calendar/component.js

@@ -1,5 +1,14 @@
 // @ts-check
 
+import {
+    dateArgToISO,
+    fromISO,
+    getWeekdayInfo,
+    localeOverride,
+    offsetISO,
+    toISO,
+} from "./date-utils";
+
 const DAY_UPDATE_KEYMAP = {
     ArrowRight: 1,
     ArrowLeft: -1,
@@ -406,81 +415,3 @@ export default class extends Marko.Component {
         return true;
     }
 }
-
-/**
- * @param {string} localeName
- * @return {number} 0 or 7 is Sun, 1 is Mon, -1 or 6 is Sat
- */
-export function findFirstDayOfWeek(localeName) {
-    // weekInfo only exists on some browsers, so we default to Sunday otherwise
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/weekInfo
-
-    const locale =
-        /** @type {Intl.Locale & { weekInfo?: { firstDay: number } }} */ (
-            new Intl.Locale(localeName)
-        );
-    if (locale.weekInfo) {
-        return locale.weekInfo.firstDay;
-    }
-    return 0;
-}
-
-/**
- * @param {string} localeName
- */
-export function getWeekdayInfo(localeName) {
-    const firstDayOfWeek = findFirstDayOfWeek(localeName);
-
-    const weekdayLabelFormatter = new Intl.DateTimeFormat(localeName, {
-        weekday: "short",
-    });
-    const weekday = new Date(2022, 9, 2 + firstDayOfWeek); // October 2, 2022 was a Sunday
-    const weekdayLabels = [...Array(7)].map(() => {
-        const dayLabel = weekdayLabelFormatter.format(weekday);
-        weekday.setDate(weekday.getDate() + 1);
-        return dayLabel;
-    });
-
-    return { firstDayOfWeek, weekdayLabels };
-}
-
-/**
- * @param {DateConstructor["arguments"]} arg
- */
-export function dateArgToISO(arg) {
-    if (!arg) return undefined;
-    if (/^\d\d\d\d-\d\d-\d\d$/g.test(arg)) return arg;
-    return toISO(new Date(arg));
-}
-
-/**
- * @param {Date} date
- * @returns {DayISO}
- */
-export function toISO(date) {
-    return /** @type {DayISO} */ (date.toISOString().slice(0, 10));
-}
-
-/**
- * @param {DayISO} iso
- */
-export function fromISO(iso) {
-    return new Date(iso);
-}
-
-/**
- * @param {DayISO} iso
- * @param {number} days
- */
-export function offsetISO(iso, days) {
-    const date = fromISO(iso);
-    date.setUTCDate(date.getUTCDate() + days);
-    return toISO(date);
-}
-
-/**
- * @param {string | undefined} locale
- */
-export function localeOverride(locale) {
-    return locale || navigator.language;
-}

src/components/ebay-calendar/date-utils.js

@@ -0,0 +1,84 @@
+// @ts-check
+
+/**
+ * Always in `YYYY-MM-DD` format
+ * @typedef {`${number}-${number}-${number}`} DayISO
+ */
+
+/**
+ * @param {string} localeName
+ * @return {number} 0 or 7 is Sun, 1 is Mon, -1 or 6 is Sat
+ */
+export function findFirstDayOfWeek(localeName) {
+    // weekInfo only exists on some browsers, so we default to Sunday otherwise
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/weekInfo
+
+    const locale =
+        /** @type {Intl.Locale & { weekInfo?: { firstDay: number } }} */ (
+            new Intl.Locale(localeName)
+        );
+    if (locale.weekInfo) {
+        return locale.weekInfo.firstDay;
+    }
+    return 0;
+}
+
+/**
+ * @param {string} localeName
+ */
+export function getWeekdayInfo(localeName) {
+    const firstDayOfWeek = findFirstDayOfWeek(localeName);
+
+    const weekdayLabelFormatter = new Intl.DateTimeFormat(localeName, {
+        weekday: "short",
+    });
+    const weekday = new Date(2022, 9, 2 + firstDayOfWeek); // October 2, 2022 was a Sunday
+    const weekdayLabels = [...Array(7)].map(() => {
+        const dayLabel = weekdayLabelFormatter.format(weekday);
+        weekday.setDate(weekday.getDate() + 1);
+        return dayLabel;
+    });
+
+    return { firstDayOfWeek, weekdayLabels };
+}
+
+/**
+ * @param {DateConstructor["arguments"]} arg
+ */
+export function dateArgToISO(arg) {
+    if (!arg) return undefined;
+    if (/^\d\d\d\d-\d\d-\d\d$/g.test(arg)) return arg;
+    return toISO(new Date(arg));
+}
+
+/**
+ * @param {Date} date
+ * @returns {DayISO}
+ */
+export function toISO(date) {
+    return /** @type {DayISO} */ (date.toISOString().slice(0, 10));
+}
+
+/**
+ * @param {DayISO} iso
+ */
+export function fromISO(iso) {
+    return new Date(iso);
+}
+
+/**
+ * @param {DayISO} iso
+ * @param {number} days
+ */
+export function offsetISO(iso, days) {
+    const date = fromISO(iso);
+    date.setUTCDate(date.getUTCDate() + days);
+    return toISO(date);
+}
+
+/**
+ * @param {string | undefined} locale
+ */
+export function localeOverride(locale) {
+    return locale || navigator.language;
+}

src/components/ebay-calendar/index.marko

@@ -1,5 +1,5 @@
 // @ts-check
-import {localeOverride, toISO} from "./component"
+import { toISO } from "./date-utils"
 
 $ var numMonths = input.numMonths || 1;
 $ var monthDates = [...Array(numMonths)].map((_, i) => component.getMonthDate(state.offset + i));

src/components/ebay-date-textbox/component.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 import Expander from "makeup-expander";
-import { dateArgToISO, toISO } from "../ebay-calendar/component";
+import { dateArgToISO, toISO } from "../ebay-calendar/date-utils";
 
 const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
 
@@ -46,6 +46,7 @@ export default class extends Marko.Component {
     }
 
     onMount() {
+        /** @type {any} */
         this.expander = new Expander(/** @type {HTMLElement} */ (this.el), {
             hostSelector: ".ebay-date-textbox--main > .icon-btn",
             contentSelector: ".date-textbox__popover",
@@ -55,7 +56,7 @@ export default class extends Marko.Component {
     }
 
     onDestroy() {
-        this.expander?.destroy();
+        if (this.expander) this.expander.destroy();
     }
 
     /**