New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
babel-core: add options for different parser/generator #3561
Conversation
|
||
Object.assign(this.parserOpts, { | ||
parser: require("babylon") | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is basically hardcoded based on what recast expects
Maybe we should just hardcode recast and make a new option for it (doesn't have to be called recast) since it's unlikely you would have a different parser/generator anyway
|
@benjamn had to modify recast's printer locally in node_modules (why it's failing now in CI)
|
let opts = this.opts; | ||
let parseCode = parse; | ||
|
||
if (opts.parserOpts.recast) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is parserOpts
always defaulted to an empty array? If not, then opts.parserOpts && opts.parserOpts.recast
is safer. Not sure if destructuring would throw if parserOpts
is undefined let {parserOpts: {recast}} = this.opts;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
parserOpts should be an object
Current coverage is 88.68% (diff: 100%)
|
I don't think recast should be hardcoded. As even though other code generators may not be compatible with the Babel AST today, they may add support on their end eventually as Babel is pretty popular. One use-case that I can see: Would love to see a reverse of that too. Using the typescript parser and then converting it to flow types. |
Yeah in my first commit it wasn't; need to change it back with a different test |
f0be46d
to
1b903d2
Compare
} | ||
|
||
if (!this.parserOpts.parser) { | ||
const babylonOptions = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to change this
1b903d2
to
79f0518
Compare
7c23d97
to
0e2051f
Compare
Tested locally with "babel": {
"parserOpts": {
"parser": "recast",
"plugins": ["jsx", "flow"]
},
"presets": [...]
} // test a random file with flow, async, jsx and keep formatting (spaces)
async function asyncFunc ( a : string) {
var asdf = async () => {
doSth();
}
return <A/>;
f}
var asdf = b; |
|
||
if (parserOpts.parser) { | ||
if (typeof parserOpts.parser === "string") { | ||
let dirname = parserOpts.dirname || process.cwd(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we avoid process.cwd()
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah you're right can access this.opts.filename: maybe let dirname = parserOpts.dirname || path.dirname(this.opts.filename);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
or path.dirname(this.opts.filename); || process.cwd()
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
path.dirname(this.opts.filename); || process.cwd()
seems reasonable to me.
0e2051f
to
7847977
Compare
This will be awesome for the program slicing project I'm working on. /subscribe |
21015a6
to
a63b3fe
Compare
Has this been released? If so, how could I use it? I tried using it in ASTExplorer and it doesn't appear to be working as I expected: https://astexplorer.net/#/F6KaVrGWcs And I've tried doing something locally (maybe ast explorer is out of date?) but I'm getting an error. See this repo |
mostly likely that astexplorer isn't released (also it would have to be able to specify the parseOpts and generatorOpts anyway. I did it locally Also depending on the ast nodes you use it won't work without using my branch since the other prs aren't merged 2nd benjamn/recast#299 |
that's also why you see the "stringliteral" doesn't match printable error since it's not implemented and the ast nodes are different |
@hzoo Are there docs for using this new babel feature? hrm...any talk of using different parsers for different files? I was optimistic that I'd be able to wrap a module like https://github.com/alexanderwallin/node-gettext and be able to transpile non-js languages into js. |
@mattkime ah yeah i never got around to adding docs for this. would be a pr to the website or babel-core readme right now the docs are the blog post: https://babeljs.io/blog/2016/09/28/6.16.0#new-feature and http://babeljs.io/blog/2016/12/07/the-state-of-babel#codemods-refactoring-eslint-fix. If you'd like to PR https://github.com/babel/babel.github.io that would be great |
* babel-core: add options for different parser/generator * test for experiemental plugins, other babylon options * fix passing options into parser * Fix when no code is provided * fixup tests * fix tests again * use filename and fallback to cwd
Ref lebab/lebab#138
Background
Babel as a compiler has 3 steps: parsing, transforming, and generation.
At a high level, the process is:
The last step of babel (out of 3) is the code generator. Traditionally, the code generator doesn't really need to care about the format of your code (spaces, quotes, etc). This is because the output code is your "compiled" code and will probably go in the dist/lib directory and you will eventually minify it, etc.
But what if you want to write a babel plugin that runs on your source code and outputs to source (
babel src -d src
rather thanbabel src -d lib
). You would want your diff to be readable and for the plugin to only modify what is necessary and what conforms to your style guide.This is because you want to write a plugin that transforms the source itself. And the use case I was thinking about is a project called lebab which is literally 5to6 or the opposite of babel. Currently, it isn't a babel plugin so I wanted to help support that usecase.
So the cool thing that would happen is that you would use the eventual "lebab" preset to convert your es5 codebase to es6, and then run babel again to support older browsers.
Idea is to allow recast instead of babel-generator so we can run on src files. (so https://github.com/mohebifar/lebab can be a babel preset)
something like
babel src -d src --presets=lebab
Had to patch recast/ast-types locally