All Projects → babel → Proposals

babel / Proposals

✍️ Tracking the status of Babel's implementation of TC39 proposals (may be out of date)

Labels

Projects that are alternatives of or similar to Proposals

Babel Time Travel
Time travel through babel transformations one by one (implemented in the Babel REPL now)
Stars: ✭ 338 (-15.71%)
Mutual labels:  babel
Nod
Node.js module generator/boilerplate with Babel, Jest, Flow, Documentation and more
Stars: ✭ 355 (-11.47%)
Mutual labels:  babel
Twin.macro
🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+1181.05%)
Mutual labels:  babel
Woo Next
🚀 React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client
Stars: ✭ 342 (-14.71%)
Mutual labels:  babel
Express Starter
🚚 A boilerplate for Node.js, Express, Mongoose, Heroku, Atlas, Nodemon, PM2, and Babel. REST / GraphQL API Server | PaaS | SaaS | CI/CD | Jest | Supertest | Docker | MongoDB | PostgreSQL | Sequelize | Lodash | RxJS | JWT | Passport | WebSocket | Redis | CircleCI | Apollo | DevSecOps | Microservices | Backend Starter Kit | ES6
Stars: ✭ 353 (-11.97%)
Mutual labels:  babel
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (-8.48%)
Mutual labels:  babel
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: ✭ 18,727 (+4570.07%)
Mutual labels:  babel
Eslint Plugin Babel
An ESlint rule plugin companion to babel-eslint
Stars: ✭ 391 (-2.49%)
Mutual labels:  babel
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (-10.72%)
Mutual labels:  babel
Generator Babel Boilerplate
A Yeoman generator to author libraries in ES2015 (and beyond!) for Node and the browser.
Stars: ✭ 380 (-5.24%)
Mutual labels:  babel
Server Side Rendering
Interactive guide to server-side rendering with Webpack, React, React Transmit, CSS modules and more
Stars: ✭ 352 (-12.22%)
Mutual labels:  babel
Js Library Boilerplate Basic
Javascript Minimal Starter Boilerplate - Webpack 5 🚀, Babel 7, UMD, Unit Testing
Stars: ✭ 354 (-11.72%)
Mutual labels:  babel
Webbf
Java Web工程demo 后端:spring + spring mvc + mybatis + maven,涉及定时任务quartz、ehcache缓存、RESTful API、邮件发送... 前端:react + reflux + webpack,涉及ES6、jquery、react-router、ant design等内容, 提供下思路,仅供参考。
Stars: ✭ 367 (-8.48%)
Mutual labels:  babel
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (-15.46%)
Mutual labels:  babel
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (-2.99%)
Mutual labels:  babel
Babel Plugin React Remove Properties
Babel plugin for removing React properties. 💨
Stars: ✭ 327 (-18.45%)
Mutual labels:  babel
Apollo Upload Examples
A full stack demo of file uploads via GraphQL mutations using Apollo Server and apollo-upload-client.
Stars: ✭ 358 (-10.72%)
Mutual labels:  babel
Astexplorer
A web tool to explore the ASTs generated by various parsers.
Stars: ✭ 4,330 (+979.8%)
Mutual labels:  babel
Pingy Cli
The Simple Frontend Build Tool. No Configuration, No Plugins.
Stars: ✭ 390 (-2.74%)
Mutual labels:  babel
Ava
Node.js test runner that lets you develop with confidence 🚀
Stars: ✭ 19,458 (+4752.37%)
Mutual labels:  babel

Babel progress on ECMAScript proposals

Official TC39 Proposals Repo

TC39 Proposals Process Document

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

Implemented

Dynamic Import

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');
));

RegExp Unicode Property Escapes

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;

RegExp Named Capture Groups

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';

Regexp DotAll Flag

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]/;

Class Fields

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;
  }
}

Class and Property Decorators

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
      }
    }
  }
}

Export Extensions

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 from

Optional Chaining

TC39 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;

do Expressions

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';

Numeric Separator

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;

Function Bind

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)

function.sent

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"

Parser Only

BigInt

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 floating
Invalid Example
// Invalid
1.0n // no decimals
2e9n // no exponential notation
016n // no old octal

import.meta

TC39 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;

Not Implemented

Pattern Matching

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)
  }
}

Generator Arrow Functions

TC39 Champion: Brendan Eich, Domenic Denicola
Preset: N/A
Plugins: N/A

Code Example
()=>*{}

FAQ

When does Babel implement new features?

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).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].