diff --git a/_redirects b/_redirects index 79bef5c1d..8ca5e4688 100644 --- a/_redirects +++ b/_redirects @@ -65,21 +65,23 @@ https://babel.netlify.com/* https://babeljs.io/:splat 301! /docs/plugins/external-helpers/ /docs/babel-plugin-external-helpers # Plugins renamed from -proposal- to -transform- -/docs/babel-plugin-proposal-class-static-block /docs/babel-plugin-transform-class-static-block -/docs/babel-plugin-proposal-private-property-in-object /docs/babel-plugin-transform-private-property-in-object -/docs/babel-plugin-proposal-class-properties /docs/babel-plugin-transform-class-properties -/docs/babel-plugin-proposal-private-methods /docs/babel-plugin-transform-private-methods -/docs/babel-plugin-proposal-numeric-separator /docs/babel-plugin-transform-numeric-separator -/docs/babel-plugin-proposal-logical-assignment-operators /docs/babel-plugin-transform-logical-assignment-operators -/docs/babel-plugin-proposal-nullish-coalescing-operator /docs/babel-plugin-transform-nullish-coalescing-operator -/docs/babel-plugin-proposal-optional-chaining /docs/babel-plugin-transform-optional-chaining -/docs/babel-plugin-proposal-json-strings /docs/babel-plugin-transform-json-strings -/docs/babel-plugin-proposal-optional-catch-binding /docs/babel-plugin-transform-optional-catch-binding -/docs/babel-plugin-proposal-async-generator-functions /docs/babel-plugin-transform-async-generator-functions -/docs/babel-plugin-proposal-object-rest-spread /docs/babel-plugin-transform-object-rest-spread -/docs/babel-plugin-proposal-unicode-property-regex /docs/babel-plugin-transform-unicode-property-regex -/docs/babel-plugin-proposal-unicode-sets-regex /docs/babel-plugin-transform-unicode-sets-regex -/docs/babel-plugin-proposal-export-namespace-from /docs/babel-plugin-transform-export-namespace-from +/docs/babel-plugin-proposal-class-static-block /docs/babel-plugin-transform-class-static-block +/docs/babel-plugin-proposal-private-property-in-object /docs/babel-plugin-transform-private-property-in-object +/docs/babel-plugin-proposal-class-properties /docs/babel-plugin-transform-class-properties +/docs/babel-plugin-proposal-private-methods /docs/babel-plugin-transform-private-methods +/docs/babel-plugin-proposal-numeric-separator /docs/babel-plugin-transform-numeric-separator +/docs/babel-plugin-proposal-dynamic-import /docs/babel-plugin-transform-dynamic-import +/docs/babel-plugin-proposal-logical-assignment-operators /docs/babel-plugin-transform-logical-assignment-operators +/docs/babel-plugin-proposal-nullish-coalescing-operator /docs/babel-plugin-transform-nullish-coalescing-operator +/docs/babel-plugin-proposal-optional-chaining /docs/babel-plugin-transform-optional-chaining +/docs/babel-plugin-proposal-json-strings /docs/babel-plugin-transform-json-strings +/docs/babel-plugin-proposal-optional-catch-binding /docs/babel-plugin-transform-optional-catch-binding +/docs/babel-plugin-proposal-async-generator-functions /docs/babel-plugin-transform-async-generator-functions +/docs/babel-plugin-proposal-object-rest-spread /docs/babel-plugin-transform-object-rest-spread +/docs/babel-plugin-proposal-unicode-property-regex /docs/babel-plugin-transform-unicode-property-regex +/docs/babel-plugin-proposal-unicode-sets-regex /docs/babel-plugin-transform-unicode-sets-regex +/docs/babel-plugin-proposal-export-namespace-from /docs/babel-plugin-transform-export-namespace-from +/docs/babel-plugin-proposal-duplicate-named-capturing-groups-regex /docs/babel-plugin-transform-duplicate-named-capturing-groups-regex # Legacy redirects /docs/en/babel-plugin-transform-decorators /docs/babel-plugin-proposal-decorators @@ -92,8 +94,9 @@ https://babel.netlify.com/* https://babeljs.io/:splat 301! /docs/en/next/tools/* /setup # Blog rewrites +/7.25.0 /blog/2024/07/26/7.25.0 /7.24.0 /blog/2024/02/28/7.24.0 -/7.23.0 /blog/2023/09/25/7.22.0 +/7.23.0 /blog/2023/09/25/7.23.0 /7.22.0 /blog/2023/05/26/7.22.0 /7.21.0 /blog/2023/02/20/7.21.0 /7.20.0 /blog/2022/10/27/7.20.0 @@ -139,3 +142,6 @@ https://babel.netlify.com/* https://babeljs.io/:splat 301! # Docusaurus v1 compat /docs/en/* /docs/:splat + +# CircleCI CORS +/circleci/api/* https://circleci.com/api/v1.1/project/github/babel/babel/:splat 200 diff --git a/docs/assumptions.md b/docs/assumptions.md index d6b244cc6..5e9d66e8e 100644 --- a/docs/assumptions.md +++ b/docs/assumptions.md @@ -434,8 +434,6 @@ class Child extends Parent { "mutableTemplateObject": true, "noClassCalls": true, "noDocumentAll": true, - "noObjectSuper": true, - "noUndeclaredVariablesCheck": true, "objectRestNoSymbols": true, "privateFieldsAsProperties": true, "pureGetters": true, diff --git a/docs/generator.md b/docs/generator.md index 7fe578ec2..8a121bcdf 100644 --- a/docs/generator.md +++ b/docs/generator.md @@ -3,7 +3,7 @@ id: babel-generator title: "@babel/generator" --- -> Turns an AST into code. +> Turns Babel AST into code. ## Install @@ -33,6 +33,25 @@ const output = generate( The symbols like white spaces or new line characters are not preserved in the AST. When Babel generator prints code from the AST, the output format is not guaranteed. ::: +### Parser plugins support +Babel generator supports all the listed [Babel parser plugins](./parser.md#plugins) except `estree`. Note that parser plugins do not transform the code. For example, +if you pass JSX `
` to babel generator, the result will still contain the `div` JSX element. + +```js title="JavaScript" +import { parse } from "@babel/parser"; +import generate from "@babel/generator"; + +const code = "const Example = () =>
example
"; +const ast = parse(code, { plugins: ["jsx" ] }); + +const output = generate( + ast, +); + +// true +output.includes("
"); +``` + ## Options
diff --git a/docs/node.md b/docs/node.md index e37ec7d6f..04e170840 100644 --- a/docs/node.md +++ b/docs/node.md @@ -72,15 +72,29 @@ NODE_NO_READLINE=1 rlwrap --always-readline npx babel-node ### Usage ```sh title="Shell" -babel-node [options] [ -e script | script.js ] [arguments] +babel-node [options] [ -e script | [--] script.js ] [arguments] ``` +:::babel7 + When arguments for user script have names conflicting with node options, double dash placed before script name can be used to resolve ambiguities ```sh title="Shell" npx babel-node --inspect --presets @babel/preset-env -- script.js --inspect ``` +::: + +:::babel8 + +Options for Node.js and Babel must be placed before the file name, while arguments for the script (that will be available as `process.argv`) must be placed after. + +```sh title="Shell" +npx babel-node --arg-for-babel script.js --arg-for-script.js +``` + +::: + ### Options | Option | Default | Description | diff --git a/docs/options.md b/docs/options.md index f9d87333d..7511466b4 100644 --- a/docs/options.md +++ b/docs/options.md @@ -282,7 +282,7 @@ babelrcRoots: [ ### `plugins` -Type: `Array` ([`PluginEntry`](#plugin-preset-entries))
+Type: `Array` ([`PluginEntry`](#pluginpreset-entries))
Default: `[]`
An array of plugins to activate when processing this file. For more information on how @@ -295,7 +295,7 @@ representation of a plugin or preset, you should use [`babel.createConfigItem()` ### `presets` -Type: `Array` ([`PresetEntry`](#plugin-preset-entries))
+Type: `Array` ([`PresetEntry`](#pluginpreset-entries))
Default: `[]`
An array of presets to activate when processing this file. For more information on how @@ -365,7 +365,7 @@ If a minor version is not specified, Babel will interpret it as `MAJOR.0`. For e #### No targets -:::babel7 +::::babel7 When no targets are specified: Babel will assume you are targeting the oldest browsers possible. For example, `@babel/preset-env` will transform all ES2015-ES2020 code to be ES5 compatible. @@ -389,7 +389,7 @@ Because of this, Babel's behavior is different than [browserslist](https://githu We recognize this isn’t ideal and will be revisiting this in Babel v8. -::: +:::: :::babel8 @@ -612,7 +612,8 @@ Default: `false`
- `"inline"` to generate a sourcemap and append it as a data URL to the end of the code, but not include it in the result object. - `"both"` is the same as inline, but will include the map in the result object. -`@babel/cli` overloads some of these to also affect how maps are written to disk: +Options in configuration files have no effect on whether `@babel/cli` writes files separate `.map` files to disk. +When the `--source-maps` CLI option is passed to `@babel/cli` it will also control whether `.map` files are written: - `true` will write the map to a `.map` file on disk - `"inline"` will write the file directly, so it will have a `data:` containing the map diff --git a/docs/parser.md b/docs/parser.md index 91cb21e6b..dd7befb40 100644 --- a/docs/parser.md +++ b/docs/parser.md @@ -118,10 +118,11 @@ It is based on [ESTree spec][] with the following deviations: - [Program][] and [BlockStatement][] contain additional `directives` field with [Directive][] and [DirectiveLiteral][] - [ClassMethod][], [ClassPrivateMethod][], [ObjectProperty][], and [ObjectMethod][] value property's properties in [FunctionExpression][] is coerced/brought into the main method node. - [ChainExpression][] is replaced with [OptionalMemberExpression][] and [OptionalCallExpression][] -- [ImportExpression][] is replaced with a [CallExpression][] whose `callee` is an [Import] node. +- [ImportExpression][] is replaced with a [CallExpression][] whose `callee` is an [Import] node. This change will be reversed in Babel 8. +- [ExportAllDeclaration][] with `exported` field is replaced with an [ExportNamedDeclaration][] containing an [ExportNamespaceSpecifier][] node. -:::tip -There is now an `estree` plugin which reverts these deviations +:::note +The `estree` plugin can revert these deviations. Use it only if you are passing Babel AST to other ESTree-compliant tools. ::: AST for JSX code is based on [Facebook JSX AST][]. @@ -134,6 +135,7 @@ AST for JSX code is based on [Facebook JSX AST][]. [propertydefinition]: https://github.com/estree/estree/blob/master/es2022.md#propertydefinition [chainexpression]: https://github.com/estree/estree/blob/master/es2020.md#chainexpression [importexpression]: https://github.com/estree/estree/blob/master/es2020.md#importexpression +[exportalldeclaration]: https://github.com/estree/estree/blob/master/es2020.md#exportalldeclaration [privateidentifier]: https://github.com/estree/estree/blob/master/es2022.md#privateidentifier [stringliteral]: https://github.com/babel/babel/tree/main/packages/babel-parser/ast/spec.md#stringliteral [numericliteral]: https://github.com/babel/babel/tree/main/packages/babel-parser/ast/spec.md#numericliteral @@ -157,6 +159,8 @@ AST for JSX code is based on [Facebook JSX AST][]. [optionalcallexpression]: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#optionalcallexpression [callexpression]: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#callexpression [import]: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#import +[exportnameddeclaration]: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#exportnameddeclaration +[exportnamespacespecifier]: https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#exportnamespacespecifier [facebook jsx ast]: https://github.com/facebook/jsx/blob/master/AST.md ### Semver diff --git a/docs/plugin-bugfix-firefox-class-in-computed-class-key.md b/docs/plugin-bugfix-firefox-class-in-computed-class-key.md new file mode 100644 index 000000000..84082a515 --- /dev/null +++ b/docs/plugin-bugfix-firefox-class-in-computed-class-key.md @@ -0,0 +1,45 @@ +--- +id: babel-plugin-bugfix-firefox-class-in-computed-class-key +title: "@babel/plugin-bugfix-firefox-class-in-computed-class-key" +sidebar_label: bugfix-firefox-class-in-computed-class-key +--- + +This bugfix plugin transforms classes inside computed keys of other classes to workaround a [SpiderMonkey bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1887677) with private class elements. + +:::tip +This plugin is included in `@babel/preset-env`, and Babel will automatically enable this plugin for you when your `targets` are affected by the browser bug. +::: + +:::warning +Terser versions older than 5.30.2 will undo the transform done by this plugin. Make sure to use at least version 5.30.2, or set the Terser's [`compress.inline`](https://terser.org/docs/options/#compress-options) option to `false`. +::: + +## Installation + +```shell npm2yarn +npm install --save-dev @babel/plugin-bugfix-firefox-class-in-computed-class-key +``` + +## Usage + +### With a configuration file (Recommended) + +```json title="babel.config.json" +{ + "plugins": ["@babel/plugin-bugfix-firefox-class-in-computed-class-key"] +} +``` + +### Via CLI + +```sh title="Shell" +babel --plugins @babel/plugin-bugfix-firefox-class-in-computed-class-key script.js +``` + +### Via Node API + +```js title="JavaScript" +require("@babel/core").transformSync("code", { + plugins: ["@babel/plugin-bugfix-firefox-class-in-computed-class-key"], +}); +``` diff --git a/docs/plugin-bugfix-safari-class-field-initializer-scope.md b/docs/plugin-bugfix-safari-class-field-initializer-scope.md new file mode 100644 index 000000000..d5f21096e --- /dev/null +++ b/docs/plugin-bugfix-safari-class-field-initializer-scope.md @@ -0,0 +1,41 @@ +--- +id: babel-plugin-bugfix-safari-class-field-initializer-scope +title: "@babel/plugin-bugfix-safari-class-field-initializer-scope" +sidebar_label: bugfix-safari-class-field-initializer-scope +--- + +This bugfix plugin wraps some class field initializers with an IIFE to workaround [a WebKit bug](https://webkit.org/b/236843) which affects Safari 15. + +:::tip +This plugin is included in `@babel/preset-env`, and Babel will automatically enable this plugin for you when your `targets` are affected by the browser bug. +::: + +## Installation + +```shell npm2yarn +npm install --save-dev @babel/plugin-bugfix-safari-class-field-initializer-scope +``` + +## Usage + +### With a configuration file (Recommended) + +```json title="babel.config.json" +{ + "plugins": ["@babel/plugin-bugfix-safari-class-field-initializer-scope"] +} +``` + +### Via CLI + +```sh title="Shell" +babel --plugins @babel/plugin-bugfix-safari-class-field-initializer-scope script.js +``` + +### Via Node API + +```js title="JavaScript" +require("@babel/core").transformSync("code", { + plugins: ["@babel/plugin-bugfix-safari-class-field-initializer-scope"], +}); +``` diff --git a/docs/plugin-proposal-decorators.md b/docs/plugin-proposal-decorators.md index 63b6e8dda..559dbe948 100644 --- a/docs/plugin-proposal-decorators.md +++ b/docs/plugin-proposal-decorators.md @@ -110,7 +110,7 @@ Selects the decorators proposal to use: `"2023-11"`, `"2023-05"`, `"2023-01"`, `"2022-03"`, `"2021-12"`, `"2018-09"` or `"legacy"`. Selects the decorators proposal to use: -- `"2023-11"` is the proposal version after the updates that reached consensus in the November 2023 TC30 meetings, intergrating [this change](https://github.com/pzuraq/ecma262/pull/12) +- `"2023-11"` is the proposal version after the updates that reached consensus in the November 2023 TC39 meetings, intergrating [this change](https://github.com/pzuraq/ecma262/pull/12) - `"2023-05"` is the proposal version after the updates that reached consensus in the March and May 2023 TC39 meetings, integrating [these changes](https://github.com/pzuraq/ecma262/compare/e86128e13b63a3c2efc3728f76c8332756752b02...c4465e44d514c6c1dba810487ec2721ccd6b08f9). - `"2023-01"` is the proposal version after the updates that reached consensus in the January 2023 TC39 meeting, integrating [`pzuraq/ecma262#4`](https://github.com/pzuraq/ecma262/pull/4). - `"2022-03"` is the proposal version that reached consensus for Stage 3 in the March 2022 TC39 meeting. You can read more about it at [`tc39/proposal-decorators@8ca65c046d`](https://github.com/tc39/proposal-decorators/tree/8ca65c046dd5e9aa3846a1fe5df343a6f7efd9f8). diff --git a/docs/plugin-proposal-duplicate-named-capturing-groups-regex.md b/docs/plugin-proposal-duplicate-named-capturing-groups-regex.md index 2bfeb8052..608b7e36a 100644 --- a/docs/plugin-proposal-duplicate-named-capturing-groups-regex.md +++ b/docs/plugin-proposal-duplicate-named-capturing-groups-regex.md @@ -1,9 +1,15 @@ --- -id: babel-plugin-proposal-duplicate-named-capturing-groups-regex -title: "@babel/plugin-proposal-duplicate-named-capturing-groups-regex" +id: babel-plugin-transform-duplicate-named-capturing-groups-regex +title: "@babel/plugin-transform-duplicate-named-capturing-groups-regex" sidebar_label: duplicate-named-capturing-groups-regex --- +:::info +This plugin is included in `@babel/preset-env`, in [ES2025](https://github.com/tc39/proposals/blob/master/finished-proposals.md). +::: + +This plugin transforms regular expression _literals_ to support duplicate named capturing groups. It does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + ## Examples **In** @@ -28,7 +34,7 @@ console.log(re.exec("02-1999").groups.year); ## Installation ```shell npm2yarn -npm install --save-dev @babel/plugin-proposal-duplicate-named-capturing-groups-regex +npm install --save-dev @babel/plugin-transform-duplicate-named-capturing-groups-regex ``` ## Usage @@ -37,21 +43,21 @@ npm install --save-dev @babel/plugin-proposal-duplicate-named-capturing-groups-r ```json title="babel.config.json" { - "plugins": ["@babel/plugin-proposal-duplicate-named-capturing-groups-regex"] + "plugins": ["@babel/plugin-transform-duplicate-named-capturing-groups-regex"] } ``` ### Via CLI ```sh title="Shell" -babel --plugins @babel/plugin-proposal-duplicate-named-capturing-groups-regex script.js +babel --plugins @babel/plugin-transform-duplicate-named-capturing-groups-regex script.js ``` ### Via Node API ```js title="JavaScript" require("@babel/core").transformSync("code", { - plugins: ["@babel/plugin-proposal-duplicate-named-capturing-groups-regex"], + plugins: ["@babel/plugin-transform-duplicate-named-capturing-groups-regex"], }); ``` diff --git a/docs/plugin-proposal-json-modules.md b/docs/plugin-proposal-json-modules.md index 795bac5fd..1f579ca49 100644 --- a/docs/plugin-proposal-json-modules.md +++ b/docs/plugin-proposal-json-modules.md @@ -72,9 +72,7 @@ npm install --save-dev @babel/plugin-proposal-json-modules ```json title="babel.config.json" { - "plugins": [ - "@babel/plugin-proposal-json-modules" - ] + "plugins": ["@babel/plugin-proposal-json-modules"] } ``` @@ -88,12 +86,38 @@ babel --plugins=@babel/plugin-proposal-json-modules script.js ```js title="JavaScript" require("@babel/core").transformSync("code", { - plugins: [ - "@babel/plugin-proposal-json-modules" - ], + plugins: ["@babel/plugin-proposal-json-modules"], }); ``` +## Options + +### `uncheckedRequire` + +Type: `boolean`
+Default: `false`
+Added in `v7.25.0` + +When set to `true`, the plugin will generate a simpler output by using `require` directly to import the JSON file. When targeting CommonJS, this option leads to output that is easier to analyze for bundlers but doesn't check that the module being imported is actually JSON: + +**In** + +```js +import data from "./data.json" with { type: "json" }; +``` + +**Out (without `uncheckedRequire: true`)** + +```js +const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json"))); +``` + +**Out (with `uncheckedRequire: true`)** + +```js +const data = require("./data.json"); +``` + ## References - [Proposal: JSON Modules](https://github.com/tc39/proposal-json-modules/) diff --git a/docs/plugin-proposal-optional-chaining-assign.md b/docs/plugin-proposal-optional-chaining-assign.md index e359b4b48..9a687e226 100644 --- a/docs/plugin-proposal-optional-chaining-assign.md +++ b/docs/plugin-proposal-optional-chaining-assign.md @@ -34,10 +34,12 @@ npm install --save-dev @babel/plugin-proposal-optional-chaining-assign ```json title="babel.config.json" { "plugins": [ - "@babel/plugin-proposal-optional-chaining-assign", - { - "version": "2023-07" - } + [ + "@babel/plugin-proposal-optional-chaining-assign", + { + "version": "2023-07" + } + ] ] } ``` diff --git a/docs/plugin-transform-dotall-regex.md b/docs/plugin-transform-dotall-regex.md index 7b5dcd09d..625e885ee 100644 --- a/docs/plugin-transform-dotall-regex.md +++ b/docs/plugin-transform-dotall-regex.md @@ -8,6 +8,8 @@ sidebar_label: dotall-regex This plugin is included in `@babel/preset-env`, in [ES2018](https://github.com/tc39/proposals/blob/master/finished-proposals.md) ::: +This plugin transforms regular expression _literals_ to support the `/s` flag. It does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + ## Example **In** diff --git a/docs/plugin-proposal-dynamic-import.md b/docs/plugin-transform-dynamic-import.md similarity index 88% rename from docs/plugin-proposal-dynamic-import.md rename to docs/plugin-transform-dynamic-import.md index 439f68779..89c0c478b 100644 --- a/docs/plugin-proposal-dynamic-import.md +++ b/docs/plugin-transform-dynamic-import.md @@ -1,6 +1,6 @@ --- -id: babel-plugin-proposal-dynamic-import -title: "@babel/plugin-proposal-dynamic-import" +id: babel-plugin-transform-dynamic-import +title: "@babel/plugin-transform-dynamic-import" sidebar_label: dynamic-import --- @@ -74,7 +74,7 @@ will be transformed to ## Installation ```shell npm2yarn -npm install --save-dev @babel/plugin-proposal-dynamic-import +npm install --save-dev @babel/plugin-transform-dynamic-import ``` ## Usage @@ -84,7 +84,7 @@ npm install --save-dev @babel/plugin-proposal-dynamic-import ```json title="babel.config.json" { "plugins": [ - "@babel/plugin-proposal-dynamic-import", + "@babel/plugin-transform-dynamic-import", "@babel/plugin-transform-modules-commonjs" ] } @@ -93,7 +93,7 @@ npm install --save-dev @babel/plugin-proposal-dynamic-import ### Via CLI ```sh title="Shell" -babel --plugins=@babel/plugin-proposal-dynamic-import,@babel/plugin-transform-modules-amd script.js +babel --plugins=@babel/plugin-transform-dynamic-import,@babel/plugin-transform-modules-amd script.js ``` ### Via Node API @@ -101,7 +101,7 @@ babel --plugins=@babel/plugin-proposal-dynamic-import,@babel/plugin-transform-mo ```js title="JavaScript" require("@babel/core").transformSync("code", { plugins: [ - "@babel/plugin-proposal-dynamic-import", + "@babel/plugin-transform-dynamic-import", "@babel/plugin-transform-modules-systemjs" ], }); diff --git a/docs/plugin-transform-named-capturing-groups-regex.md b/docs/plugin-transform-named-capturing-groups-regex.md index 500b78389..bec9a6c0b 100644 --- a/docs/plugin-transform-named-capturing-groups-regex.md +++ b/docs/plugin-transform-named-capturing-groups-regex.md @@ -11,6 +11,8 @@ functionalities. If you need to support older browsers, use either the `runtime: false` option or import a proper polyfill (e.g. `core-js`). ::: +This plugin transforms regular expression _literals_ to support named capturing groups. It does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + ## Examples **In** diff --git a/docs/plugin-transform-runtime.md b/docs/plugin-transform-runtime.md index e71d55d0a..b866e1a6a 100644 --- a/docs/plugin-transform-runtime.md +++ b/docs/plugin-transform-runtime.md @@ -5,10 +5,14 @@ title: "@babel/plugin-transform-runtime" A plugin that enables the re-use of Babel's injected helper code to save on codesize. +::::babel7 + :::note Instance methods such as `"foobar".includes("foo")` will only work with `core-js@3`. If you need to polyfill them, you can directly import `"core-js"` or use `@babel/preset-env`'s `useBuiltIns` option. ::: +:::: + ## Installation Install it as development dependency. @@ -35,10 +39,14 @@ Babel uses very small helpers for common functions such as `_extend`. By default This is where the `@babel/plugin-transform-runtime` plugin comes in: all of the helpers will reference the module `@babel/runtime` to avoid duplication across your compiled output. The runtime will be compiled into your build. +::::babel7 + Another purpose of this transformer is to create a sandboxed environment for your code. If you directly import [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](polyfill.md) and the built-ins it provides such as `Promise`, `Set` and `Map`, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run. The transformer will alias these built-ins to `core-js` so you can use them seamlessly without having to require the polyfill. +:::: + See the [technical details](#technical-details) section for more information on how this works and the types of transformations that occur. ## Usage @@ -90,6 +98,21 @@ require("@babel/core").transformSync("code", { ## Options + +### `absoluteRuntime` + +`boolean` or `string`, defaults to `false`. + +This allows users to run `transform-runtime` broadly across a whole project. By default, `transform-runtime` imports from `@babel/runtime/foo` directly, but that only works if `@babel/runtime` is in the `node_modules` of the file that is being compiled. This can be problematic for nested `node_modules`, npm-linked modules, or CLIs that reside outside the user's project, among other cases. To avoid worrying about how the runtime module's location is resolved, this allows users to resolve the runtime once up front, and then insert absolute paths to the runtime into the output code. + +Using absolute paths is not desirable if files are compiled for use at a later time, but in contexts where a file is compiled and then immediately consumed, they can be quite helpful. + +:::tip +You can read more about configuring plugin options [here](https://babeljs.io/docs/en/plugins#plugin-options) +::: + +::::babel7 + ### `corejs` `false`, `2`, `3` or `{ version: 2 | 3, proposals: boolean }`, defaults to `false`. @@ -118,6 +141,12 @@ This option requires changing the dependency used to provide the necessary runti | `2` | `npm install --save @babel/runtime-corejs2` | | `3` | `npm install --save @babel/runtime-corejs3` | +:::caution + +The `corejs` option will be removed in Babel 8. To inject polyfills, you can use [`babel-plugin-polyfill-corejs3`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs3/README.md) or [`babel-plugin-polyfill-corejs2`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs2/README.md) directly. + +::: + ### `helpers` `boolean`, defaults to `true`. @@ -126,6 +155,14 @@ Toggles whether or not inlined Babel helpers (`classCallCheck`, `extends`, etc.) For more information, see [Helper aliasing](#helper-aliasing). +:::caution + +The `helpers` option will be removed in Babel 8, as this plugin will only be used to inject helpers (including `regeneratorRuntime`, which will be handled as any other Babel helper). + +::: + +:::: + ### `moduleName`
@@ -147,42 +184,22 @@ This option controls which package of helpers `@babel/plugin-transform-runtime` Note that specifying the [`corejs`](#corejs) option will internally enable the corresponding `babel-plugin-polyfill-corejs*` plugin, thus it has an effect on the final module name. -### `polyfill` - -:::danger -This option was removed in v7. -::: +::::babel7 ### `regenerator` `boolean`, defaults to `true`. -Toggles whether or not generator functions are transformed to use a regenerator runtime that does not pollute the global scope. +In older Babel version, this option used to toggles whether or not generator functions were transformed to use a regenerator runtime that does not pollute the global scope. For more information, see [Regenerator aliasing](#regenerator-aliasing). -### `useBuiltIns` - -:::danger -This option was removed in v7. +:::caution +The `regenerator` option will be removed in Babel 8, as it will not be necessary anymore. ::: ### `useESModules` -::::babel8 - -:::danger -This option was removed in v8. -::: - -:::: - -::::babel7 - -:::caution -This option has been deprecated and will be removed in Babel 8: starting from version `7.13.0`, `@babel/runtime`'s `package.json` uses `"exports"` option to automatically choose between CJS and ESM helpers. -::: - `boolean`, defaults to `false`.
@@ -219,46 +236,59 @@ export default function(instance, Constructor) { } ``` +:::caution +The `useESModules` option has been deprecated and will be removed in Babel 8: starting from version `7.13.0`, `@babel/runtime`'s `package.json` uses `"exports"` option to automatically choose between CJS and ESM helpers. +::: + :::: -### `absoluteRuntime` +### `version` -`boolean` or `string`, defaults to `false`. +::::babel7 -This allows users to run `transform-runtime` broadly across a whole project. By default, `transform-runtime` imports from `@babel/runtime/foo` directly, but that only works if `@babel/runtime` is in the `node_modules` of the file that is being compiled. This can be problematic for nested `node_modules`, npm-linked modules, or CLIs that reside outside the user's project, among other cases. To avoid worrying about how the runtime module's location is resolved, this allows users to resolve the runtime once up front, and then insert absolute paths to the runtime into the output code. +By default transform-runtime assumes that `@babel/runtime@7.0.0` is installed. If you have later versions of +`@babel/runtime` (or their corejs counterparts e.g. `@babel/runtime-corejs3`) installed or listed as a dependency, transform-runtime can use more advanced features. -Using absolute paths is not desirable if files are compiled for use at a later time, but in contexts where a file is compiled and then immediately consumed, they can be quite helpful. +For example if you depend on `@babel/runtime@^7.24.0` you can transpile your code with -:::tip -You can read more about configuring plugin options [here](https://babeljs.io/docs/en/plugins#plugin-options) -::: +```json title="babel.config.json" +{ + "plugins": [ + ["@babel/plugin-transform-runtime", { + "version": "^7.24.0" + }] + ] +} +``` -### `version` +:::: -By default transform-runtime assumes that `@babel/runtime@7.0.0` is installed. If you have later versions of +::::babel8 + +By default transform-runtime assumes that `@babel/runtime@8.0.0` is installed. If you have later versions of `@babel/runtime` (or their corejs counterparts e.g. `@babel/runtime-corejs3`) installed or listed as a dependency, transform-runtime can use more advanced features. -For example if you depend on `@babel/runtime-corejs2@7.7.4` you can transpile your code with + +For example if you depend on `@babel/runtime@^8.1.0` you can transpile your code with ```json title="babel.config.json" { "plugins": [ - [ - "@babel/plugin-transform-runtime", - { - "absoluteRuntime": false, - "corejs": 2, - "version": "^7.7.4" - } - ] + ["@babel/plugin-transform-runtime", { + "version": "^8.1.0" + }] ] } ``` +:::: + which results in a smaller bundle size. ## Technical details +::::babel7 + The `transform-runtime` transformer plugin does three things: - Automatically requires `@babel/runtime/regenerator` when you use generators/async functions (toggleable with the `regenerator` option). @@ -381,6 +411,8 @@ without worrying about where they come from. ### Helper aliasing +:::: + Usually Babel will place helpers at the top of your file to do common tasks to avoid duplicating the code around in the current file. Sometimes these helpers can get a little bulky and add unnecessary duplication across files. The `runtime` @@ -425,3 +457,18 @@ var Person = function Person() { (0, _classCallCheck3.default)(this, Person); }; ``` + +## Removed options + +:::babel8 + +The following options were removed in Babel 8.0.0: +- `corejs` +- `helpers` +- `regenerator` + +::: + +The following options were removed in Babel 7.0.0: +- `useBuiltIns` +- `polyfill` diff --git a/docs/plugin-transform-typescript.md b/docs/plugin-transform-typescript.md index 6a8111118..35abf8095 100644 --- a/docs/plugin-transform-typescript.md +++ b/docs/plugin-transform-typescript.md @@ -116,7 +116,7 @@ Forcibly enables `jsx` parsing. Otherwise angle brackets will be treated as Type ### `jsxPragma` -`string`, defaults to `React` +`string`, defaults to `React.createElement` Replace the function used when compiling JSX expressions. This is so that we know that the import is not a type import, and should not be removed. diff --git a/docs/plugin-transform-unicode-property-regex.md b/docs/plugin-transform-unicode-property-regex.md index 6ae8bf6c4..41322b416 100644 --- a/docs/plugin-transform-unicode-property-regex.md +++ b/docs/plugin-transform-unicode-property-regex.md @@ -8,6 +8,8 @@ sidebar_label: unicode-property-regex This plugin is included in `@babel/preset-env`, in [ES2018](https://github.com/tc39/proposals/blob/master/finished-proposals.md) ::: +This plugin transforms regular expression _literals_ to support the `\p{...}` escapes. It does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + [Here’s an online demo.](https://mothereff.in/regexpu#input=var+regex+%3D+/%5Cp%7BScript_Extensions%3DGreek%7D/u%3B&unicodePropertyEscape=1) ## Installation diff --git a/docs/plugin-transform-unicode-regex.md b/docs/plugin-transform-unicode-regex.md index 949337ce2..a1a20f2cc 100644 --- a/docs/plugin-transform-unicode-regex.md +++ b/docs/plugin-transform-unicode-regex.md @@ -8,6 +8,8 @@ sidebar_label: unicode-regex This plugin is included in `@babel/preset-env` ::: +This plugin transforms regular expression _literals_ to support the `/u` flag. It does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + ## Example **In** diff --git a/docs/plugin-transform-unicode-sets-regex.md b/docs/plugin-transform-unicode-sets-regex.md index f0c20856e..60257c035 100644 --- a/docs/plugin-transform-unicode-sets-regex.md +++ b/docs/plugin-transform-unicode-sets-regex.md @@ -10,23 +10,27 @@ This plugin is included in `@babel/preset-env`, in [ES2024](https://github.com/t This plugin transforms regular expressions using the `v` flag, introduced by the [RegExp set notation + properties of strings](https://github.com/tc39/proposal-regexp-set-notation) proposal, to regular expressions that use the `u` flag. +It only transforms `/.../v` syntax and it does not patch the `new RegExp` constructor, since its arguments cannot be pre-transformed statically: to handle runtime behavior of functions/classes, you will need to use a polyfill instead. + ## Example ### Intersection + ```js title="input.js" -/[\p{ASCII}&&\p{Decimal_Number}]/v +/[\p{ASCII}&&\p{Decimal_Number}]/v; ``` will be transformed to ```js title="output.js" -/[0-9]/u +/[0-9]/u; ``` ### Difference + ```js title="input.js" // Non-ASCII white spaces -/[\p{White_Space}--\p{ASCII}]/v +/[\p{White_Space}--\p{ASCII}]/v; ``` will be transformed to @@ -36,6 +40,7 @@ will be transformed to ``` ### Property of Strings + ```js title="input.js" /^\p{Emoji_Keycap_Sequence}$/v.test("*\uFE0F\u20E3"); // true @@ -49,9 +54,10 @@ will be transformed to ``` Here is [a list of supported properties](https://github.com/tc39/proposal-regexp-unicode-sequence-properties#proposed-solution). Note that using property of strings with `u`-flag will error. + ```js title="input.js" // highlight-error-next-line -/\p{Emoji_Keycap_Sequence}/u +/\p{Emoji_Keycap_Sequence}/u; // Error: Properties of strings are only supported when using the unicodeSets (v) flag. ``` diff --git a/docs/plugins-list.md b/docs/plugins-list.md index 5f530b06a..8cb656b46 100644 --- a/docs/plugins-list.md +++ b/docs/plugins-list.md @@ -11,7 +11,6 @@ sidebar_label: 插件列表 #### Stage 3 - [decorators](plugin-proposal-decorators.md) -- [duplicate-named-capturing-groups-regex](plugin-proposal-duplicate-named-capturing-groups-regex.md) - [json-modules](plugin-proposal-json-modules.md) - [import-wasm-source](plugin-proposal-import-wasm-source.md) - [regexp-modifiers](plugin-proposal-regexp-modifiers.md) @@ -27,6 +26,10 @@ sidebar_label: 插件列表 - [throw-expressions](plugin-proposal-throw-expressions.md) - [record-and-tuple](plugin-proposal-record-and-tuple.md) +### ES2025 + +- [duplicate-named-capturing-groups-regex](plugin-proposal-duplicate-named-capturing-groups-regex.md) + ### ES2024 - [unicode-sets-regex](plugin-transform-unicode-sets-regex.md) @@ -37,7 +40,6 @@ sidebar_label: 插件列表 - [class-static-block](plugin-transform-class-static-block.md) - [private-property-in-object](plugin-transform-private-property-in-object.md) - [private-methods](plugin-transform-private-methods.md) -- [syntax-top-level-await](plugin-syntax-top-level-await.md) ### ES2021 @@ -46,12 +48,10 @@ sidebar_label: 插件列表 ### ES2020 +- [dynamic-import](plugin-transform-dynamic-import.md) - [export-namespace-from](plugin-transform-export-namespace-from.md) - [nullish-coalescing-operator](plugin-transform-nullish-coalescing-operator.md) - [optional-chaining](plugin-transform-optional-chaining.md) -- [syntax-dynamic-import](plugin-syntax-dynamic-import.md) -- [syntax-import-meta](plugin-syntax-import-meta.md) -- [syntax-bigint](plugin-syntax-bigint.md) ### ES2019 diff --git a/docs/preset-react.md b/docs/preset-react.md index 320829d13..6692af6d7 100644 --- a/docs/preset-react.md +++ b/docs/preset-react.md @@ -22,7 +22,11 @@ title: "@babel/preset-react" ## 安装 +<<<<<<< HEAD > 您可以查看 React [开始页面](https://facebook.github.io/react/docs/hello-world.html) +======= +> You can also check out the React [Getting Started page](https://react.dev/learn/installation) +>>>>>>> 1c62dd817e22e60a6931ef43c15e38415f5f915f ```shell npm2yarn npm install --save-dev @babel/preset-react @@ -176,7 +180,7 @@ Replace the function used when compiling JSX expressions. It should be a qualifi Replace the component used when compiling JSX fragments. It should be a valid JSX tag name. -:::babel7 +::::babel7 #### `useBuiltIns` @@ -200,7 +204,7 @@ This option will be removed in Babel 8. Set `useSpread` to `true` if you are tar When spreading props, use inline object with spread elements directly instead of Babel's extend helper or `Object.assign`. -::: +:::: ### babel.config.js diff --git a/docs/preset-typescript.md b/docs/preset-typescript.md index b2ce2a5a2..93bb8901e 100644 --- a/docs/preset-typescript.md +++ b/docs/preset-typescript.md @@ -205,7 +205,7 @@ Added in: `v7.23.0` When set to `true`, Babel will rewrite `.ts`/`.mts`/`.cts` extensions in import declarations to `.js`/`.mjs`/`.cjs`. -This option, when used together with TypeScript's [`allowImportingTsExtension`](https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions) option, allows to write complete relative specifiers in import declaratoinss while using the same extension used by the source files. +This option, when used together with TypeScript's [`allowImportingTsExtension`](https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions) option, allows to write complete relative specifiers in import declarations while using the same extension used by the source files. As an example, given this project structure (where `src` contains the source files, and `dist` the compiled files): ``` diff --git a/docs/types.md b/docs/types.md index 118a30256..636f582a8 100644 --- a/docs/types.md +++ b/docs/types.md @@ -290,7 +290,7 @@ See also `t.isCallExpression(node, opts)` and `t.assertCallExpression(node, opts AST Node `CallExpression` shape: - `callee`: `Expression | Super | V8IntrinsicIdentifier` (required) -- `arguments`: `Array` (required) +- `arguments`: `Array` (required) - `optional`: `true | false` (default: `null`, excluded from builder function) - `typeArguments`: `TypeParameterInstantiation` (default: `null`, excluded from builder function) - `typeParameters`: `TSTypeParameterInstantiation` (default: `null`, excluded from builder function) @@ -1915,7 +1915,7 @@ See also `t.isNewExpression(node, opts)` and `t.assertNewExpression(node, opts)` AST Node `NewExpression` shape: - `callee`: `Expression | Super | V8IntrinsicIdentifier` (required) -- `arguments`: `Array` (required) +- `arguments`: `Array` (required) - `optional`: `true | false` (default: `null`, excluded from builder function) - `typeArguments`: `TypeParameterInstantiation` (default: `null`, excluded from builder function) - `typeParameters`: `TSTypeParameterInstantiation` (default: `null`, excluded from builder function) @@ -2232,7 +2232,7 @@ See also `t.isOptionalCallExpression(node, opts)` and `t.assertOptionalCallExpre AST Node `OptionalCallExpression` shape: - `callee`: `Expression` (required) -- `arguments`: `Array` (required) +- `arguments`: `Array` (required) - `optional`: `boolean` (required) - `typeArguments`: `TypeParameterInstantiation` (default: `null`, excluded from builder function) - `typeParameters`: `TSTypeParameterInstantiation` (default: `null`, excluded from builder function) diff --git a/docs/v8-migration-api.md b/docs/v8-migration-api.md index 73845fb16..7a2566cf2 100644 --- a/docs/v8-migration-api.md +++ b/docs/v8-migration-api.md @@ -33,7 +33,7 @@ Check out the [v8-migration guide](v8-migration.md) for other user-level changes // AST in Babel 8 { type: "ImportExpression", - source: StringLitera("foo"), + source: StringLiteral("foo"), options: Identifier("options") } ``` @@ -77,6 +77,39 @@ Check out the [v8-migration guide](v8-migration.md) for other user-level changes - For `node.parameters` in Babel 7, use `node.params` in Babel 8 - For `node.typeAnnotation` in Babel 7, use `node.returnType` in Babel 8 +![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) + +- Split `typeParameter` of `TSMappedType` ([#16733](https://github.com/babel/babel/pull/16733)). + + For a `TSMappedType` node, the `typeParameter` attribute is split into `key` and `constraint` attributes. + This is to align the AST for TS nodes with `@typescript-eslint`. + + ```ts + // Example input + let map1: { [P in string]: number; }; + + // AST in Babel 7 + { + type: "TSMappedType", + typeParameter: { + type: "TypeParameter", + name: Identifier("P"), + constraint: TSStringKeyword() + }, + typeAnnotation: TSNumberKeyword(), + } + + // AST in Babel 8 + { + type: "TSMappedType", + key: Identifier("P"), + constraint: TSStringKeyword() + typeAnnotation: TSNumberKeyword(), + } + ``` + + __Migration__: If you have a customized plugin accessing `typeParameter` of a `TSMappedType` node, use `node.key` and `node.constraint` in Babel 8. + ![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) - Don't generate `TSParenthesizedType` unless `createParenthesizedExpression` is enabled([#9546](https://github.com/babel/babel/issues/9546), [#12608](https://github.com/babel/babel/pull/12608)) @@ -284,8 +317,37 @@ Check out the [v8-migration guide](v8-migration.md) for other user-level changes **Migration**: Adapt to the new token design. If you want to restore to the Babel 7 behaviour, manually transform them to the Babel 7 tokens ([example](https://github.com/babel/babel/blob/7e60a93897f9a134506251ea51269faf4d02a86c/packages/babel-parser/src/parser/statement.ts#L116-L188)). +- Remove `extra.shorthand` from `ObjectProperty` nodes ([#16521](https://github.com/babel/babel/pull/16521)) + + **Migration**: Use `node.shorthand` rather than `node.extra.shorthand`. + ### `@babel/traverse` +![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) + +- Remove some `NodePath` methods ([#16655](https://github.com/babel/babel/pull/16655)) + + __Migration__: + `hoist`, `updateSiblingKeys`, `call`, `setScope`, `resync`, `popContext`, `pushContext`, `setup`, `setKey` + These methods are meant to be private so there is no real migration approach. But if your plugin / build is broken by this change, feel free to open an issue and tell us how you use these methods and we can see what we can do after Babel 8 is released. + + `is`, `isnt`, `has`, `equals` + Access `path.node` instead. + ```diff + --- functionExpressionPath.equals("id", idNode) + +++ functionExpressionPath.node.id === idNode + + --- functionExpressionPath.is("id") + --- functionExpressionPath.has("id") + +++ functionExpressionPath.node.id + + --- functionExpressionPath.has("arguments") + +++ !!functionExpressionPath.node.arguments.length + + --- functionExpressionPath.isnt("async") + +++ !functionExpressionPath.node.async + ``` + ![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) - Remove `block` argument from `Scope#rename` ([#15288](https://github.com/babel/babel/pull/15288)) @@ -303,6 +365,33 @@ Check out the [v8-migration guide](v8-migration.md) for other user-level changes __Migration__: Adapt to the new behaviour. You can use `NodePath#shouldSkip` to check whether a NodePath has been skipped before calling `NodePath#requeue()`. +- Remove methods starting with `_` ([#16504](https://github.com/babel/babel/pull/16504)) + + ``` + _assertUnremoved + _call + _callRemovalHooks + _containerInsert + _containerInsertAfter + _containerInsertBefore + _getKey + _getPattern + _getQueueContexts + _getTypeAnnotation + _markRemoved + _remove + _removeFromScope + _replaceWith + _resolve + _resyncKey + _resyncList + _resyncParent + _resyncRemoved + _verifyNodeList + ``` + + __Migration__: These methods are meant to be private so there is no real migration approach. But if your plugin / build is broken by this change, feel free to open an issue and tell us how you use these methods and we can see what we can do after Babel 8 is released. + ### `@babel/compat-data` ![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) diff --git a/docs/v8-migration.md b/docs/v8-migration.md index bc751c055..238d4cf82 100644 --- a/docs/v8-migration.md +++ b/docs/v8-migration.md @@ -13,9 +13,9 @@ Refer users to this document when upgrading to Babel 8 from Babel 7. If you are ### Node.js support -All Babel 8 packages require Node.js `^16.20.0 || ^18.16.0 || >=20.0.0`. +All Babel 8 packages require Node.js `^18.20.0 || ^20.17.0 || >=22.8.0`. -We highly encourage you to use a newer version of Node.js (LTS v18) since the previous versions are not maintained. +We highly encourage you to use a newer version of Node.js (LTS v20) since the previous versions are not maintained. See [nodejs/Release](https://github.com/nodejs/Release) for more information. This just means Babel _itself_ won't run on older versions of Node. It can still _output_ code that runs on old Node versions. @@ -311,6 +311,17 @@ The following syntax plugins are no longer needed, you can safely remove them fr **Migration**: Remove the option from your config, since it's now enabled by default. Previously the `classFeatures` plugin enables `@babel/parser` to produce class properties AST compatible with ESLint 8, following the ESTree specification. In Babel 8 the `eslint-parser` only works with ESLint 8 and above. + - Remove `decimal` plugin option [#16741](https://github.com/babel/babel/pull/16741) + + **Migration**: Migrate your project to the latest proposal and remove the plugin from your config since the latest proposal doesn't have syntax anymore. + + ```diff title=example.js + - 1.03m + + new Decimal("1.03") + - decimal1 + decimal2 + + decimal1.add(decimal2) + ``` + ### `@babel/generator` {#configuration-change-generator} ![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) @@ -403,12 +414,22 @@ The following syntax plugins are no longer needed, you can safely remove them fr ### `@babel/plugin-transform-runtime` +![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) + +- The `corejs` option has been removed ([#16311](https://github.com/babel/babel/pull/16311)) + + **Migration**: To inject polyfills, you can use [`babel-plugin-polyfill-corejs3`](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs3/README.md) or [babel-plugin-polyfill-corejs2](https://github.com/babel/babel-polyfills/blob/main/packages/babel-plugin-polyfill-corejs2/README.md) directly. + ![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) - The `useESModules` option has been removed ([#16141](https://github.com/babel/babel/pull/16141)) **Migration**: Delete it from your configuration. `@babel/runtime` will now automatically expose ES modules when needed, using `package.json#exports`. +- The `runtime` and `helpers` options have been removed ([#16311](https://github.com/babel/babel/pull/16311)) + + **Migration**: Delete them from your configuration: `@babel/runtime` will now always import helpers. If you don't want to inject imports to helpers, remove `@babel/plugin-transform-runtime` from your config. + ### `@babel/node` ![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) @@ -416,6 +437,8 @@ The following syntax plugins are no longer needed, you can safely remove them fr - The `-gc` and `-d` command-line flags have been removed ([#15956](https://github.com/babel/babel/pull/15956)) **Migration**: Use the `--expose-gc` and `--inspect` Node.js flags respectively. Note that although `-d` was short for `--debug`, the latter has been [deprecated since Node.js 7.7.0](https://nodejs.org/en/docs/guides/debugging-getting-started#legacy-debugger). +- Command-line flags for Node.js and Babel must now be passed _before_ the filename, while flags for the script itself must be passed after. ([#16706](https://github.com/babel/babel/pull/16706)) + ## Compilation Changes ### Default target diff --git a/js/repl/CircleCI.ts b/js/repl/CircleCI.ts index f542dcdb8..57e25c197 100644 --- a/js/repl/CircleCI.ts +++ b/js/repl/CircleCI.ts @@ -1,11 +1,7 @@ import fetch from "unfetch"; -async function sendRequest( - repo: string | undefined | null, - uri: string -): Promise { - const urlRepo = repo && repo.length ? repo : "babel/babel"; - const fullURL = `https://circleci.com/api/v1.1/project/github/${urlRepo}/${uri}`; +async function sendRequest(uri: string): Promise { + const fullURL = `/circleci/api/${uri}`; let response; try { response = await fetch(fullURL).then((res) => res.json()); @@ -21,14 +17,11 @@ async function sendRequest( } export async function loadBuildArtifacts( - repo: string | undefined | null, regExp: RegExp, - build: number | string, - // eslint-disable-line no-unused-vars - cb: (url: string, error?: string) => Promise + build: number | string ): Promise { try { - const response = await sendRequest(repo, `${build}/artifacts`); + const response = await sendRequest(`${build}/artifacts`); const artifacts = response.filter((x) => regExp.test(x.path)); if (!artifacts || artifacts.length === 0) { throw new Error( @@ -42,14 +35,12 @@ export async function loadBuildArtifacts( } export async function loadLatestBuildNumberForBranch( - repo: string | undefined | null, branch: string, jobName: string, limit: number = 30 ): Promise { try { const response = await sendRequest( - repo, `tree/${branch}?limit=${limit}&filter=successful` ); if (!response) throw new Error("No builds found"); diff --git a/js/repl/PluginConfig.ts b/js/repl/PluginConfig.ts index 5e4feac97..940951d04 100644 --- a/js/repl/PluginConfig.ts +++ b/js/repl/PluginConfig.ts @@ -93,7 +93,6 @@ const replDefaults: ReplState = { builtIns: false, spec: false, loose: false, - circleciRepo: "", code: "", debug: false, evaluate: false, diff --git a/js/repl/Repl.tsx b/js/repl/Repl.tsx index 6ec7e9079..ffdf20e83 100644 --- a/js/repl/Repl.tsx +++ b/js/repl/Repl.tsx @@ -653,7 +653,6 @@ class Repl extends React.Component { corejs: envConfig.corejs, spec: envConfig.isSpecEnabled, loose: envConfig.isLooseEnabled, - circleciRepo: state.babel.circleciRepo, code: state.code, debug: state.debugEnvPreset, modules: envConfig.modules, diff --git a/js/repl/UriUtils.ts b/js/repl/UriUtils.ts index b989985d4..37da34cb6 100644 --- a/js/repl/UriUtils.ts +++ b/js/repl/UriUtils.ts @@ -14,7 +14,6 @@ const URL_KEYS = [ "forceAllTransforms", "modules", "shippedProposals", - "circleciRepo", "evaluate", "fileSize", "timeTravel", diff --git a/js/repl/loadBundle.ts b/js/repl/loadBundle.ts index fe60f3983..a4f6092da 100644 --- a/js/repl/loadBundle.ts +++ b/js/repl/loadBundle.ts @@ -62,18 +62,12 @@ export default async function loadBundle( // to main, we map /build/7.0 and /build/master to // /build/main for backwards compatibility. build = await loadLatestBuildNumberForBranch( - state.circleciRepo, build === "7.0" || build === "master" ? "main" : build, "build-standalone" ); } const regExp = new RegExp(`${packageName}/${packageFile}$`); - const url = await loadBuildArtifacts( - state.circleciRepo, - regExp, - build, - doLoad - ); + const url = await loadBuildArtifacts(regExp, build); return doLoad(url); } catch (ex) { return doLoad(null, ex.message); diff --git a/js/repl/past-versions.json b/js/repl/past-versions.json index 7352befe1..255288f09 100644 --- a/js/repl/past-versions.json +++ b/js/repl/past-versions.json @@ -1,5 +1,8 @@ [ - "8.0.0-alpha.2", + "8.0.0-alpha.12", + "7.24.10", + "7.23.10", + "7.22.20", "7.21.9", "7.20.15", "7.19.6", diff --git a/js/repl/replUtils.ts b/js/repl/replUtils.ts index 420b70754..062a80a47 100644 --- a/js/repl/replUtils.ts +++ b/js/repl/replUtils.ts @@ -66,7 +66,6 @@ export const persistedStateToBabelState = ( ): BabelState => ({ availablePresets: [], build: persistedState.build, - circleciRepo: persistedState.circleciRepo, didError: false, isLoaded: false, isLoading: true, diff --git a/js/repl/types.ts b/js/repl/types.ts index 6796de14d..1f18be6ed 100644 --- a/js/repl/types.ts +++ b/js/repl/types.ts @@ -75,7 +75,6 @@ export type BabelState = LazyLoadedState & { availablePresets: Array; build: any; errorMessage?: string; - circleciRepo: string; config: PluginConfig; version: any; }; @@ -84,7 +83,6 @@ export type EnvState = LazyLoadedState & { availablePresets: Array; build: number; errorMessage?: string; - circleciRepo: string; config: PluginConfig; version: any; isEnabled: boolean; @@ -129,7 +127,6 @@ export type ReplState = { corejs?: string | false; spec: boolean; loose: boolean; - circleciRepo: string; code: string; debug: boolean; evaluate: boolean; diff --git a/website/blog/2024-07-26-7.25.0.md b/website/blog/2024-07-26-7.25.0.md new file mode 100644 index 000000000..4f23dcc0e --- /dev/null +++ b/website/blog/2024-07-26-7.25.0.md @@ -0,0 +1,108 @@ +--- +layout: post +title: "7.25.0 Released: Safari bugfixes and duplicated named capturing groups" +author: Babel Team +authorURL: https://twitter.com/babeljs +date: 2024-07-26 0:00:00 +categories: announcements +share_text: "Babel 7.25.0 Released" +--- + +Babel 7.25.0 is out! + +`@babel/preset-env` now supports the [duplicated named capturing groups](https://github.com/tc39/proposal-duplicate-named-capturing-groups) proposal for Regular Expressions by default, as well as a bugfix for class fields when targeting Safari. This version also improves support for compiling [JSON module imports](https://babeljs.io/docs/babel-plugin-proposal-json-modules) to CommonJS, and adds support for config files to `@babel/node`'s `--eval` mode. + +You can read the whole changelog [on GitHub](https://github.com/babel/babel/releases/tag/v7.25.0). + + + +> If you or your company want to support Babel and the evolution of JavaScript, but aren't sure how, you can donate to us on our [Open Collective](https://github.com/babel/babel?sponsor=1) and, better yet, work with us on the implementation of [new ECMAScript proposals](https://github.com/babel/proposals) directly! As a volunteer-driven project, we rely on the community's support to fund our efforts in supporting the wide range of JavaScript users. Reach out at [team@babeljs.io](mailto:team@babeljs.io) if you'd like to discuss more! + +## Highlights + +### Duplicated named capturing groups ([#16445](https://github.com/babel/babel/pull/16445)) + +The [duplicated named capturing groups](https://github.com/tc39/proposal-duplicate-named-capturing-groups) proposal allows re-using the same name for groups in alternative branches within a regular expression. For example, a RegExp that matches dates either in the `dd/mm/yyyy` or `yyyy-mm-dd` format could be written as + +```javascript +let re = + /(?\d\d)\/(?\d\d)\/(?\d\d\d\d)|(?\d\d\d\d)-(?\d\d)-(?\d\d)/; + +"21/12/2023".match(re).groups.day; // 21 +"2023-12-21".match(re).groups.day; // 21 +``` + +The proposal reached Stage 4 in the April 2024 TC39 meeting, and will be included in the next version of the JavaScript standard. It is thus now enabled by default in `@babel/preset-env` (when needed based on your [targets](https://babeljs.io/docs/options#targets)), and you can safely remove `@babel/plugin-proposal-duplicate-named-capturing-groups-regex` from your configuration. + +If for any reason you still need to explicitly list the plugin, it has now been renamed to `@babel/plugin-transform-duplicate-named-capturing-groups-regex` as the proposal became a standard language feature. + +### Simplify JSON modules imports in CommonJS ([#16579](https://github.com/babel/babel/pull/16579)) + +After introducing support for transforming [JSON modules](https://github.com/tc39/proposal-json-modules) imports in Babel 7.24.0, we realized that the generated output was not friendly to CommonJS bundlers. + +Given this code: + +```javascript +import myConfig from "./config.json" with { type: "json" }; +``` + +[`@babel/plugin-proposal-json-modules`](https://babeljs.io/docs/babel-plugin-proposal-json-modules) would compile it to the following, when targeting CommonJS on Node.js: + +```javascript +const myConfig = JSON.parse( + require("fs").readFileSync(require.resolve("./config.json")) +); +``` + +The `JSON.parse` + `readFileSync` combination is necessary to ensure that `config.json` is indeed a JSON file, and not a `config.json.js` file trying to sneakily execute some code while being loaded. + +`@babel/plugin-proposal-json-modules` has now an `uncheckedRequire` option to simplify the output, at the cost of less validation. You can enable it in your configuration: + +```json title="babel.config.json" +{ + "plugins": [ + ["@babel/plugin-proposal-json-modules", { "uncheckedRequire": true }] + ] +} +``` + +and Babel will generate the following code: + +```javascript +const myConfig = require("./config.json"); +``` + +### `@babel/plugin-bugfix-safari-class-field-initializer-scope` ([#16569](https://github.com/babel/babel/pull/16569)) + +Safari versions older than 16 have [a bug](https://bugs.webkit.org/show_bug.cgi?id=236843) when using parentheses around expressions in class fields. For example, the following code would throw an error: + +```javascript +{ + let a = [3]; + new class { + c = (a)[0]; + }; +} +``` + +This is especially problematic when using Webpack or when compiling to CommonJS, as they add parentheses when transforming imports. For example, this input code: + +```javascript +import { hello } from "./dep"; + +class A { + prop = hello(); +} +``` + +would become + +```javascript +var _dep = /* ... */; + +class A { + prop = (0, _dep.hello)(); +} +``` + +[David Taylor](https://github.com/davidtaylorhq) implemented a fix (thanks!) in the new `@babel/plugin-bugfix-safari-class-field-initializer-scope` package, which is enabled by default in `@babel/preset-env` when your targets include Safari versions older than 16. diff --git a/website/data/sponsors.yml b/website/data/sponsors.yml index db876b998..108db20f5 100644 --- a/website/data/sponsors.yml +++ b/website/data/sponsors.yml @@ -1,3 +1,9 @@ +- name: Igalia + url: https://www.igalia.com/ + image: https://images.opencollective.com/igalia/1c2e7cb/logo/256.png + type: opencollective + tier: base-support-sponsor + yearly: 30000 # There is not actual amount, but we need a large enough amount to fit in the tier - name: Coinbase url: https://github.com/coinbase image: https://avatars.githubusercontent.com/u/1885080?s=200&v=4 @@ -16,3 +22,9 @@ type: opencollective tier: gold-sponsors monthly: 1000 +- name: Route Planner + url: https://route4me.com/ + image: https://github.com/user-attachments/assets/002949fe-aa5e-4311-b77f-7f2c905e91f5 + type: opencollective + tier: silver-sponsors + monthly: 500 diff --git a/website/data/tools/node/usage.md b/website/data/tools/node/usage.md index bd621077b..199305216 100644 --- a/website/data/tools/node/usage.md +++ b/website/data/tools/node/usage.md @@ -6,6 +6,10 @@ require("@babel/core").transform("code", {

+<<<<<<< HEAD 关于 Babel 的完整 API 文档请查阅使用文档。 +======= + Explore the @babel/core documentation for the full API. +>>>>>>> 1c62dd817e22e60a6931ef43c15e38415f5f915f

diff --git a/website/past-versions.json b/website/past-versions.json index 127b8a51f..ba48695b5 100644 --- a/website/past-versions.json +++ b/website/past-versions.json @@ -1,4 +1,5 @@ [ + "7.25.0", "7.24.0", "7.23.0", "7.22.0", diff --git a/website/sidebars.js b/website/sidebars.js index 13f4eec00..f2139a301 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -42,6 +42,11 @@ module.exports = { id: "babel-preset-env", }, items: [ + { + type: "category", + label: "ES2025", + items: ["babel-plugin-transform-duplicate-named-capturing-groups-regex"], + }, { type: "category", label: "ES2024", @@ -70,7 +75,7 @@ module.exports = { type: "category", label: "ES2020", items: [ - "babel-plugin-proposal-dynamic-import", + "babel-plugin-transform-dynamic-import", "babel-plugin-transform-export-namespace-from", "babel-plugin-transform-nullish-coalescing-operator", "babel-plugin-transform-optional-chaining", @@ -152,6 +157,8 @@ module.exports = { type: "category", label: "Bugfix", items: [ + "babel-plugin-bugfix-firefox-class-in-computed-class-key", + "babel-plugin-bugfix-safari-class-field-initializer-scope", "babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression", "babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining", ], @@ -241,7 +248,6 @@ module.exports = { "TC39 Proposals": { "Stage 3": [ "babel-plugin-proposal-decorators", - "babel-plugin-proposal-duplicate-named-capturing-groups-regex", "babel-plugin-proposal-explicit-resource-management", "babel-plugin-proposal-import-wasm-source", "babel-plugin-proposal-json-modules", diff --git a/website/src/css/custom.css b/website/src/css/custom.css index f73ac8c74..999714e99 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -109,6 +109,10 @@ article[itemprop="blogPost"] h4 { --docsearch-muted-color: #7f8497; } +.DocSearch-Hit-Container { + --docsearch-hit-active-color: var(--ifm-color-content-inverse); +} + .wrapper { margin: 0 auto; max-width: 1100px; diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 2e2036c79..49e968494 100755 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -219,9 +219,9 @@ const Hero = ({ language }) => (
- Babel 7.24 is released! Please read our{" "} - blog post for highlights and{" "} - + Babel 7.25 is released! Please read our{" "} + blog post for highlights and{" "} + changelog {" "} for more details! diff --git a/yarn.lock b/yarn.lock index 88f8118b6..2e98b6b2f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5886,11 +5886,11 @@ __metadata: linkType: hard "braces@npm:^3.0.2, braces@npm:~3.0.2": - version: 3.0.2 - resolution: "braces@npm:3.0.2" + version: 3.0.3 + resolution: "braces@npm:3.0.3" dependencies: - fill-range: "npm:^7.0.1" - checksum: 966b1fb48d193b9d155f810e5efd1790962f2c4e0829f8440b8ad236ba009222c501f70185ef732fef17a4c490bb33a03b90dab0631feafbdf447da91e8165b1 + fill-range: "npm:^7.1.1" + checksum: fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6 languageName: node linkType: hard @@ -6532,6 +6532,13 @@ __metadata: languageName: node linkType: hard +"content-type@npm:~1.0.5": + version: 1.0.5 + resolution: "content-type@npm:1.0.5" + checksum: 585847d98dc7fb8035c02ae2cb76c7a9bd7b25f84c447e5ed55c45c2175e83617c8813871b4ee22f368126af6b2b167df655829007b21aa10302873ea9c62662 + languageName: node + linkType: hard + "convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.7.0": version: 1.9.0 resolution: "convert-source-map@npm:1.9.0" @@ -8116,12 +8123,12 @@ __metadata: languageName: node linkType: hard -"fill-range@npm:^7.0.1": - version: 7.0.1 - resolution: "fill-range@npm:7.0.1" +"fill-range@npm:^7.1.1": + version: 7.1.1 + resolution: "fill-range@npm:7.1.1" dependencies: to-regex-range: "npm:^5.0.1" - checksum: e260f7592fd196b4421504d3597cc76f4a1ca7a9488260d533b611fc3cefd61e9a9be1417cb82d3b01ad9f9c0ff2dbf258e1026d2445e26b0cf5148ff4250429 + checksum: a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea languageName: node linkType: hard @@ -8223,7 +8230,23 @@ __metadata: languageName: node linkType: hard +<<<<<<< HEAD "follow-redirects@npm:^1.0.0": +======= +"flux@npm:~4.0.1": + version: 4.0.4 + resolution: "flux@npm:4.0.4" + dependencies: + fbemitter: "npm:^3.0.0" + fbjs: "npm:^3.0.1" + peerDependencies: + react: ^15.0.2 || ^16.0.0 || ^17.0.0 + checksum: 13fb375d57fb69156f73c98f751fef4060e53004392a22c847ca236d7fece0b3149056e9411d95616f2af6f3d0b31c27ebfde385163afbb0b4a9aadb2be8481d + languageName: node + linkType: hard + +"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.9": +>>>>>>> 1c62dd817e22e60a6931ef43c15e38415f5f915f version: 1.15.6 resolution: "follow-redirects@npm:1.15.6" peerDependenciesMeta: @@ -11896,6 +11919,7 @@ __metadata: version: 5.0.0 resolution: "minipass@npm:5.0.0" checksum: 61682162d29f45d3152b78b08bab7fb32ca10899bc5991ffe98afc18c9e9543bd1e3be94f8b8373ba6262497db63607079dc242ea62e43e7b2270837b7347c93 +<<<<<<< HEAD languageName: node linkType: hard @@ -11903,6 +11927,8 @@ __metadata: version: 7.0.4 resolution: "minipass@npm:7.0.4" checksum: e864bd02ceb5e0707696d58f7ce3a0b89233f0d686ef0d447a66db705c0846a8dc6f34865cd85256c1472ff623665f616b90b8ff58058b2ad996c5de747d2d18 +======= +>>>>>>> 1c62dd817e22e60a6931ef43c15e38415f5f915f languageName: node linkType: hard @@ -15802,7 +15828,18 @@ __metadata: bin: tsc: bin/tsc tsserver: bin/tsserver +<<<<<<< HEAD checksum: 57bf073a0b88f9bf76e5a24be3df864a8f9d0e70f8316969f4992ae26e30cb8d078708922da2ade1f2c8d1faee13b28bcb69876ebb1e37910e31c54aa9126aa2 +======= + checksum: f5481fa3ba0eee8970f46708d13c05650a865ad093b586fc9573f425c64c57ca97e3308e110bb528deb3ccebe83f6fd7b5a8ac90018038da96326a9ccdf8e77c + languageName: node + linkType: hard + +"ua-parser-js@npm:^0.7.30": + version: 0.7.38 + resolution: "ua-parser-js@npm:0.7.38" + checksum: 011609d0176952abc60b7a20e0af266a899b34f4c49a6f5097d6af763da27eacaa3752b710ae4d930d7b99508bb8c0b34ebe8042e1d9fdc4056d051b209b0842 +>>>>>>> 1c62dd817e22e60a6931ef43c15e38415f5f915f languageName: node linkType: hard @@ -16837,8 +16874,8 @@ __metadata: linkType: hard "ws@npm:^7.3.1": - version: 7.5.9 - resolution: "ws@npm:7.5.9" + version: 7.5.10 + resolution: "ws@npm:7.5.10" peerDependencies: bufferutil: ^4.0.1 utf-8-validate: ^5.0.2 @@ -16847,7 +16884,7 @@ __metadata: optional: true utf-8-validate: optional: true - checksum: 171e35012934bd8788150a7f46f963e50bac43a4dc524ee714c20f258693ac4d3ba2abadb00838fdac42a47af9e958c7ae7e6f4bc56db047ba897b8a2268cf7c + checksum: 9c796b84ba80ffc2c2adcdfc9c8e9a219ba99caa435c9a8d45f9ac593bba325563b3f83edc5eb067cc6d21b9a6bf2c930adf76dd40af5f58a5ca6859e81858f0 languageName: node linkType: hard