We just did a whole bunch of work to our JavaScript processing stuff here on CodePen. Part of that work included updating the Babel preprocessor to version 7.

Here's what that means in the CodePen editor.

No need for a client-side polyfill

In the past, if you wanted to flip on Babel, but also use things like async and await, you would get an error that regeneratorRuntime was needed. You could make that work by linking up the Babel Polyfill script as an external resource, but clearly, that was a bit janky. Especially as async and await work without running through Babel in most browsers these days.

Now async and await work with Babel, or without Babel in browsers that support it.

Here's an example Pen:

See the Pen
async/await example
by Chris Coyier (@chriscoyier)
on CodePen.

There are other new things to try, too!

Pipeline Operators

See the Pen
Pipeline Operators Example
by Cassidy Williams (@cassidoo)
on CodePen.

JSX Fragments

See the Pen
JSX <> Fragments!
by Chris Coyier (@chriscoyier)
on CodePen.

Do Expressions

See the Pen
Do Statements in JSX
by Chris Coyier (@chriscoyier)
on CodePen.

Logical Assignment Operators

See the Pen
Logical Assignment Operators
by Chris Coyier (@chriscoyier)
on CodePen.

New Babel Packages

We also enabled lots of new Babel plugins. Previously we only made "vanilla" Babel available. These plugins let you do a lot more!

Here's the full list of new plugins:

@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/plugin-proposal-do-expressions
@babel/plugin-proposal-function-bind
@babel/plugin-proposal-function-sent
@babel/plugin-proposal-json-strings
@babel/plugin-proposal-logical-assignment-operators
@babel/plugin-transform-modules-commonjs
@babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-numeric-separator
@babel/plugin-proposal-optional-chaining
@babel/plugin-proposal-pipeline-operator
@babel/plugin-proposal-throw-expressions
@babel/plugin-syntax-jsx
@babel/plugin-transform-react-display-name
@babel/plugin-transform-react-jsx

Infinite Loop Detection is Back

That was off for a little while there while we were working on this. Sorry about that. It's back now and it's all the less likely you'll accidentally freeze your browser without us catching and stopping it.

Under the Hood

We run the Babel processing in a web worker (literally in your browser) if we can. Largely for speed reasons, as no network request for this is then needed. We'd love to do more of this, so we can get even faster and baby step toward editor features that work offline.

Navel-gazing

Like so many features, this release has many faces:

  1. User-facing features like we've focused on in this post
  2. Improvements to our own code base
  3. Path-making for future releases

There are probably more implications for our own code base here. There is loads of testing we never had before. We've upgraded ourselves to Babel 7 and Webpack 4. We've upgraded versions of tons of software. And we've cleaned house on tons of aspects of our code base that haven't seen that love in a while. Feels great!

Just as importantly, this is a foundational step in another big feature that is just around the corner, and that is proper support of using resources from npm. Stay tuned!