From 6a5568ad4f1bb79487a500d7505f0a9f96591636 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 11 Apr 2023 15:16:47 +0200 Subject: [PATCH] Optimize app entrypoint (#16048) * Optimize app entrypoint * review * remove legacy support --- src/components/ha-drawer.ts | 37 ++++++++++++++++--------------- src/entrypoints/app.ts | 1 - src/layouts/ha-init-page.ts | 20 ++++++++--------- src/layouts/hass-router-page.ts | 4 ++-- src/layouts/home-assistant.ts | 4 ++-- src/resources/hammer.ts | 6 +++++ src/util/legacy-support.js | 39 --------------------------------- 7 files changed, 39 insertions(+), 72 deletions(-) create mode 100644 src/resources/hammer.ts delete mode 100644 src/util/legacy-support.js diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts index 5fcfd031c6..62930305d3 100644 --- a/src/components/ha-drawer.ts +++ b/src/components/ha-drawer.ts @@ -1,9 +1,3 @@ -import { - DIRECTION_LEFT, - DIRECTION_RIGHT, - Manager, - Swipe, -} from "@egjs/hammerjs"; import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base"; import { styles } from "@material/mwc-drawer/mwc-drawer.css"; import { css, PropertyValues } from "lit"; @@ -40,24 +34,31 @@ export class HaDrawer extends DrawerBase { this.mdcRoot.dir = this.direction; } if (changedProps.has("open") && this.open && this.type === "modal") { - this._mc = new Manager(document, { - touchAction: "pan-y", - }); - this._mc.add( - new Swipe({ - direction: - this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT, - }) - ); - this._mc.on("swipeleft swiperight", () => { - fireEvent(this, "hass-toggle-menu", { open: false }); - }); + this._setupSwipe(); } else if (this._mc) { this._mc.destroy(); this._mc = undefined; } } + private async _setupSwipe() { + const hammer = await import("../resources/hammer"); + this._mc = new hammer.Manager(document, { + touchAction: "pan-y", + }); + this._mc.add( + new hammer.Swipe({ + direction: + this.direction === "rtl" + ? hammer.DIRECTION_RIGHT + : hammer.DIRECTION_LEFT, + }) + ); + this._mc.on("swipeleft swiperight", () => { + fireEvent(this, "hass-toggle-menu", { open: false }); + }); + } + static override styles = [ styles, css` diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts index f7f607720b..458fc850c2 100644 --- a/src/entrypoints/app.ts +++ b/src/entrypoints/app.ts @@ -6,7 +6,6 @@ import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-regi import "../layouts/home-assistant"; import "../resources/ha-style"; import "../resources/roboto"; -import "../util/legacy-support"; setPassiveTouchGestures(true); setCancelSyntheticClickEvents(false); diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 42df3b8d69..4d815bcfdd 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,12 +1,9 @@ -import "@material/mwc-button"; -import { css, CSSResultGroup, html, LitElement } from "lit"; +import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { property, state } from "lit/decorators"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; - @state() private _showProgressIndicator = false; - @state() private _retryInSeconds = 60; private _showProgressIndicatorTimeout?: NodeJS.Timeout; @@ -36,9 +33,7 @@ class HaInitPage extends LitElement { ` : html`
- ${this._showProgressIndicator - ? html`` - : ""} +
Loading data
`; @@ -54,10 +49,15 @@ class HaInitPage extends LitElement { } } + protected willUpdate(changedProperties: PropertyValues) { + if (changedProperties.has("error") && this.error) { + import("@material/mwc-button"); + } + } + protected firstUpdated() { - this._showProgressIndicatorTimeout = setTimeout(async () => { - await import("../components/ha-circular-progress"); - this._showProgressIndicator = true; + this._showProgressIndicatorTimeout = setTimeout(() => { + import("../components/ha-circular-progress"); }, 5000); this._retryInterval = setInterval(() => { diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index 6fb01e521f..cf3aca4f78 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -3,8 +3,6 @@ import { property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { navigate } from "../common/navigate"; import { Route } from "../types"; -import "./hass-error-screen"; -import "./hass-loading-screen"; const extractPage = (path: string, defaultPage: string) => { if (path === "") { @@ -256,10 +254,12 @@ export class HassRouterPage extends ReactiveElement { } protected createLoadingScreen() { + import("./hass-loading-screen"); return document.createElement("hass-loading-screen"); } protected createErrorScreen(error: string) { + import("./hass-error-screen"); const errorEl = document.createElement("hass-error-screen"); errorEl.error = error; return errorEl; diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index bcd99b762d..0e72bbd868 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -65,7 +65,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { `; } - update(changedProps) { + update(changedProps: PropertyValues) { if (this.hass?.states && this.hass.config && this.hass.services) { this.render = this.renderHass; this.update = super.update; @@ -74,7 +74,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { super.update(changedProps); } - protected firstUpdated(changedProps) { + protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); this._initializeHass(); setTimeout(() => registerServiceWorker(this), 1000); diff --git a/src/resources/hammer.ts b/src/resources/hammer.ts new file mode 100644 index 0000000000..b7165f3361 --- /dev/null +++ b/src/resources/hammer.ts @@ -0,0 +1,6 @@ +export { + DIRECTION_LEFT, + DIRECTION_RIGHT, + Manager, + Swipe, +} from "@egjs/hammerjs"; diff --git a/src/util/legacy-support.js b/src/util/legacy-support.js deleted file mode 100644 index 869ecbb4f7..0000000000 --- a/src/util/legacy-support.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * Provide legacy support to HTML imports by exposing Polymer and - * Polymer.Element on the window object. - */ -/* eslint-plugin-disable lit */ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { Polymer } from "@polymer/polymer/polymer-legacy"; - -const message = - "WARNING: Polymer will be removed from window in Home Assistant 2023.5. More info: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer"; - -const handler = { - get(target, prop, receiver) { - // eslint-disable-next-line no-console - console.warn(message); - document - .querySelector("home-assistant") - .dispatchEvent( - new CustomEvent("write_log", { detail: { message, level: "warning" } }) - ); - return Reflect.get(target, prop, receiver); - }, - apply: function (target, thisArg, argumentsList) { - // eslint-disable-next-line no-console - console.warn(message); - document - .querySelector("home-assistant") - .dispatchEvent( - new CustomEvent("write_log", { detail: { message, level: "warning" } }) - ); - return Reflect.apply(target, thisArg, argumentsList); - }, -}; - -Polymer.Element = PolymerElement; -Polymer.html = html; - -window.Polymer = new Proxy(Polymer, handler);