Traceur is a JavaScript.next-to-JavaScript-of-today compiler

https://gist.github.com/matthewrobb/98bac8c935e606e1a7a5

The simple idea is that if we can optimize the performance around get access to imports (which should be overwhelmingly the more common case) then we can sacrifice a little on initialization/memory and accept that setting is going to be slower.

Writing a bundling system for SystemJS (https://github.com/systemjs/systemjs/blob/master/lib/system-bundles.js), the workflow I converged on was to define modules within bundles the following way:

  import { p } from 'q';
  export var s = 't';

->

  System.defined['module-name'] = {
    deps: ['q'],
    execute: function() {
      var q = System.get(arguments[0]);
      return Module({
        s: 't'
      });
    }
  };

This was the simplest possible bundling mechanism, because then the instantiate function looks like:

  System.instantiate = function(load) {
    if (System.defined[load.name]) {
      var instantiateResult = System.defined[load.name];
      delete System.defined[load.name];
      return instantiateResult;
    }
  }

I was wondering if Traceur would consider an output like this? For now, I'm trying to support the current $traceurRuntime.ModuleStore.registerModule and $traceurRuntime.getModuleImpl functions within ESML to avoid a custom transformer, hence this suggestion.

I'm looking to create a transformer as part of converting module syntax to being parsed by Traceur for the ES6 Module Loader.

The transformations are:

Import Syntax

  import { a as b, c } from 'jquery';

->

  var b = __Loader.get('jquery')['a'];
  var c = __Loader.get('jquery')['c'];

Export Syntax

  export { a as b, c };

->

  __exports['b'] = a;
  __exports['c'] = c;

Export Variables / Functions

  export var p = 5;

->

  var p = 5;
  __exports['p'] = p;

Can I directly modify the syntax tree after Traceur transformations to do further transformation?

I also have no idea how to start constructing a modified syntax tree for the above.

The code branch I've been working on is here: https://github.com/ModuleLoader/es6-module-loader/blob/traceur/lib/es6-module-loader.js#L689

That exact line is where I would want to start doing transformations instead of getting the source directly.

This way I could remove the code that has been based on string-based transforms up until now.

Any tips would be really appreciated.

Closes #1162.

I've signed the CLA using my email ( ultcombo [\at] gmail {!dot!} com )

I'm unsure how to properly add a test for require.makeDefault(), as there is no way to "resetDefault()". Should we create a method for that as well?

By https://people.mozilla.org/~jorendorff/es6-draft.html#sec-runtime-semantics-forin-div-ofbodyevaluation, a for-of-loop's iterator shall be closed when execution control breaks out of the for-of-loop.

The test proves that traceur currently does not handle this problem properly.

I'll see whether I can come up with a solution in the next days.

Uses two-phase declaration / execution process to separate dependency binding from execution.

Includes https://github.com/ModuleLoader/es6-module-loader.git as third-party/, License MIT, for testing circular references. Adds tests for loading with circular references.

Closes #971, #953, #424, #107

Under modules=amd, mark modules with property '__esModule', and treat all other modules as default exports to allow mixing ES6 and AMD modules under both ES6 and AMD loaders.

Hi, is there anyway to generate source map without the aboslute path in the file field and without the sourceRoot field?

$ traceur --source-maps file --out project.js main.js 
$ cat project.map | jq .
{
  "sourcesContent": [
    "System.registerModule($__placeholder__0, [], $__placeholder__1);",
    "function() {\n        $__placeholder__0\n      }",
    "var __moduleName = $__placeholder__0;",
    "var $__placeholder__0 = $__placeholder__1",
    "class Foo {\n  static hello() {\n    return 'Oh, hi!';\n  }\n}\n\nexport default Foo;\n",
    "($traceurRuntime.createClass)($__placeholder__0, $__placeholder__1, $__placeholder__2)",
    "var $__default = $__placeholder__0",
    "return $__placeholder__0",
    "get $__placeholder__0() { return $__placeholder__1; }",
    "import Foo from 'lib/foo';\n\nconsole.log(Foo.hello());\n",
    "System.get($__placeholder__0)",
    "System.get($__placeholder__0 +'')"
  ],
  "sourceRoot": "/tmp/project/",
  "file": "/tmp/project/project.js",
  "mappings": "AAAA,KAAK,eAAe,AAAC,WAAoB,GAAC,CCA1C,UAAS,AAAD;;ACAR,AAAI,IAAA,CAAA,YAAW,YAAoB,CAAC;ACApC,AAAI,IAAA,MCAJ,SAAM,IAAE,KAIR,ADJwC,CAAA;AEAxC,EAAC,eAAc,YAAY,CAAC,AAAC,WDCpB,KAAI,CAAX,UAAa,AAAD,CAAG;AACb,WAAO,UAAQ,CAAC;IAClB,ECHmF;ACArF,AAAI,IAAA,CAAA,UAAS,EFME,IAAE,AENgB,CAAA;ACAjC,SCAA,aAAwB;AAAE,uBAAwB;IAAE,EDA7B;ANEjB,CDFwD,CAAC;AAA/D,KAAK,eAAe,AAAC,WAAoB,GAAC,CCA1C,UAAS,AAAD;;ACAR,AAAI,IAAA,CAAA,YAAW,YAAoB,CAAC;IOA7B,IAAE,ECAT,CAAA,MAAK,IAAI,AAAC,WAAkB;ADE5B,QAAM,IAAI,AAAC,CAAC,GAAE,MAAM,AAAC,EAAC,CAAC,CAAC;AFFxB,WAAuB;ANEjB,CDFwD,CAAC;AWA/D,KAAK,IAAI,AAAC,CAAC,WAAmB,GAAC,CAAC,CAAA",
  "names": [],
  "sources": [
    "@traceur/generated/TemplateParser/6",
    "@traceur/generated/TemplateParser/5",
    "@traceur/generated/TemplateParser/4",
    "@traceur/generated/TemplateParser/7",
    "lib/foo.js",
    "@traceur/generated/TemplateParser/8",
    "@traceur/generated/TemplateParser/1",
    "@traceur/generated/TemplateParser/3",
    "@traceur/generated/TemplateParser/2",
    "main.js",
    "@traceur/generated/TemplateParser/9",
    "@traceur/generated/TemplateParser/10"
  ],
  "version": 3
}

Are there any cases when full path to project's directory is needed inside sourceRoot?

I've tried some hacking, but no luck so far except breaking tests and sourcesContent field :)

https://github.com/google/traceur-compiler/wiki/LanguageFeatures

E.g. it uses a non-standard iterator protocol.

Mostly I am looking for a list of what Traceur flags are enabled by default and, if possible, how up-to-spec those flags are.

I'm trying to get ES6 modules working with pre-compiled files in the browser, and I'm getting this error:

Uncaught ReferenceError: require is not defined

On this line (generated by traceur):

var Star = $traceurRuntime.assertObject(require('star')).Star;

I'm compiling all my modules with modules='register', and my main script (the one I'm getting this error on) with modules='commonjs' (because using register means it never gets executed).

Is this a bug? Or am I just doing something wrong?

The following PR implements proper tail calls as demanded by ES6. The are behind the new experimental flag --proper-tail-calls. (Experimental because it necessarily reduces performance of the generated code.)

This probably makes Traceur the first transpiler properly supporting tail calls!

Each function that contains calls in tail position is rewritten. All tests pass with proper tail calls enabled by default. Traceur itself compiled with --proper-tail-calls true also works as expected.

At the moment, the transformer does not touch arrow functions, class declarations and class expressions (so they should be transpiled if their are supposed to be properly tail recursive). Likewise, template literals in tail position are currently not touched, so the corresponding transpilation should be enabled as well.

The changes to runtime.js are far less worse than what the diff shows. I had to wrap most of that code into an extra IIFE and the additional two spaces at the beginning of each line cause the diffs.

It is left as a TODO to check all other transformers that they do not convert tail calls in non tail calls.

Please review this PR; it's hopefully ready to merge.

Traceur transpiled code is looking like this:

var e,r=customElements,n=(e=HTMLElement,$traceurRuntime.createClass((function e(){$traceurRuntime.superConstructor(e).call(this),this.style="color: red;"}),{},{},e));

From:

class Foo extends HTMLElement {
  constructor() { super();
    this.style = 'color: red;';
  }
};

And results:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Where this statement fails (the this object is a HTMLElement instance):

$traceurRuntime.superConstructor(e).call(this)

This is a basic question, but... what counts as "code review" in the contribution graph in Github? Is it making comments on code or committing to code? I don't really understand the concept.

The filename argument passed to the writeFile() function in file-util.js may be manipulated to write arbitrary directories on the filesystem. The writeFile() function attempts to sanitize the untrusted filename, but calls the mkdirRecursive() function on the untrusted filename before the filename is sanitized (https://github.com/google/traceur-compiler/blob/master/src/node/file-util.js#L56)

For example, passing the filename "../test/target.txt" on a *nix system will create the directory "test" in the parent directory. An attacker can use the dot-dot-slash path manipulation technique to create directories anywhere on the filesystem.

function writeFile(filename, contents) {
  // Compute the output path
  var outputdir = fs.realpathSync(process.cwd());
  mkdirRecursive(path.dirname(filename));
  var filedir = fs.realpathSync(path.dirname(filename));
  filedir = removeCommonPrefix(outputdir, filedir);
  outputdir = path.join(outputdir, filedir);

  mkdirRecursive(outputdir);
  var outputfile = path.join(outputdir, path.basename(filename));
  fs.writeFileSync(outputfile, contents, 'utf8');
}

Hi All

we are upgrading to jQuery version 3.2.1 We have Rihno version 1_7R2 and we are getting error Object.defineProperty is not a function. I tried other new version of Rihno but nothing worked.

The reason may be Object.defineProperty is defined in JS 1.8 and rihno is in JS 1.7

can anyone of you help me to solve this ?

When Chrome 61 sees a <script type="module"...> tag, it will interpret is as an ES6 module. Is there any way to detect this at run-time to prevent Traceur doing transpilation when we don't need it to?