Merge pull request #5920 from home-assistant/dev

build-scripts/webpack.js

@@ -2,6 +2,7 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const env = require("./env.js");
 const { babelLoaderConfig } = require("./babel.js");
@@ -51,6 +52,7 @@ const createWebpackConfig = ({
       ],
     },
     plugins: [
+      new WorkerPlugin(),
       new ManifestPlugin(),
       new webpack.DefinePlugin({
         __DEV__: !isProdBuild,
@@ -105,7 +107,7 @@ const createWebpackConfig = ({
         latestBuild ? "frontend_latest" : "frontend_es5"
       ),
       publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
-      // For workerize loader
+      // To silence warning in worker plugin
       globalObject: "self",
     },
   };

demo/src/configs/teachingbirds/lovelace.ts

@@ -63,7 +63,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   elements: [
                     {
                       style: {
-                        "--mdc-icon-size": "100px",
+                        "--mdc-icon-size": "100%",
                         top: "50%",
                         left: "50%",
                       },

package.json

@@ -86,6 +86,7 @@
     "chart.js": "~2.8.0",
     "chartjs-chart-timeline": "^0.3.0",
     "codemirror": "^5.49.0",
+    "comlink": "^4.3.0",
     "cpx": "^1.5.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
@@ -108,6 +109,7 @@
     "memoize-one": "^5.0.2",
     "moment": "^2.24.0",
     "node-vibrant": "^3.1.5",
+    "proxy-polyfill": "^0.3.1",
     "regenerator-runtime": "^0.13.2",
     "resize-observer": "^1.0.0",
     "roboto-fontface": "^0.10.0",
@@ -195,7 +197,7 @@
     "webpack-dev-server": "^3.10.3",
     "webpack-manifest-plugin": "^2.0.4",
     "workbox-build": "^5.1.3",
-    "workerize-loader": "^1.1.0"
+    "worker-plugin": "^4.0.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
   "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",

setup.py

@@ -2,7 +2,7 @@
 
 setup(
     name="home-assistant-frontend",
-    version="20200515.0",
+    version="20200518.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/components/data-table/ha-data-table.ts

@@ -14,16 +14,14 @@ import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { scroll } from "lit-virtualizer";
-// @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import sortFilterWorker from "workerize-loader!./sort_filter_worker";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../common/search/search-input";
 import { debounce } from "../../common/util/debounce";
 import { nextRender } from "../../common/util/render-status";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-icon";
+import { filterSortData } from "./sort-filter";
 
 declare global {
   // for fire event
@@ -117,8 +115,6 @@ export class HaDataTable extends LitElement {
 
   private curRequest = 0;
 
-  private _worker: any | undefined;
-
   private _debounceSearch = debounce(
     (value: string) => {
       this._filter = value;
@@ -140,11 +136,6 @@ export class HaDataTable extends LitElement {
     }
   }
 
-  protected firstUpdated(properties: PropertyValues) {
-    super.firstUpdated(properties);
-    this._worker = sortFilterWorker();
-  }
-
   protected updated(properties: PropertyValues) {
     super.updated(properties);
 
@@ -383,7 +374,7 @@ export class HaDataTable extends LitElement {
     this.curRequest++;
     const curRequest = this.curRequest;
 
-    const filterProm = this._worker.filterSortData(
+    const filterProm = filterSortData(
       this.data,
       this._sortColumns,
       this._filter,

src/components/data-table/sort-filter.ts

@@ -0,0 +1,26 @@
+import { wrap } from "comlink";
+
+type FilterSortDataType = typeof import("./sort_filter_worker").api["filterSortData"];
+type filterSortDataParamTypes = Parameters<FilterSortDataType>;
+
+let worker: any | undefined;
+
+export const filterSortData = async (
+  data: filterSortDataParamTypes[0],
+  columns: filterSortDataParamTypes[1],
+  filter: filterSortDataParamTypes[2],
+  direction: filterSortDataParamTypes[3],
+  sortColumn: filterSortDataParamTypes[4]
+): Promise<ReturnType<FilterSortDataType>> => {
+  if (!worker) {
+    worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+  }
+
+  return await worker.filterSortData(
+    data,
+    columns,
+    filter,
+    direction,
+    sortColumn
+  );
+};

src/components/data-table/sort_filter_worker.ts

@@ -1,57 +1,34 @@
-import memoizeOne from "memoize-one";
-// eslint-disable-next-line import/no-cycle
-import {
-  DataTableColumnContainer,
-  DataTableColumnData,
+// To use comlink under ES5
+import "proxy-polyfill";
+import { expose } from "comlink";
+import type {
+  DataTableSortColumnData,
   DataTableRowData,
   SortingDirection,
+  HaDataTable,
 } from "./ha-data-table";
 
-export const filterSortData = memoizeOne(
-  async (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    filter: string,
-    direction: SortingDirection,
-    sortColumn?: string
-  ) =>
-    sortColumn
-      ? _memSortData(
-          await _memFilterData(data, columns, filter),
-          columns,
-          direction,
-          sortColumn
-        )
-      : _memFilterData(data, columns, filter)
-);
+type SortableColumnContainer = HaDataTable["_sortColumns"];
 
-const _memFilterData = memoizeOne(
-  async (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    filter: string
-  ) => {
-    if (!filter) {
-      return data;
-    }
-    return filterData(data, columns, filter.toUpperCase());
-  }
-);
+const filterSortData = (
+  data: DataTableRowData[],
+  columns: SortableColumnContainer,
+  filter: string,
+  direction: SortingDirection,
+  sortColumn?: string
+) => {
+  const filteredData = filter ? filterData(data, columns, filter) : data;
 
-const _memSortData = memoizeOne(
-  (
-    data: DataTableRowData[],
-    columns: DataTableColumnContainer,
-    direction: SortingDirection,
-    sortColumn: string
-  ) => {
-    return sortData(data, columns[sortColumn], direction, sortColumn);
+  if (!sortColumn) {
+    return filteredData;
   }
-);
 
-export const filterData = (
+  return sortData(filteredData, columns, direction, sortColumn);
+};
+
+const filterData = (
   data: DataTableRowData[],
-  columns: DataTableColumnContainer,
+  columns: SortableColumnContainer,
   filter: string
 ) =>
   data.filter((row) => {
@@ -70,9 +47,9 @@ export const filterData = (
     });
   });
 
-export const sortData = (
+const sortData = (
   data: DataTableRowData[],
-  column: DataTableColumnData,
+  column: DataTableSortColumnData,
   direction: SortingDirection,
   sortColumn: string
 ) =>
@@ -105,3 +82,10 @@ export const sortData = (
     }
     return 0;
   });
+
+// Export for types
+export const api = {
+  filterSortData,
+};
+
+expose(api);

src/components/entity/ha-entity-picker.ts

@@ -38,15 +38,14 @@ const rowRenderer = (
         }
       </style>
       <paper-icon-item>
-        <state-badge state-obj="[[item]]" slot="item-icon"></state-badge>
+        <state-badge slot="item-icon"></state-badge>
         <paper-item-body two-line="">
-          <div class='name'>[[_computeStateName(item)]]</div>
-          <div secondary>[[item.entity_id]]</div>
+          <div class='name'></div>
+          <div secondary></div>
         </paper-item-body>
       </paper-icon-item>
     `;
   }
-
   root.querySelector("state-badge")!.stateObj = model.item;
   root.querySelector(".name")!.textContent = computeStateName(model.item);
   root.querySelector("[secondary]")!.textContent = model.item.entity_id;
@@ -148,6 +147,10 @@ class HaEntityPicker extends LitElement {
     }
   );
 
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("_opened") && this._opened) {
       const states = this._getStates(

src/components/ha-markdown.ts

@@ -1,10 +1,6 @@
 import { customElement, property, UpdatingElement } from "lit-element";
-// @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import markdownWorker from "workerize-loader!../resources/markdown_worker";
 import { fireEvent } from "../common/dom/fire_event";
-
-let worker: any | undefined;
+import { renderMarkdown } from "../resources/render-markdown";
 
 @customElement("ha-markdown")
 class HaMarkdown extends UpdatingElement {
@@ -16,16 +12,11 @@ class HaMarkdown extends UpdatingElement {
 
   protected update(changedProps) {
     super.update(changedProps);
-
-    if (!worker) {
-      worker = markdownWorker();
-    }
-
     this._render();
   }
 
   private async _render() {
-    this.innerHTML = await worker.renderMarkdown(
+    this.innerHTML = await renderMarkdown(
       this.content,
       {
         breaks: this.breaks,

src/data/lovelace_custom_cards.ts

@@ -3,6 +3,7 @@ export interface CustomCardEntry {
   name?: string;
   description?: string;
   preview?: boolean;
+  documentationURL?: string;
 }
 
 export interface CustomCardsWindow {

src/entrypoints/compatibility.ts

@@ -2,6 +2,8 @@ import objAssign from "es6-object-assign";
 import "mdn-polyfills/Array.prototype.includes";
 import "regenerator-runtime/runtime";
 import "unfetch/polyfill";
+// To use comlink under ES5
+import "proxy-polyfill";
 
 objAssign.polyfill();
 

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

@@ -76,7 +76,7 @@ class HaConfigAutomation extends HassRouterPage {
     if (this.hass) {
       if (!pageEl.automations || !changedProps) {
         pageEl.automations = this._getAutomations(this.hass.states);
-      } else if (changedProps && changedProps.has("hass")) {
+      } else if (changedProps.has("hass")) {
         this._debouncedUpdateAutomations(pageEl);
       }
     }

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

@@ -147,7 +147,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       filter?: string
     ): ConfigEntryExtended[] => {
       if (!filter) {
-        return configEntries;
+        return [...configEntries];
       }
       const options: Fuse.FuseOptions<ConfigEntryExtended> = {
         keys: ["domain", "localized_domain_name", "title"],
@@ -170,11 +170,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         filter
       );
       const ignored: ConfigEntryExtended[] = [];
-      filteredConfigEnties.forEach((item, index) => {
-        if (item.source === "ignore") {
-          ignored.push(filteredConfigEnties.splice(index, 1)[0]);
+      for (let i = filteredConfigEnties.length - 1; i >= 0; i--) {
+        if (filteredConfigEnties[i].source === "ignore") {
+          ignored.push(filteredConfigEnties.splice(i, 1)[0]);
         }
-      });
+      }
       return [groupByIntegration(filteredConfigEnties), ignored];
     }
   );

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

@@ -68,7 +68,7 @@ class HaConfigScene extends HassRouterPage {
     if (this.hass) {
       if (!pageEl.scenes || !changedProps) {
         pageEl.scenes = this._getScenes(this.hass.states);
-      } else if (changedProps && changedProps.has("hass")) {
+      } else if (changedProps.has("hass")) {
         this._debouncedUpdateScenes(pageEl);
       }
     }

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

@@ -73,7 +73,7 @@ class HaConfigScript extends HassRouterPage {
     if (this.hass) {
       if (!pageEl.scripts || !changedProps) {
         pageEl.scripts = this._getScripts(this.hass.states);
-      } else if (changedProps && changedProps.has("hass")) {
+      } else if (changedProps.has("hass")) {
         this._debouncedUpdateScripts(pageEl);
       }
     }

src/panels/developer-tools/event/developer-tools-event.js

@@ -51,6 +51,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
           max-width: 800px;
           margin: 16px auto;
         }
+
+        a {
+          color: var(--primary-color);
+        }
       </style>
 
       <div class$="[[computeFormClasses(narrow)]]">

src/panels/developer-tools/event/events-list.js

@@ -24,7 +24,7 @@ class EventsList extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
 
         a {
-          color: var(--dark-primary-color);
+          color: var(--primary-color);
         }
       </style>