use heading property

.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 build-locale-data gather-gallery-demos
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
       - name: Run eslint
         run: yarn run lint:eslint
       - name: Run tsc
@@ -53,8 +53,6 @@ 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:

.gitignore

@@ -3,6 +3,7 @@
 
 # build
 build
+build-translations/*
 hass_frontend/*
 dist
 

.prettierignore

@@ -1,4 +1,5 @@
 build
+build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*

build-scripts/gulp/app.js

@@ -5,7 +5,6 @@ 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");
@@ -27,8 +26,7 @@ gulp.task(
       "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations",
-      "build-locale-data"
+      "build-translations"
     ),
     "copy-static-app",
     env.useWDS()
@@ -46,7 +44,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests

build-scripts/gulp/cast.js

@@ -18,7 +18,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "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", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/demo.js

@@ -20,12 +20,7 @@ gulp.task(
     },
     "clean-demo",
     "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "gen-index-demo-dev",
-      "build-translations",
-      "build-locale-data"
-    ),
+    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
     "copy-static-demo",
     env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
@@ -40,7 +35,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", "build-locale-data"),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/gallery.js

@@ -51,7 +51,6 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",
@@ -71,7 +70,6 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
-      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",

build-scripts/gulp/gather-static.js

@@ -22,18 +22,11 @@ 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);
 
@@ -91,11 +84,6 @@ 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);
@@ -106,11 +94,6 @@ 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
@@ -120,7 +103,6 @@ gulp.task("copy-static-app", async () => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
-  copyLocaleData(staticDir);
   copyMdiIcons(staticDir);
 
   // Panel assets
@@ -141,7 +123,6 @@ 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);
 });
 
@@ -156,7 +137,6 @@ 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);
 });
 
@@ -172,6 +152,5 @@ 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);
 });

build-scripts/gulp/hassio.js

@@ -24,8 +24,6 @@ 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"
   )
 );
@@ -40,8 +38,6 @@ 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

build-scripts/gulp/locale-data.js

@@ -1,77 +0,0 @@
-/* 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"
-  )
-);

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, { recursive: true });
+    fs.mkdirSync(workDir);
   }
   done();
 });

build-scripts/gulp/webpack.js

@@ -35,29 +35,26 @@ const isWsl =
  *   listenHost?: string
  * }}
  */
-const runDevServer = async ({
+const runDevServer = ({
   compiler,
   contentBase,
   port,
   listenHost = "localhost",
-}) => {
-  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}`);
-};
+}) =>
+  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 doneHandler = (done) => (err, stats) => {
   if (err) {
@@ -110,13 +107,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(
@@ -126,15 +123,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(
@@ -151,7 +148,7 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
+  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
 
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
@@ -167,14 +164,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(

gallery/src/demos/demo-ha-form.ts

@@ -1,212 +0,0 @@
-/* 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;
-  }
-}

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -60,72 +60,85 @@ class HassioDatadiskDialog extends LitElement {
     if (!this.dialogParams) {
       return html``;
     }
+    let heading: string;
+    let content: TemplateResult;
+
+    if (this.moving) {
+      heading = this.dialogParams.supervisor.localize(
+        "dialog.datadisk_move.moving"
+      );
+      content = 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>
+      `;
+    } else {
+      heading = this.dialogParams.supervisor.localize(
+        "dialog.datadisk_move.title"
+      );
+      content = html`
+        ${this.devices?.length
+          ? html`
+              ${this.dialogParams.supervisor.localize(
+                "dialog.datadisk_move.description",
+                {
+                  current_path: this.dialogParams.supervisor.os.data_disk,
+                  time: calculateMoveTime(this.dialogParams.supervisor),
+                }
+              )}
+              <br /><br />
+
+              <paper-dropdown-menu
+                .label=${this.dialogParams.supervisor.localize(
+                  "dialog.datadisk_move.select_device"
+                )}
+                @value-changed=${this._select_device}
+              >
+                <paper-listbox slot="dropdown-content">
+                  ${this.devices.map(
+                    (device) => html`<paper-item>${device}</paper-item>`
+                  )}
+                </paper-listbox>
+              </paper-dropdown-menu>
+            `
+          : this.devices === undefined
+          ? this.dialogParams.supervisor.localize(
+              "dialog.datadisk_move.loading_devices"
+            )
+          : this.dialogParams.supervisor.localize(
+              "dialog.datadisk_move.no_devices"
+            )}
+
+        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+          ${this.dialogParams.supervisor.localize(
+            "dialog.datadisk_move.cancel"
+          )}
+        </mwc-button>
+
+        <mwc-button
+          .disabled=${!this.selectedDevice}
+          slot="primaryAction"
+          @click=${this._moveDatadisk}
+        >
+          ${this.dialogParams.supervisor.localize("dialog.datadisk_move.move")}
+        </mwc-button>
+      `;
+    }
+
     return html`
       <ha-dialog
         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}
+        .heading=${heading}
       >
-        ${this.moving
-          ? 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` ${this.devices?.length
-                ? html`
-                    ${this.dialogParams.supervisor.localize(
-                      "dialog.datadisk_move.description",
-                      {
-                        current_path: this.dialogParams.supervisor.os.data_disk,
-                        time: calculateMoveTime(this.dialogParams.supervisor),
-                      }
-                    )}
-                    <br /><br />
-
-                    <paper-dropdown-menu
-                      .label=${this.dialogParams.supervisor.localize(
-                        "dialog.datadisk_move.select_device"
-                      )}
-                      @value-changed=${this._select_device}
-                    >
-                      <paper-listbox slot="dropdown-content">
-                        ${this.devices.map(
-                          (device) => html`<paper-item>${device}</paper-item>`
-                        )}
-                      </paper-listbox>
-                    </paper-dropdown-menu>
-                  `
-                : this.devices === undefined
-                ? this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.loading_devices"
-                  )
-                : this.dialogParams.supervisor.localize(
-                    "dialog.datadisk_move.no_devices"
-                  )}
-
-              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.cancel"
-                )}
-              </mwc-button>
-
-              <mwc-button
-                .disabled=${!this.selectedDevice}
-                slot="primaryAction"
-                @click=${this._moveDatadisk}
-              >
-                ${this.dialogParams.supervisor.localize(
-                  "dialog.datadisk_move.move"
-                )}
-              </mwc-button>`}
+        ${content}
       </ha-dialog>
     `;
   }

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20211002.0",
+    version="20210930.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/common/translations/localize.ts

@@ -4,7 +4,6 @@ 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 {
@@ -16,32 +15,34 @@ export interface FormatsType {
   time: FormatType;
 }
 
-const loadedPolyfillLocale = new Set();
+const polyfillPluralRules = shouldPolyfillPluralRules();
+const polyfillRelativeTime = shouldPolyfillRelativeTime();
+const polyfillDateTime = shouldPolyfillDateTime();
 
 const polyfills: Promise<any>[] = [];
 if (__BUILD__ === "latest") {
   if (shouldPolyfillLocale()) {
     polyfills.push(import("@formatjs/intl-locale/polyfill"));
   }
-  if (shouldPolyfillPluralRules()) {
+  if (polyfillPluralRules) {
     polyfills.push(import("@formatjs/intl-pluralrules/polyfill"));
-    polyfills.push(import("@formatjs/intl-pluralrules/locale-data/en"));
   }
-  if (shouldPolyfillRelativeTime()) {
+  if (polyfillRelativeTime) {
     polyfills.push(import("@formatjs/intl-relativetimeformat/polyfill"));
   }
-  if (shouldPolyfillDateTime()) {
+  if (polyfillDateTime) {
     polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
   }
 }
 
-export const polyfillsLoaded =
-  polyfills.length === 0
-    ? undefined
-    : Promise.all(polyfills).then(() =>
-        // Load the default language
-        loadPolyfillLocales(getLocalLanguage())
-      );
+let polyfillLoaded = polyfills.length === 0;
+export const polyfillsLoaded = polyfillLoaded
+  ? undefined
+  : Promise.all(polyfills).then(() => {
+      polyfillLoaded = true;
+      // Load English so it becomes the default
+      return loadPolyfillLocales("en");
+    });
 
 /**
  * Adapted from Polymer app-localize-behavior.
@@ -70,11 +71,11 @@ export const computeLocalize = async (
   resources: Resources,
   formats?: FormatsType
 ): Promise<LocalizeFunc> => {
-  if (polyfillsLoaded) {
+  if (!polyfillLoaded) {
     await polyfillsLoaded;
   }
 
-  await loadPolyfillLocales(language);
+  loadPolyfillLocales(language);
 
   // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
@@ -128,44 +129,28 @@ export const computeLocalize = async (
 };
 
 export const loadPolyfillLocales = async (language: string) => {
-  if (loadedPolyfillLocale.has(language)) {
+  if (!polyfillsLoaded) {
     return;
   }
-  loadedPolyfillLocale.add(language);
+  await polyfillsLoaded;
   try {
-    if (
-      Intl.NumberFormat &&
-      // @ts-ignore
-      typeof Intl.NumberFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-numberformat/${language}.json`
+    if (polyfillPluralRules) {
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-pluralrules/locale-data/${language}`
       );
-      // @ts-ignore
-      Intl.NumberFormat.__addLocaleData(await result.json());
     }
-    if (
-      // @ts-expect-error
-      Intl.RelativeTimeFormat &&
-      // @ts-ignore
-      typeof Intl.RelativeTimeFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-relativetimeformat/${language}.json`
+    if (polyfillRelativeTime) {
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-relativetimeformat/locale-data/${language}`
       );
-      // @ts-ignore
-      Intl.RelativeTimeFormat.__addLocaleData(await result.json());
     }
-    if (
-      Intl.DateTimeFormat &&
-      // @ts-ignore
-      typeof Intl.DateTimeFormat.__addLocaleData === "function"
-    ) {
-      const result = await fetch(
-        `/static/locale-data/intl-datetimeformat/${language}.json`
+    if (polyfillDateTime) {
+      await import(
+        /* webpackExclude: /.+-.+\.js$/ */
+        `@formatjs/intl-datetimeformat/locale-data/${language}`
       );
-      // @ts-ignore
-      Intl.DateTimeFormat.__addLocaleData(await result.json());
     }
   } catch (_e) {
     // Ignore

src/components/chart/state-history-chart-timeline.ts

@@ -21,7 +21,6 @@ const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
   "garage_door",
   "gas",
   "lock",
-  "motion",
   "opening",
   "problem",
   "safety",

src/data/zwave_js.ts

@@ -83,7 +83,6 @@ export interface ZWaveJSNodeStatus {
   node_id: number;
   ready: boolean;
   status: number;
-  is_secure: boolean | string;
 }
 
 export interface ZwaveJSNodeMetadata {

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts

@@ -116,14 +116,6 @@ 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>
     `;
   }
 

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 - 104px);
+          height: calc(100vh - 112px);
         }
         ha-tabs {
           margin-left: max(env(safe-area-inset-left), 24px);

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

@@ -2,7 +2,6 @@ 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";
@@ -33,70 +32,63 @@ class HaPanelDevStatistics extends LitElement {
     this._validateStatistics();
   }
 
-  /* 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 */
+  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",
+    },
+  };
 
   protected render() {
     return html`
       <ha-data-table
-        .columns=${this._columns(this.hass.localize)}
+        .columns=${this._columns}
         .data=${this._data}
         noDataText="No issues found!"
         id="statistic_id"
@@ -131,11 +123,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 supported unit for the
+        text: html`The unit of your entity is not a suppported 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

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -3,7 +3,6 @@ import {
   ChartDataset,
   ChartOptions,
   ParsedDataType,
-  ScatterDataPoint,
 } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
 import { addHours } from "date-fns";
@@ -22,7 +21,11 @@ import {
 import "../../../../components/chart/ha-chart-base";
 import type HaChartBase from "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
-import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
+import {
+  DeviceConsumptionEnergyPreference,
+  EnergyData,
+  getEnergyDataCollection,
+} from "../../../../data/energy";
 import {
   calculateStatisticSumGrowth,
   fetchStatistics,
@@ -49,6 +52,8 @@ export class HuiEnergyDevicesGraphCard
 
   @query("ha-chart-base") private _chart?: HaChartBase;
 
+  private _deviceConsumptionPrefs: DeviceConsumptionEnergyPreference[] = [];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {
@@ -105,11 +110,11 @@ export class HuiEnergyDevicesGraphCard
           ticks: {
             autoSkip: false,
             callback: (index) => {
-              const entityId = (
-                this._chartData.datasets[0].data[index] as ScatterDataPoint
-              ).y;
-              const entity = this.hass.states[entityId];
-              return entity ? computeStateName(entity) : entityId;
+              const devicePref = this._deviceConsumptionPrefs[index];
+              const entity = this.hass.states[devicePref.stat_consumption];
+              return entity
+                ? computeStateName(entity)
+                : devicePref.stat_consumption;
             },
           },
         },
@@ -155,6 +160,8 @@ 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),

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

@@ -31,9 +31,6 @@ const REDIRECTS: Redirects = {
   developer_events: {
     redirect: "/developer-tools/event",
   },
-  developer_statistics: {
-    redirect: "/developer-tools/statistics",
-  },
   config: {
     redirect: "/config",
   },

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)

src/translations/en.json

@@ -2761,9 +2761,7 @@
             "device_config": "Configure Device",
             "reinterview_device": "Re-interview Device",
             "heal_node": "Heal Device",
-            "remove_failed": "Remove Failed Device",
-            "is_secure": "Secure",
-            "unknown": "Unknown"
+            "remove_failed": "Remove Failed Device"
           },
           "node_config": {
             "header": "Z-Wave Device Configuration",