diff --git a/.browserslistrc b/.browserslistrc
index 86481f8e0885..7d35aa0bcce0 100644
--- 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
index 43821a745671..f2740e823acd 100644
--- 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
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 @@
<%= renderTemplate("../../../src/html/_js_base.html.template") %>
-
- <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+ <%= renderTemplate("../../../src/html/_script_loader.html.template") %>