From 16df7675c13bdc1fa598ba0d4f6466c138d37825 Mon Sep 17 00:00:00 2001
From: Steve Repsher <steverep@users.noreply.github.com>
Date: Thu, 11 May 2023 01:47:10 +0000
Subject: [PATCH] Redefine browser requirements for modern (latest) builds

---
 .browserslistrc                               | 29 ++++----
 build-scripts/bundle.cjs                      |  9 ++-
 build-scripts/gulp/entry-html.js              |  5 ++
 cast/src/html/faq.html.template               |  8 +--
 cast/src/html/index.html.template             | 10 +--
 cast/src/html/media.html.template             | 10 +--
 demo/src/html/index.html.template             | 11 +---
 hassio/src/entrypoint.js.template             | 10 +--
 package.json                                  |  1 +
 src/html/_js_base.html.template               |  2 +-
 ....template => _script_loader.html.template} |  8 +++
 src/html/authorize.html.template              |  9 +--
 src/html/index.html.template                  |  3 +-
 src/html/onboarding.html.template             |  9 +--
 yarn.lock                                     | 66 ++++++++++++++++++-
 15 files changed, 116 insertions(+), 74 deletions(-)
 rename src/html/{_script_load_es5.html.template => _script_loader.html.template} (65%)

diff --git a/.browserslistrc b/.browserslistrc
index 516fec9cec5e..1fae163d7531 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,24 +1,21 @@
 [modern]
-# Support for dynamic import is the main litmus test for serving modern builds.
-# Although officially a ES2020 feature, browsers implemented it early, so this
-# enables all of ES2017 and some features in ES2018.
-supports es6-module-dynamic-import
-
-# Exclude Safari 11-12 because of a bug in tagged template literals
-# https://bugs.webkit.org/show_bug.cgi?id=190756
-# Note: Dropping version 11 also enables several more ES2018 features
-not Safari < 13
-not iOS < 13
-
-# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
-# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
+# Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills,etc.
+# It is served to browsers meeting the following requirements:
+# - last 2 released + current alpha/beta versionss of all major browsers
+# - Firefox extended support release (ESR)
+# - browsers with global utilization above 0.5%
+# - must support dynamic import of ES modules
+# - exclude browsers no longer being maintained
+# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+unreleased versions
+last 2 versions
+Firefox ESR
+> 0.5% and supports es6-module-dynamic-import
+not dead
 not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0
 
-# Exclude unsupported browsers
-not dead
-
 [legacy]
 # Legacy builds are served when modern requirements are not met and support browsers:
 # - released in the last 7 years + current alpha/beta versionss
diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index 622527f194a0..c05ccdf9a9da 100644
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -137,8 +137,13 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/plugin-transform-runtime",
       { version: require("../package.json").dependencies["@babel/runtime"] },
     ],
-    // Support  some proposals still in TC39 process
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    // Transpile decorators (still in TC39 process)
+    // Modern browsers support class fields, but transform is required with the older decorator version dictated by Lit
+    [
+      "@babel/plugin-proposal-decorators",
+      { version: "2018-09", decoratorsBeforeExport: true },
+    ],
+    "@babel/plugin-proposal-class-properties",
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js
index dd6285c3103a..0645dcfaf916 100644
--- a/build-scripts/gulp/entry-html.js
+++ b/build-scripts/gulp/entry-html.js
@@ -1,5 +1,6 @@
 // Tasks to generate entry HTML
 
+import { getUserAgentRegex } from "browserslist-useragent-regexp";
 import fs from "fs-extra";
 import gulp from "gulp";
 import { minify } from "html-minifier-terser";
@@ -17,6 +18,10 @@ const renderTemplate = (templateFile, data = {}) => {
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
+    modernRegex: getUserAgentRegex({
+      env: "modern",
+      allowHigherVersions: true,
+    }).toString(),
     // Resolve any child/nested templates relative to the parent and pass the same data
     renderTemplate: (childTemplate) =>
       renderTemplate(
diff --git a/cast/src/html/faq.html.template b/cast/src/html/faq.html.template
index c67a5b477a95..a3760d11e4a1 100644
--- a/cast/src/html/faq.html.template
+++ b/cast/src/html/faq.html.template
@@ -36,13 +36,7 @@
   </head>
   <body>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
     <hc-layout subtitle="FAQ">
       <style>
         a {
diff --git a/cast/src/html/index.html.template b/cast/src/html/index.html.template
index 852a32bd7f91..18c45472f840 100644
--- a/cast/src/html/index.html.template
+++ b/cast/src/html/index.html.template
@@ -13,15 +13,9 @@
     <%= renderTemplate("_social_meta.html.template") %>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <hc-connect></hc-connect>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/cast/src/html/media.html.template b/cast/src/html/media.html.template
index e91fbb881cbe..6d2f634326ff 100644
--- a/cast/src/html/media.html.template
+++ b/cast/src/html/media.html.template
@@ -22,14 +22,8 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <cast-media-player></cast-media-player>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
   </body>
 </html>
diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index 368dcc08e317..2548c5e67d89 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -83,16 +83,7 @@
     <ha-demo></ha-demo>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
-    <script>
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
-        <% } %>
-        window.latestJS = true;
-      }
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {
diff --git a/hassio/src/entrypoint.js.template b/hassio/src/entrypoint.js.template
index c1c4e5831ced..8cc7ba82fdc4 100644
--- a/hassio/src/entrypoint.js.template
+++ b/hassio/src/entrypoint.js.template
@@ -4,11 +4,7 @@
     el.src = src;
     document.body.appendChild(el);
   }
-  if (/.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent)) {
-    <% for (const entry of es5EntryJS) { %>
-      loadES5("<%= entry %>");
-    <% } %>
-  } else {
+  if (<%= modernRegex %>.test(navigator.userAgent)) {
     try {
         <% for (const entry of latestEntryJS) { %>
           new Function("import('<%= entry %>')")();
@@ -17,6 +13,10 @@
       <% for (const entry of es5EntryJS) { %>
         loadES5("<%= entry %>");
       <% } %>
+  } else {
+    <% for (const entry of es5EntryJS) { %>
+      loadES5("<%= entry %>");
+    <% } %>
   }
   }
 })();
diff --git a/package.json b/package.json
index ac250d710d26..d07e1f087f04 100644
--- a/package.json
+++ b/package.json
@@ -187,6 +187,7 @@
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",
     "babel-plugin-template-html-minifier": "4.1.0",
+    "browserslist-useragent-regexp": "4.1.0",
     "chai": "4.3.7",
     "del": "7.0.0",
     "eslint": "8.43.0",
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
index e2fc752b4aaa..aaa553b55e45 100644
--- a/src/html/_js_base.html.template
+++ b/src/html/_js_base.html.template
@@ -14,5 +14,5 @@
             "content" in document.createElement("template"))) {
         document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
       }
-      var isS11_12 = /(?:.*(?:iPhone|iPad).*OS (?:11|12)_\d)|(?:.*Version\/(?:11|12)(?:\.\d+)*.*Safari\/)/.test(navigator.userAgent);
+      var isModern = <%= modernRegex %>.test(navigator.userAgent);
     </script>
\ No newline at end of file
diff --git a/src/html/_script_load_es5.html.template b/src/html/_script_loader.html.template
similarity index 65%
rename from src/html/_script_load_es5.html.template
rename to src/html/_script_loader.html.template
index 68458ce9b43b..13d2454e7474 100644
--- a/src/html/_script_load_es5.html.template
+++ b/src/html/_script_loader.html.template
@@ -1,3 +1,11 @@
+<script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
+  if (isModern) {
+    <% for (const entry of latestEntryJS) { %>
+      import("<%= entry %>");
+    <% } %>
+    window.latestJS = true;
+  }
+</script>
 <script>
   (function() {
     if (!window.latestJS) {
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index 96107af171d3..7b35840ae289 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -40,18 +40,13 @@
     </div>
     <%= renderTemplate("_js_base.html.template") %>
     <%= renderTemplate("_preload_roboto.html.template") %>
+    <%= renderTemplate("_script_loader.html.template") %>
     <script crossorigin="use-credentials">
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
-        <% } %>
-        window.latestJS = true;
+      if (window.latestJS) {
         window.providersPromise = fetch("/auth/providers", {
           credentials: "same-origin",
         });
       }
     </script>
-    <%= renderTemplate("_script_load_es5.html.template") %>
   </body>
 </html>
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 977da8f617b7..b9f31fa7fcc3 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -84,8 +84,7 @@
     <%= renderTemplate("_js_base.html.template") %>
     <%= renderTemplate("_preload_roboto.html.template") %>
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
+      if (isModern) {
         <% for (const entry of latestEntryJS) { %>
           import("<%= entry %>");
         <% } %>
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 7e34e0bc7af6..833b662a9c50 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -70,18 +70,13 @@
     </div>
     <%= renderTemplate("_js_base.html.template") %>
     <%= renderTemplate("_preload_roboto.html.template") %>
+    <%= renderTemplate("_script_loader.html.template") %>
     <script crossorigin="use-credentials">
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
-        <% } %>
-        window.latestJS = true;
+      if (window.latestJS) {
         window.stepsPromise = fetch("/api/onboarding", {
           credentials: "same-origin",
         });
       }
     </script>
-    <%= renderTemplate("_script_load_es5.html.template") %>
   </body>
 </html>
diff --git a/yarn.lock b/yarn.lock
index b51da21ea189..2a8493c93241 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5727,6 +5727,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"argue-cli@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "argue-cli@npm:2.1.0"
+  checksum: 1dad41394bcc68177a2faf69659c8641e1faf8e12f861d3fd742d2860b99f1177c4d33e225b2d6a0548bf12f552f83caddca537efa1d474ce07e5d0aeb1d333d
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^5.1.3":
   version: 5.2.1
   resolution: "aria-query@npm:5.2.1"
@@ -6323,6 +6330,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist-useragent-regexp@npm:4.1.0":
+  version: 4.1.0
+  resolution: "browserslist-useragent-regexp@npm:4.1.0"
+  dependencies:
+    argue-cli: ^2.1.0
+    easy-table: ^1.1.1
+    picocolors: ^1.0.0
+    regexp-tree: ^0.1.24
+    ua-regexes-lite: ^1.1.3
+  peerDependencies:
+    browserslist: ">=4.0.0"
+  bin:
+    bluare: dist/cli.js
+    browserslist-useragent-regexp: dist/cli.js
+  checksum: 10577e27ef60641578cacd87b99bcf214e094ac3c42be4ca2615f0920a0d99d336fd5617efa05e0b1af8234279d6aa69e3c8c8b18579975af82ef317333c011b
+  languageName: node
+  linkType: hard
+
 "browserslist@npm:^4.14.5, browserslist@npm:^4.21.3, browserslist@npm:^4.21.5":
   version: 4.21.9
   resolution: "browserslist@npm:4.21.9"
@@ -7342,7 +7367,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"defaults@npm:^1.0.4":
+"defaults@npm:^1.0.3, defaults@npm:^1.0.4":
   version: 1.0.4
   resolution: "defaults@npm:1.0.4"
   dependencies:
@@ -7607,6 +7632,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"easy-table@npm:^1.1.1":
+  version: 1.2.0
+  resolution: "easy-table@npm:1.2.0"
+  dependencies:
+    ansi-regex: ^5.0.1
+    wcwidth: ^1.0.1
+  dependenciesMeta:
+    wcwidth:
+      optional: true
+  checksum: 66961b19751a68d2d30ce9b74ef750c374cc3112bbcac3d1ed5a939e43c035ecf6b1954098df2d5b05f1e853ab2b67de893794390dcbf0abe1f157fddeb52174
+  languageName: node
+  linkType: hard
+
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -9679,6 +9717,7 @@ __metadata:
     app-datepicker: 5.1.1
     babel-loader: 9.1.2
     babel-plugin-template-html-minifier: 4.1.0
+    browserslist-useragent-regexp: 4.1.0
     chai: 4.3.7
     chart.js: 3.3.2
     comlink: 4.4.1
@@ -13493,6 +13532,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexp-tree@npm:^0.1.24":
+  version: 0.1.27
+  resolution: "regexp-tree@npm:0.1.27"
+  bin:
+    regexp-tree: bin/regexp-tree
+  checksum: 129aebb34dae22d6694ab2ac328be3f99105143737528ab072ef624d599afecbcfae1f5c96a166fa9e5f64fa1ecf30b411c4691e7924c3e11bbaf1712c260c54
+  languageName: node
+  linkType: hard
+
 "regexp.prototype.flags@npm:^1.4.3":
   version: 1.5.0
   resolution: "regexp.prototype.flags@npm:1.5.0"
@@ -15458,6 +15506,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-regexes-lite@npm:^1.1.3":
+  version: 1.1.4
+  resolution: "ua-regexes-lite@npm:1.1.4"
+  checksum: c7a746cb6171ed898eb303b903f9cc813a0d52759b80b9d2fa6d3e1ca63f739d302d7de39179df8d512f6ed03ec5299779bbb1fb05127f712eb7974febb8fef8
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -15942,6 +15997,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wcwidth@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "wcwidth@npm:1.0.1"
+  dependencies:
+    defaults: ^1.0.3
+  checksum: 814e9d1ddcc9798f7377ffa448a5a3892232b9275ebb30a41b529607691c0491de47cba426e917a4d08ded3ee7e9ba2f3fe32e62ee3cd9c7d3bafb7754bd553c
+  languageName: node
+  linkType: hard
+
 "web-component-analyzer@npm:^2.0.0-next.5":
   version: 2.0.0-next.5
   resolution: "web-component-analyzer@npm:2.0.0-next.5"