diff --git a/_redirects b/_redirects index 79bef5c1d..de2da3f17 100644 --- a/_redirects +++ b/_redirects @@ -64,22 +64,29 @@ https://babel.netlify.com/* https://babeljs.io/:splat 301! /docs/plugins/minify-* /docs/babel-plugin-minify-:splat /docs/plugins/external-helpers/ /docs/babel-plugin-external-helpers +# Removed packages +/docs/babel-highlight /docs/babel-code-frame#migrating-from-babelhighlight + # 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 +/docs/babel-plugin-proposal-regexp-modifiers /docs/babel-plugin-transform-regexp-modifiers +/docs/babel-plugin-proposal-json-modules /docs/babel-plugin-transform-json-modules # Legacy redirects /docs/en/babel-plugin-transform-decorators /docs/babel-plugin-proposal-decorators @@ -92,8 +99,10 @@ https://babel.netlify.com/* https://babeljs.io/:splat 301! /docs/en/next/tools/* /setup # Blog rewrites +/7.26.0 /blog/2024/10/25/7.26.0 +/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 +148,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/code-frame.md b/docs/code-frame.md index fe33f48f8..13b53cca5 100644 --- a/docs/code-frame.md +++ b/docs/code-frame.md @@ -11,6 +11,12 @@ npm install --save-dev @babel/code-frame ## Usage +### `codeFrameColumns` + +The `codeFrameColumns` function allows you to decorate a code snipped with line numbers and with a marker pointing to a specific location. + +It will also optionally highlight your code, defaulting to what is supported by the output terminal. + ```js title="JavaScript" import { codeFrameColumns } from "@babel/code-frame"; @@ -68,33 +74,33 @@ console.log(result); 5 | }; ``` -## Options +#### Options -### `highlightCode` +##### `highlightCode` `boolean`, defaults to `false`. Toggles syntax highlighting the code as JavaScript for terminals. -### `linesAbove` +##### `linesAbove` `number`, defaults to `2`. Adjust the number of lines to show above the error. -### `linesBelow` +##### `linesBelow` `number`, defaults to `3`. Adjust the number of lines to show below the error. -### `forceColor` +##### `forceColor` `boolean`, defaults to `false`. Enable this to forcibly syntax highlight the code as JavaScript (for non-terminals); overrides `highlightCode`. -### `message` +##### `message` `string`, otherwise nothing @@ -109,6 +115,76 @@ the code frame. 3 | }; ``` +### `highlight` + +The `highlight` function adds syntax highlighting to a code snipped, to be displayed in a terminal. + +```js title="JavaScript" +import { highlight } from "@babel/code-frame"; + +const code = `class Foo { + constructor() +}`; + +const result = highlight(code); + +console.log(result); +``` + +```js title="JavaScript" +class Foo { + constructor() +} +``` + +## Migrating from `@babel/highlight` + +The `highlight` functionality was originally split in its own package, `@babel/highlight`. + +You can migrate as follows: + + + + + + + +
Using @babel/highlightUsing @babel/code-frame
+ +```js title="JavaScript" +import highlight from "@babel/highlight"; + +highlight(text, { forceColor: true }); +``` + + + +```js title="JavaScript" +import { highlight } from "@babel/code-frame"; + +highlight(text); +``` + +
+ +```js title="JavaScript" +import highlight from "@babel/highlight"; + +highlight(text); +``` + + + +```js title="JavaScript" +import { highlight } from "@babel/code-frame"; + +process.stdout.hasColors() ? highlight(text) : text; +``` + +
+ +:::babel7 + ## Upgrading from prior versions Prior to version 7, the only API exposed by this module was for a single line and optional column pointer. The old API will now log a deprecation warning. @@ -151,3 +227,5 @@ const result = codeFrameColumns(rawLines, location, { console.log(result); ``` + +::: diff --git a/docs/compat-data.md b/docs/compat-data.md new file mode 100644 index 000000000..721b51353 --- /dev/null +++ b/docs/compat-data.md @@ -0,0 +1,55 @@ +--- +id: babel-compat-data +title: "@babel/compat-data" +--- + +This package provides compatibility data for various JavaScript features across different browser and runtime environments. It is used by [`@babel/preset-env`](./preset-env.md) internally to determine the required Babel plugins for a given set of [compilation targets](./options.md#targets). The compat data is extracted from the [compat-table project](https://github.com/compat-table/compat-table). + +## Install + +```shell npm2yarn +npm install --save-dev @babel/compat-data +``` + +## Usage + +### plugins +```javascript title="my-babel-plugin.js" +import _plugins from "@babel/compat-data/plugins"; +const pluginsCompatData = _plugins.default; +``` + +The `pluginsCompatData` is an object with the Babel plugin short name as the key and a compat data entry as its value. Each entry is an object with a browser name as the key and the minimum supported version as its value. + +For example, `pluginsCompatData["transform-object-rest-spread"]` will return an object: + +```javascript title="my-babel-plugin.js" +{ + "chrome": "60", + "opera": "47", + "edge": "79", + "firefox": "55", + "safari": "11.1", + "node": "8.3", + "deno": "1", + "ios": "11.3", + "samsung": "8", + "opera_mobile": "44", + "electron": "2.0" +} +``` +Here, the minimum Chrome version with object-rest-spread support is `60`. Therefore, `@babel/preset-env` will enable the object-rest-spread transform only if users are compiling to Chrome versions older than `60`, and likewise for other browsers. Check the [source](https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/plugins.json) for supported Babel plugin short names. + +If you would like to know whether object-rest-spread is supported for any given `targets`, you don't have to manually compare it against the compat-data entry. Instead, you can use the [`isRequired`](./helper-compilation-targets.md#isrequired) utility from `@babel/helper-compilation-targets`: + +```javascript title="my-babel-plugin.js" +import { isRequired } from "@babel/helper-compilation-targets"; + +module.exports = api => { + // Check if the targets have native object-rest-spread support + const objectRestSpreadSupported = !isRequired( + "transform-object-rest-spread", + api.targets() + ); +}; +``` diff --git a/docs/features-timeline.md b/docs/features-timeline.md index 2275b44be..7c1dd54fd 100644 --- a/docs/features-timeline.md +++ b/docs/features-timeline.md @@ -9,6 +9,25 @@ Which major new features did we introduce in each Babel version? This page inclu Additionally, use this timeline to track some other important efforts, such as the [babel-polyfills](https://github.com/babel/babel-polyfills) project.
    +
  1. + +## Babel 7.26.0 + +[blog post](https://babeljs.io/blog/2024/10/25/7.26.0) + +- Enable the [regular expression modifiers](https://github.com/tc39/proposal-regexp-modifiers/) Stage 4 proposal by default +- Enable parsing of the [import attributes](https://github.com/tc39/import-attributes/) Stage 4 proposal by default + +
    2. +
  2. + +## Babel 7.25.0 + +[blog post](https://babeljs.io/blog/2024/07/26/7.25.0) + +- Enable the Stage 4 [duplicated named capturing groups](https://github.com/tc39/proposal-duplicate-named-capturing-groups/) proposal by default + +
  3. ## Babel 7.24.0 diff --git a/docs/generator.md b/docs/generator.md index 7fe578ec2..2f0a367f3 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
    @@ -40,6 +59,7 @@ The symbols like white spaces or new line characters are not preserved in the AS | Version | Changes | | --- | --- | +| v7.26.0 | Added `experimental_preserveFormat` | | v7.22.0 | Added `importAttributesKeyword` | | v7.21.0 | Added `inputSourceMap` |
    @@ -74,6 +94,17 @@ Options for source maps: | sourceRoot | string | | A root for all relative URLs in the source map | | sourceFileName | string | | The filename for the source code (i.e. the code in the `code` argument). This will only be used if `code` is a string. | +Experimental options: + +:::warning +The behavior of experimental options could have breaking changes in _minor_ versions. +::: + +| name | type | default | description | experimental reason | +| --------------------------- | ------- | ------- | ----------- | ------------------- | +| experimental_preserveFormat | boolean | `false` | When set to `true`, the generator will try to preserve location of all the nodes and tokens that are present both in the input and output code. To use this option, you currently need to enable the `retainLines: true` generator option, and the `tokens: true` and `createParenthesizedExpressions: true` parser options. | This option will graduate to stable once it supports a mode that does not require preserving line numbers, but just relative positions of tokens. | + + ## AST from Multiple Sources In most cases, Babel does a 1:1 transformation of input-file to output-file. However, diff --git a/docs/helper-environment-visitor.md b/docs/helper-environment-visitor.md index 41daeceb6..2ec23ecc4 100644 --- a/docs/helper-environment-visitor.md +++ b/docs/helper-environment-visitor.md @@ -74,7 +74,7 @@ if (path.isMethod()) { Suppose we are migrating from vanilla JavaScript to ES Modules. Now that the `this` keyword is equivalent to `undefined` at the top level of an ESModule ([spec](https://tc39.es/ecma262/#sec-module-environment-records-getthisbinding)), we want to replace all top-level `this` to [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis): -```js title=input.js +```js title="input.js" // replace this expression to `globalThis.foo = "top"` this.foo = "top"; diff --git a/docs/highlight.md b/docs/highlight.md deleted file mode 100644 index 2e41bf96c..000000000 --- a/docs/highlight.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: babel-highlight -title: "@babel/highlight" -sidebar_label: highlight ---- - -## Install - -```shell npm2yarn -npm install --save @babel/highlight -``` - -## Usage - -```js title="JavaScript" -import highlight from "@babel/highlight"; - -const code = `class Foo { - constructor() -}`; - -const result = highlight(code); - -console.log(result); -``` - -```js title="JavaScript" -class Foo { - constructor() -} -``` - -By default, `highlight` will not highlight your code if your terminal does not support color. To force colors, pass `{ forceColor: true }` as the second argument to `highlight`. - -```js title="JavaScript" -import highlight from "@babel/highlight"; - -const code = `class Foo { - constructor() -}`; - -const result = highlight(code, { forceColor: true }); -``` - diff --git a/docs/index.md b/docs/index.md index b888f4606..f7eed5b7b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -30,7 +30,11 @@ For an awesome tutorial on compilers, check out [the-super-tiny-compiler](https: Babel 通过语法转换(syntax transformer)支持最新版本的 JavaScript。 +<<<<<<< HEAD 这些 [plugins](plugins.md) 允许你**现在**就使用新语法，而无需等待浏览器的支持。查看我们的 [使用指南](usage.md) 以开始使用。 +======= +These [plugins](plugins-list.md) allow you to use new syntax, **right now** without waiting for browser support. Check out our [usage guide](usage.md) to get started. +>>>>>>> b570d64581dee2527f8b2ce1172fd4f1aa6b15ff ## JSX 和 React 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..3066102dd 100644 --- a/docs/parser.md +++ b/docs/parser.md @@ -9,7 +9,7 @@ title: "@babel/parser" - The latest ECMAScript version enabled by default (ES2020). - Comment attachment. -- Support for JSX, Flow, Typescript. +- Support for JSX, Flow, TypeScript. - Support for experimental language proposals (accepting PRs for anything at least [stage-0](https://github.com/tc39/proposals/blob/master/stage-0-proposals.md)). ## Credits @@ -32,15 +32,17 @@ mind. When in doubt, use `.parse()`.
    History -| Version | Changes | -| --- | --- | -| `v7.23.0` | Added `createImportExpressions` | -| `v7.21.0` | Added `allowNewTargetOutsideFunction` and `annexb` | -| `v7.16.0` | Added `startColumn` | -| `v7.15.0` | Added `attachComment` | -| `v7.7.0` | Added `errorRecovery` | -| `v7.5.0` | Added `allowUndeclaredExports` | -| `v7.2.0` | Added `createParenthesizedExpressions` | +| Version | Changes | +| --------- | -------------------------------------------------- | +| `v7.26.0` | Added `startIndex` | +| `v7.23.0` | Added `createImportExpressions` | +| `v7.21.0` | Added `allowNewTargetOutsideFunction` and `annexB` | +| `v7.16.0` | Added `startColumn` | +| `v7.15.0` | Added `attachComment` | +| `v7.7.0` | Added `errorRecovery` | +| `v7.5.0` | Added `allowUndeclaredExports` | +| `v7.2.0` | Added `createParenthesizedExpressions` | +
    - **allowImportExportEverywhere**: By default, `import` and `export` @@ -74,7 +76,7 @@ mind. When in doubt, use `.parse()`. - **attachComment**: By default, Babel attaches comments to adjacent AST nodes. When this option is set to `false`, comments are not attached. It can provide up to 30% performance improvement when the input code has _many_ comments. `@babel/eslint-parser` will set it for you. It is not recommended to use `attachComment: false` with Babel transform, as doing so removes all the comments in output code, and renders annotations such as `/* istanbul ignore next */` nonfunctional. -- **annexb**: By default, Babel parses JavaScript according to [ECMAScript's Annex B "_Additional ECMAScript Features for Web Browsers_"](https://tc39.es/ecma262/#sec-additional-ecmascript-features-for-web-browsers) syntax. When this option is set to `false`, Babel will parse syntax without the extensions specific to Annex B. +- **annexB**: By default, Babel parses JavaScript according to [ECMAScript's Annex B "_Additional ECMAScript Features for Web Browsers_"](https://tc39.es/ecma262/#sec-additional-ecmascript-features-for-web-browsers) syntax. When this option is set to `false`, Babel will parse syntax without the extensions specific to Annex B. - **createImportExpressions**: By default, the parser parses dynamic import `import()` as call expression nodes. When this option is set to `true`, `ImportExpression` AST nodes are created instead. This option will default to `true` in Babel 8. @@ -97,6 +99,9 @@ mind. When in doubt, use `.parse()`. - **startLine**: By default, the parsed code is treated as if it starts from line 1, column 0. You can provide a line number to alternatively start with. Useful for integration with other source tools. +- **startIndex**: By default, all source indexes start from 0. With this option you can provide an alternative start index. + To ensure accurate AST source indexes this option should always be provided when `startLine` is greater than 1. Useful for integration with other source tools. + - **strictMode**: By default, ECMAScript code is parsed as strict only if a `"use strict";` directive is present or if the parsed file is an ECMAScript module. Set this option to `true` to always parse files in strict mode. @@ -118,10 +123,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 +140,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,7 +164,9 @@ 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 -[facebook jsx ast]: https://github.com/facebook/jsx/blob/master/AST.md +[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/main/AST.md ### Semver @@ -190,63 +199,40 @@ require("@babel/parser").parse("code", { #### Language extensions -
    History -| Version | Changes | -| --- | --- | +| Version | Changes | +| -------- | ------------------- | | `v7.6.0` | Added `v8intrinsic` | -
    - -| Name | Code Example | -|------|--------------| -| `flow` ([repo](https://github.com/facebook/flow)) | `var a: string = "";` | -| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | /*:: type Foo = \{...}; */ | -| `jsx` ([repo](https://facebook.github.io/jsx/)) | `{s}` | -| `typescript` ([repo](https://github.com/Microsoft/TypeScript)) | `var a: string = "";` | -| `v8intrinsic` | `%DebugPrint(foo);` | + +| Name | Code Example | +| ----------------------------------------------------------------- | ----------------------------------------- | +| `flow` ([repo](https://github.com/facebook/flow)) | `var a: string = "";` | +| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | /\*:: type Foo = \{...}; \*/ | +| `jsx` ([repo](https://facebook.github.io/jsx/)) | `{s}` | +| `typescript` ([repo](https://github.com/Microsoft/TypeScript)) | `var a: string = "";` | +| `v8intrinsic` | `%DebugPrint(foo);` | #### ECMAScript [proposals](https://github.com/babel/proposals) -
    - History - -| Version | Changes | -| --- | --- | -| `v7.23.0` | Added `sourcePhaseImports`, `deferredImportEvaluation`, `optionalChainingAssign` | -| `v7.22.0` | Enabled `regexpUnicodeSets` by default, added `importAttributes` | -| `v7.20.0` | Added `explicitResourceManagement`, `importReflection` | -| `v7.17.0` | Added `regexpUnicodeSets`, `destructuringPrivate`, `decoratorAutoAccessors` | -| `v7.15.0` | Added `hack` to the `proposal` option of `pipelineOperator`. Moved `topLevelAwait`, `privateIn` to Latest ECMAScript features | -| `v7.14.0` | Added `asyncDoExpressions`. Moved `classProperties`, `classPrivateProperties`, `classPrivateMethods`, `moduleStringNames` to Latest ECMAScript features | -| `v7.13.0` | Added `moduleBlocks` | -| `v7.12.0` | Added `classStaticBlock`, `moduleStringNames` | -| `v7.11.0` | Added `decimal` | -| `v7.10.0` | Added `privateIn` | -| `v7.9.0` | Added `recordAndTuple` | -| `v7.7.0` | Added `topLevelAwait` | -| `v7.4.0` | Added `partialApplication` | -| `v7.2.0` | Added `classPrivateMethods` | -
    +:::babel8 | Name | Code Example | | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | `asyncDoExpressions` ([proposal](https://github.com/tc39/proposal-async-do-expressions)) | `async do { await requestAPI().json() }` | -| `decimal` ([proposal](https://github.com/tc39/proposal-decimal)) | `0.3m` | | `decorators` ([proposal](https://github.com/tc39/proposal-decorators))
    `decorators-legacy` | `@a class A {}` | | `decoratorAutoAccessors` ([proposal](https://github.com/tc39/proposal-decorators)) | `class Example { @reactive accessor myBool = false; }` | | `deferredImportEvaluation` ([proposal](https://github.com/tc39/proposal-defer-import-eval)) | `import defer * as ns from "dep";` | +| `deprecatedImportAssert` (legacy syntax of [import attributes](https://github.com/tc39/proposal-import-attributes)) | `import json from "./foo.json" assert { type: "json" };` | | `destructuringPrivate` ([proposal](https://github.com/tc39/proposal-destructuring-private)) | `class Example { #x = 1; method() { const { #x: x } = this; } }` | | `doExpressions` ([proposal](https://github.com/tc39/proposal-do-expressions)) | `var a = do { if (true) { 'hi'; } };` | | `explicitResourceManagement` ([proposal](https://github.com/tc39/proposal-explicit-resource-management)) | `using reader = getReader()` | | `exportDefaultFrom` ([proposal](https://github.com/tc39/ecmascript-export-default-from)) | `export v from "mod"` | | `functionBind` ([proposal](https://github.com/zenparsing/es-function-bind)) | `a::b`, `::console.log` | | `functionSent` ([proposal](https://github.com/tc39/proposal-function.sent)) | `function.sent` | -| `importAttributes` ([proposal](https://github.com/tc39/proposal-import-attributes))
    `importAssertions` (⚠️ deprecated) | `import json from "./foo.json" with { type: "json" };` | -| `importReflection` ([proposal](https://github.com/tc39/proposal-import-reflection)) | `import module foo from "./foo.wasm";` | | `moduleBlocks` ([proposal](https://github.com/tc39/proposal-js-module-blocks)) | `let m = module { export let y = 1; };` | | `optionalChainingAssign` ([proposal](https://github.com/tc39/proposal-optional-chaining-assignment)) | `x?.prop = 2` | | `partialApplication` ([proposal](https://github.com/babel/proposals/issues/32)) | `f(?, a)` | @@ -255,6 +241,55 @@ require("@babel/parser").parse("code", { | `sourcePhaseImports` ([proposal](https://github.com/tc39/proposal-source-phase-imports)) | `import source x from "./x"` | | `throwExpressions` ([proposal](https://github.com/babel/proposals/issues/23)) | `() => throw new Error("")` | +::: + +:::babel7 + +
    + History + +| Version | Changes | +| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `v7.23.0` | Added `sourcePhaseImports`, `deferredImportEvaluation`, `optionalChainingAssign` | +| `v7.22.0` | Enabled `regexpUnicodeSets` by default, added `importAttributes` | +| `v7.20.0` | Added `explicitResourceManagement`, `importReflection` | +| `v7.17.0` | Added `regexpUnicodeSets`, `destructuringPrivate`, `decoratorAutoAccessors` | +| `v7.15.0` | Added `hack` to the `proposal` option of `pipelineOperator`. Moved `topLevelAwait`, `privateIn` to Latest ECMAScript features | +| `v7.14.0` | Added `asyncDoExpressions`. Moved `classProperties`, `classPrivateProperties`, `classPrivateMethods`, `moduleStringNames` to Latest ECMAScript features | +| `v7.13.0` | Added `moduleBlocks` | +| `v7.12.0` | Added `classStaticBlock`, `moduleStringNames` | +| `v7.11.0` | Added `decimal` | +| `v7.10.0` | Added `privateIn` | +| `v7.9.0` | Added `recordAndTuple` | +| `v7.7.0` | Added `topLevelAwait` | +| `v7.4.0` | Added `partialApplication` | +| `v7.2.0` | Added `classPrivateMethods` | + +
    + +| Name | Code Example | +| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| `asyncDoExpressions` ([proposal](https://github.com/tc39/proposal-async-do-expressions)) | `async do { await requestAPI().json() }` | +| `decimal` ([proposal](https://github.com/tc39/proposal-decimal)) | `0.3m` | +| `decorators` ([proposal](https://github.com/tc39/proposal-decorators))
    `decorators-legacy` | `@a class A {}` | +| `decoratorAutoAccessors` ([proposal](https://github.com/tc39/proposal-decorators)) | `class Example { @reactive accessor myBool = false; }` | +| `deferredImportEvaluation` ([proposal](https://github.com/tc39/proposal-defer-import-eval)) | `import defer * as ns from "dep";` | +| `deprecatedImportAssert` (legacy syntax of [import attributes](https://github.com/tc39/proposal-import-attributes))
    `importAssertions` (⚠️ deprecated) | `import json from "./foo.json" assert { type: "json" };` | +| `destructuringPrivate` ([proposal](https://github.com/tc39/proposal-destructuring-private)) | `class Example { #x = 1; method() { const { #x: x } = this; } }` | +| `doExpressions` ([proposal](https://github.com/tc39/proposal-do-expressions)) | `var a = do { if (true) { 'hi'; } };` | +| `explicitResourceManagement` ([proposal](https://github.com/tc39/proposal-explicit-resource-management)) | `using reader = getReader()` | +| `exportDefaultFrom` ([proposal](https://github.com/tc39/ecmascript-export-default-from)) | `export v from "mod"` | +| `functionBind` ([proposal](https://github.com/zenparsing/es-function-bind)) | `a::b`, `::console.log` | +| `functionSent` ([proposal](https://github.com/tc39/proposal-function.sent)) | `function.sent` | +| `importReflection` ([proposal](https://github.com/tc39/proposal-import-reflection)) | `import module foo from "./foo.wasm";` | +| `moduleBlocks` ([proposal](https://github.com/tc39/proposal-js-module-blocks)) | `let m = module { export let y = 1; };` | +| `optionalChainingAssign` ([proposal](https://github.com/tc39/proposal-optional-chaining-assignment)) | `x?.prop = 2` | +| `partialApplication` ([proposal](https://github.com/babel/proposals/issues/32)) | `f(?, a)` | +| `pipelineOperator` ([proposal](https://github.com/babel/proposals/issues/29)) | a |> b | +| `recordAndTuple` ([proposal](https://github.com/tc39/proposal-record-tuple)) | `#{x: 1}`, `#[1, 2]` | +| `sourcePhaseImports` ([proposal](https://github.com/tc39/proposal-source-phase-imports)) | `import source x from "./x"` | +| `throwExpressions` ([proposal](https://github.com/babel/proposals/issues/23)) | `() => throw new Error("")` | + #### Latest ECMAScript features The following features are already enabled on the latest version of `@babel/parser`, and cannot be disabled because they are part of the language. @@ -273,26 +308,30 @@ You should enable these features only if you are using an older version. | `logicalAssignment` ([proposal](https://github.com/tc39/proposal-logical-assignment)) | `a &&= b` | | `moduleStringNames` ([proposal](https://github.com/tc39/ecma262/pull/2154)) | `import { "😄" as smile } from "emoji";` | | `nullishCoalescingOperator` ([proposal](https://github.com/babel/proposals/issues/14)) | `a ?? b` | -| `numericSeparator` ([proposal](https://github.com/tc39/proposal-numeric-separator)) | `1_000_000` | +| `numericSeparator` ([proposal](https://github.com/tc39/proposal-numeric-separator)) | `1_000_000` | | `objectRestSpread` ([proposal](https://github.com/tc39/proposal-object-rest-spread)) | `var a = { b, ...c };` | | `optionalCatchBinding` ([proposal](https://github.com/babel/proposals/issues/7)) | `try {throw 0;} catch{do();}` | | `optionalChaining` ([proposal](https://github.com/tc39/proposal-optional-chaining)) | `a?.b` | | `privateIn` ([proposal](https://github.com/tc39/proposal-private-fields-in-in)) | `#p in obj` | | `regexpUnicodeSets` ([proposal](https://github.com/tc39/proposal-regexp-set-notation)) | `/[\p{Decimal_Number}--[0-9]]/v;` | | `topLevelAwait` ([proposal](https://github.com/tc39/proposal-top-level-await/)) | `await promise` in modules | +| `importAttributes` ([proposal](https://github.com/tc39/proposal-import-attributes)) | `import json from "./foo.json" with { type: "json" };` | + +::: #### Plugins options
    History -| Version | Changes | -| --- | --- | +| Version | Changes | +| -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | `7.21.0` | The default behavior of the `decorators`' `decoratorsBeforeExport` option is to allow decorators either before or after the `export` keyword. | | `7.19.0` | The `syntaxType` option of the `recordAndTuple` plugin defaults to `hash`; added `allowCallParenthesized` option for the `decorators` plugin. | -| `7.17.0` | Added `@@` and `^^` to the `topicToken` option of the `hack` pipeline operator | -| `7.16.0` | Added `disallowAmbiguousJSXLike` for `typescript` plugin. Added `^` to the `topicToken` option of the `hack` pipeline operators | -| `7.14.0` | Added `dts` for `typescript` plugin | +| `7.17.0` | Added `@@` and `^^` to the `topicToken` option of the `hack` pipeline operator | +| `7.16.0` | Added `disallowAmbiguousJSXLike` for `typescript` plugin. Added `^` to the `topicToken` option of the `hack` pipeline operators | +| `7.14.0` | Added `dts` for `typescript` plugin | +
    @@ -301,12 +340,6 @@ You should enable these features only if you are using an older version. When a plugin is specified multiple times, only the first options are considered. ::: -- `importAttributes`: - - - `deprecatedAssertSyntax` (`boolean`, defaults to `false`) - - When `true`, allow parsing import attributes using the [deprecated](https://tc39.es/proposal-import-attributes/#sec-deprecated-assert-keyword-for-import-attributes) `assert` keyword. This matches the syntax originally supported by the `importAssertions` parser plugin. - - `decorators`: - `allowCallParenthesized` (`boolean`, defaults to `true`) @@ -327,8 +360,9 @@ When a plugin is specified multiple times, only the first options are considered ``` :::caution -This option is deprecated and will be removed in a future version. Code that is valid when this option is explicitly set to `true` or `false` is also valid when this option is not set. -::: + + This option is deprecated and will be removed in a future version. Code that is valid when this option is explicitly set to `true` or `false` is also valid when this option is not set. + ::: - `optionalChainingAssign`: @@ -339,11 +373,21 @@ This option is deprecated and will be removed in a future version. Code that is - `pipelineOperator`: - - `proposal` (required, accepted values: `minimal`, `fsharp`, `hack`, ~~`smart`~~ (deprecated)) + :::babel7 + - `proposal` (required, accepted values: `fsharp`, `hack`, ~~`minimal`~~, ~~`smart`~~ (deprecated)) + There are several different proposals for the pipeline operator. + This option chooses which proposal to use. + See [plugin-proposal-pipeline-operator](plugin-proposal-pipeline-operator.md) + for more information, including a table comparing their behavior. + ::: + + :::babel8 + - `proposal` (required, accepted values: `fsharp`, `hack`) There are several different proposals for the pipeline operator. This option chooses which proposal to use. See [plugin-proposal-pipeline-operator](plugin-proposal-pipeline-operator.md) for more information, including a table comparing their behavior. + ::: - `topicToken` (required when `proposal` is `hack`, accepted values: `%`, `#`, `^`, `@@`, `^^`) The `hack` proposal uses a “topic” placeholder in its pipe. @@ -375,14 +419,27 @@ This option is deprecated and will be removed in a future version. Code that is - `disallowAmbiguousJSXLike` (`boolean`, default `false`) Even when the `jsx` plugin is not enabled, this option disallows using syntax that would be ambiguous with JSX (` y` type assertions and `() => {}` type arguments). It matches the `tsc` behavior when parsing `.mts` and `.mjs` files. +:::babel7 + +- `importAttributes`: + + - `deprecatedAssertSyntax` (`boolean`, defaults to `false`) + + When `true`, allow parsing an old version of the import attributes, which used the `assert` keyword instead of `with`. + + This matches the syntax originally supported by the `importAssertions` parser plugin. + +::: + ### Error codes
    History -| Version | Changes | -| --- | --- | +| Version | Changes | +| --------- | ----------------- | | `v7.14.0` | Added error codes | +
    Error codes are useful for handling the errors thrown by `@babel/parser`. 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-import-attributes-to-assertions.md b/docs/plugin-proposal-import-attributes-to-assertions.md index cc87cd0a0..4d076e99d 100644 --- a/docs/plugin-proposal-import-attributes-to-assertions.md +++ b/docs/plugin-proposal-import-attributes-to-assertions.md @@ -6,7 +6,7 @@ sidebar_label: import-attributes-to-assertions :::caution -This plugin will generate code that is not compatible with the current ECMAScript specification or with any currently proposed addition to it. Only use it when you are shipping native ES modules and you need compatibility exclusively with tools that don't support the Import Attributes syntax (`import pkg from "./package.json" with { type: "json" }`) but support the old Import Assertions syntax (`import pkg from "./package.json" assert { type: "json" }`), such as Chrome 91+ and Node.js 17.2+. +This plugin will generate code that is not compatible with the current ECMAScript specification or with any currently proposed addition to it. Only use it when you are shipping native ES modules and you need compatibility exclusively with tools that don't support the Import Attributes syntax (`import pkg from "./package.json" with { type: "json" }`) but support the old Import Assertions syntax (`import pkg from "./package.json" assert { type: "json" }`), such as Chrome `91 - 122` and Node.js `^16.14 || ^18 || ^20 < 20.10`. ::: 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-proposal-pipeline-operator.md b/docs/plugin-proposal-pipeline-operator.md index 5a864dd19..b74a770d9 100644 --- a/docs/plugin-proposal-pipeline-operator.md +++ b/docs/plugin-proposal-pipeline-operator.md @@ -16,16 +16,33 @@ The pipeline operator has several competing proposals. Configure which proposal to use with the required `"proposal"` option. Its value is `"hack"` by default. +:::babel7 + | Value | Proposal | Version added | | ----- | -------- | ------------- | | `"hack"` | [Hack-style pipes](https://github.com/tc39/proposal-pipeline-operator) | `v7.15.0` -| ~~`"fsharp"`~~ | [F#-style pipes with `await`](https://github.com/valtech-nyc/proposal-fsharp-pipelines) | `v7.5.0` +| `"fsharp"` | [F#-style pipes with `await`](https://github.com/valtech-nyc/proposal-fsharp-pipelines) | `v7.5.0` | ~~`"minimal"`~~ | [Minimal F#-style pipes](https://github.com/tc39/proposal-pipeline-operator/tree/abb51b3aef5c17d5971808aee49ebe6b75d7280f) | `v7.0.0` | ~~`"smart"`~~ | [Smart-mix pipes](https://github.com/js-choi/proposal-smart-pipelines) (deprecated) | `v7.3.0` +::: + +:::babel8 + +| Value | Proposal | +| ----- | -------- | +| `"hack"` | [Hack-style pipes](https://github.com/tc39/proposal-pipeline-operator) | +| `"fsharp"` | [F#-style pipes with `await`](https://github.com/valtech-nyc/proposal-fsharp-pipelines) | + +::: + If `"proposal"` is omitted, or if `"proposal": "hack"` is used, then a `"topicToken"` option must be included. The `topicToken` must be one of `"%"`, `"^^"`, `"@@"`, `"^"`, or `"#"`. -The `"proposal": "minimal"`, `"fsharp"`, and `"smart"` options are **deprecated** and subject to removal in a future major version. +:::babel7 + +The `"proposal": "minimal"` and `"smart"` options are **deprecated** and subject to removal in a future major version. + +::: ### Examples The following examples use `topicToken: "^^"`. diff --git a/docs/plugin-syntax-import-attributes.md b/docs/plugin-syntax-import-attributes.md index 915f47554..f42453d34 100644 --- a/docs/plugin-syntax-import-attributes.md +++ b/docs/plugin-syntax-import-attributes.md @@ -4,10 +4,28 @@ title: "@babel/plugin-syntax-import-attributes" sidebar_label: syntax-import-attributes --- +:::info +This plugin is included in `@babel/preset-env`, in [ES2025](https://github.com/tc39/proposals/blob/master/finished-proposals.md) +::: + :::note #### Syntax only -This plugin only enables Babel to parse this syntax. Babel does not support transforming this syntax +This plugin only enables Babel to parse and generate this syntax. Babel does not support transforming this syntax. + +::::babel7 + +While Babel supports parsing import attributes by default since v7.25.0, this plugin is still needed to let Babel choose the correct syntax when emitting code. As an alternative to this plugin, you can use `@babel/generator`'s [`importAttributesKeyword`](https://babeljs.io/docs/babel-generator#options) option: +```json +{ + "generatorOpts": { + "importAttributesKeyword": "with" + }, +} +``` + +:::: + ::: This plugin enables Babel to parse import attributes: 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-duplicate-named-capturing-groups-regex.md b/docs/plugin-transform-duplicate-named-capturing-groups-regex.md similarity index 59% rename from docs/plugin-proposal-duplicate-named-capturing-groups-regex.md rename to docs/plugin-transform-duplicate-named-capturing-groups-regex.md index 2bfeb8052..608b7e36a 100644 --- a/docs/plugin-proposal-duplicate-named-capturing-groups-regex.md +++ b/docs/plugin-transform-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-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-proposal-json-modules.md b/docs/plugin-transform-json-modules.md similarity index 69% rename from docs/plugin-proposal-json-modules.md rename to docs/plugin-transform-json-modules.md index 795bac5fd..6d3b3db00 100644 --- a/docs/plugin-proposal-json-modules.md +++ b/docs/plugin-transform-json-modules.md @@ -1,6 +1,6 @@ --- -id: babel-plugin-proposal-json-modules -title: "@babel/plugin-proposal-json-modules" +id: babel-plugin-transform-json-modules +title: "@babel/plugin-transform-json-modules" sidebar_label: json-modules --- @@ -63,7 +63,7 @@ will be transformed to ## Installation ```shell npm2yarn -npm install --save-dev @babel/plugin-proposal-json-modules +npm install --save-dev @babel/plugin-transform-json-modules ``` ## Usage @@ -72,28 +72,52 @@ npm install --save-dev @babel/plugin-proposal-json-modules ```json title="babel.config.json" { - "plugins": [ - "@babel/plugin-proposal-json-modules" - ] + "plugins": ["@babel/plugin-transform-json-modules"] } ``` ### Via CLI ```sh title="Shell" -babel --plugins=@babel/plugin-proposal-json-modules script.js +babel --plugins=@babel/plugin-transform-json-modules script.js ``` ### Via Node API ```js title="JavaScript" require("@babel/core").transformSync("code", { - plugins: [ - "@babel/plugin-proposal-json-modules" - ], + plugins: ["@babel/plugin-transform-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-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-proposal-regexp-modifiers.md b/docs/plugin-transform-regexp-modifiers.md similarity index 62% rename from docs/plugin-proposal-regexp-modifiers.md rename to docs/plugin-transform-regexp-modifiers.md index 011db66d2..16c8e7fbd 100644 --- a/docs/plugin-proposal-regexp-modifiers.md +++ b/docs/plugin-transform-regexp-modifiers.md @@ -1,9 +1,13 @@ --- -id: babel-plugin-proposal-regexp-modifiers -title: "@babel/plugin-proposal-regexp-modifiers" +id: babel-plugin-transform-regexp-modifiers +title: "@babel/plugin-transform-regexp-modifiers" sidebar_label: regexp-modifiers --- +:::info +This plugin is included in `@babel/preset-env`, in [ES2025](https://github.com/tc39/proposals/blob/master/finished-proposals.md). +::: + ## Example ### `i` modifier @@ -37,19 +41,26 @@ const regex = /(?:[\s\S])./; ``` ### Multiple modifiers -You can also apply multiple modifiers: +You can also enable multiple modifiers: ```js // matches Aa, aa, A\naa, etc. but not A\na const regex = /(?im:^a)a/ ``` +or disable them: + +```js +// matches Aa, aa, A\naa, etc. but not A\na +const regex = /^a(?-im:a)/im +``` + This proposal only supports `i`, `m` and `s` as inline modifiers. ## Installation ```shell npm2yarn -npm install --save-dev @babel/plugin-proposal-regexp-modifiers +npm install --save-dev @babel/plugin-transform-regexp-modifiers ``` ## Usage @@ -58,24 +69,24 @@ npm install --save-dev @babel/plugin-proposal-regexp-modifiers ```json title="babel.config.json" { - "plugins": ["@babel/plugin-proposal-regexp-modifiers"] + "plugins": ["@babel/plugin-transform-regexp-modifiers"] } ``` ### Via CLI ```sh title="Shell" -babel --plugins @babel/@babel/plugin-proposal-regexp-modifiers script.js +babel --plugins @babel/@babel/plugin-transform-regexp-modifiers script.js ``` ### Via Node.js API ```js title="JavaScript" require("@babel/core").transformSync(code, { - plugins: ["@babel/plugin-proposal-regexp-modifiers"], + plugins: ["@babel/plugin-transform-regexp-modifiers"], }); ``` ## References -- [Proposal: Regular Expression Pattern Modifiers for ECMAScript](https://github.com/tc39/proposal-regexp-modifiers) +- [Proposal: Regular Expression Pattern Modifiers for ECMAScript](https://github.com/tc39/transform-regexp-modifiers) 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..773ed5e40 100644 --- a/docs/plugins-list.md +++ b/docs/plugins-list.md @@ -11,10 +11,7 @@ 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) #### Early stages @@ -27,6 +24,12 @@ 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-transform-duplicate-named-capturing-groups-regex.md) +- [json-modules](plugin-transform-json-modules.md) +- [regexp-modifiers](plugin-transform-regexp-modifiers.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-env.md b/docs/preset-env.md index 75d3fcef4..2c21bc2a8 100644 --- a/docs/preset-env.md +++ b/docs/preset-env.md @@ -487,15 +487,15 @@ The following are currently supported: **Features** -- [Class static block](https://github.com/tc39/proposal-class-static-block) -- [Import assertions](https://github.com/tc39/proposal-import-assertions) (parsing only) -- [Private field brand checks](https://github.com/tc39/proposal-private-fields-in-in) +- [Import attributes](https://github.com/tc39/proposal-import-attributes) (parsing only) **Materialized Features** These features were behind `shippedProposals` flag in older Babel versions. They are now generally available. - [class properties](https://github.com/tc39/proposal-class-fields) +- [Class static block](https://github.com/tc39/proposal-class-static-block) - [numeric separator](https://github.com/tc39/proposal-numeric-separator) +- [Private field brand checks](https://github.com/tc39/proposal-private-fields-in-in) - [private methods](https://github.com/tc39/proposal-private-methods) > You can read more about configuring preset options [here](https://babeljs.io/docs/en/presets#preset-options) diff --git a/docs/preset-react.md b/docs/preset-react.md index 320829d13..8cecfdc44 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) +>>>>>>> b570d64581dee2527f8b2ce1172fd4f1aa6b15ff ```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..70f318e4e 100644 --- a/docs/types.md +++ b/docs/types.md @@ -290,8 +290,8 @@ See also `t.isCallExpression(node, opts)` and `t.assertCallExpression(node, opts AST Node `CallExpression` shape: - `callee`: `Expression | Super | V8IntrinsicIdentifier` (required) -- `arguments`: `Array` (required) -- `optional`: `true | false` (default: `null`, excluded from builder function) +- `arguments`: `Array` (required) +- `optional`: `boolean` (default: `null`, excluded from builder function) - `typeArguments`: `TypeParameterInstantiation` (default: `null`, excluded from builder function) - `typeParameters`: `TSTypeParameterInstantiation` (default: `null`, excluded from builder function) @@ -620,13 +620,15 @@ Aliases: [`Flow`](#flow), [`FlowDeclaration`](#flowdeclaration), [`Statement`](# #### declareExportAllDeclaration ```js title="JavaScript" -t.declareExportAllDeclaration(source); +t.declareExportAllDeclaration(source, attributes); ``` See also `t.isDeclareExportAllDeclaration(node, opts)` and `t.assertDeclareExportAllDeclaration(node, opts)`. AST Node `DeclareExportAllDeclaration` shape: - `source`: `StringLiteral` (required) +- `attributes`: `Array` (default: `null`) +- `assertions`: `Array` (default: `null`, excluded from builder function) - `exportKind`: `"type" | "value"` (default: `null`, excluded from builder function) Aliases: [`Flow`](#flow), [`FlowDeclaration`](#flowdeclaration), [`Statement`](#statement), [`Declaration`](#declaration) @@ -636,7 +638,7 @@ Aliases: [`Flow`](#flow), [`FlowDeclaration`](#flowdeclaration), [`Statement`](# #### declareExportDeclaration ```js title="JavaScript" -t.declareExportDeclaration(declaration, specifiers, source); +t.declareExportDeclaration(declaration, specifiers, source, attributes); ``` See also `t.isDeclareExportDeclaration(node, opts)` and `t.assertDeclareExportDeclaration(node, opts)`. @@ -645,6 +647,8 @@ AST Node `DeclareExportDeclaration` shape: - `declaration`: `Flow` (default: `null`) - `specifiers`: `Array` (default: `null`) - `source`: `StringLiteral` (default: `null`) +- `attributes`: `Array` (default: `null`) +- `assertions`: `Array` (default: `null`, excluded from builder function) - `default`: `boolean` (default: `null`, excluded from builder function) Aliases: [`Flow`](#flow), [`FlowDeclaration`](#flowdeclaration), [`Statement`](#statement), [`Declaration`](#declaration) @@ -1856,7 +1860,7 @@ AST Node `MemberExpression` shape: - `object`: `Expression | Super` (required) - `property`: if computed then `Expression` else `Identifier` (required) - `computed`: `boolean` (default: `false`) -- `optional`: `true | false` (default: `null`) +- `optional`: `boolean` (default: `null`) Aliases: [`Standardized`](#standardized), [`Expression`](#expression), [`LVal`](#lval) @@ -1915,8 +1919,8 @@ See also `t.isNewExpression(node, opts)` and `t.assertNewExpression(node, opts)` AST Node `NewExpression` shape: - `callee`: `Expression | Super | V8IntrinsicIdentifier` (required) -- `arguments`: `Array` (required) -- `optional`: `true | false` (default: `null`, excluded from builder function) +- `arguments`: `Array` (required) +- `optional`: `boolean` (default: `null`, excluded from builder function) - `typeArguments`: `TypeParameterInstantiation` (default: `null`, excluded from builder function) - `typeParameters`: `TSTypeParameterInstantiation` (default: `null`, excluded from builder function) @@ -2232,7 +2236,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) @@ -2344,6 +2348,9 @@ See also `t.isPlaceholder(node, opts)` and `t.assertPlaceholder(node, opts)`. AST Node `Placeholder` shape: - `expectedNode`: `"Identifier" | "StringLiteral" | "Expression" | "Statement" | "Declaration" | "BlockStatement" | "ClassBody" | "Pattern"` (required) - `name`: `Identifier` (required) +- `decorators`: `Array` (default: `null`, excluded from builder function) +- `optional`: `boolean` (default: `null`, excluded from builder function) +- `typeAnnotation`: `TypeAnnotation | TSTypeAnnotation | Noop` (default: `null`, excluded from builder function) Aliases: [`Miscellaneous`](#miscellaneous) @@ -3135,6 +3142,7 @@ AST Node `TSModuleDeclaration` shape: - `body`: `TSModuleBlock | TSModuleDeclaration` (required) - `declare`: `boolean` (default: `null`, excluded from builder function) - `global`: `boolean` (default: `null`, excluded from builder function) +- `kind`: `"global" | "module" | "namespace"` (required) Aliases: [`TypeScript`](#typescript), [`Statement`](#statement), [`Declaration`](#declaration) diff --git a/docs/v8-migration-api.md b/docs/v8-migration-api.md index 73845fb16..49600228f 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..362c60fa8 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. @@ -72,7 +72,8 @@ you install the new runtime, please set the [`corejs` version](https://babel.dev ``` ### `@babel/plugin-syntax-import-assertions` -Please migrate to `@babel/plugin-syntax-import-attributes` ([#15536](https://github.com/babel/babel/pull/15536)). After you replace the plugin, you should search and replace the following patterns in your codebase: + +The proposal evolved into [import attributes](https://github.com/tc39/proposal-import-attributes), which now Babel supports parsing by default. You can remove `@babel/plugin-syntax-import-assertions` from your config, and replace the following patterns in your codebase: ```diff title="input.js" - import value from "module" assert { type: "json" }; @@ -105,6 +106,9 @@ The following syntax plugins are no longer needed, you can safely remove them fr - `@babel/plugin-syntax-trailing-function-commas` - `@babel/plugin-syntax-unicode-sets-regex` +The following plugins are discontinued and their functionality is not available anymore: +- `@babel/plugin-syntax-import-assertions`. Use `@babel/plugin-syntax-import-attributes` instead, and see the [`@babel/parser`](#configuration-change-parser) section for more information. + ## Configuration Changes ### `@babel/core` {#configuration-change-preset-core} @@ -176,7 +180,7 @@ The following syntax plugins are no longer needed, you can safely remove them fr - Remove `useSpread` and `useBuiltIns` options ([#12593](https://github.com/babel/babel/pull/12593)) **Migration**: Babel 8 always compiles JSX spread elements to object spread: - ```jsx title=input.jsx + ```jsx title="input.jsx"
    // transforms to jsx("div", { ...props }) @@ -291,6 +295,10 @@ 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 `allowDeclareFields` enables transforming the `declare` syntax introduced in Flow 0.120.0, in Babel 8 we support the syntax without such a flag. See also the [compilation changes](#compilation-change-flow) section. +- Remove `enums` option ([#16792](https://github.com/babel/babel/pull/16792)) + + **Migration**: Remove the option from your config. The `enums` option was used to enable Flow enums, which are now supported by default. + - Type check input options ([#12460](https://github.com/babel/babel/pull/12460)) **Migration**: The preset will also report invalid option names. Refer to the [docs](./preset-flow.md#options) and ensure valid usage. @@ -303,14 +311,41 @@ The following syntax plugins are no longer needed, you can safely remove them fr **Migration**: Remove the option from your config. You will probably be fine with the new behaviour. +- Remove `enums` option ([#16792](https://github.com/babel/babel/pull/16792)) + + **Migration**: Remove the option from your config. The `enums` option was used to enable Flow enums, which are now supported by default. + ### `@babel/parser` {#configuration-change-parser} -![low](https://img.shields.io/badge/risk%20of%20breakage%3F-low-yellowgreen.svg) +![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) - Remove `estree` plugin option `classFeatures` ([#13752](https://github.com/babel/babel/pull/13752)) **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) + ``` + +- Remove `importAssertions` parser plugin ([#16770](https://github.com/babel/babel/pull/16770)) + + This plugin was for an old version of the import attributes proposal, using the `assert` keyword instead of `with`. The proposal moved ahead without the `assert` keyword. + + **Migration**: Replace the plugin with `importAttributes`. If you are still using the `assert` keyword it's recommended that you migrate to `with`: if it's not possible to do so, you can use the `["importAttributes", { deprecatedAssertSyntax: true }]` option.` + +- Remove `importReflection` parser plugin ([#16808](https://github.com/babel/babel/pull/16808)) + + The "import reflection" proposal does not exist anymore, and it was superseeded by the "source phase imports" proposal, which uses the `source` modifier for imports instead of `module`. + + **Migration**: Replace the plugin with `sourcePhaseImports`, and migrate your code to use `source` instead of `module` in import declarations. + ### `@babel/generator` {#configuration-change-generator} ![medium](https://img.shields.io/badge/risk%20of%20breakage%3F-medium-yellow.svg) @@ -403,12 +438,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 +461,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 @@ -455,7 +502,7 @@ The following syntax plugins are no longer needed, you can safely remove them fr - [Disallow sequence expressions inside JSX attributes](https://github.com/babel/babel/issues/8604) ([#12447](https://github.com/babel/babel/pull/12447)) **Migration**: Find and replace the following code patterns. You can start the migration prior to Babel 8: - ```diff title=input.jsx + ```diff title="input.jsx" -

    // Invalid +

    // Valid ``` @@ -463,7 +510,7 @@ The following syntax plugins are no longer needed, you can safely remove them fr - [Disallow `{`, `}`, `<` and `>` in JSX text](https://github.com/babel/babel/issues/11042) ([#12451](https://github.com/babel/babel/pull/12451)) **Migration**: Use `{'{'}`, `{'}'}`, `{'<'}` and `{'>'}` instead. Find and replace the following code patterns. You can start the migration prior to Babel 8: - ```diff title=input.jsx + ```diff title="input.jsx" -

    ">" is greater than.

    +

    "{'>'}" is greater than.

    ``` @@ -477,7 +524,7 @@ The following syntax plugins are no longer needed, you can safely remove them fr **Migration**: Use the new `declare` syntax, introduced in TypeScript 3.7, if you don't want fields to be initialized to `undefined`: - ```ts title=input.ts + ```ts title="input.ts" class A { foo: string | void; // initialized to undefined declare bar: number; // type-only, will be removed @@ -492,7 +539,7 @@ The following syntax plugins are no longer needed, you can safely remove them fr **Migration**: Use the new `declare` syntax, introduced in Flow 0.120, if you don't want fields to be initialized to `undefined`: - ```flow title=input.js + ```flow title="input.js" class A { foo: string | void; // initialized to undefined declare bar: number; // type-only, will be removed diff --git a/js/minirepl.js b/js/minirepl.js index 80af8520d..60f138eb2 100644 --- a/js/minirepl.js +++ b/js/minirepl.js @@ -3,11 +3,11 @@ import debounce from "lodash.debounce"; const miniReplExamples = [ - "element.index ?? -1;", - "const styles = {\n" + " ...defaults,\n" + ' color: "#f5da55",\n' + "};", - "const city = address?.city", - 'var name = "Guy Fieri";\nvar place = "Flavortown";\n\n`Hello ${name}, ready for ${place}?`;', - 'let yourTurn = "Type some code in here!";', + "/(?i:a)b/", + `using Flavortown = from(#["Guy Fieri"]);`, + // use next(yourTurn) = throw "some code in here!" + // when we support extractors + `let yourTurn = throw "some code in here!"`, ]; let inEditor; @@ -43,7 +43,7 @@ function setupEditor(id, readOnly) { tabSize: 2, useSoftTabs: true, useWorker: false, - wrap: false, + wrap: true, }); editor.renderer.setPadding(24); @@ -110,10 +110,16 @@ function compileCode(sourceEditor, targetEditor) { transformed = Babel.transform(sourceEditor.getValue(), { presets: [ "react", + "typescript", ["env", { targets: "defaults, not ie 11, not ie_mob 11", loose: true }], ], - plugins: [["external-helpers", { helperVersion: "7.100.0" }]], - filename: "repl", + plugins: [ + ["external-helpers", { helperVersion: "7.100.0" }], + ["proposal-explicit-resource-management"], + ["proposal-record-and-tuple"], + ["proposal-throw-expressions"], + ], + filename: "repl.tsx", babelrc: false, }); } catch (e) { 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/ExternalPluginsModal.tsx b/js/repl/ExternalPluginsModal.tsx index d1bc38b32..7bb356889 100644 --- a/js/repl/ExternalPluginsModal.tsx +++ b/js/repl/ExternalPluginsModal.tsx @@ -7,7 +7,7 @@ import { InstantSearch, Pagination, PoweredBy, -} from "react-instantsearch-dom"; +} from "react-instantsearch"; import SearchBox from "./ExternalPluginsSearchBox"; import Modal from "./Modal"; import { colors, media } from "./styles"; @@ -43,14 +43,6 @@ type Props = { }; export default class ExternalPluginsModal extends React.Component { - _input: HTMLInputElement | undefined | null; - - componentDidMount() { - if (this._input) { - this._input.focus(); - } - } - handleSelectPlugin = (hit: SearchHit) => { this.props.onPluginSelect(hit); this.props.onClose(); @@ -104,7 +96,7 @@ export default class ExternalPluginsModal extends React.Component { filters={filters} />
    - (this._input = x)} /> + - - - + {(!babelVersion || + compareVersions(babelVersion, "8.0.0") === -1) && ( + + )} + {(!babelVersion || + compareVersions(babelVersion, "8.0.0") === -1) && ( + + )} {isBugfixesSupported && (