diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000000..88ed1c7316 --- /dev/null +++ b/.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 diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs index 393fbce92c..1a8735eb03 100644 --- a/build-scripts/bundle.cjs +++ b/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", diff --git a/build-scripts/list-preset-env-plugins.js b/build-scripts/list-preset-env-plugins.js new file mode 100755 index 0000000000..5e869a4ef1 --- /dev/null +++ b/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, + }); +} diff --git a/package.json b/package.json index 3b69d6ebe8..f1d8b4025e 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index b4797450cc..71e1c1012a 100644 --- a/yarn.lock +++ b/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