let issue

[chocolateboy]

node: v0.11.14
6to5: 1.12.13

Still trying to break let :-)

'use strict';

function test () {
    let value = 'outer'; // or var

    return (function () {
        let value = 'inner';
        return value;
    })();
}

console.log(test());

node --harmony and traceur print "inner", as expected, but 6to5-node prints "outer":

"use strict";

function test() {
  var value = "outer"; // or var

  return (function () {
    var _value = "inner";
    return value;
  })();
}

console.log(test());

[sebmck]

Easy fix. Will release a new version shortly once I've fixed a couple other issues.

[sebmck]

Thanks! Fixed as of 1.12.14

[mattma]

➜ 6to5 --version
1.13.1
➜ node --version
v0.10.33

ES6 code

function letMe(bool) {
  var result = "result in global scope";
  if ( bool ) {
    let result = "result in block scope";
  }
  console.log('result: ', result);
  return result;
}
letMe(); // "result in global scope"
letMe(true); // "result in block scope"

compiled to

function letMe(bool) {
  var result = "result in global scope";
  if (bool) {
    var _result = "result in block scope";
  }
  console.log("result: ", result);
  return result;
}
letMe(); // "result in global scope"
letMe(true); // "result in block scope"

Console output

result:  result in global scope
result:  result in global scope

Expected Console output

result:  result in global scope
result:  result in block scope

letScoping is supported by 6to5, is it not turned on by default? what flag do I need to turn on to support this feature?

I am using the CLI command 6to5 es6-features.js --out-file compiled/

[sebmck]

letScoping is turned on by default. The console output you're experiencing is expected. What behaviour are you expecting of let variables? They're scoped to their current block so it never escapes the if.

[mattma]

@sebmck You are totally right. I am glad that I did not open a new issue and it is an user error.

Have a quick question on Transformers, Correct me if I am wrong?

By default, all Transformers attributes which listed in 6to5 --help are all enabled by default.

If I want to disable any of them, I should define an option of --blacklist array to disable one or more of them, all other Transformers are enabled.

If I ONLY want to enable one or more of them, I should use an option of --whitelist array to enable specify Transformers. that means any Transformers which does not include inside whitelist are NOT going to enable in the compilation.

Thanks.

[sebmck]

@mattma Yep, completely correct. Note that both --whitelist and --blacklist are delimitered by a comma. So to use multiple transformers you'd go --blacklist arrowFunctions,classes etc.

[mattma]

@sebmck Awesome. Good to know. Another question while i am playing around, Well, promise it is the last one I comment it here.

es6 code

let [a, b] = ["matt", ""];
console.log('a: ', a);
console.log('b: ', b);

On https://6to5.github.io/repl.html REPL output

"use strict";

var _toArray = function (arr) {
  return Array.isArray(arr) ? arr : Array.from(arr);
};

var _ref = ["matt", ""];

var _ref2 = _toArray(_ref);

var a = _ref2[0];
var b = _ref2[1];
console.log("a: ", a);
console.log("b: ", b);

My local output with 6to5#1.13.1

"use strict";

var _ref = ["matt1", ""];

var _ref2 = Array.from(_ref);

var a = _ref2[0];
var b = _ref2[1];
console.log("a: ", a);
console.log("b: ", b);

Well, Array.from method is not even being defined in the latest chrome, also inside Node Repl output an error TypeError: Object function Array() { [native code] } has no method 'from',

Is this a bug in the latest 6to5?

[sebmck]

@mattma Nope, the current version is 1.13.2 which I pushed out a few hours ago to npm and the website. A polyfill for Array.isArray and Array.from is required, see caveats for more info. This is to keep spec compliancy to support any iterable object.

[chocolateboy]

@chocolateboy

I wasn't asking, but this is still good to know :-)

[sebmck]

Sorry!

[mattma]

@sebmck Cool. The doc has a very brief intro on what is going on but was not clear how to include the polyfill to make is work.

By reading the source code, (https://github.com/6to5/6to5/blob/master/polyfill.js), it does include three required things regenerator runtime and the es6-shim and es6-symbol polyfills..

if I am using Gulp-6to5 to compile the code above.

var gulp = require('gulp'),
  to5 = require('gulp-6to5'),
  to5Polyfill = require("6to5/polyfill");

// @describe compile es6 modules into amd modules
gulp.task('compile', function () {
  console.log('to5Polyfill: ', to5Polyfill);  // {}  empty object returned.
  return gulp.src('es6-*.js')
    .pipe(to5())
    .pipe(gulp.dest('compiled/'));
});

Here is what is inside my package.json

  "dependencies": {
    "6to5": "^1.13.2",
    "gulp": "^3.8.10",
    "gulp-6to5": "^1.0.2"
  }

I installed local 6to5 to try to require the module ployfill, it does not seem to pick up the ployfill according to the doc. How to make it work to include the polyfill?

Thanks.

[sebmck]

@mattma You're executing the polyfill there. If you really want to get the polyfill as a string I guess you could do require("fs").readFileSync(require.resolve("6to5/browser-polyfill"), "utf8");

[mattma]

@sebmck I do not think that is what I am looking for. It should have a simpler version, is not it?

I do not necessary need to get ployfill as a string. I just want to get the es6 code to compile and works like you have in the https://6to5.github.io/repl.html REPL output.

let [a, b] = ["matt", ""];
console.log('a: ', a);
console.log('b: ', b);

I am currently learning the 6to5 api to understand how to use the es6 features. With the recent update, i have successfully updated the Ember Rocks project with 6to5 as its core ES6 compiler engine. To take the project to the next level, i need to understand what has been supported by 6to5.

Thanks for the great support.

[sebmck]

@mattma The REPL pages includes the polyfill via require("6to5/polyfill");. All you need is to include the polyfill is to include that require.

[mattma]

@sebmck Sure. that is clear. But if you see my comment ( previous no.4 comment ) with gulpfile.js configuration.

I tried with to5Polyfill = require("6to5");, to5Polyfill object contains everything about 6to5 as expect.
to5Polyfill = require("6to5/polyfill");, return an empty object.

What is the correct way to include the ployfill?

Here is updated gulpfile.js to include your tips earlier. 6to5 module has been installed inside node_modules along with gulp-6to5(it has included 6to5 internally. i think that I should use that instead of require 6to5 again )

var gulp = require('gulp'),
  to5 = require('gulp-6to5');

require("fs").readFileSync(require.resolve("6to5/browser-polyfill"), "utf8");

// @describe compile es6 modules into amd modules
gulp.task('compile', function () {
  return gulp.src('es6-*.js')
    .pipe(to5())
    .pipe(gulp.dest('compiled/'));
});

es6 code

let [a, b] = ["matt", "sam", "aaron"];
console.log(`${a} & ${b}`); // "matt & sam"

after running gulp compile command, which it should include ployfill.

var _ref = ["matt", "sam", "aaron"];
var _ref2 = Array.from(_ref);

var a = _ref2[0];
var b = _ref2[1];
console.log("" + a + " & " + b);

It is not included ployfill. Could you have a code example what my gulpfile.js should look like to include the ployfill. Well, If you are not familiar with gulp, you could have a CLI command to show how to include ployfill during the compilation. so that I have a good example to follow along. Thanks.

[sebmck]

@mattma You literally just include require("6to5/polyfill"); inside the code that is going to be executed. For example:

app.js

// I am a file that is going to be ran through 6to5 and then executed
require("6to5/polyfill");
let [a, b] = ["matt", "sam", "aaron"];
console.log(`${a} & ${b}`); // "matt & sam"

$ 6to5 app.js --out-file app-out.js
$ node app-out.js

You'd include require("6to5/polyfill"); at the top of whatever the entry point is to your application.

Feel free to enter the gitter room if you need further clarification or support. I'm more than happy to update the docs if there's any ambiguity.

[mattma]

@sebmck It works as advertised. Thank you very much.

Could you update the doc as well? I could benefit many people. I was confused about where to put it since there is no 6to5 module include in the code, ( if i am not using gulp ).

Using require("6to5/polyfill"); is too aggressive in my opinion. it is not intuitive I think.

I think it should be a default behavior. I do not know story behind it. I may be totally wrong here. Do not be mad at me.

In conclusion, thank you for your quick response. 6to5 rocks. Much better than tracuer

[sebmck]

@mattma Thank you!

I'm not willing to include the polyfill automatically in generated code because it's way too fat. It shouldn't be default behaviour because 6to5 aims to replicate syntax features instead of attempting to replicate an entire ES6 environment, although the bundled polyfill achieves this extremely well.

[mattma]

@sebmck well-said. As a programmer, I totally agreed with you. The polyfill is existed for a reason, otherwise, it should end up in the core.

It is not absolutely needed by the general audience. It should end up at polyfill or addons. Good night! thank you for working hard on an open source project at Saturday night.