Improve tree shaking for lodash and date-fns.

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(
-                  this.hass,
-                  clientID,
-                  event.id,
-                  !event.retain_indefinitely,
-                )
+                retainEvent(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 {
-  add,
-  differenceInSeconds,
-  endOfHour,
-  fromUnixTime,
-  startOfHour,
-  sub,
-} from 'date-fns';
+import add from 'date-fns/add';
+import endOfHour from 'date-fns/endOfHour';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+import startOfHour from 'date-fns/startOfHour';
+import sub from 'date-fns/sub';
 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';