support for ES6 / JSX

[geekyme]

Would love to have strings extracted out from an ES6 / JSX file like this:

import React, { PropTypes, Component } from "react";
import JoinForm from "../../components/auth/join-form";

class JoinPage extends Component {
  static propTypes = {
    status: PropTypes.string,
    user: PropTypes.object
  }

  render() {
    var msg = gettext("Hello world")

    return (
      <div>
        <JoinForm {...this.props} />
      </div>
    );
  }
}

export default JoinPage;

at the moment trying to do jsxgettext on this file spits on the following error:

/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:335
    throw err;
          ^
SyntaxError: Unexpected token (7:19)
    at raise (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:333:15)
    at unexpected (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:1366:5)
    at expect (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:1360:18)
    at parseFunctionParams (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:2335:5)
    at parseMethod (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:2286:5)
    at parseClass (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:2425:22)
    at parseStatement (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:1563:25)
    at parseTopLevel (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:1526:18)
    at Object.exports.parse (/Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/node_modules/acorn/acorn.js:48:12)
    at /Users/shawnlim/Documents/Code/reactjs/boa/node_modules/jsxgettext/lib/jsxgettext.js:128:27

[ozten]

Using the jsx compiler to first output ES5 JavaScript would probably be best.

JSX is a weird PHP like format. Writing a parser would be non-trivial. Updates to the syntax of the JSX language would require updates to this library.

JSX already has tooling to generate the analogous raw JS. This can work with the vanilla jsxgettext parser.

[geekyme]

ah yes compiling JSX to JS does work. Pure ES6 code also can't be parsed by jsxgettext right? So I have to go through 2 levels of compilation before jsxgettext can parse my code?

[geekyme]

ah ok no worries I realized acorn is set with ecmaVersion to 6. Aight I'll compile to JSX first then! thanks!

[muffinresearch]

There's a plugin for acorn called acorn-jsx which might help with enabling the possibility of direct jsx extraction.

[fraserxu]

@geekyme I have the same issue with you and end up with this https://github.com/fraserxu/babel-jsxgettext

It's using the parser(babylon) from Babel and works well for the ES6 + JSX code base.

@muffinresearch I tried acorn-jsx but seems that it does not support all the features that Babel support(ES7 decorator function etc..).

One benefit of this approach compare to 'compile JSX to JS' is that I still get the reference for the comment, in this way I can know where the source code is generated from.

[BYK]

May be we can switch to https://github.com/eslint/espree which supports the JSX syntax and quite fast?

[fraserxu]

I believe there are lots of use cases that people are using Babel. Because it's so popular within the front-end community, together with Webpack. I'm not sure that espree could implement all the features that Babel provide.

[BYK]

Well then may be a parser option like ESLint to let people specify the parser they want to use then? Or working on that plugin based architecture I mentioned a few years ago to put this into the codebase.

[ruscoder]

I've implemented support for JSX using acorn-jsx in PR #102