Glavin001/atom-preview

Babel not working

Closed this issue · 6 comments

I am writing ES2015 and use the Babel transpiler. Unfortunately preview does not preview the transpiled code. It only displays the already written code.

Is this as expected?

Could you provide an example? Thanks.

const foo = () => {};

Preview shows me:

const foo = () => {};

instead of

"use strict";

var foo = function foo() {};

Yeah that should result in something like:

"use strict";

var foo = function foo() {};

I just tried it in Atom Preview and everything works as expected.

Please make sure your Atom grammar is correct: Babel ES6 Javascript. See applicable code at https://github.com/Glavin001/atom-preview/blob/master/lib/renderer.coffee#L148
Atom language package here: https://github.com/gandm/language-babel

What is your current grammar for this file?

Hmmm. I already installed the language-babel plugin. When I open a JavaScript file in Atom it tells me Babel ES6 JavaScript in the lower right corner.

Also I did a reinstall of preview. Nothing changed. The error occurs on Mac OS X as well as under Arch Linux.

Note that it is case-sensitive, so I will assume that by Babel ES6 JavaScript you meant Babel ES6 Javascript. As silly as that is, I just want to make sure that you do in fact have the correct grammar so we can eliminate that being the problem. The current grammar on the latest language-babel is also Babel ES6 Javascript (see https://github.com/gandm/language-babel/blob/master/grammars/Babel%20Language.json#L2 ) and there are not updates for me to download.
There appears to be a problem where Atom Preview has Babel ES6 JavaScript ( see https://github.com/Glavin001/atom-preview/blob/master/lib/renderer.coffee#L148 ) and language-babel has Babel ES6 Javascript (see https://github.com/gandm/language-babel/blob/master/grammars/Babel%20Language.json#L2 ). This is a typo in language-babel as it should be JavaScript. I'll submit a Pull Request to them now. However, using Atom Preview does still work for me.

So I think the best plan of action would be for you to add a few console.logs at https://github.com/Glavin001/atom-preview/blob/master/lib/renderer.coffee#L31-L43 and https://github.com/Glavin001/atom-preview/blob/master/lib/renderer.coffee#L148-L156 to make sure everything is running smoothly. If the grammar Babel ES6 Javascript is not being found then it will fallback to using the extension to find a suitable Previewer (transpiler). However, looking at the list of supported renderers by Atom Preview, it appears that Babel ES6 JavaScript is actually the first renderer supporting the js extension. I have tested this by setting the grammar of the file to JavaScript and it still renders correctly to:

"use strict";

var foo = function foo() {};

I am not sure why it is rendering it exactly as the original:

const foo = () => {};

Could you try something more complex, such as:

// Iterators + For..Of
var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

// Classes
class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Thank you for your help. With the latest update of language-babel everything works now 👍