How to use await with traceur compiler on the fly?

326 views Asked by At

I'm needing help to configure my browser to work with trace compiler. I have tried of several ways to put a simple async code to work, but with no sucess yet. The code is the following:

<!DOCTYPE html>
<html>
<body>
  <h1 id="message"></h1>
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script type="module">
    $traceurRuntime.options = traceur.util.Options.experimental();
    console.log("t", traceur, "tr", $traceurRuntime, "tro", $traceurRuntime.options); 
    function changeTest(text) {
        return new Promise().resolve(text+text);
    }

    async function run(text) {
        var newText = await encrypt(text);
    }

    console.log(run("asdf"));
  </script>
</body>
</html>

The traceur compiler link show that it should work is here.

The following error appears:

["file:///.../traceur_inline_script_1.js:8:8: Semi-colon expected", "file:///.../traceur_inline_script_1.js:9:9: Semi-colon expected"]

The tracerRuntimeOptions looks ok:

Options {
    arrowFunctions: true,
    blockBinding: true,
    classes: true,
    computedPropertyNames: true,
    defaultParameters: true…
}
annotations: true
arrayComprehension: true
arrowFunctions: true
asyncFunctions: true
asyncGenerators: true
atscript: (...)
blockBinding: true
classes: true
commentCallback: false
computedPropertyNames: true
debug: false
debugNames: false
defaultParameters: true
destructuring: true
experimental: (...)
exponentiation: true
exportFromExtended: true
forOf: true
forOn: true
freeVariableChecker: false
generatorComprehension: true
generators: true
inputSourceMap: false
lowResolutionSourceMap: false
memberVariables: true
moduleName: "default"
modules: (...)
modules_: "bootstrap"
numericLiterals: true
outputLanguage: "es5"
parseOptions: Object
properTailCalls: true
propertyMethods: true
propertyNameShorthand: true
referrer: ""
require: true
restParameters: true
script: false
sourceMaps: (...)
sourceMaps_: false
sourceRoot: false
sourceRoot_: false
spread: true
symbols: true
templateLiterals: true
transformOptions: Object
typeAssertionModule: null
typeAssertions: false
types: true
unicodeEscapeSequences: true
unicodeExpressions: true
validate: false
__proto__: Options

I tried several variations but no sucess yet. Someone can help me to write a working code?

Thanks in advance.

1

There are 1 answers

0
Paul Sweatte On

As noted above:

The truth I was misunderstanding how to use the Traceur transpiler. I solved the problem by using something like grunt to compile the file to ECMAScript-7, then used the compiled output in my HTML page. The await operator works fine. When I have some time I will explain better, but this is the direction.

References