Redefine browser requirements for modern (latest) builds

home-assistant · May 11, 2023 · ca3a3eb · ca3a3eb
1 parent d66ca04
commit ca3a3eb
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 70 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -1,16 +1,16 @@
 [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 unsupported browsers
+# 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
+# This query mimics the "defaults" recommended by the browserslist community.
+unreleased versions
+last 2 versions
+Firefox ESR
+> 0.5% and supports es6-module-dynamic-import
 not dead
 
 [legacy]

diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
@@ -136,8 +136,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -186,6 +186,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.0.0",
     "chai": "4.3.7",
     "del": "7.0.0",
     "eslint": "8.40.0",

diff --git 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>
diff --git a/src/html/_script_load_es5.html.template → src/html/_script_loader.html.template b/src/html/_script_load_es5.html.template → 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
@@ -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
@@ -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
@@ -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
@@ -5618,6 +5618,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.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -6214,6 +6221,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist-useragent-regexp@npm:4.0.0":
+  version: 4.0.0
+  resolution: "browserslist-useragent-regexp@npm:4.0.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: f61d1fbb31eefb19473f8bdc3ba312136f1f0d21a5e8921256d95da0fdb089ea8f27b1d587046fb68df8034ffeb443cae33085584f3d29d5769c2f6c5fcbfd8d
+  languageName: node
+  linkType: hard
+
 "browserslist@npm:^4.14.5, browserslist@npm:^4.21.3, browserslist@npm:^4.21.5":
   version: 4.21.5
   resolution: "browserslist@npm:4.21.5"
@@ -7271,7 +7296,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:
@@ -7529,6 +7554,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"
@@ -9615,6 +9653,7 @@ __metadata:
     app-datepicker: 5.1.1
     babel-loader: 9.1.2
     babel-plugin-template-html-minifier: 4.1.0
+    browserslist-useragent-regexp: 4.0.0
     chai: 4.3.7
     chart.js: 3.3.2
     comlink: 4.4.1
@@ -13505,6 +13544,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"
@@ -15471,6 +15519,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"
@@ -15955,6 +16010,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:~1.1.1":
   version: 1.1.7
   resolution: "web-component-analyzer@npm:1.1.7"