-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
171 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"], | ||
}); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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` | ||
|
||
<details> | ||
|
@@ -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`. | ||
|
||
<details> | ||
|
@@ -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/[email protected]` 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/[email protected]` is installed. If you have later versions of | ||
::::babel8 | ||
|
||
By default transform-runtime assumes that `@babel/[email protected]` 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/[email protected]` 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 where removed in Babel 8.0.0: | ||
- `corejs` | ||
- `helpers` | ||
- `regenerator` | ||
|
||
::: | ||
|
||
The following options where removed in Babel 7.0.0: | ||
- `useBuiltIns` | ||
- `polyfill` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.