Add browserslist config and use for Babel preset environment (#16267)

.browserslistrc

@@ -0,0 +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 unsupported browsers
+not dead
+
+[legacy]
+# Legacy builds are transpiled to ES5 (strict mode) but also must support some features that cannot be polyfilled:
+# - web sockets to communicate with backend
+# - inline SVG used widely in buttons, widgets, etc.
+# - custom events used for most user interactions
+supports use-strict and supports websockets and supports svg-html5 and supports customevent

build-scripts/bundle.cjs

@@ -89,18 +89,18 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     setPublicClassFields: true,
     setSpreadProperties: true,
   },
-
+  browserslistEnv: latestBuild ? "modern" : "legacy",
   presets: [
-    !latestBuild && [
+    [
       "@babel/preset-env",
       {
-        useBuiltIns: "entry",
-        corejs: { version: "3.30", proposals: true },
+        useBuiltIns: latestBuild ? false : "entry",
+        corejs: latestBuild ? false : { version: "3.30", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ].filter(Boolean),
+  ],
   plugins: [
     [
       path.resolve(
@@ -112,22 +112,8 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
-      "@babel/plugin-proposal-object-rest-spread",
-      { useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
-    // Support  various proposals
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
+    // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
-    "@babel/plugin-proposal-private-methods",
-    "@babel/plugin-proposal-private-property-in-object",
-    "@babel/plugin-proposal-class-properties",
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",

build-scripts/list-preset-env-plugins.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+// Script to print Babel plugins that will be used by browserslist environments
+
+import { version as babelVersion } from "@babel/core";
+import presetEnv from "@babel/preset-env";
+import { babelOptions } from "./bundle.cjs";
+
+const dummyAPI = {
+  version: babelVersion,
+  assertVersion: () => {},
+  caller: (callback) =>
+    callback({
+      name: "Dummy Bundler",
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true,
+      supportsExportNamespaceFrom: true,
+    }),
+  targets: () => ({}),
+};
+
+for (const browserslistEnv of ["modern", "legacy"]) {
+  console.log("\nBrowsersList Environment = %s\n", browserslistEnv);
+  presetEnv.default(dummyAPI, {
+    ...babelOptions({ latestBuild: browserslistEnv === "modern" })
+      .presets[0][1],
+    browserslistEnv,
+    debug: true,
+  });
+}

package.json

@@ -150,9 +150,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.21.4",
-    "@babel/plugin-external-helpers": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.21.0",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
     "@babel/preset-env": "7.21.4",
     "@babel/preset-typescript": "7.21.4",
     "@koa/cors": "4.0.0",

yarn.lock

@@ -397,17 +397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-external-helpers@npm:7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-external-helpers@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: aaf681b6339d7ab3c82c157f3e9c7e9404a5e2120dca35b1ceff5a8bb1a9a3d5646af9a53ed4440ba376e2a25db5bfae2b65d0f458ada9ae8ed11450a5329c6a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-async-generator-functions@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.7"
@@ -689,17 +678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-meta@npm:7.10.4":
-  version: 7.10.4
-  resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 166ac1125d10b9c0c430e4156249a13858c0366d38844883d75d27389621ebe651115cb2ceb6dc011534d5055719fa1727b59f39e1ab3ca97820eef3dcab5b9b
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-json-strings@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-json-strings@npm:7.8.3"
@@ -9465,9 +9443,7 @@ __metadata:
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
     "@babel/core": 7.21.4
-    "@babel/plugin-external-helpers": 7.18.6
     "@babel/plugin-proposal-decorators": 7.21.0
-    "@babel/plugin-syntax-import-meta": 7.10.4
     "@babel/preset-env": 7.21.4
     "@babel/preset-typescript": 7.21.4
     "@braintree/sanitize-url": 6.0.2