Improve tree shaking for lodash and date-fns.

src/card-condition.ts

@@ -4,7 +4,7 @@ import type {
   RawFrigateCardConfig,
 } from './types';
 import { HassEntities } from 'home-assistant-js-websocket';
-import { merge } from 'lodash-es';
+import merge from 'lodash-es/merge';
 
 export interface ConditionState {
   view?: string;

src/card.ts

@@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { until } from 'lit/directives/until.js';
-import { throttle } from 'lodash-es';
+import throttle from 'lodash-es/throttle';
 import screenfull from 'screenfull';
 import { z } from 'zod';
 import { actionHandler } from './action-handler-directive.js';

src/components/carousel.ts

@@ -15,7 +15,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { throttle } from 'lodash-es';
+import throttle from 'lodash-es/throttle';
 import carouselStyle from '../scss/carousel.scss';
 import { TransitionEffect } from '../types';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';

src/components/media-carousel.ts

@@ -22,7 +22,7 @@ import './next-prev-control.js';
 import './carousel.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import { FrigateCardTitleControl } from './title-control.js';
-import { debounce } from 'lodash-es';
+import debounce from 'lodash-es/debounce';
 
 const getEmptyImageSrc = (width: number, height: number) =>
   `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;

src/components/thumbnail.ts

@@ -1,4 +1,5 @@
-import { format, fromUnixTime } from 'date-fns';
+import format from 'date-fns/format';
+import fromUnixTime from 'date-fns/fromUnixTime';
 import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -95,7 +96,7 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
           this._embedThumbnailTask,
           (embeddedThumbnail: string | null) =>
             embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
-          {inProgressFunc: () => imageOff},
+          { inProgressFunc: () => imageOff },
         )
       : imageOff} `;
   }
@@ -296,7 +297,9 @@ export class FrigateCardThumbnail extends LitElement {
       ? html`<frigate-card-thumbnail-feature-recording
           aria-label="${label ?? ''}"
           title="${label ?? ''}"
-          .cameraTitle=${this.details || !this.cameraConfig || !this.hass ? undefined : getCameraTitle(this.hass, this.cameraConfig)}
+          .cameraTitle=${this.details || !this.cameraConfig || !this.hass
+            ? undefined
+            : getCameraTitle(this.hass, this.cameraConfig)}
           .date=${recording ? fromUnixTime(recording.start_time) : undefined}
         ></frigate-card-thumbnail-feature-recording>`
       : html``}
@@ -308,12 +311,7 @@ export class FrigateCardThumbnail extends LitElement {
             @click=${(ev: Event) => {
               stopEventFromActivatingCardWideActions(ev);
               if (event && this.hass && clientID) {
-                retainEvent(
+                retainEvent(this.hass, clientID, event.id, !event.retain_indefinitely)
-                  this.hass,
-                  clientID,
-                  event.id,
-                  !event.retain_indefinitely,
-                )
                   .then(() => {
                     if (event) {
                       event.retain_indefinitely = !event.retain_indefinitely;

src/components/timeline-core.ts

@@ -1,11 +1,9 @@
-import {
+import add from 'date-fns/add';
-  add,
+import endOfHour from 'date-fns/endOfHour';
-  differenceInSeconds,
+import fromUnixTime from 'date-fns/fromUnixTime';
-  endOfHour,
+import differenceInSeconds from 'date-fns/differenceInSeconds';
-  fromUnixTime,
+import startOfHour from 'date-fns/startOfHour';
-  startOfHour,
+import sub from 'date-fns/sub';
-  sub,
-} from 'date-fns';
 import {
   CSSResultGroup,
   html,
@@ -16,7 +14,8 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { isEqual, throttle } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
+import throttle from 'lodash-es/throttle';
 import { ViewContext } from 'view';
 import { DataView, DataSet } from 'vis-data/esnext';
 import type { DataGroupCollectionType, IdType } from 'vis-timeline/esnext';

src/config-mgmt.ts

@@ -1,4 +1,6 @@
-import { get, isEqual, set } from 'lodash-es';
+import get from 'lodash-es/get';
+import isEqual from 'lodash-es/isEqual';
+import set from 'lodash-es/set';
 import {
   CONF_CAMERAS,
   CONF_CAMERAS_ARRAY_CAMERA_ENTITY,

src/utils/basic.ts

@@ -1,5 +1,5 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
-import { isEqual } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
 import { FrigateCardError } from '../types';
 
 /**

src/utils/data-manager.ts

@@ -20,7 +20,7 @@ import {
 } from './frigate.js';
 import { dispatchFrigateCardErrorEvent } from '../components/message.js';
 import fromUnixTime from 'date-fns/fromUnixTime';
-import { throttle } from 'lodash-es';
+import throttle from 'lodash-es/throttle';
 
 const RECORDING_SEGMENT_TOLERANCE = 60;
 const DATA_MANAGER_MAX_AGE_SECONDS = 10;

src/utils/media-to-view.ts

@@ -1,4 +1,9 @@
-import { add, endOfHour, fromUnixTime, getUnixTime, startOfHour, sub } from 'date-fns';
+import add from 'date-fns/add';
+import endOfHour from 'date-fns/endOfHour';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import getUnixTime from 'date-fns/getUnixTime';
+import startOfHour from 'date-fns/startOfHour';
+import sub from 'date-fns/sub';
 import { ViewContext } from 'view';
 import { dispatchMessageEvent } from '../components/message';
 import { localize } from '../localize/localize';
@@ -6,7 +11,11 @@ import { CameraConfig, ExtendedHomeAssistant, FrigateBrowseMediaSource } from '.
 import { View } from '../view';
 import { formatDateAndTime, prettifyTitle } from './basic';
 import { getRecordingMediaContentID } from './frigate';
-import { createChild, createEventParentForChildren, sortYoungestToOldest } from './ha/browse-media';
+import {
+  createChild,
+  createEventParentForChildren,
+  sortYoungestToOldest,
+} from './ha/browse-media';
 import {
   RecordingSegmentsItem,
   sortOldestToYoungest,
@@ -23,7 +32,7 @@ import { getAllDependentCameras, getTrueCameras } from './camera.js';
  * @param view The current view.
  * @param options A set of cameraIDs to fetch recordings for, and a targetView to dispatch to.
  */
- export const changeViewToRecentRecordingForCameraAndDependents = async (
+export const changeViewToRecentRecordingForCameraAndDependents = async (
   element: HTMLElement,
   hass: ExtendedHomeAssistant,
   dataManager: DataManager,
@@ -35,22 +44,15 @@ import { getAllDependentCameras, getTrueCameras } from './camera.js';
 ): Promise<void> => {
   const now = new Date();
 
-  await changeViewToRecording(
+  await changeViewToRecording(element, hass, dataManager, cameras, view, {
-    element,
+    ...options,
-    hass,
-    dataManager,
-    cameras,
-    view,
-    {
-      ...options,
 
-      // Fetch 1 days worth of recordings (including recordings that are for the current hour).
+    // Fetch 1 days worth of recordings (including recordings that are for the current hour).
-      cameraIDs: getAllDependentCameras(cameras, view.camera),
+    cameraIDs: getAllDependentCameras(cameras, view.camera),
-      start: sub(now, { days: 1 }),
+    start: sub(now, { days: 1 }),
-      end: add(now, { hours: 1 }),
+    end: add(now, { hours: 1 }),
-    }
+  });
-  );
+};
-}
 
 /**
  * Change the view to a recording.
@@ -132,9 +134,7 @@ const createRecordingChildren = (
 ): FrigateBrowseMediaSource[] => {
   const children: FrigateBrowseMediaSource[] = [];
 
-  for (const cameraID of getTrueCameras(
+  for (const cameraID of getTrueCameras(cameras, cameraIDs)) {
-    cameras, cameraIDs
-  )) {
     const config = cameras.get(cameraID) ?? null;
     const recordingSummary = dataManager.getRecordingSummaryForCamera(cameraID);
     if (!config?.frigate.camera_name || !recordingSummary) {