PolymerElement cleanup (#18793)

build-scripts/bundle.cjs

@@ -125,7 +125,6 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
             { name: "svg", encapsulation: "svg" },
             { name: "css", encapsulation: "style" },
           ],
-          "@polymer/polymer/lib/utils/html-tag": ["html"],
         },
         strictCSS: true,
         htmlMinifier: module.exports.htmlMinifierOptions,

package.json

@@ -84,9 +84,6 @@
     "@material/web": "=1.0.1",
     "@mdi/js": "7.3.67",
     "@mdi/svg": "7.3.67",
-    "@polymer/iron-flex-layout": "3.0.1",
-    "@polymer/iron-input": "3.0.1",
-    "@polymer/iron-resizable-behavior": "3.0.1",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",

src/entrypoints/custom-panel.ts

@@ -2,7 +2,6 @@
 import "../resources/compatibility";
 import "../resources/safari-14-attachshadow-patch";
 
-import { PolymerElement } from "@polymer/polymer";
 import { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
@@ -36,7 +35,7 @@ window.loadES5Adapter = () => {
   return es5Loaded;
 };
 
-let panelEl: HTMLElement | PolymerElement | undefined;
+let panelEl: HTMLElement | undefined;
 
 function setProperties(properties) {
   if (!panelEl) {

src/layouts/partial-panel-resolver.ts

@@ -1,4 +1,3 @@
-import { PolymerElement } from "@polymer/polymer";
 import {
   STATE_NOT_RUNNING,
   STATE_RUNNING,
@@ -99,20 +98,10 @@ class PartialPanelResolver extends HassRouterPage {
   protected updatePageEl(el) {
     const hass = this.hass;
 
-    if ("setProperties" in el) {
+    el.hass = hass;
-      // As long as we have Polymer panels
+    el.narrow = this.narrow;
-      (el as PolymerElement).setProperties({
+    el.route = this.routeTail;
-        hass: this.hass,
+    el.panel = hass.panels[this._currentPage];
-        narrow: this.narrow,
-        route: this.routeTail,
-        panel: hass.panels[this._currentPage],
-      });
-    } else {
-      el.hass = hass;
-      el.narrow = this.narrow;
-      el.route = this.routeTail;
-      el.panel = hass.panels[this._currentPage];
-    }
   }
 
   private _checkVisibility() {

src/mixins/events-mixin.js

@@ -1,58 +0,0 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
-import { fireEvent } from "../common/dom/fire_event";
-
-// Polymer legacy event helpers used courtesy of the Polymer project.
-//
-// Copyright (c) 2017 The Polymer Authors. All rights reserved.
-//
-// Redistribution and use in source and binary forms, with or without
-// modification, are permitted provided that the following conditions are
-// met:
-//
-//    * Redistributions of source code must retain the above copyright
-// notice, this list of conditions and the following disclaimer.
-//    * Redistributions in binary form must reproduce the above
-// copyright notice, this list of conditions and the following disclaimer
-// in the documentation and/or other materials provided with the
-// distribution.
-//    * Neither the name of Google Inc. nor the names of its
-// contributors may be used to endorse or promote products derived from
-// this software without specific prior written permission.
-//
-// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-/* @polymerMixin */
-export const EventsMixin = dedupingMixin(
-  (superClass) =>
-    class extends superClass {
-      /**
-   * Dispatches a custom event with an optional detail value.
-   *
-   * @param {string} type Name of event type.
-   * @param {*=} detail Detail value containing event-specific
-   *   payload.
-   * @param {{ bubbles: (boolean|undefined),
-               cancelable: (boolean|undefined),
-                composed: (boolean|undefined) }=}
-    *  options Object specifying options.  These may include:
-    *  `bubbles` (boolean, defaults to `true`),
-    *  `cancelable` (boolean, defaults to false), and
-    *  `node` on which to fire the event (HTMLElement, defaults to `this`).
-    * @return {Event} The new event that was fired.
-    */
-      fire(type, detail, options) {
-        options = options || {};
-        return fireEvent(options.node || this, type, detail, options);
-      }
-    }
-);

src/mixins/localize-mixin.js

@@ -1,30 +0,0 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
-/**
- * Polymer Mixin to enable a localize function powered by language/resources from hass object.
- *
- * @polymerMixin
- */
-export default dedupingMixin(
-  (superClass) =>
-    class extends superClass {
-      static get properties() {
-        return {
-          hass: Object,
-
-          /**
-           * Translates a string to the current `language`. Any parameters to the
-           * string should be passed in order, as follows:
-           * `localize(stringKey, param1Name, param1Value, param2Name, param2Value)`
-           */
-          localize: {
-            type: Function,
-            computed: "__computeLocalize(hass.localize)",
-          },
-        };
-      }
-
-      __computeLocalize(localize) {
-        return localize;
-      }
-    }
-);

src/mixins/navigate-mixin.js

@@ -1,15 +0,0 @@
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
-import { navigate } from "../common/navigate";
-
-/*
- * @polymerMixin
- * @appliesMixin EventsMixin
- */
-export default dedupingMixin(
-  (superClass) =>
-    class extends superClass {
-      navigate(...args) {
-        navigate(...args);
-      }
-    }
-);

src/panels/config/cloud/ha-config-cloud.ts

@@ -1,4 +1,3 @@
-import { PolymerElement } from "@polymer/polymer";
 import { customElement, property, state } from "lit/decorators";
 import { navigate } from "../../../common/navigate";
 import { CloudStatus } from "../../../data/cloud";
@@ -113,24 +112,12 @@ class HaConfigCloud extends HassRouterPage {
       return;
     }
 
-    if ("setProperties" in el) {
+    el.hass = this.hass;
-      // As long as we have Polymer pages
+    el.email = this._loginEmail;
-      (el as PolymerElement).setProperties({
+    el.isWide = this.isWide;
-        hass: this.hass,
+    el.narrow = this.narrow;
-        email: this._loginEmail,
+    el.cloudStatus = this.cloudStatus;
-        isWide: this.isWide,
+    el.flashMessage = this._flashMessage;
-        narrow: this.narrow,
-        cloudStatus: this.cloudStatus,
-        flashMessage: this._flashMessage,
-      });
-    } else {
-      el.hass = this.hass;
-      el.email = this._loginEmail;
-      el.isWide = this.isWide;
-      el.narrow = this.narrow;
-      el.cloudStatus = this.cloudStatus;
-      el.flashMessage = this._flashMessage;
-    }
   }
 }
 

src/panels/config/cloud/login/cloud-login.ts

@@ -18,7 +18,6 @@ import {
 } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
-import "../../../../styles/polymer-ha-style";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
 import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";

src/panels/config/ha-panel-config.ts

@@ -28,7 +28,6 @@ import {
   mdiUpdate,
   mdiViewDashboard,
 } from "@mdi/js";
-import { PolymerElement } from "@polymer/polymer";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -605,24 +604,12 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
     const isWide =
       this.hass.dockedSidebar === "docked" ? this._wideSidebar : this._wide;
 
-    if ("setProperties" in el) {
+    el.route = this.routeTail;
-      // As long as we have Polymer panels
+    el.hass = this.hass;
-      (el as PolymerElement).setProperties({
+    el.showAdvanced = Boolean(this.hass.userData?.showAdvanced);
-        route: this.routeTail,
+    el.isWide = isWide;
-        hass: this.hass,
+    el.narrow = this.narrow;
-        showAdvanced: Boolean(this.hass.userData?.showAdvanced),
+    el.cloudStatus = this._cloudStatus;
-        isWide,
-        narrow: this.narrow,
-        cloudStatus: this._cloudStatus,
-      });
-    } else {
-      el.route = this.routeTail;
-      el.hass = this.hass;
-      el.showAdvanced = Boolean(this.hass.userData?.showAdvanced);
-      el.isWide = isWide;
-      el.narrow = this.narrow;
-      el.cloudStatus = this._cloudStatus;
-    }
   }
 
   private async _updateCloudStatus() {

src/panels/developer-tools/developer-tools-router.ts

@@ -1,4 +1,3 @@
-import { PolymerElement } from "@polymer/polymer";
 import { customElement, property } from "lit/decorators";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { HomeAssistant } from "../../types";
@@ -69,16 +68,8 @@ class DeveloperToolsRouter extends HassRouterPage {
   }
 
   protected updatePageEl(el) {
-    if ("setProperties" in el) {
+    el.hass = this.hass;
-      // As long as we have Polymer pages
+    el.narrow = this.narrow;
-      (el as PolymerElement).setProperties({
-        hass: this.hass,
-        narrow: this.narrow,
-      });
-    } else {
-      el.hass = this.hass;
-      el.narrow = this.narrow;
-    }
   }
 }
 

src/panels/developer-tools/service/developer-tools-service.ts

@@ -28,7 +28,6 @@ import {
   serviceCallWillDisconnect,
 } from "../../../data/service";
 import { haStyle } from "../../../resources/styles";
-import "../../../styles/polymer-ha-style";
 import { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 

src/styles/polymer-ha-style-dialog.ts

@@ -1,16 +0,0 @@
-import "@polymer/polymer/lib/elements/dom-module";
-import { CSSResult } from "lit";
-import { haStyleDialog } from "../resources/styles";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
-documentContainer.innerHTML = `<dom-module id="ha-style-dialog">
-<template>
-  <style>
-    ${(haStyleDialog as CSSResult).cssText}
-  </style>
-</template>
-</dom-module>`;
-
-document.head.appendChild(documentContainer.content);

src/styles/polymer-ha-style.ts

@@ -1,16 +0,0 @@
-import "@polymer/polymer/lib/elements/dom-module";
-import { CSSResult } from "lit";
-import { haStyle } from "../resources/styles";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-
-documentContainer.innerHTML = `<dom-module id="ha-style">
-  <template>
-    <style>
-    ${(haStyle as CSSResult).cssText}
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild(documentContainer.content);

yarn.lock

@@ -3503,7 +3503,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-flex-layout@npm:3.0.1, @polymer/iron-flex-layout@npm:^3.0.0-pre.26":
+"@polymer/iron-flex-layout@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-flex-layout@npm:3.0.1"
   dependencies:
@@ -3542,7 +3542,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-input@npm:3.0.1, @polymer/iron-input@npm:^3.0.0-pre.26":
+"@polymer/iron-input@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-input@npm:3.0.1"
   dependencies:
@@ -3586,7 +3586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-resizable-behavior@npm:3.0.1, @polymer/iron-resizable-behavior@npm:^3.0.0-pre.26":
+"@polymer/iron-resizable-behavior@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-resizable-behavior@npm:3.0.1"
   dependencies:
@@ -9627,9 +9627,6 @@ __metadata:
     "@octokit/plugin-retry": "npm:6.0.1"
     "@octokit/rest": "npm:20.0.2"
     "@open-wc/dev-server-hmr": "npm:0.1.4"
-    "@polymer/iron-flex-layout": "npm:3.0.1"
-    "@polymer/iron-input": "npm:3.0.1"
-    "@polymer/iron-resizable-behavior": "npm:3.0.1"
     "@polymer/paper-input": "npm:3.2.1"
     "@polymer/paper-item": "npm:3.0.1"
     "@polymer/paper-listbox": "npm:3.0.1"