Use browser default time and number formatting with polyfills if need…

…ed (#9481) Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
home-assistant · Sep 29, 2021 · 1bccbd4 · 1bccbd4
1 parent d7f00df
commit 1bccbd4
Show file tree

Hide file tree

Showing 91 changed files with 938 additions and 960 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -12,7 +12,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   lint:
@@ -53,8 +53,8 @@ jobs:
         run: yarn install
         env:
           CI: true
-      - name: Run Mocha
-        run: yarn run mocha
+      - name: Run Tests
+        run: yarn run test
   build:
     runs-on: ubuntu-latest
     needs: [lint, test]

diff --git a/.github/workflows/demo.yaml b/.github/workflows/demo.yaml
@@ -7,7 +7,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   deploy:

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -8,7 +8,7 @@ on:
 env:
   PYTHON_VERSION: 3.8
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   release:

diff --git a/.mocharc.cjs b/.mocharc.cjs
diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
@@ -82,6 +82,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],

diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js
@@ -6,6 +6,7 @@ const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
 const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -74,6 +75,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
+      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -149,6 +151,9 @@ const createWebpackConfig = ({
       // To silence warning in worker plugin
       globalObject: "self",
     },
+    experiments: {
+      topLevelAwait: true,
+    },
   };
 };
 

diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts
@@ -14,7 +14,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
-import relativeTime from "../../../src/common/datetime/relative_time";
+import { relativeTime } from "../../../src/common/datetime/relative_time";
 import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
@@ -133,7 +133,7 @@ export class HassioBackups extends LitElement {
         filterable: true,
         sortable: true,
         template: (entry: string) =>
-          relativeTime(new Date(entry), this.hass.localize),
+          relativeTime(new Date(entry), this.hass.locale),
       },
       secondary: {
         title: "",

diff --git a/netlify.toml b/netlify.toml
@@ -1,3 +1,3 @@
 [build.environment]
   YARN_VERSION = "1.22.11"
-  NODE_OPTIONS = "--max_old_space_size=4096"
+  NODE_OPTIONS = "--max_old_space_size=6144"
diff --git a/package.json b/package.json
@@ -16,8 +16,7 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
-    "test": "yarn run mocha"
+    "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -34,9 +33,13 @@
     "@codemirror/stream-parser": "^0.19.1",
     "@codemirror/text": "^0.19.2",
     "@codemirror/view": "^0.19.4",
+    "@formatjs/intl-datetimeformat": "^4.2.4",
     "@formatjs/intl-getcanonicallocales": "^1.7.3",
-    "@formatjs/intl-locale": "^2.4.37",
-    "@formatjs/intl-pluralrules": "^4.1.3",
+    "@formatjs/intl-locale": "^2.4.38",
+    "@formatjs/intl-numberformat": "^7.2.4",
+    "@formatjs/intl-pluralrules": "^4.1.4",
+    "@formatjs/intl-relativetimeformat": "^9.3.1",
+    "@formatjs/intl-utils": "^3.8.4",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
     "@fullcalendar/daygrid": "5.9.0",
@@ -103,7 +106,6 @@
     "date-fns": "^2.23.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
-    "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.0.10",
@@ -152,6 +154,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-typescript": "^7.14.5",
     "@koa/cors": "^3.1.0",
@@ -197,6 +200,7 @@
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
+    "instant-mocha": "^1.3.1",
     "lint-staged": "^11.0.1",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
@@ -216,16 +220,16 @@
     "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.4",
+    "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^8.0.0",
     "typescript": "^4.3.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.43.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-manifest-plugin": "^3.1.1",
+    "webpack": "^5.55.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.3.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "webpackbar": "^5.0.0-3",
     "workbox-build": "^6.1.5"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",

diff --git a/src/common/datetime/check_options_support.ts b/src/common/datetime/check_options_support.ts
diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts
@@ -1,13 +1,15 @@
-import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { toLocaleDateStringSupportsOptions } from "./check_options_support";
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
 
 // Tuesday, August 10
-export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateWeekdayMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "dddd, MMMM D");
+export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateWeekdayMem(locale).format(dateObj);
+
 const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -18,10 +20,9 @@ const formatDateWeekdayMem = memoizeOne(
 );
 
 // August 10, 2021
-export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY");
+export const formatDate = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMem(locale).format(dateObj);
+
 const formatDateMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -32,10 +33,9 @@ const formatDateMem = memoizeOne(
 );
 
 // 10/08/2021
-export const formatDateNumeric = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateNumericMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "M/D/YYYY");
+export const formatDateNumeric = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateNumericMem(locale).format(dateObj);
+
 const formatDateNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -46,10 +46,9 @@ const formatDateNumericMem = memoizeOne(
 );
 
 // Aug 10
-export const formatDateShort = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateShortMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "MMM D");
+export const formatDateShort = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateShortMem(locale).format(dateObj);
+
 const formatDateShortMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -59,10 +58,11 @@ const formatDateShortMem = memoizeOne(
 );
 
 // August 2021
-export const formatDateMonthYear = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateMonthYearMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "MMMM YYYY");
+export const formatDateMonthYear = (
+  dateObj: Date,
+  locale: FrontendLocaleData
+) => formatDateMonthYearMem(locale).format(dateObj);
+
 const formatDateMonthYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -72,10 +72,9 @@ const formatDateMonthYearMem = memoizeOne(
 );
 
 // August
-export const formatDateMonth = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateMonthMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "MMMM");
+export const formatDateMonth = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMonthMem(locale).format(dateObj);
+
 const formatDateMonthMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -84,10 +83,9 @@ const formatDateMonthMem = memoizeOne(
 );
 
 // 2021
-export const formatDateYear = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateYearMem(locale).format(dateObj)
-  : (dateObj: Date) => format(dateObj, "YYYY");
+export const formatDateYear = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateYearMem(locale).format(dateObj);
+
 const formatDateYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

diff --git a/src/common/datetime/format_date_time.ts b/src/common/datetime/format_date_time.ts
@@ -1,15 +1,16 @@
-import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { toLocaleStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
 
 // August 9, 2021, 8:23 AM
-export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateTimeMem(locale).format(dateObj)
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateTimeMem(locale).format(dateObj);
+
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -23,11 +24,11 @@ const formatDateTimeMem = memoizeOne(
 );
 
 // August 9, 2021, 8:23:15 AM
-export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateTimeWithSecondsMem(locale).format(dateObj)
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
+export const formatDateTimeWithSeconds = (
+  dateObj: Date,
+  locale: FrontendLocaleData
+) => formatDateTimeWithSecondsMem(locale).format(dateObj);
+
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -42,11 +43,11 @@ const formatDateTimeWithSecondsMem = memoizeOne(
 );
 
 // 9/8/2021, 8:23 AM
-export const formatDateTimeNumeric = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
-      formatDateTimeNumericMem(locale).format(dateObj)
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "M/D/YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+export const formatDateTimeNumeric = (
+  dateObj: Date,
+  locale: FrontendLocaleData
+) => formatDateTimeNumericMem(locale).format(dateObj);
+
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ on: @@
     env:
       NODE_VERSION: 14
-      NODE_OPTIONS: --max_old_space_size=4096
+      NODE_OPTIONS: --max_old_space_size=6144
     jobs:
       deploy:
@@ Expand Down @@