Update date-fns to v3 (major) (#20504)

* Update date-fns to v3

* update imports

* breaking changes

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

demo/src/stubs/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import {
   EnergyInfo,
   EnergyPreferences,

package.json

@@ -103,8 +103,8 @@
     "comlink": "4.4.1",
     "core-js": "3.36.1",
     "cropperjs": "1.6.1",
-    "date-fns": "2.30.0",
-    "date-fns-tz": "2.0.1",
+    "date-fns": "3.6.0",
+    "date-fns-tz": "3.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "element-internals-polyfill": "1.3.10",

src/common/datetime/calc_date.ts

@@ -1,4 +1,4 @@
-import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
+import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import { HassConfig } from "home-assistant-js-websocket";
 import { FrontendLocaleData, TimeZone } from "../../data/translation";
 
@@ -8,10 +8,10 @@ const calcZonedDate = (
   fn: (date: Date, options?: any) => Date | number | boolean,
   options?
 ) => {
-  const inputZoned = utcToZonedTime(date, tz);
+  const inputZoned = toZonedTime(date, tz);
   const fnZoned = fn(inputZoned, options);
   if (fnZoned instanceof Date) {
-    return zonedTimeToUtc(fnZoned, tz) as Date;
+    return fromZonedTime(fnZoned, tz) as Date;
   }
   return fnZoned;
 };
@@ -51,6 +51,6 @@ export const calcDateDifferenceProperty = (
     locale,
     config,
     locale.time_zone === TimeZone.server
-      ? utcToZonedTime(startDate, config.time_zone)
+      ? toZonedTime(startDate, config.time_zone)
       : startDate
   );

src/common/util/select-unit.ts

@@ -1,4 +1,4 @@
-import { differenceInDays, differenceInWeeks, startOfWeek } from "date-fns/esm";
+import { differenceInDays, differenceInWeeks, startOfWeek } from "date-fns";
 import { FrontendLocaleData } from "../../data/translation";
 import { firstWeekdayIndex } from "../datetime/first_weekday";
 

src/components/chart/chart-date-adapter.ts

@@ -34,7 +34,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-} from "date-fns/esm";
+} from "date-fns";
 import {
   formatDate,
   formatDateMonth,

src/data/energy.ts

@@ -9,7 +9,7 @@ import {
   startOfDay,
   isFirstDayOfMonth,
   isLastDayOfMonth,
-} from "date-fns/esm";
+} from "date-fns";
 import { Collection, getCollection } from "home-assistant-js-websocket";
 import {
   calcDate,

src/dialogs/more-info/ha-more-info-history.ts

@@ -1,4 +1,4 @@
-import { startOfYesterday, subHours } from "date-fns/esm";
+import { startOfYesterday, subHours } from "date-fns";
 import { LitElement, PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -1,4 +1,4 @@
-import { startOfYesterday } from "date-fns/esm";
+import { startOfYesterday } from "date-fns";
 import { css, html, LitElement, PropertyValues, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { mdiCalendarClock } from "@mdi/js";
 import { toDate } from "date-fns-tz";
-import { addDays, isSameDay } from "date-fns/esm";
+import { addDays, isSameDay } from "date-fns";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -6,7 +6,7 @@ import {
   addMilliseconds,
   differenceInMilliseconds,
   startOfHour,
-} from "date-fns/esm";
+} from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";

src/panels/config/automation/ha-automation-picker.ts

@@ -19,7 +19,7 @@ import {
   mdiToggleSwitchOffOutline,
   mdiTransitConnection,
 } from "@mdi/js";
-import { differenceInDays } from "date-fns/esm";
+import { differenceInDays } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -2,7 +2,7 @@ import { Calendar, CalendarOptions } from "@fullcalendar/core";
 import allLocales from "@fullcalendar/core/locales-all";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import { addDays, isSameDay, isSameWeek, nextDay } from "date-fns";
+import { Day, addDays, isSameDay, isSameWeek, nextDay } from "date-fns";
 import {
   CSSResultGroup,
   LitElement,

src/panels/config/scene/ha-scene-dashboard.ts

@@ -16,7 +16,7 @@ import {
   mdiPlus,
   mdiTag,
 } from "@mdi/js";
-import { differenceInDays } from "date-fns/esm";
+import { differenceInDays } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,

src/panels/config/script/ha-script-picker.ts

@@ -15,7 +15,7 @@ import {
   mdiTag,
   mdiTransitConnection,
 } from "@mdi/js";
-import { differenceInDays } from "date-fns/esm";
+import { differenceInDays } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,

src/panels/developer-tools/state/developer-tools-state.ts

@@ -3,7 +3,7 @@ import {
   mdiInformationOutline,
   mdiRefresh,
 } from "@mdi/js";
-import { addHours } from "date-fns/esm";
+import { addHours } from "date-fns";
 import {
   HassEntities,
   HassEntity,

src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import formatISO9075 from "date-fns/formatISO9075";
+import { formatISO9075 } from "date-fns";
 import {
   css,
   CSSResultGroup,
@@ -16,11 +16,11 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-list-item";
 import "../../../components/ha-selector/ha-selector-datetime";
 import "../../../components/ha-selector/ha-selector-number";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item";
 import {
   adjustStatisticsSum,
   fetchStatistics,

src/panels/history/ha-panel-history.ts

@@ -1,5 +1,5 @@
 import { mdiDownload, mdiFilterRemove } from "@mdi/js";
-import { differenceInHours } from "date-fns/esm";
+import { differenceInHours } from "date-fns";
 import {
   HassServiceTarget,
   UnsubscribeFunc,

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -5,7 +5,7 @@ import {
   subHours,
   differenceInDays,
   differenceInHours,
-} from "date-fns/esm";
+} from "date-fns";
 import { FrontendLocaleData } from "../../../../../data/translation";
 import {
   formatNumber,

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -4,7 +4,7 @@ import {
   ChartOptions,
   ScatterDataPoint,
 } from "chart.js";
-import { endOfToday, startOfToday } from "date-fns/esm";
+import { endOfToday, startOfToday } from "date-fns";
 import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -4,12 +4,7 @@ import {
   ChartOptions,
   ScatterDataPoint,
 } from "chart.js";
-import {
-  differenceInDays,
-  endOfToday,
-  isToday,
-  startOfToday,
-} from "date-fns/esm";
+import { differenceInDays, endOfToday, isToday, startOfToday } from "date-fns";
 import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -4,7 +4,7 @@ import {
   ChartOptions,
   ScatterDataPoint,
 } from "chart.js";
-import { endOfToday, isToday, startOfToday } from "date-fns/esm";
+import { endOfToday, isToday, startOfToday } from "date-fns";
 import { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -20,7 +20,7 @@ import {
   startOfWeek,
   startOfYear,
   subDays,
-} from "date-fns/esm";
+} from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,

yarn.lock

@@ -1404,7 +1404,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.24.4, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:7.24.4, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
   version: 7.24.4
   resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
@@ -7100,21 +7100,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns-tz@npm:2.0.1":
-  version: 2.0.1
-  resolution: "date-fns-tz@npm:2.0.1"
+"date-fns-tz@npm:3.0.0":
+  version: 3.0.0
+  resolution: "date-fns-tz@npm:3.0.0"
+  dependencies:
+    lodash.clonedeep: "npm:^4.5.0"
   peerDependencies:
-    date-fns: 2.x
-  checksum: 10/f12e684bc13c9fe7ef7910c5b25437e15290a655d45102b7420f046cecdf9fa5715bf333d6dfb6bab6c382c7abc6b58241a50c216e9ab0b60d6fdb388f473d6b
+    date-fns: ^3.0.0
+  checksum: 10/0a20196abd2519eb56bed0ba8fa838d60374db7bffa37d0d9284b29b6eed1b84369560d59688236479ed0bda923057fec2faef71caf09bc246d5f567c23308a8
   languageName: node
   linkType: hard
 
-"date-fns@npm:2.30.0":
-  version: 2.30.0
-  resolution: "date-fns@npm:2.30.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.21.0"
-  checksum: 10/70b3e8ea7aaaaeaa2cd80bd889622a4bcb5d8028b4de9162cbcda359db06e16ff6e9309e54eead5341e71031818497f19aaf9839c87d1aba1e27bb4796e758a9
+"date-fns@npm:3.6.0":
+  version: 3.6.0
+  resolution: "date-fns@npm:3.6.0"
+  checksum: 10/cac35c58926a3b5d577082ff2b253612ec1c79eb6754fddef46b6a8e826501ea2cb346ecbd211205f1ba382ddd1f9d8c3f00bf433ad63cc3063454d294e3a6b8
   languageName: node
   linkType: hard
 
@@ -9667,8 +9667,8 @@ __metadata:
     comlink: "npm:4.4.1"
     core-js: "npm:3.36.1"
     cropperjs: "npm:1.6.1"
-    date-fns: "npm:2.30.0"
-    date-fns-tz: "npm:2.0.1"
+    date-fns: "npm:3.6.0"
+    date-fns-tz: "npm:3.0.0"
     deep-clone-simple: "npm:1.1.1"
     deep-freeze: "npm:0.0.1"
     del: "npm:7.1.0"