Babel progress on ECMAScript proposals
For the official list, check the TC39 repo. This list only contains all proposals higher than Stage 0 that are compilable by Babel. (If Stage 4, it will be in preset-env)
| Proposal Link | Current Stage | Status |
|---|---|---|
| Dynamic Import | 4 | 3 |
| RegExp Unicode Property Escapes | 4 | 3 |
| RegExp Named Capture Groups | 4 | 3 |
| RegExp DotAll Flag | 4 | 3 |
| Class Fields | 3 | 2 |
function.sent |
2 | 2 |
| Class and Property Decorators | 2 | 1 |
| BigInt | 4 | Parsable |
import.meta |
3 | Parsable |
export * as ns from "mod"; |
4 | 1 |
export v from "mod"; |
1 | 1 |
| Generator Arrow Functions | 1 | N/A |
| Optional Chaining | 4 | 1 |
do Expressions |
1 | 1 |
| Numeric Separator | 3 | 1 |
| Function Bind | 0 | 0 |
| Pattern matching | 1 | 0 |
TC39 Champion: Domenic Denicola
Preset: babel-preset-stage-3
Plugins: babel-plugin-syntax-dynamic-import
Webpack 1: https://github.com/airbnb/babel-plugin-dynamic-import-webpack
Webpack 2: supports this by default (just needs Babel to parse)
Node: https://www.npmjs.com/package/babel-plugin-dynamic-import-node
Code Example
import('test-module').then(() => (
import('test-module-2');
));TC39 Champion: Brian Terlson, Daniel Ehrenberg, Mathias Bynens
Preset: babel-preset-stage-3
Plugins: babel-plugin-transform-unicode-property-regex
Code Example
const a = /^\p{Decimal_Number}+$/u;
const b = /\p{Script_Extensions=Greek}/u;TC39 Champion: Daniel Ehrenberg, Brian Terlson
Preset: N/A
Plugins: babel-plugin-transform-modern-regexp (with namedCapturingGroups flag)
Code Example
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';
// result[0] === '2015-01-02';
// result[1] === '2015';
// result[2] === '01';
// result[3] === '02';TC39 Champion: Daniel Ehrenberg, Jeff Morrison
Preset: N/A
Plugins: babel-plugin-transform-dotall-regex, babel-plugin-transform-modern-regexp (with dotAll flag)
Code Example
/./s; // /[\0-\uFFFF]/;TC39 Champion: Daniel Ehrenberg, Jeff Morrison
Stage 2
Preset: WIP
Plugins: WIP
First Pull Request: babel/babylon#608 by @diervo
Babylon Label: Spec: Class Fields
Stage 1
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-class-properties
Code Example
class Bork {
instanceProperty = "bork";
boundFunction = () => {
return this.instanceProperty;
}
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
}
}TC39 Champion: Yehuda Katz and Brian Terlson
Stage 2
Preset: WIP
Plugins: WIP
Stage 1
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-decorators, babel-plugin-transform-decorators-legacy
First Pull Request: babel/babylon#587 by @peey
Babylon Label: Spec: Decorators
Code Example
@frozen class Foo {
@configurable(false) @enumerable(true) method() {}
}
function frozen(constructor, parent, elements) {
return {
constructor,
elements,
finisher(constructor) {
Object.freeze(constructor.prototype)
Object.freeze(constructor)
}
}
}
function configurable(configurable) {
return decorator;
function decorator(previousDescriptor) {
return {
...previousDescriptor,
descriptor: {
...previousDescriptor.descriptor,
configurable
}
}
}
}
function enumerable(enumerable) {
return decorator;
function decorator(previousDescriptor) {
return {
...previousDescriptor,
descriptor: {
...previousDescriptor.descriptor,
enumerable
}
}
}
}
This proposal was split into 2:
https://github.com/tc39/proposal-export-ns-from
https://github.com/tc39/ecmascript-export-default-from
TC39 Champion: Lee Byron
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-export-extensions
Code Example
export * as ns from 'mod'; // export-ns-from
export v from 'mod'; // export default fromTC39 Champion: Gabriel Isenberg
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-optional-chaining
Code Example
obj?.prop // optional property access
obj?.[expr] // optional property access
func?.(...args) // optional function or method call
a?.b = 42; // a == null ? undefined : a.b = 42;TC39 Champion: Dave Herman
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-do-expressions
Code Example
let a = do {
if (x > 10) {
'big';
} else {
'small';
}
};
// let a = x > 10 ? 'big' : 'small';TC39 Champion: Sam Goto
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-numeric-separator
First Pull Request: babel/babylon#541 by @rwaldron
Babylon Label: Spec: Numeric Separator
Code Example
// Decimal Literals
let budget = 1_000_000_000_000;
// Binary Literals
let nibbles = 0b1010_0001_1000_0101;
// Hex Literal
let message = 0xA0_B0_C0;TC39 Champion: Brian Terlson & Matthew Podwysocki
Preset: babel-preset-stage-0
Plugins: babel-plugin-transform-function-bind
Code Example
obj::func
// is equivalent to:
func.bind(obj)
obj::func(val)
// is equivalent to:
func.call(obj, val)
::obj.func(val)
// is equivalent to:
func.call(obj, val)TC39 Champion: Allen Wirfs-Brock
Preset: babel-preset-stage-2
Plugins: babel-plugin-transform-function-sent
Code Example
function* generator() {
console.log("Sent", function.sent);
console.log("Yield", yield);
}
const iterator = generator();
iterator.next(1); // Logs "Sent 1"
iterator.next(2); // Logs "Yield 2"TC39 Champion: Daniel Ehrenberg
Preset: WIP
Plugins: WIP
First Pull Request: babel/babylon#588 by @wdhorton
Babylon Label: Spec: BigInt
Code Example
1n // integer
0b101n // binary
0xFF123n // hex
0o16432n // octal
9223372036854775807n // larger than floatingInvalid Example
// Invalid
1.0n // no decimals
2e9n // no exponential notation
016n // no old octalTC39 Champion: Domenic Denicola
Preset: babel-preset-stage-2
Plugins: babel-plugin-syntax-import-meta
First Pull Request: babel/babylon#544 by @jkrems
Babylon Label: Spec: import.meta
Code Example
import.meta.url;
import.meta.scriptElement.dataset.size;TC39 Champion: Brian Terlson (Microsoft, @bterlson), Sebastian Markbåge (Facebook, @sebmarkbage)
Preset: WIP
Plugins: WIP
Babylon Label: Spec: pattern matching
First Pull Request: babel/babylon#635 by @krzkaczor
Code Example
const length = vector => {
case (vector) {
when { x, y, z } -> return Math.sqrt(x ** 2 + y ** 2 + z ** 2)
when { x, y } -> return Math.sqrt(x ** 2 + y ** 2)
when [...etc] -> return vector.length
}
}const isVerbose = config => {
case (config) {
when {output: { verbose: true }} -> return true
when config -> return false
}
}const res = await fetch(jsonService)
case (res) {
when {status: 200, headers: {'Content-Length': s}} ->
console.log(`size is ${s}`)
when {status: 404} ->
console.log('JSON not found')
when {status} if (status >= 400) -> {
throw new RequestError(res)
}
}TC39 Champion: Brendan Eich, Domenic Denicola
Preset: N/A
Plugins: N/A
Code Example
()=>*{}Babel will accept any PR for a proposal that is intended to go through the TC39 Proposal Process. This just means that we could implement and release a proposal starting at Stage 0. However this doesn't mean that we will implement it ourselves, but that we will work with both TC39 Champions and the community to get an implementation in. (And sometimes we have to wait for Summer of Code for that to happen).
It's our intention (and one of our main goals) as a project to help TC39 get feedback from the community through using the new syntax in their codebases. There is however a balance between supporting new proposals and informing users that any proposal is still just a proposal and subject to change. In order to move the community forward, we will continuously make changes to adhere to the spec as patches. If bigger changes require a major version, we will deprecate older versions of plugins, document those changes, and see if we can automate the upgrade via a codemod. This way everyone is moving towards Stage 4 and closer to what will be in the spec if the proposal makes it to the end.
This means we will also include proposals in this repo that haven't been presented to the committee yet if they are concrete enough and someone on TC39 is planning on presenting it (and marked appropriately).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent