docs(en): merging all conflicts

babel.config.js

@@ -16,7 +16,13 @@ module.exports = function (api) {
           shippedProposals: true,
         },
       ],
-      [ "@babel/preset-react", { development: process.env.NODE_ENV === "development" } ],
+      [
+        "@babel/preset-react",
+        {
+          runtime: "automatic",
+          development: process.env.NODE_ENV === "development",
+        },
+      ],
       [
         "@babel/preset-typescript",
         {

docs/caveats.md

@@ -43,7 +43,7 @@ If you're inheriting from a class then static properties are inherited from it
 via [\_\_proto\_\_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto),
 this is widely supported but you may run into problems with much older browsers.
 
-**NOTE:** `__proto__` is not supported on IE <= 10 so static properties
+**NOTE:** `__proto__` is not supported on IE &leq; 10 so static properties
 **will not** be inherited. See the
 [protoToAssign](plugin-transform-proto-to-assign.md) for a possible work
 around.

docs/core.md

@@ -284,7 +284,7 @@ function for information about `ConfigItem` fields.
 
 ### createConfigItem
 
-> babel.createConfigItem(value: string | {} | Function | [string | {} | Function, {} | void], { dirname?: string, type?: "preset" | "plugin" }): ConfigItem
+> babel.createConfigItem(value: string | \{} | Function | [string | \{} | Function, \{} | void], \{ dirname?: string, type?: "preset" | "plugin" }): ConfigItem
 
 Allows build tooling to create and cache config items up front. If this function
 is called multiple times for a given plugin, Babel will call the plugin's function itself

docs/options.md

@@ -401,7 +401,7 @@ When no targets are specified: Babel will assume you are using the [browserslist
 
 Type: `boolean`
 
-You may also target browsers supporting ES Modules (<https://www.ecma-international.org/ecma-262/6.0/#sec-modules>). When the `esmodules` target is specified, it will intersect with the `browsers` target and `browserslist`'s targets. You can use this approach in combination with `<script type="module"></script>` to conditionally serve smaller scripts to users (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility).
+You may also target browsers supporting [ES Modules](https://www.ecma-international.org/ecma-262/6.0/#sec-modules). When the `esmodules` target is specified, it will intersect with the `browsers` target and `browserslist`'s targets. You can use this approach in combination with `<script type="module"></script>` to conditionally serve smaller scripts to users (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility).
 
 :::note When specifying both `browsers` and the esmodules target, they will be intersected.
 :::

docs/parser.md

@@ -202,7 +202,7 @@ require("@babel/parser").parse("code", {
 | Name | Code Example |
 |------|--------------|
 | `flow` ([repo](https://github.com/facebook/flow)) | `var a: string = "";` |
-| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | <code>/&ast;:: type Foo = {...}; &ast;/</code> |
+| `flowComments` ([docs](https://flow.org/en/docs/types/comments/)) | <code>/&ast;:: type Foo = \{...}; &ast;/</code> |
 | `jsx` ([repo](https://facebook.github.io/jsx/)) | `<a attr="b">{s}</a>` |
 | `typescript` ([repo](https://github.com/Microsoft/TypeScript)) | `var a: string = "";` |
 | `v8intrinsic` | `%DebugPrint(foo);` |
@@ -360,7 +360,7 @@ This option is deprecated and will be removed in a future version. Code that is
     | SyntaxType | Record Example | Tuple Example |
     | --- | --- | --- |
     | `"hash"` | `#{ a: 1 }` | `#[1, 2]` |
-    | `"bar"` | <code>{&#124; a: 1 &#124;}</code> | <code>[&#124;1, 2&#124;]</code> |
+    | `"bar"` | <code>\{&#124; a: 1 &#124;}</code> | <code>[&#124;1, 2&#124;]</code> |
     See [Ergonomics of `#{}`/`#[]`](https://github.com/tc39/proposal-record-tuple/issues/10) for more information.
 
 - `flow`:

docs/plugin-proposal-decorators.md

@@ -102,7 +102,7 @@ Selects the decorators proposal to use:
 
 :::
 
-:::babel7
+::::babel7
 
 ### `version`
 
@@ -213,7 +213,7 @@ The `include` option will enable the transforms included in `@babel/preset-env`
 You can read more about configuring plugin options [here](https://babeljs.io/docs/en/plugins#plugin-options)
 :::
 
-:::
+::::
 
 ## 参考
 

docs/plugin-transform-classes.md

@@ -19,7 +19,7 @@ needs to be wrapped. This is needed to workaround two problems:
   returning it, Babel should treat it as the new `this`.
 
 The wrapper works on IE11 and every other browser with `Object.setPrototypeOf` or `__proto__` as fallback.
-There is **NO IE <= 10 support**. If you need IE <= 10 it's recommended that you don't extend natives.
+There is **NO IE &leq; 10 support**. If you need IE &leq; 10 it's recommended that you don't extend natives.
 
 Babel needs to statically know if you are extending a built-in class. For this reason, the "mixin pattern" doesn't work:
 

docs/preset-env.md

@@ -96,14 +96,14 @@ For usage, refer to the [`targets` option](options.md#targets) documentation.
 
 Added in: `v7.9.0`
 
-:::babel7
+::::babel7
 
-::::note
+:::note
 This option will be enabled by default in Babel 8.
-::::
-
 :::
 
+::::
+
 By default, `@babel/preset-env` (and Babel plugins in general) grouped ECMAScript syntax features into collections of closely related smaller features. These groups can be large and include a lot of edge cases, for example "function arguments" includes destructured, default and rest parameters. From this grouping information, Babel enables or disables each group based on the browser support target you specify to `@babel/preset-env`’s `targets` option.
 
 When this option is enabled, `@babel/preset-env` tries to compile the broken syntax to the closest _non-broken modern syntax_ supported by your target browsers. Depending on your `targets` and on how many modern syntax you are using, this can lead to a significant size reduction in the compiled app. This option merges the features of [`@babel/preset-modules`](https://github.com/babel/preset-modules) without having to use another preset.
@@ -258,9 +258,7 @@ npm install core-js
 Only use `import "core-js";` once in your whole app.
 
 :::babel7
-
 If you are using `@babel/polyfill`, it already includes `core-js`: importing it twice will throw an error.
-
 :::
 
 Multiple imports or requires of those packages might cause global collisions and other issues that are hard to trace.
@@ -307,15 +305,15 @@ import "core-js/modules/esnext.math.scale";
 
 You can read [core-js](https://github.com/zloirock/core-js)'s documentation for more information about the different entry points.
 
-:::babel7
+::::babel7
 
-::::note
+:::note
 When using `core-js@2` (either explicitly using the [`corejs: "2"`](#corejs) option or implicitly), `@babel/preset-env` will also transform imports and requires of `@babel/polyfill`.
 This behavior is deprecated because it isn't possible to use `@babel/polyfill` with different `core-js` versions.
-::::
-
 :::
 
+::::
+
 #### `useBuiltIns: 'usage'`
 
 Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once.
@@ -386,7 +384,7 @@ By default, only polyfills for stable ECMAScript features are injected: if you w
 
 `boolean`, defaults to `false`.
 
-<p><details>
+<details>
   <summary><b>Example</b></summary>
 
 With Babel 7's [JavaScript config file](config-files#javascript) support, you can force all transforms to be run if env is set to `production`.
@@ -412,7 +410,7 @@ module.exports = function(api) {
 };
 ```
 
-</details></p>
+</details>
 
 :::danger
 `targets.uglify` is deprecated and will be removed in the next major in

js/repl/CodeMirror.tsx

@@ -60,7 +60,7 @@ export default class ReactCodeMirror extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       nextProps.value &&
       nextProps.value !== this.props.value &&
@@ -130,7 +130,7 @@ injectGlobal({
   ".CodeMirror": {
     height: "100% !important",
     width: "100% !important",
-    "-webkit-overflow-scrolling": "touch",
+    WebkitOverflowScrolling: "touch",
   },
   ".CodeMirror pre.CodeMirror-placeholder.CodeMirror-line-like": css({
     color: colors.foregroundLight,

js/repl/CodeMirrorPanel.tsx

@@ -53,7 +53,7 @@ const sharedBoxStyles: Interpolation = {
   padding: "0.5rem 0.75rem",
   fontFamily: "monospace",
   whiteSpace: "pre-wrap",
-  "-webkit-overflow-scrolling": "touch",
+  WebkitOverflowScrolling: "touch",
 };
 
 const styles = {

js/repl/Modal.tsx

@@ -1,6 +1,6 @@
 import { css, keyframes } from "@emotion/css";
 import React, { Component } from "react";
-import ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 
 import type { ReactNode, SyntheticEvent } from "react";
 
@@ -84,7 +84,7 @@ export default class Modal extends Component<Props> {
       </React.Fragment>
     );
 
-    return ReactDOM.createPortal(result, this._node);
+    return createPortal(result, this._node);
   }
 }
 

js/repl/ReplOptions.tsx

@@ -436,19 +436,10 @@ class ExpandedContainer extends Component<Props, State> {
                     "reactRuntime",
                     (t) => t.value
                   )}
+                  value={presetsOptions.reactRuntime}
                 >
-                  <option
-                    value="automatic"
-                    selected={presetsOptions.reactRuntime === "automatic"}
-                  >
-                    Automatic
-                  </option>
-                  <option
-                    value="classic"
-                    selected={presetsOptions.reactRuntime === "classic"}
-                  >
-                    Classic
-                  </option>
+                  <option value="automatic">Automatic</option>
+                  <option value="classic">Classic</option>
                 </select>
               </PresetOption>
               <PresetOption
@@ -465,12 +456,10 @@ class ExpandedContainer extends Component<Props, State> {
                     "decoratorsVersion",
                     (t) => t.value
                   )}
+                  value={presetsOptions.decoratorsVersion}
                 >
                   {Object.keys(DECORATOR_PROPOSALS).map((key) => (
-                    <option
-                      value={key}
-                      selected={key === presetsOptions.decoratorsVersion}
-                    >
+                    <option key={key} value={key}>
                       {DECORATOR_PROPOSALS[key]}
                     </option>
                   ))}
@@ -515,12 +504,10 @@ class ExpandedContainer extends Component<Props, State> {
                     "pipelineProposal",
                     (t) => t.value
                   )}
+                  value={presetsOptions.pipelineProposal}
                 >
                   {Object.keys(PIPELINE_PROPOSALS).map((key) => (
-                    <option
-                      value={key}
-                      selected={key === presetsOptions.pipelineProposal}
-                    >
+                    <option key={key} value={key}>
                       {PIPELINE_PROPOSALS[key]}
                     </option>
                   ))}
@@ -754,7 +741,7 @@ class ExpandedContainer extends Component<Props, State> {
                     ? false
                     : assumptions[option];
                 return (
-                  <label className={styles.envPresetRow}>
+                  <label key={option} className={styles.envPresetRow}>
                     <LinkToAssumptionDocs
                       className={`${styles.envPresetLabel} ${styles.highlightWithoutUppercase}`}
                       section={option}
@@ -1045,7 +1032,7 @@ const styles = {
       maxHeight: "300px",
       display: "block",
       overflow: "auto",
-      "-webkit-overflow-scrolling": "touch",
+      WebkitOverflowScrolling: "touch",
     },
   }),
   section: css({

js/repl/index.html

@@ -584,8 +584,6 @@
         <div id="root">
           <noscript>You need to enable JavaScript to run this app.</noscript>
         </div>
-        <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
-        <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
         <script src="https://unpkg.com/[email protected]/lib/codemirror.js"></script>
         <script src="https://unpkg.com/[email protected]/mode/javascript/javascript.js"></script>
         <script src="https://unpkg.com/[email protected]/mode/xml/xml.js"></script>

js/repl/index.tsx

@@ -1,6 +1,5 @@
 import "core-js";
-import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import Repl from "./Repl";
 
@@ -10,7 +9,7 @@ declare var module: {
   };
 };
 
-ReactDOM.render(<Repl />, document.getElementById("root") as any);
+createRoot(document.getElementById("root")).render(<Repl/>);
 
 if (module.hot) {
   module.hot.accept();

package.json

@@ -91,8 +91,8 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
     "lz-string": "^1.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-instantsearch-dom": "^6.40.4",
     "regenerator-runtime": "^0.14.0",
     "unfetch": "^4.2.0"

webpack.config.js

@@ -47,8 +47,6 @@ const config = {
   externals: {
     codemirror: "CodeMirror",
     "lz-string": "LZString",
-    react: "React",
-    "react-dom": "ReactDOM",
   },
   performance: {
     hints: false,

website/blog/2016-08-24-6.14.0.md

@@ -68,7 +68,7 @@ And... we usually post [the changelog](https://github.com/babel/babel/blob/main/
 
 ### Notable Bug Fixes
 
-[#3527](https://github.com/babel/babel/pull/3527) Fix class inheritance in IE <=10 without `loose` mode.
+[#3527](https://github.com/babel/babel/pull/3527) Fix class inheritance in IE &leq;10 without `loose` mode.
 
 [#3644](https://github.com/babel/babel/pull/3644) Support the `ignore` config option in `.babelrc`.
 

website/blog/2017-09-12-planning-for-7.0.md

@@ -543,8 +543,8 @@ Babel itself doesn't have that many external dependencies, but in 6.x [each pack
 With [Create React App](https://github.com/facebookincubator/create-react-app) the size of the node_modules folder changed drastically when babel-runtime was hoisted.
 
 - `node_modules` for npm 3: ~120MB
-- `node_modules` for Yarn (<`0.21.0`): ~518MB
-- `node_modules` for Yarn (<`0.21.0`) with hoisted `babel-runtime`: ~157MB
+- `node_modules` for Yarn (&le;`0.21.0`): ~518MB
+- `node_modules` for Yarn (&le;`0.21.0`) with hoisted `babel-runtime`: ~157MB
 - `node_modules` for Yarn + [PR #2676](https://github.com/yarnpkg/yarn/pull/2676): ~149MB ([tweet](https://twitter.com/bestander_nz/status/833696202436784128))
 
 So although this issue has been fixed "upstream" by using npm >= 3/later Yarn, we can do our part by simply dropping our own dependency on `babel-runtime`.

website/blog/2020-05-25-7.10.0.md

@@ -38,7 +38,7 @@ Now that it has reached Stage 4, _parsing_ for [`import.meta`](https://github.co
 console.log(import.meta); // { url: "file:///home/user/my-module.js" }
 ```
 
-### Transforming <code>\&#x200B;u{...}</code>-style Unicode escapes ([#11377](https://github.com/babel/babel/pull/11377))
+### Transforming <code>\&#x200B;u\{...}</code>-style Unicode escapes ([#11377](https://github.com/babel/babel/pull/11377))
 
 We also discovered that we didn't have support for compiling a 5-year-old ECMAScript feature: `\u{...}`-style Unicode escapes! Thanks to [Justin](https://github.com/jridgewell), `@babel/preset-env` can now compile them in strings and identifiers by default.