Merge pull request #10136 from home-assistant/dev

2025-04-25 05:47:20 +00:00 · 2021-10-02 22:41:19 +02:00 · 2021-10-02 22:41:19 +02:00 · 31b69147f4
commit 31b69147f4
parent bc5010a953 8e3011807d
33 changed files with 555 additions and 179 deletions
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@ -30,7 +30,7 @@ jobs:
        env:
          CI: true
      - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-demos
      - name: Run eslint
        run: yarn run lint:eslint
      - name: Run tsc
@ -53,6 +53,8 @@ jobs:
        run: yarn install
        env:
          CI: true
+      - name: Build resources
+        run: ./node_modules/.bin/gulp build-translations build-locale-data
      - name: Run Tests
        run: yarn run test
  build:
--- a/.gitignore
+++ b/.gitignore
@ -3,7 +3,6 @@

 # build
 build
-build-translations/*
 hass_frontend/*
 dist

--- a/.prettierignore
+++ b/.prettierignore
@ -1,5 +1,4 @@
 build
-build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*
--- a/build-scripts/gulp/app.js
+++ b/build-scripts/gulp/app.js
@ -5,6 +5,7 @@ const env = require("../env");

 require("./clean.js");
 require("./translations.js");
+require("./locale-data.js");
 require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
@ -26,7 +27,8 @@ gulp.task(
      "gen-icons-json",
      "gen-pages-dev",
      "gen-index-app-dev",
-      "build-translations"
+      "build-translations",
+      "build-locale-data"
    ),
    "copy-static-app",
    env.useWDS()
@ -44,7 +46,7 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-app",
    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
    // Don't compress running tests
--- a/build-scripts/gulp/cast.js
+++ b/build-scripts/gulp/cast.js
@ -18,7 +18,7 @@ gulp.task(
    },
    "clean-cast",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-cast",
    "gen-index-cast-dev",
    env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
@ -33,7 +33,7 @@ gulp.task(
    },
    "clean-cast",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-cast",
    env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
    "gen-index-cast-prod"
--- a/build-scripts/gulp/demo.js
+++ b/build-scripts/gulp/demo.js
@ -20,7 +20,12 @@ gulp.task(
    },
    "clean-demo",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-index-demo-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
    "copy-static-demo",
    env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
  )
@ -35,7 +40,7 @@ gulp.task(
    "clean-demo",
    // Cast needs to be backwards compatible and older HA has no translations
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-demo",
    env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
    "gen-index-demo-prod"
--- a/build-scripts/gulp/gallery.js
+++ b/build-scripts/gulp/gallery.js
@ -51,6 +51,7 @@ gulp.task(
    gulp.parallel(
      "gen-icons-json",
      "build-translations",
+      "build-locale-data",
      "gather-gallery-demos"
    ),
    "copy-static-gallery",
@ -70,6 +71,7 @@ gulp.task(
    gulp.parallel(
      "gen-icons-json",
      "build-translations",
+      "build-locale-data",
      "gather-gallery-demos"
    ),
    "copy-static-gallery",
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@ -22,11 +22,18 @@ function copyTranslations(staticDir) {

  // Translation output
  fs.copySync(
-    polyPath("build-translations/output"),
+    polyPath("build/translations/output"),
    staticPath("translations")
  );
 }

+function copyLocaleData(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Locale data output
+  fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
+}
+
 function copyMdiIcons(staticDir) {
  const staticPath = genStaticPath(staticDir);

@ -84,6 +91,11 @@ function copyMapPanel(staticDir) {
  );
 }

+gulp.task("copy-locale-data", async () => {
+  const staticDir = paths.app_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-translations-app", async () => {
  const staticDir = paths.app_output_static;
  copyTranslations(staticDir);
@ -94,6 +106,11 @@ gulp.task("copy-translations-supervisor", async () => {
  copyTranslations(staticDir);
 });

+gulp.task("copy-locale-data-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
  const staticDir = paths.app_output_static;
  // Basic static files
@ -103,6 +120,7 @@ gulp.task("copy-static-app", async () => {
  copyPolyfills(staticDir);
  copyFonts(staticDir);
  copyTranslations(staticDir);
+  copyLocaleData(staticDir);
  copyMdiIcons(staticDir);

  // Panel assets
@ -123,6 +141,7 @@ gulp.task("copy-static-demo", async () => {
  copyMapPanel(paths.demo_output_static);
  copyFonts(paths.demo_output_static);
  copyTranslations(paths.demo_output_static);
+  copyLocaleData(paths.demo_output_static);
  copyMdiIcons(paths.demo_output_static);
 });

@ -137,6 +156,7 @@ gulp.task("copy-static-cast", async () => {
  copyMapPanel(paths.cast_output_static);
  copyFonts(paths.cast_output_static);
  copyTranslations(paths.cast_output_static);
+  copyLocaleData(paths.cast_output_static);
  copyMdiIcons(paths.cast_output_static);
 });

@ -152,5 +172,6 @@ gulp.task("copy-static-gallery", async () => {
  copyMapPanel(paths.gallery_output_static);
  copyFonts(paths.gallery_output_static);
  copyTranslations(paths.gallery_output_static);
+  copyLocaleData(paths.gallery_output_static);
  copyMdiIcons(paths.gallery_output_static);
 });
--- a/build-scripts/gulp/hassio.js
+++ b/build-scripts/gulp/hassio.js
@ -24,6 +24,8 @@ gulp.task(
    "gen-index-hassio-dev",
    "build-supervisor-translations",
    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
  )
 );
@ -38,6 +40,8 @@ gulp.task(
    "gen-icons-json",
    "build-supervisor-translations",
    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
    "gen-index-hassio-prod",
    ...// Don't compress running tests
--- a/build-scripts/gulp/locale-data.js
+++ b/build-scripts/gulp/locale-data.js
@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const del = require("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const merge = require("gulp-merge-json");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
+const paths = require("../paths");
+
+const outDir = "build/locale-data";
+
+gulp.task("clean-locale-data", () => del([outDir]));
+
+gulp.task("ensure-locale-data-build-dir", (done) => {
+  if (!fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+  done();
+});
+
+const modules = {
+  "intl-relativetimeformat": "RelativeTimeFormat",
+  "intl-datetimeformat": "DateTimeFormat",
+  "intl-numberformat": "NumberFormat",
+};
+
+gulp.task("create-locale-data", (done) => {
+  const translationMeta = JSON.parse(
+    fs.readFileSync(
+      path.join(paths.translations_src, "translationMetadata.json")
+    )
+  );
+  Object.entries(modules).forEach(([module, className]) => {
+    Object.keys(translationMeta).forEach((lang) => {
+      try {
+        const localeData = String(
+          fs.readFileSync(
+            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+          )
+        )
+          .replace(
+            new RegExp(
+              `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
+              "im"
+            ),
+            ""
+          )
+          .replace(/\)\s*}/im, "");
+        // make sure we have valid JSON
+        JSON.parse(localeData);
+        if (!fs.existsSync(path.join(outDir, module))) {
+          fs.mkdirSync(path.join(outDir, module), { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outDir, `${module}/${lang}.json`),
+          localeData
+        );
+      } catch (e) {
+        if (e.code !== "MODULE_NOT_FOUND") {
+          throw e;
+        }
+      }
+    });
+    done();
+  });
+});
+
+gulp.task(
+  "build-locale-data",
+  gulp.series(
+    "clean-locale-data",
+    "ensure-locale-data-build-dir",
+    "create-locale-data"
+  )
+);
--- a/build-scripts/gulp/translations.js
+++ b/build-scripts/gulp/translations.js
@ -17,7 +17,7 @@ const paths = require("../paths");

 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
-const workDir = "build-translations";
+const workDir = "build/translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
@ -121,7 +121,7 @@ gulp.task("clean-translations", () => del([workDir]));

 gulp.task("ensure-translations-build-dir", (done) => {
  if (!fs.existsSync(workDir)) {
-    fs.mkdirSync(workDir);
+    fs.mkdirSync(workDir, { recursive: true });
  }
  done();
 });
@ -336,6 +336,14 @@ gulp.task("build-translation-fragment-supervisor", () =>
  gulp
    .src(fullDir + "/*.json")
    .pipe(transform((data) => data.supervisor))
+    .pipe(
+      rename((filePath) => {
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
+      })
+    )
    .pipe(gulp.dest(workDir + "/supervisor"))
 );

--- a/build-scripts/gulp/webpack.js
+++ b/build-scripts/gulp/webpack.js
@ -35,26 +35,29 @@ const isWsl =
 *   listenHost?: string
 * }}
 */
-const runDevServer = ({
+const runDevServer = async ({
  compiler,
  contentBase,
  port,
  listenHost = "localhost",
-}) =>
-  new WebpackDevServer(compiler, {
-    open: true,
-    watchContentBase: true,
-    contentBase,
-  }).listen(port, listenHost, (err) => {
-    if (err) {
-      throw err;
-    }
-    // Server listening
-    log(
-      "[webpack-dev-server]",
-      `Project is running at http://localhost:${port}`
-    );
-  });
+}) => {
+  const server = new WebpackDevServer(
+    {
+      open: true,
+      host: listenHost,
+      port,
+      static: {
+        directory: contentBase,
+        watch: true,
+      },
+    },
+    compiler
+  );
+
+  await server.start();
+  // Server listening
+  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+};

 const doneHandler = (done) => (err, stats) => {
  if (err) {
@ -107,13 +110,13 @@ gulp.task("webpack-prod-app", () =>
  )
 );

-gulp.task("webpack-dev-server-demo", () => {
+gulp.task("webpack-dev-server-demo", () =>
  runDevServer({
    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
    contentBase: paths.demo_output_root,
    port: 8090,
-  });
-});
+  })
+);

 gulp.task("webpack-prod-demo", () =>
  prodBuild(
@ -123,15 +126,15 @@ gulp.task("webpack-prod-demo", () =>
  )
 );

-gulp.task("webpack-dev-server-cast", () => {
+gulp.task("webpack-dev-server-cast", () =>
  runDevServer({
    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
    contentBase: paths.cast_output_root,
    port: 8080,
    // Accessible from the network, because that's how Cast hits it.
    listenHost: "0.0.0.0",
-  });
-});
+  })
+);

 gulp.task("webpack-prod-cast", () =>
  prodBuild(
@ -148,7 +151,7 @@ gulp.task("webpack-watch-hassio", () => {
      isProdBuild: false,
      latestBuild: true,
    })
-  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
+  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());

  gulp.watch(
    path.join(paths.translations_src, "en.json"),
@ -164,14 +167,14 @@ gulp.task("webpack-prod-hassio", () =>
  )
 );

-gulp.task("webpack-dev-server-gallery", () => {
+gulp.task("webpack-dev-server-gallery", () =>
  runDevServer({
    // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
    compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
    contentBase: paths.gallery_output_root,
    port: 8100,
-  });
-});
+  })
+);

 gulp.task("webpack-prod-gallery", () =>
  prodBuild(
--- a/gallery/src/demos/demo-automation-trace-timeline.ts
+++ b/gallery/src/demos/demo-automation-trace-timeline.ts
@ -1,3 +1,4 @@
+/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
--- a/gallery/src/demos/demo-automation-trace.ts
+++ b/gallery/src/demos/demo-automation-trace.ts
@ -1,3 +1,4 @@
+/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";
--- a/gallery/src/demos/demo-ha-form.ts
+++ b/gallery/src/demos/demo-ha-form.ts
@ -0,0 +1,212 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-form/ha-form";
+import "../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import type { HaFormSchema } from "../../../src/components/ha-form/ha-form";
+
+const SCHEMAS: {
+  title: string;
+  translations?: Record<string, string>;
+  error?: Record<string, string>;
+  schema: HaFormSchema[];
+}[] = [
+  {
+    title: "Authentication",
+    translations: {
+      username: "Username",
+      password: "Password",
+      invalid_login: "Invalid login",
+    },
+    error: {
+      base: "invalid_login",
+    },
+    schema: [
+      {
+        type: "string",
+        name: "username",
+        required: true,
+      },
+      {
+        type: "string",
+        name: "password",
+        required: true,
+      },
+    ],
+  },
+
+  {
+    title: "One of each",
+    schema: [
+      {
+        type: "constant",
+        value: "Constant Value",
+        name: "constant",
+        required: true,
+      },
+      {
+        type: "boolean",
+        name: "bool",
+        optional: true,
+        default: false,
+      },
+      {
+        type: "integer",
+        name: "int",
+        optional: true,
+        default: 10,
+      },
+      {
+        type: "string",
+        name: "string",
+        optional: true,
+        default: "Default",
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "default"],
+          ["other", "other"],
+        ],
+        name: "select",
+        optional: true,
+        default: "default",
+      },
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+        },
+        name: "multi",
+        optional: true,
+        default: ["default"],
+      },
+    ],
+  },
+  {
+    title: "Multi select",
+    schema: [
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+        },
+        name: "multi",
+        optional: true,
+        default: ["default"],
+      },
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+          uno: "mas",
+          one: "more",
+          and: "another_one",
+          option: "1000",
+        },
+        name: "multi",
+        optional: true,
+        default: ["default"],
+      },
+    ],
+  },
+];
+
+@customElement("demo-ha-form")
+class DemoHaForm extends LitElement {
+  private lightModeData: any = [];
+
+  private darkModeData: any = [];
+
+  protected render(): TemplateResult {
+    return html`
+      ${SCHEMAS.map((info, idx) => {
+        const translations = info.translations || {};
+        const computeLabel = (schema) =>
+          translations[schema.name] || schema.name;
+        const computeError = (error) => translations[error] || error;
+
+        return [
+          [this.lightModeData, "light"],
+          [this.darkModeData, "dark"],
+        ].map(
+          ([data, type]) => html`
+            <div class="row" data-type=${type}>
+              <ha-card .header=${info.title}>
+                <div class="card-content">
+                  <ha-form
+                    .data=${data[idx]}
+                    .schema=${info.schema}
+                    .error=${info.error}
+                    .computeError=${computeError}
+                    .computeLabel=${computeLabel}
+                    @value-changed=${(e) => {
+                      data[idx] = e.detail.value;
+                      this.requestUpdate();
+                    }}
+                  ></ha-form>
+                </div>
+              </ha-card>
+              <pre>${JSON.stringify(data[idx], undefined, 2)}</pre>
+            </div>
+          `
+        );
+      })}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this.shadowRoot!.querySelectorAll("[data-type=dark]").forEach((el) => {
+      applyThemesOnElement(
+        el,
+        {
+          default_theme: "default",
+          default_dark_theme: "default",
+          themes: {},
+          darkMode: false,
+        },
+        "default",
+        { dark: true }
+      );
+    });
+  }
+
+  static styles = css`
+    .row {
+      margin: 0 auto;
+      max-width: 800px;
+      display: flex;
+      padding: 50px;
+      background-color: var(--primary-background-color);
+    }
+    ha-card {
+      width: 100%;
+      max-width: 384px;
+    }
+    pre {
+      width: 400px;
+      margin: 0 16px;
+      overflow: auto;
+      color: var(--primary-text-color);
+    }
+    @media only screen and (max-width: 800px) {
+      .row {
+        flex-direction: column;
+      }
+      pre {
+        margin: 16px 0;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-form": DemoHaForm;
+  }
+}
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@ -181,9 +181,7 @@ export class SupervisorBackupContent extends LitElement {
                  >
                    <ha-checkbox
                      .checked=${this.homeAssistant}
-                      @click=${() => {
-                        this.homeAssistant = !this.homeAssistant;
-                      }}
+                      @click=${this.toggleHomeAssistant}
                    >
                    </ha-checkbox>
                  </ha-formfield>
@ -272,6 +270,10 @@ export class SupervisorBackupContent extends LitElement {
    `;
  }

+  private toggleHomeAssistant() {
+    this.homeAssistant = !this.homeAssistant;
+  }
+
  static get styles(): CSSResultGroup {
    return css`
      .partial-picker ha-formfield {
--- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
@ -28,6 +28,7 @@ import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
 import { atLeastVersion } from "../../../../src/common/config/version";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";

@customElement("dialog-hassio-backup")
 class HassioBackupDialog
@ -107,7 +108,7 @@ class HassioBackupDialog
              fixed
              slot="primaryAction"
              @action=${this._handleMenuAction}
-              @closed=${(ev: Event) => ev.stopPropagation()}
+              @closed=${stopPropagation}
            >
              <mwc-icon-button slot="trigger" alt="menu">
                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
--- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
+++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
@ -65,32 +65,21 @@ class HassioDatadiskDialog extends LitElement {
        open
        scrimClickAction
        escapeKeyAction
+        .heading=${this.moving
+          ? this.dialogParams.supervisor.localize("dialog.datadisk_move.moving")
+          : this.dialogParams.supervisor.localize("dialog.datadisk_move.title")}
        @closed=${this.closeDialog}
        ?hideActions=${this.moving}
      >
        ${this.moving
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.moving"
-                  )}
-                </h2>
-              </slot>
-              <ha-circular-progress alt="Moving" size="large" active>
+          ? html` <ha-circular-progress alt="Moving" size="large" active>
              </ha-circular-progress>
              <p class="progress-text">
                ${this.dialogParams.supervisor.localize(
                  "dialog.datadisk_move.moving_desc"
                )}
              </p>`
-          : html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.title"
-                  )}
-                </h2>
-              </slot>
-              ${this.devices?.length
+          : html` ${this.devices?.length
                ? html`
                    ${this.dialogParams.supervisor.localize(
                      "dialog.datadisk_move.description",
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@ -184,23 +184,34 @@ class HassioHostInfo extends LitElement {
            <mwc-icon-button slot="trigger">
              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
            </mwc-icon-button>
-            <mwc-list-item @click=${() => this._handleMenuAction("hardware")}>
+            <mwc-list-item
+              .action=${"hardware"}
+              @click=${this._handleMenuAction}
+            >
              ${this.supervisor.localize("system.host.hardware")}
            </mwc-list-item>
            ${this.supervisor.host.features.includes("haos")
-              ? html`<mwc-list-item
-                    @click=${() => this._handleMenuAction("import_from_usb")}
+              ? html`
+                  <mwc-list-item
+                    .action=${"import_from_usb"}
+                    @click=${this._handleMenuAction}
                  >
                    ${this.supervisor.localize("system.host.import_from_usb")}
                  </mwc-list-item>
                  ${this.supervisor.host.features.includes("os_agent") &&
                  atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0)
-                    ? html`<mwc-list-item
-                        @click=${() => this._handleMenuAction("move_datadisk")}
-                      >
-                        ${this.supervisor.localize("system.host.move_datadisk")}
-                      </mwc-list-item>`
-                    : ""} `
+                    ? html`
+                        <mwc-list-item
+                          .action=${"move_datadisk"}
+                          @click=${this._handleMenuAction}
+                        >
+                          ${this.supervisor.localize(
+                            "system.host.move_datadisk"
+                          )}
+                        </mwc-list-item>
+                      `
+                    : ""}
+                `
              : ""}
          </ha-button-menu>
        </div>
@ -223,8 +234,8 @@ class HassioHostInfo extends LitElement {
    return network_info.interfaces.find((a) => a.primary)?.ipv4?.address![0];
  });

-  private async _handleMenuAction(action: string) {
-    switch (action) {
+  private async _handleMenuAction(ev) {
+    switch ((ev.target as any).action) {
      case "hardware":
        await this._showHardware();
        break;
--- a/setup.py
+++ b/setup.py
@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20210930.0",
+    version="20211002.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/frontend",
    author="The Home Assistant Authors",
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@ -4,6 +4,7 @@ import { shouldPolyfill as shouldPolyfillRelativeTime } from "@formatjs/intl-rel
 import { shouldPolyfill as shouldPolyfillDateTime } from "@formatjs/intl-datetimeformat/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
+import { getLocalLanguage } from "../../util/hass-translation";

 export type LocalizeFunc = (key: string, ...args: any[]) => string;
 interface FormatType {
@ -15,37 +16,32 @@ export interface FormatsType {
  time: FormatType;
 }

-let loadedPolyfillLocale: Set<string> | undefined;
-
-const polyfillPluralRules = shouldPolyfillPluralRules();
-const polyfillRelativeTime = shouldPolyfillRelativeTime();
-const polyfillDateTime = shouldPolyfillDateTime();
+const loadedPolyfillLocale = new Set();

 const polyfills: Promise<any>[] = [];
 if (__BUILD__ === "latest") {
  if (shouldPolyfillLocale()) {
    polyfills.push(import("@formatjs/intl-locale/polyfill"));
  }
-  if (polyfillPluralRules) {
+  if (shouldPolyfillPluralRules()) {
    polyfills.push(import("@formatjs/intl-pluralrules/polyfill"));
+    polyfills.push(import("@formatjs/intl-pluralrules/locale-data/en"));
  }
-  if (polyfillRelativeTime) {
+  if (shouldPolyfillRelativeTime()) {
    polyfills.push(import("@formatjs/intl-relativetimeformat/polyfill"));
  }
-  if (polyfillDateTime) {
+  if (shouldPolyfillDateTime()) {
    polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
  }
 }

-let polyfillLoaded = polyfills.length === 0;
-export const polyfillsLoaded = polyfillLoaded
-  ? undefined
-  : Promise.all(polyfills).then(() => {
-      loadedPolyfillLocale = new Set();
-      polyfillLoaded = true;
-      // Load English so it becomes the default
-      return loadPolyfillLocales("en");
-    });
+export const polyfillsLoaded =
+  polyfills.length === 0
+    ? undefined
+    : Promise.all(polyfills).then(() =>
+        // Load the default language
+        loadPolyfillLocales(getLocalLanguage())
+      );

 /**
 * Adapted from Polymer app-localize-behavior.
@ -74,11 +70,11 @@ export const computeLocalize = async (
  resources: Resources,
  formats?: FormatsType
 ): Promise<LocalizeFunc> => {
-  if (!polyfillLoaded) {
+  if (polyfillsLoaded) {
    await polyfillsLoaded;
  }

-  loadPolyfillLocales(language);
+  await loadPolyfillLocales(language);

  // Everytime any of the parameters change, invalidate the strings cache.
  cache._localizationCache = {};
@ -132,19 +128,44 @@ export const computeLocalize = async (
 };

 export const loadPolyfillLocales = async (language: string) => {
-  if (!loadedPolyfillLocale || loadedPolyfillLocale.has(language)) {
+  if (loadedPolyfillLocale.has(language)) {
    return;
  }
  loadedPolyfillLocale.add(language);
  try {
-    if (polyfillPluralRules) {
-      await import(`@formatjs/intl-pluralrules/locale-data/${language}`);
+    if (
+      Intl.NumberFormat &&
+      // @ts-ignore
+      typeof Intl.NumberFormat.__addLocaleData === "function"
+    ) {
+      const result = await fetch(
+        `/static/locale-data/intl-numberformat/${language}.json`
+      );
+      // @ts-ignore
+      Intl.NumberFormat.__addLocaleData(await result.json());
    }
-    if (polyfillRelativeTime) {
-      await import(`@formatjs/intl-relativetimeformat/locale-data/${language}`);
+    if (
+      // @ts-expect-error
+      Intl.RelativeTimeFormat &&
+      // @ts-ignore
+      typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
+    ) {
+      const result = await fetch(
+        `/static/locale-data/intl-relativetimeformat/${language}.json`
+      );
+      // @ts-ignore
+      Intl.RelativeTimeFormat.__addLocaleData(await result.json());
    }
-    if (polyfillDateTime) {
-      await import(`@formatjs/intl-datetimeformat/locale-data/${language}`);
+    if (
+      Intl.DateTimeFormat &&
+      // @ts-ignore
+      typeof Intl.DateTimeFormat.__addLocaleData === "function"
+    ) {
+      const result = await fetch(
+        `/static/locale-data/intl-datetimeformat/${language}.json`
+      );
+      // @ts-ignore
+      Intl.DateTimeFormat.__addLocaleData(await result.json());
    }
  } catch (_e) {
    // Ignore
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@ -21,6 +21,7 @@ const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
  "garage_door",
  "gas",
  "lock",
+  "motion",
  "opening",
  "problem",
  "safety",
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/src/components/ha-selector/ha-selector-area.ts
@ -39,8 +39,8 @@ export class HaAreaSelector extends LitElement {
      .value=${this.value}
      .label=${this.label}
      no-add
-      .deviceFilter=${(device) => this._filterDevices(device)}
-      .entityFilter=${(entity) => this._filterEntities(entity)}
+      .deviceFilter=${this._filterDevices}
+      .entityFilter=${this._filterEntities}
      .includeDeviceClasses=${this.selector.area.entity?.device_class
        ? [this.selector.area.entity.device_class]
        : undefined}
@ -51,16 +51,16 @@ export class HaAreaSelector extends LitElement {
    ></ha-area-picker>`;
  }

-  private _filterEntities(entity: EntityRegistryEntry): boolean {
+  private _filterEntities = (entity: EntityRegistryEntry): boolean => {
    if (this.selector.area.entity?.integration) {
      if (entity.platform !== this.selector.area.entity.integration) {
        return false;
      }
    }
    return true;
-  }
+  };

-  private _filterDevices(device: DeviceRegistryEntry): boolean {
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
    if (
      this.selector.area.device?.manufacturer &&
      device.manufacturer !== this.selector.area.device.manufacturer
@ -84,7 +84,7 @@ export class HaAreaSelector extends LitElement {
      }
    }
    return true;
-  }
+  };

  private async _loadConfigEntries() {
    this._configEntries = (await getConfigEntries(this.hass)).filter(
--- a/src/data/light.ts
+++ b/src/data/light.ts
@ -3,7 +3,7 @@ import {
  HassEntityBase,
 } from "home-assistant-js-websocket";

-export enum LightColorModes {
+export const enum LightColorModes {
  UNKNOWN = "unknown",
  ONOFF = "onoff",
  BRIGHTNESS = "brightness",
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@ -2,7 +2,7 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 import { DeviceRegistryEntry } from "./device_registry";

-export enum InclusionStrategy {
+export const enum InclusionStrategy {
  /**
   * Always uses Security S2 if supported, otherwise uses Security S0 for certain devices which don't work without encryption and uses no encryption otherwise.
   *
@ -83,6 +83,7 @@ export interface ZWaveJSNodeStatus {
  node_id: number;
  ready: boolean;
  status: number;
+  is_secure: boolean | string;
 }

 export interface ZwaveJSNodeMetadata {
@ -154,7 +155,7 @@ export interface ZWaveJSRemovedNode {
  label: string;
 }

-export enum NodeStatus {
+export const enum NodeStatus {
  Unknown,
  Asleep,
  Awake,
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
@ -116,6 +116,14 @@ export class HaDeviceInfoZWaveJS extends LitElement {
          ? this.hass.localize("ui.common.yes")
          : this.hass.localize("ui.common.no")}
      </div>
+      <div>
+        ${this.hass.localize("ui.panel.config.zwave_js.device_info.is_secure")}:
+        ${this._node.is_secure === true
+          ? this.hass.localize("ui.common.yes")
+          : this._node.is_secure === false
+          ? this.hass.localize("ui.common.no")
+          : this.hass.localize("ui.panel.config.zwave_js.device_info.unknown")}
+      </div>
    `;
  }

--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@ -102,7 +102,7 @@ class PanelDeveloperTools extends LitElement {
        }
        developer-tools-router {
          display: block;
-          height: calc(100vh - 112px);
+          height: calc(100vh - 104px);
        }
        ha-tabs {
          margin-left: max(env(safe-area-inset-left), 24px);
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/data-table/ha-data-table";
@ -32,63 +33,70 @@ class HaPanelDevStatistics extends LitElement {
    this._validateStatistics();
  }

-  private _columns: DataTableColumnContainer = {
-    state: {
-      title: "Entity",
-      sortable: true,
-      filterable: true,
-      grows: true,
-      template: (entityState, data: any) =>
-        html`${entityState
-          ? computeStateName(entityState)
-          : data.statistic_id}`,
-    },
-    statistic_id: {
-      title: "Statistic id",
-      sortable: true,
-      filterable: true,
-      hidden: this.narrow,
-      width: "30%",
-    },
-    unit_of_measurement: {
-      title: "Unit",
-      sortable: true,
-      filterable: true,
-      width: "10%",
-    },
-    issues: {
-      title: "Issue",
-      sortable: true,
-      filterable: true,
-      direction: "asc",
-      width: "30%",
-      template: (issues) =>
-        html`${issues
-          ? issues.map(
-              (issue) =>
-                this.hass.localize(
-                  `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
-                  issue.data
-                ) || issue.type
-            )
-          : ""}`,
-    },
-    fix: {
-      title: "",
-      template: (_, data: any) =>
-        html`${data.issues
-          ? html`<mwc-button @click=${this._fixIssue} .data=${data.issues}
-              >Fix issue</mwc-button
-            >`
-          : ""}`,
-      width: "113px",
-    },
-  };
+  /* eslint-disable lit/no-template-arrow */
+  private _columns = memoizeOne(
+    (localize): DataTableColumnContainer => ({
+      state: {
+        title: "Entity",
+        sortable: true,
+        filterable: true,
+        grows: true,
+        template: (entityState, data: any) =>
+          html`${entityState
+            ? computeStateName(entityState)
+            : data.statistic_id}`,
+      },
+      statistic_id: {
+        title: "Statistic id",
+        sortable: true,
+        filterable: true,
+        hidden: this.narrow,
+        width: "30%",
+      },
+      unit_of_measurement: {
+        title: "Unit",
+        sortable: true,
+        filterable: true,
+        width: "10%",
+      },
+      issues: {
+        title: "Issue",
+        sortable: true,
+        filterable: true,
+        direction: "asc",
+        width: "30%",
+        template: (issues) =>
+          html`${issues
+            ? issues.map(
+                (issue) =>
+                  localize(
+                    `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
+                    issue.data
+                  ) || issue.type
+              )
+            : ""}`,
+      },
+      fix: {
+        title: "",
+        template: (_, data: any) =>
+          html`${data.issues
+            ? html`<mwc-button
+                @click=${(ev) => this._fixIssue(ev)}
+                .data=${data.issues}
+              >
+                Fix issue
+              </mwc-button>`
+            : ""}`,
+        width: "113px",
+      },
+    })
+  );
+  /* eslint-enable lit/no-template-arrow */

  protected render() {
    return html`
      <ha-data-table
-        .columns=${this._columns}
+        .columns=${this._columns(this.hass.localize)}
        .data=${this._data}
        noDataText="No issues found!"
        id="statistic_id"
@ -123,11 +131,11 @@ class HaPanelDevStatistics extends LitElement {
    if (issue.type === "unsupported_unit") {
      showAlertDialog(this, {
        title: "Unsupported unit",
-        text: html`The unit of your entity is not a suppported unit for the
+        text: html`The unit of your entity is not a supported unit for the
          device class of the entity, ${issue.data.device_class}.
          <br />Statistics can not be generated until this entity has a
-          supported unit. <br /><br />If this unit was provided by an
-          integration, this is a bug. Please report an issue. <br /><br />If you
+          supported unit.<br /><br />If this unit was provided by an
+          integration, this is a bug. Please report an issue.<br /><br />If you
          have set this unit yourself, and want to have statistics generated,
          make sure the unit matched the device class. The supported units are
          documented in the
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
@ -3,6 +3,7 @@ import {
  ChartDataset,
  ChartOptions,
  ParsedDataType,
+  ScatterDataPoint,
 } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
 import { addHours } from "date-fns";
@ -21,11 +22,7 @@ import {
 import "../../../../components/chart/ha-chart-base";
 import type HaChartBase from "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
-import {
-  DeviceConsumptionEnergyPreference,
-  EnergyData,
-  getEnergyDataCollection,
-} from "../../../../data/energy";
+import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
 import {
  calculateStatisticSumGrowth,
  fetchStatistics,
@ -52,8 +49,6 @@ export class HuiEnergyDevicesGraphCard

  @query("ha-chart-base") private _chart?: HaChartBase;

-  private _deviceConsumptionPrefs: DeviceConsumptionEnergyPreference[] = [];
-
  public hassSubscribe(): UnsubscribeFunc[] {
    return [
      getEnergyDataCollection(this.hass, {
@ -110,11 +105,11 @@ export class HuiEnergyDevicesGraphCard
          ticks: {
            autoSkip: false,
            callback: (index) => {
-              const devicePref = this._deviceConsumptionPrefs[index];
-              const entity = this.hass.states[devicePref.stat_consumption];
-              return entity
-                ? computeStateName(entity)
-                : devicePref.stat_consumption;
+              const entityId = (
+                this._chartData.datasets[0].data[index] as ScatterDataPoint
+              ).y;
+              const entity = this.hass.states[entityId];
+              return entity ? computeStateName(entity) : entityId;
            },
          },
        },
@ -160,8 +155,6 @@ export class HuiEnergyDevicesGraphCard
  );

  private async _getStatistics(energyData: EnergyData): Promise<void> {
-    this._deviceConsumptionPrefs = energyData.prefs.device_consumption;
-
    this._data = await fetchStatistics(
      this.hass,
      addHours(energyData.start, -1),
--- a/src/panels/lovelace/components/hui-image.ts
+++ b/src/panels/lovelace/components/hui-image.ts
@ -23,7 +23,7 @@ const DEFAULT_FILTER = "grayscale(100%)";
 const MAX_IMAGE_WIDTH = 640;
 const ASPECT_RATIO_DEFAULT = 9 / 16;

-enum LoadState {
+const enum LoadState {
  Loading = 1,
  Loaded = 2,
  Error = 3,
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@ -31,6 +31,9 @@ const REDIRECTS: Redirects = {
  developer_events: {
    redirect: "/developer-tools/event",
  },
+  developer_statistics: {
+    redirect: "/developer-tools/statistics",
+  },
  config: {
    redirect: "/config",
  },
--- a/src/resources/translations-metadata.ts
+++ b/src/resources/translations-metadata.ts
@ -1,4 +1,4 @@
-import * as translationMetadata_ from "../../build-translations/translationMetadata.json";
+import * as translationMetadata_ from "../../build/translations/translationMetadata.json";
 import { TranslationMetadata } from "../types.js";

 export const translationMetadata = (translationMetadata_ as any)
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -2761,7 +2761,9 @@
            "device_config": "Configure Device",
            "reinterview_device": "Re-interview Device",
            "heal_node": "Heal Device",
-            "remove_failed": "Remove Failed Device"
+            "remove_failed": "Remove Failed Device",
+            "is_secure": "Secure",
+            "unknown": "Unknown"
          },
          "node_config": {
            "header": "Z-Wave Device Configuration",