Drop app-route (#9196)

package.json

@@ -61,7 +61,6 @@
     "@mdi/js": "5.9.55",
     "@mdi/svg": "5.9.55",
     "@polymer/app-layout": "^3.0.2",
-    "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",

src/layouts/home-assistant.ts

@@ -1,5 +1,5 @@
-import "@polymer/app-route/app-location";
 import { customElement, html, state, PropertyValues } from "lit-element";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -31,22 +31,16 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
   protected render() {
     const hass = this.hass;
 
-    return html`
-      <app-location
-        @route-changed=${this._routeChanged}
-        ?use-hash-as-path=${__DEMO__}
-      ></app-location>
-      ${this._panelUrl === undefined || this._route === undefined
-        ? ""
-        : hass && hass.states && hass.config && hass.services
-        ? html`
-            <home-assistant-main
-              .hass=${this.hass}
-              .route=${this._route}
-            ></home-assistant-main>
-          `
-        : html` <ha-init-page .error=${this._error}></ha-init-page> `}
-    `;
+    return this._panelUrl === undefined || this._route === undefined
+      ? html``
+      : hass && hass.states && hass.config && hass.services
+      ? html`
+          <home-assistant-main
+            .hass=${this.hass}
+            .route=${this._route}
+          ></home-assistant-main>
+        `
+      : html`<ha-init-page .error=${this._error}></ha-init-page>`;
   }
 
   protected firstUpdated(changedProps) {
@@ -59,6 +53,49 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       this._updateHass({ suspendWhenHidden: ev.detail.suspend });
       storeState(this.hass!);
     });
+
+    // Navigation
+    const useHash = __DEMO__;
+    const curPath = () =>
+      window.decodeURIComponent(
+        useHash ? location.hash.substr(1) : location.pathname
+      );
+    const updateRoute = (path = curPath()) => {
+      if (this._route && path === this._route.path) {
+        return;
+      }
+      this._route = {
+        prefix: "",
+        path: path,
+      };
+      const dividerPos = path.indexOf("/", 1);
+      this._panelUrl =
+        dividerPos === -1 ? path.substr(1) : path.substr(1, dividerPos - 1);
+    };
+
+    window.addEventListener("location-changed", () => updateRoute());
+
+    // Handle history changes
+    if (useHash) {
+      window.addEventListener("hashchange", () => updateRoute());
+    } else {
+      window.addEventListener("popstate", () => updateRoute());
+    }
+
+    // Handle clicking on links
+    window.addEventListener("click", (ev) => {
+      const href = isNavigationClick(ev);
+      if (href) {
+        navigate(this, href);
+      }
+    });
+
+    // Handle first navigation
+    if (["", "/"].includes(curPath())) {
+      navigate(this, `/${getStorageDefaultPanelUrlPath()}`, true);
+    } else {
+      updateRoute();
+    }
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -129,31 +166,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     }
   }
 
-  private async _routeChanged(ev) {
-    // routeChangged event listener is called while we're doing the fist render,
-    // causing the update to be ignored. So delay it to next task (Lit render is sync).
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    const route = ev.detail.value as Route;
-    // If it's the first route that we process,
-    // check if we should navigate away from /
-    if (
-      this._route === undefined &&
-      (route.path === "" || route.path === "/")
-    ) {
-      navigate(window, `/${getStorageDefaultPanelUrlPath()}`, true);
-      return;
-    }
-
-    this._route = route;
-
-    const dividerPos = route.path.indexOf("/", 1);
-    this._panelUrl =
-      dividerPos === -1
-        ? route.path.substr(1)
-        : route.path.substr(1, dividerPos - 1);
-  }
-
   protected _checkVisibility() {
     if (document.hidden) {
       // If the document is hidden, we will prevent reconnects until we are visible again

yarn.lock

@@ -1961,14 +1961,6 @@
     "@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/app-route@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@polymer/app-route/-/app-route-3.0.2.tgz#749096fb610fb15d27c7b68446406f30786cf93d"
-  integrity sha512-8Y34evmsaYh7ONr+zLwLzXaU0iOZZQj1E2uB3iaToQHbOP1POhKlnmAycBQ/eFB8BwrdSUBaDQk+rZhio78FQw==
-  dependencies:
-    "@polymer/iron-location" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/app-storage@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/app-storage/-/app-storage-3.0.2.tgz#9303d9cf246f4882b223cca7c36901ecc6fa003c"
@@ -2103,13 +2095,6 @@
     "@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/iron-location@^3.0.0-pre.26":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-location/-/iron-location-3.0.1.tgz#43a59fced248ea71db5833116fcdefa186b79527"
-  integrity sha512-almb+p/fdSi4bxG+vyXjY51fDZxHMxwiug51Lfvr86wZRXN/u21Y6BapxG5n9f0hPSy9fimjIAvaYmozi7VjyQ==
-  dependencies:
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/iron-media-query@^3.0.0", "@polymer/iron-media-query@^3.0.0-pre.26":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/iron-media-query/-/iron-media-query-3.0.1.tgz#5cd8a1c1e8c9b8bafd3dd5da14e0f8d2cfa76d83"