ECMAScript: 2015 vs. 2018¶

Translucent & ECMAScript 2018¶

Translucent is currently only working in case the browser supports ECMAScript 2018 / ES9. The reasons for this decision are:

We don’t want to start a new project w/ an old standard from 2015
We think ECMAScript 2018 / ES9 is the right evolution (not too old, not too new, probably a bit amish-like)
There are some neat new features in ECMAScript 2018 / ES9 we want to leverage
The differences between ECMAScript 2015 / ES6 & ECMAScript 2018 / ES9 are not too much

We just go w/ ECMAScript 2018 / ES9 for now and see how that works out.

Important

In case a customer has a problem, we can evaluate a backport to ECMAScript 2015 / ES6.

ECMAScript 2018 usage¶

Currently we only use the following features of ES2018:

The object spread syntax is used in the BaseComponent.buildContext() method:

return {
    'attributes': this.componentAttributes,
    'component': this.localName,
    'data': this.data,
    ...this.loopContext,    // This is updated by the renderLoopElement() method.
    ...this.customContext,  // This is optionally set by the concrete web component.
}

The rest parameter syntax is used in the cleanContextEval() function:

export const cleanContextEval = (code, context) => new Function(
    ...Object.keys(context),    // Function arguments
    code,                       // Function body
)(...Object.values(context))    // Call w/ arguments

Test ES2015 support¶

The most straight-forward way to check if the code is ECMAScript 2015 / ES6 compliant, is by:

Using ESLint
Using our ESLint config
Changing the ecmaVersion to 2015

When running it, you should get something like this:

# npx eslint build/*.js build/components/*.js

…/build/base_component.js
  214:9  error  Parsing error: Unexpected token )

…/build/utils.js
  32:1  error  Parsing error: Unexpected token )

Hint

This would be the most straight-forward way to refactor our code to be ECMAScript 2015 / ES6 compliant!