diff --git a/src/common/util/deep-equal.ts b/src/common/util/deep-equal.ts new file mode 100644 index 0000000000..3342479564 --- /dev/null +++ b/src/common/util/deep-equal.ts @@ -0,0 +1,107 @@ +// From https://github.com/epoberezkin/fast-deep-equal +// MIT License - Copyright (c) 2017 Evgeny Poberezkin +export const deepEqual = (a: any, b: any): boolean => { + if (a === b) { + return true; + } + + if (a && b && typeof a === "object" && typeof b === "object") { + if (a.constructor !== b.constructor) { + return false; + } + + let i: number | [any, any]; + let length: number; + if (Array.isArray(a)) { + length = a.length; + if (length !== b.length) { + return false; + } + for (i = length; i-- !== 0; ) { + if (!deepEqual(a[i], b[i])) { + return false; + } + } + return true; + } + + if (a instanceof Map && b instanceof Map) { + if (a.size !== b.size) { + return false; + } + for (i of a.entries()) { + if (!b.has(i[0])) { + return false; + } + } + for (i of a.entries()) { + if (!deepEqual(i[1], b.get(i[0]))) { + return false; + } + } + return true; + } + + if (a instanceof Set && b instanceof Set) { + if (a.size !== b.size) { + return false; + } + for (i of a.entries()) { + if (!b.has(i[0])) { + return false; + } + } + return true; + } + + if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) { + // @ts-ignore + length = a.length; + // @ts-ignore + if (length !== b.length) { + return false; + } + for (i = length; i-- !== 0; ) { + if (a[i] !== b[i]) { + return false; + } + } + return true; + } + + if (a.constructor === RegExp) { + return a.source === b.source && a.flags === b.flags; + } + if (a.valueOf !== Object.prototype.valueOf) { + return a.valueOf() === b.valueOf(); + } + if (a.toString !== Object.prototype.toString) { + return a.toString() === b.toString(); + } + + let keys: string[]; + keys = Object.keys(a); + length = keys.length; + if (length !== Object.keys(b).length) { + return false; + } + for (i = length; i-- !== 0; ) { + if (!Object.prototype.hasOwnProperty.call(b, keys[i])) { + return false; + } + } + + for (i = length; i-- !== 0; ) { + const key = keys[i]; + + if (!deepEqual(a[key], b[key])) { + return false; + } + } + + return true; + } + + // true if both NaN, false otherwise + return a !== a && b !== b; +}; diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index 432e9456ba..2f9c360939 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/src/layouts/partial-panel-resolver.ts @@ -8,6 +8,7 @@ import { RouteOptions, } from "./hass-router-page"; import { removeInitSkeleton } from "../util/init-skeleton"; +import { deepEqual } from "../common/util/deep-equal"; const CACHE_URL_PATHS = ["lovelace", "developer-tools"]; const COMPONENTS = { @@ -80,7 +81,7 @@ const getRoutes = (panels: Panels): RouterOptions => { @customElement("partial-panel-resolver") class PartialPanelResolver extends HassRouterPage { - @property() public hass?: HomeAssistant; + @property() public hass!: HomeAssistant; @property() public narrow?: boolean; protected updated(changedProps: PropertyValues) { @@ -92,11 +93,8 @@ class PartialPanelResolver extends HassRouterPage { const oldHass = changedProps.get("hass") as this["hass"]; - if ( - this.hass!.panels && - (!oldHass || oldHass.panels !== this.hass!.panels) - ) { - this._updateRoutes(); + if (this.hass.panels && (!oldHass || oldHass.panels !== this.hass.panels)) { + this._updateRoutes(oldHass?.panels); } } @@ -109,7 +107,7 @@ class PartialPanelResolver extends HassRouterPage { } protected updatePageEl(el) { - const hass = this.hass!; + const hass = this.hass; if ("setProperties" in el) { // As long as we have Polymer panels @@ -127,11 +125,20 @@ class PartialPanelResolver extends HassRouterPage { } } - private async _updateRoutes() { - this.routerOptions = getRoutes(this.hass!.panels); - await this.rebuild(); - await this.pageRendered; - removeInitSkeleton(); + private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) { + this.routerOptions = getRoutes(this.hass.panels); + + if ( + !oldPanels || + !deepEqual( + oldPanels[this._currentPage], + this.hass.panels[this._currentPage] + ) + ) { + await this.rebuild(); + await this.pageRendered; + removeInitSkeleton(); + } } }