Summarizes Babel presets stages zero to three [7.0.0-beta.51]

babel_preset_summary.md

Stage 3

@babel/plugin-proposal-async-generator-functions

Proposal | Babel

async function* func()
{
    await 1;
    yield 2;
}

---

@babel/plugin-proposal-class-properties

Proposal | Babel

class Bork
{
    // Property initializer syntax
    instanceProperty = 'bork';
    boundFunction = () => {
        return this.instanceProperty;
    };

    // Static class properties
    static staticProperty = 'babelIsCool';
    static staticFunction = function() {
        return Bork.staticProperty;
    };
}

let myBork = new Bork;

// Property initializers are not on the prototype
console.info (myBork.__proto__.boundFunction); // undefined

// Bound functions are bound to the class instance
console.info (myBork.boundFunction.call (undefined)); // 'bork'

// Static function exists on the class
console.info (Bork.staticFunction()); // 'babelIsCool'

---

@babel/plugin-proposal-json-strings

Proposal | Babel

const ex = 'before
after';
//                ^ There's a U+2028 char between 'before' and 'after'

becomes

After
const ex = 'before\u2028after';
//                ^ There's a U+2028 char between 'before' and 'after'

---

@babel/plugin-proposal-object-rest-spread

Proposal | Babel

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.info (x); // 1
console.info (y); // 2
console.info (z); // { a: 3, b: 4 }

---

@babel/plugin-proposal-optional-catch-binding

Proposal | Babel

try   { throw 0; }
catch { doSomethingWhichDoesntCareAboutTheValueThrown(); }

---

@babel/plugin-proposal-unicode-property-regex

Proposal | Babel

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test ('π'); // true

---

@babel/plugin-syntax-dynamic-import

Proposal | Babel

// Allow parsing of import()

---

@babel/plugin-syntax-import-meta

Proposal | Babel

// Allow parsing of import.meta

---

Stage 2

@babel/plugin-proposal-decorators

Proposal | Babel

@annotation
class MyClass { /* ... */ }

function annotation(target)
{
    target.annotated = true;
}

---

@babel/plugin-proposal-export-namespace-from

Proposal | Babel

export * as ns from 'mod';

---

@babel/plugin-proposal-function-sent

Proposal | Babel

function* generator()
{
    console.info ('Sent', function.sent);
    console.info ('Yield', yield);
}

const iterator = generator();
iterator.next (1); // Logs 'Sent 1'
iterator.next (2); // Logs 'Yield 2'

---

@babel/plugin-proposal-numeric-separator

Proposal | Babel

const budget = 1_000_000_000_000;
console.info (budget === 10 ** 12);

---

@babel/plugin-proposal-throw-expressions

Proposal | Babel

function test (param = throw new Error ('required!'))
{
    const test = param === true || throw new Error ('Falsey!');
}

---

Stage 1

@babel/plugin-proposal-do-expressions

Proposal | Babel

const a = do
{
    if (x > 10) 'big'; else 'small';
};

becomes

const a = x > 10 ? 'big' : 'small';

---

@babel/plugin-proposal-export-default-from

Proposal | Babel

export v from 'mod';

---

@babel/plugin-proposal-logical-assignment-operators

Proposal | Babel

a ||= b;
obj.a.b ||= c;

a &&= b;
obj.a.b &&= c;

becomes

const d = obj.a;

a || (a = b);
d.b || (d.b = c);

a && (a = b);
d.b && (d.b = c);

---

@babel/plugin-proposal-nullish-coalescing-operator

Proposal | Babel

const foo = object.foo ?? 'default';

becomes

const foo = object.foo !== null && object.foo !== undefined ? object.foo : 'default';

---

@babel/plugin-proposal-optional-chaining

Proposal | Babel

const obj = {
    foo: {
        bar: {
            baz: 42,
        },
    },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if `bar` exists

---

@babel/plugin-proposal-pipeline-operator

Proposal | Babel

const doubleSay  = str => `${str}, ${str}`;
const capitalize = str => str[0].toUpperCase() + str.substring (1);
const exclaim    = str => `${str}!`;

let result = exclaim (capitalize (doubleSay ('hello')));
result; // 'Hello, hello!'

let result = 'hello'
    |> doubleSay
    |> capitalize
    |> exclaim;

result; // 'Hello, hello!'

! There are competing proposals under consideration !

---

Stage 0

@babel/plugin-proposal-function-bind

Proposal | Babel

obj::func
// Is equivalent to
func.bind (obj)

::obj.func
// Is equivalent to
obj.func.bind (obj)

obj::func (val)
// Is equivalent to
func.call (obj, val)

::obj.func (val)
// Is equivalent to
obj.func.call (obj, val)