EcmaScript 6 support for Wisdom (using Traceur)

Description

Traceur((https://github.com/google/traceur-compiler) is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today. Traceur’s goal is to inform the design of new JavaScript features which are only valuable if they allow you to write better code . Traceur allows you to try out new and proposed language features today, helping you say what you mean in your code while informing the standards process.

The Wisdom Traceur extension generates valid EcmaScript 5 (in other words, regular JavaScript) from EcmaScript 6 by relying on Traceur. It supports the watch mode, so every modification triggers the file to be recompiled.

Installation

Traceur support is a build-process extension. In the plugins section of your application pom.xml file add:

<plugin>
    <groupId>org.wisdom-framework</groupId>
    <artifactId>wisdom-traceur-maven-plugin</artifactId>
    <version>${project.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>compile-es6</goal>
            </goals>
        </execution>
    </executions>
</plugin>

The plugin generates a valid JavaScript 5 document for JavaScript files (ending with .es6.js) contained in the:

1. src/main/resources/assets directory

2. src/main/assets directory

It supports the watch mode, so any change to a file is immediately processed and the file re-compiled.

However, to be used successfully, you need to disable the Google Closure compilation:

<plugin>
    <groupId>org.wisdom-framework</groupId>
    <artifactId>wisdom-maven-plugin</artifactId>
    <version>${wisdom.version}</version>
    <extension>true</extension>
    <configuration>
        <skipGoogleClosure>true</skipGoogleClosure>
    </configuration>
</plugin>

Usage

Using the plugin is very simple, just create .js files using EcmaScript 6 in src/main/resources/assets or /src/main/assets, it will be processed and an aggregated EcmaScript 5 file is created. By default this file is named your_artifactId.js. You can change this name using the <output> parameter.

To be compiled your file must either:

• includes a comment with !es6 or !EcmaScript6

• being include in the includes parameter

In the first case, your JavaScript file would be like:

//!ES6
class Greeter {
    sayHi(name = 'Anonymous') {
        console.log(`Hi ${name}!`);
    }
}

var greeter = new Greeter();
greeter.sayHi();

In the second case, the configuration of the plugin would contain an includes parameter:

<plugin>
    <groupId>org.wisdom-framework</groupId>
    <artifactId>wisdom-traceur-maven-plugin</artifactId>
    <version>${project.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>compile-es6</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <includes>
            <include>Greet*.js</include>
        </includes>
    </configuration>
</plugin>

To import another es6 file, use the following syntax

import Foo from './foo.es6.js';

class Thing extends Foo {
}
export default Foo;

To use the generated JavaScript files, don’t forget to import the Traceur Runtime in your HTML file:

<script src="https://google.github.io/traceur-compiler/bin/traceur-runtime.js"></script>
<script src="/assets/your_artifactId.js"></script>

Parameters

• output - the name of the aggregated file generated

• moduleStrategy - the module strategy among inline, amd, commonsjs, instantiate, register. inline is used by default

• experimental - enables or disables the experimental feature (enabled by default)

• version - the traceur version (0.0.49 by default)

• includes - the set of included file (can use wildcards, and are checked against the file names).