From 9eb97ab0cd18731747f08a110b5925b7e12ec7b9 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 9 Oct 2022 09:10:56 -0700 Subject: [PATCH] Improve tree shaking for lodash and date-fns. --- src/card-condition.ts | 2 +- src/card.ts | 2 +- src/components/carousel.ts | 2 +- src/components/media-carousel.ts | 2 +- src/components/thumbnail.ts | 16 ++++++------ src/components/timeline-core.ts | 17 ++++++------- src/config-mgmt.ts | 4 ++- src/utils/basic.ts | 4 +-- src/utils/data-manager.ts | 2 +- src/utils/media-to-view.ts | 42 ++++++++++++++++---------------- 10 files changed, 46 insertions(+), 47 deletions(-) diff --git a/src/card-condition.ts b/src/card-condition.ts index 0cc2aff7..2bdf929c 100644 --- a/src/card-condition.ts +++ b/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; diff --git a/src/card.ts b/src/card.ts index 1ef0ae84..cf92eb2f 100644 --- a/src/card.ts +++ b/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'; diff --git a/src/components/carousel.ts b/src/components/carousel.ts index 0afb657f..2269610c 100644 --- a/src/components/carousel.ts +++ b/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'; diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts index 810d072d..f4d97538 100644 --- a/src/components/media-carousel.ts +++ b/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`; diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index 626ef239..9d85ffad 100644 --- a/src/components/thumbnail.ts +++ b/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`` : html``, - {inProgressFunc: () => imageOff}, + { inProgressFunc: () => imageOff }, ) : imageOff} `; } @@ -296,7 +297,9 @@ export class FrigateCardThumbnail extends LitElement { ? html`` : 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; diff --git a/src/components/timeline-core.ts b/src/components/timeline-core.ts index 390b0c54..0982637c 100644 --- a/src/components/timeline-core.ts +++ b/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'; diff --git a/src/config-mgmt.ts b/src/config-mgmt.ts index c636ed5e..9cebd3cb 100644 --- a/src/config-mgmt.ts +++ b/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, diff --git a/src/utils/basic.ts b/src/utils/basic.ts index d44142fd..a9f93620 100644 --- a/src/utils/basic.ts +++ b/src/utils/basic.ts @@ -1,5 +1,5 @@ -import { format } from 'date-fns'; -import { isEqual } from 'lodash-es'; +import format from 'date-fns/format'; +import isEqual from 'lodash-es/isEqual'; import { FrigateCardError } from '../types'; /** diff --git a/src/utils/data-manager.ts b/src/utils/data-manager.ts index c2a08f94..4eda65c9 100644 --- a/src/utils/data-manager.ts +++ b/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; diff --git a/src/utils/media-to-view.ts b/src/utils/media-to-view.ts index a37cd098..c6bb6413 100644 --- a/src/utils/media-to-view.ts +++ b/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 => { const now = new Date(); - await changeViewToRecording( - element, - hass, - dataManager, - cameras, - view, - { - ...options, + await changeViewToRecording(element, hass, dataManager, cameras, view, { + ...options, - // Fetch 1 days worth of recordings (including recordings that are for the current hour). - cameraIDs: getAllDependentCameras(cameras, view.camera), - start: sub(now, { days: 1 }), - end: add(now, { hours: 1 }), - } - ); -} + // Fetch 1 days worth of recordings (including recordings that are for the current hour). + cameraIDs: getAllDependentCameras(cameras, view.camera), + start: sub(now, { days: 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( - cameras, cameraIDs - )) { + for (const cameraID of getTrueCameras(cameras, cameraIDs)) { const config = cameras.get(cameraID) ?? null; const recordingSummary = dataManager.getRecordingSummaryForCamera(cameraID); if (!config?.frigate.camera_name || !recordingSummary) {