facebook / jscodeshift Goto Github PK
View Code? Open in Web Editor NEWA JavaScript codemod toolkit.
License: MIT License
A JavaScript codemod toolkit.
License: MIT License
It always complains about a missing id which I'm not able to provide when I try to build it with functions. Using template I can get a little bit farther and then manually set the id. Not sure if this is an error on jscodeshift or a library that is being consumed by jscodeshift, but since I can repro in the AST explorer I'll just start by reporting here :)
I'm trying to run transformations but having a really hard time because all my files get skipped and I have no indication of why.
Each of the transformation files use console.log() to tell the user why files were skipped, but for whatever reason, the console.log() statements never make it into stdout.
A closestScope
function would return the closest scope (walking up the parent nodes) which is either a function, arrow function, method declaration, function declaration or function expression (and maybe others).
This is something that has come up repeatedly for me when trying to trace identifiers or other things around in an AST.
Example of where I did the traversal manually: cpojer/js-codemod@a20a5e1
I'd like to run a mod on a large directory of directories, each of which can have a 'node_modules' directory I'd like to ignore. It'd be great to have an option in jscodeshift to exclude subdirectory patterns if you pass it a directory to transform.
Hi,
I'm trying to remove an import statment, but everytime I attempt to remove it, the decorators also get removed. Is there another way to handle this?
http://felix-kling.de/esprima_ast_explorer/#/mgA15bmVhm/3
I'm using the babel-core
parser.
I wonder if we could add a reverse
helper on to the collection class. Currently I'm doing this:
const reverseCollection = collection => j(collection.paths().reverse());
I need to reverse the collection to perform operations on nested call expressions, so I can start at the deep end and traverse up, copying across old nodes as I please.
jscodeshift html/js --extensions=js,jsx
should transform all files recursively in the passed in directory that match the extensions option.
This should work:
const findReactCreateClassExportDefault = path =>
path
.find(j.ExportDefaultDeclaration, {
type: 'ExportDefaultDeclaration',
declaration: {
type: 'CallExpression',
callee: REACT_CREATE_CLASS_MEMBER_EXPRESSION
}
})
.map((p) => {
return p.value.declaration;
})
cc @iammerrick
Add support for jscodeshift -t http://astexplorer.net/#/QaBzVS9XHK
It would be really useful to have a per-file timeout option. Currently I'm transforming a large number of files, and some individual files are causing my transform to hang (seemingly indefinitely). If I could set a timeout on a per-file basis then I could just continue on and transform all other files.
This could work by killing any process which does not produce any output for a sufficiently long time, then putting whatever jobs it had pending into a new process.
A findInScope
method would only pattern match one scope level deep, beginning from the scope it was called on.
This is useful to find identifiers on a specific level in the AST, for example arguments
or this
inside of a function/method.
Examples where I did this manually or worked around this problem:
cpojer/js-codemod@7502159
cpojer/js-codemod@a20a5e1
I'm writing tests for my codemods and thus running jscodeshift repeatedly in my tests. There is a lot of information printed for every run:
Processing 1 files...
Spawning 1 workers with 1 files each...
Running in dry mode, no files will be written!
All workers done.
Results: 0 errors 0 unmodifed 0 skipped 1 ok
Time elapsed: 0.902 seconds
It would be nice if there was a silent mode. The information printed could be provided as a data object at the end as per #59
--config
optionThis option would allow you to specify a config file on disk from which additional options would be read. The file would contain additional options to be included with the invocation; for example:
--cpus 2 -v
Options explicitly provided on the command-line would override options read from the config file. For example, given the config above, --cpus
would be set to 4
for an invocation like this:
jscodeshift --config my-config --cpus 4 target.js
--config
option, look for config in default locationsDefault locations could be:
.jscodeshiftrc
in current directory$HOME/.jscodeshiftrc
/etc/jscodeshiftrc
(or something like that)This would, for example, enable you to provide a consistent set of Recast printOptions
that you would use, by convention, in all of your transform scripts (ie. in the call to toSource()
).
Do we want the config file to be just a dumb string that we split and pass into nomnom as though the args were passed on the commandline? Or do we prefer a more structured format (like JSON) which would allow us to pass richer configuration objects rather than just scalar values (strings, numbers, bools)? I'm inclined to think the latter, so that we could configure things like printOptions
for Recast with:
{
'cpus': 2,
'v': true,
'printOptions': {'quote': 'single'}
}
I'm trying to create a transformer that will go from:
React.createElement(Foo, null);
React.createElement(Foo, { bar: "baz", onClick: this.divClicked });
React.createElement(
Foo,
{ bar: "baz", onClick: this.divClicked },
React.createElement("div", { foo: "bar" })
);
to
<Foo></Foo>;
<Foo bar="baz" onClick={this.divClicked}></Foo>;
<Foo bar="baz" onClick={this.divClicked}>
<div foo="bar">
</div>
</Foo>
I've gotten the first two examples, but I'm confused on recursively handling the children.
My interactive codemod is here: http://felix-kling.de/esprima_ast_explorer/#/hb6iLO9hTe/4
If I change convertNodeToJSX
to:
function convertNodeToJSX(node) {
if (!node) {
return;
}
console.log(node);
// other code
const children = convertNodeToJSX(args[2]);
then I get printed out
NodePath {value: Object, parentPath: NodePath, name: "expression", __childCache: Object}
NodePath {value: Object, parentPath: NodePath, name: "expression", __childCache: Object}
NodePath {value: Object, parentPath: NodePath, name: "expression", __childCache: Object}
Object {type: "CallExpression", start: 175, end: 217, loc: i, callee: Objectβ¦}
So how can I convert the CallExpression
to a NodePath
? Wrapping the element with j()
gives me:
e {_parent: undefined, __paths: Array[1], _types: Array[5]}
Or perhaps as a higher level question, is this even the right approach?
Was looking into how to add a ClassProperty inside of a ClassDeclaration, specifically a static one containing an ObjectExpression. For this, my builder looks similar to:
.replaceWith(
(p) => j.classBody([
j.classProperty(
j.identifier('propTypes'),
j.objectExpression(propTypes),
null,
true
),
...p.node.body
]));
However, a trailing semicolon is added in the transformation, so instead of:
class Foo {
static foo = {
bar: 'baz'
}
}
The transformation looks like:
class Foo {
static foo = {
bar: 'baz'
};
}
Is there any way to exclude this semicolon after the class property definition?
Relevant workspace: http://astexplorer.net/#/5j2WGLMyTF/1
Here's an example: http://felix-kling.de/esprima_ast_explorer/#/WhIlcdMzwh/1
function foo() {
function bar() {
return 3;
}
}
module.exports = function(file, api) {
var j = api.jscodeshift;
return j(file.source)
.find(j.Literal)
.forEach(function(path) { console.log(path.value) })
.closest(j.FunctionDeclaration, { id: { name: "foo" } })
.forEach(function(path) {
console.log(path.value);
path.value.id.name = 'renamed'; })
.toSource();
};
I'd expect this to work like find does, using the 2nd parameter as a filter. Unfortunately, adding the 2nd parameter causes it to find the ReturnStatement
instead of the top level Foo function
How can I find usages of _.chain(x).y().z()β¦
, like so:
var foo = [];
var x = _.chain(foo)
.map(function () { return x; })
.filter(function () { return x; })
.value();
where I don't know how many methods will be called?
The closest I've come is to finding the MemberExpression
of _.chain
, but I need to find the entire expression that is being assigned to x
. Furthermore, I want to match usages of _.chain
in other contexts, such as CallExpression
s:
foo(_.chain([]).map(x => x));
My goal is to build a list of all the methods being called on _.chain(foo)
, i.e. map
, filter
, value
.
babel
has native transitive dependencies that would be best to avoid, if possible.
/cc @sebmck
Instead of using console.log
, the runner should write to stdout
and stderr
, or maybe to streams passed to it. Either way, the runner shouldn't output anything, but return information about the progress / result to the caller, one way or the other.
The caller (e.g. the jscodeshift binary) can then decide how to deal with this information and also set proper exit codes.
The CLI works great, but it'd be nice to have a friendly API for using jscodeshift within a node script (I'm attempting to use it within yeoman).
Runner.run
works, but there's no callback, stream, or promise returned so you can't tell when it's finished. Maybe that's all that needs to be changed.
β¦or something.
With input
<TAOSchemaDismissableNUX
context={React.findDOMNode(this.refs.taolinks.refs.delete)}>
</TAOSchemaDismissableNUX>
this script
module.exports = function(file, api) {
var j = api.jscodeshift;
console.log(
j(file.source)
.find(j.Identifier, {name: 'React'})
.size()
);
};
prints 2 which seems wrong.
Empty files, or files with no code (empty, or just breakline) will throw errors while transforming...
ERR /javascript/foo.js Transformation error
TypeError: Cannot read property 'line' of null
at Object.exports.fixFaultyLocations (/node_modules/recast/lib/util.js:142:22)
at TreeCopier.TCp.copy (/node_modules/recast/lib/parser.js:98:10)
at TreeCopier.TCp.copy (/node_modules/recast/lib/parser.js:135:30)
at Object.parse (/repo/aura-codemod/node_modules/recast/lib/parser.js:78:34)
at fromSource (/repo/aura-codemod/node_modules/jscodeshift/dist/core.js:72:25)
I suspect that it is jscodeshift the one reading from disk, and just passing the empty content to recast, that's why I'm opening the issue in this repo.
Note: why are those files empty is not important, but should not be an indication of error, at the end of the day, they are valid javascript source.
I'm running into this issue benjamn/recast#171 and would like to pass options to override the quote settings.
If you're onboard, I can gladly issue a PR.
Thoughts?
I'm writing tests for my codemod and want to use the runner programmatically instead of shelling out. I have two fixture files, a before and an after. I want to dry-run the before file, get the output and compare it to my after file.
However, when running the runner programmatically with dry run, I don't believe there is any way to receive the new file. The runner should probably resolve an object that contains information about how long it took to run and the new content.
Hi,
I have been reviewing this awesome project and I think it would be cool if the repo had an examples
directory where novices (like me) could review some possible transformers. So far the only examples I have seen are at http://astexplorer.net/ and https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb. Conceptually, there are not many projects like this so maybe a bunch of examples showing the potential of the transformers would ease the learning curve.
Would you accept PRs with examples or you prefer to leave them outside this repository? If affirmative, which structure would you prefer?
Cheers
Return statements can only be added inside a function but templates are evaluated by babel at the global scope so babel throws on
statement`return;`
Example: http://felix-kling.de/esprima_ast_explorer/#/1lLYuPcGmT
This also happens for break;
statements as well.
@fkling had an idea of always evaluating templates within a function but that could break things like import
that can only be added at the global scope. Not sure what the way forward is here but i find the templating extremely valuable so it would be great to find a solution!
We are discussing different ways to improve finding nodes. For now, we'll attempt to build a simple parse API that will allow us to pass a JS pattern into find and uses the existing pattern matching to match things. Let's see how far we take this.
j.find(pattern`var $ = require('merge');`)
// becomes
j.find(j.VariableDeclaration, {
init: {
type: 'Identifier',
name: undefined
}
});
Alternative approaches would be to use CSS selectors, because they are made to query trees. Another solution would be to extend babylon/acorn but that seems hard to maintain over time.
Scenario:
Result:
/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126
if (!option) this.log.error("Unknown option: " + alias + "." + key, ReferenceError);
^
TypeError: Cannot read property 'error' of undefined
at OptionManager.mergeOptions (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:28)
at OptionManager.addConfig (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/transformation/file/options/option-manager.js:107:10)
at OptionManager.findConfigs (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/transformation/file/options/option-manager.js:168:35)
at OptionManager.init (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:12)
at compile (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/api/register/node.js:117:22)
at normalLoader (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/api/register/node.js:199:14)
at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/jscodeshift/node_modules/babel-core/lib/api/register/node.js:216:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
Temporary fix:
new lines seem to be removed even if i dont change a file, for now i am having to do:
return root.toSource({quote: 'single', trailingComma: true}) + '\n';
Maybe this is an issue with recast
?
Sometimes I want to flatten a collection. For example, I may get a CallExpression's arguments and want to act on each of them. Is this easy/possible now, or could we have a flatMap?
I frequently finding myself wanting to do:
path.remove();
In order to remove a certain path. Right now I've been doing:
j(path).remove();
In order to remove things. I've recently found out that
path.replace();
also removes a path, can we create an alias to path.replace()
at path.remove()
?
Just wanted to say I love this project! Thank you so much to all the contributor's for their work on this.
After getting used to using jscodeshift inside of http://astexplorer.net, one of the problems I ran into when going to use this on my own machine was the absence of support for Babel 6. Was just curious if there were any plans for supporting Babel 6 in the near future, or if any kind of work has been done already on this front.
Parsing and reprinting
// I have a parent
newNode.parent
&& (
(// Or I did but its different than the one I have now.
!originalNode.parent ||
newNode.parent.key !== originalNode.parent.key
)
)
outputs
// I have a parent
newNode.parent
&& (
(// Or I did but its different than the one I have now.
(!originalNode.parent || newNode.parent.key !== originalNode.parent.key)
)
)
which is inconvenient for codemods. Live test: http://felix-kling.de/esprima_ast_explorer/#/NvtYJQH95L.
tba
When transforming the AST, it would be useful to re-use part of the old AST so I don't have to manually reconstruct all nodes nested in the part I'm transforming:
module.exports = function(file, api) {
const j = api.jscodeshift;
const {expression, statement, statements} = j.template;
return j(file.source)
.find(j.Identifier)
.replaceWith(
p => j.memberExpression(j.identifier('foo'), p)
)
.toSource();
};
Is this possible?
If you have
/**
* @providesModule Foo.react
*/
var React = require('React');
and remove the require statement, the docblock is lost. This causes build errors and I had to manually fix up a bunch of files with the last codemod I wrote to restore these.
When I'm searching for all GenericTypeAnnotations
s find does not traverse the generics on a super class that a class extends.
class Foo extends Bar<Baz> {}
It would not find Baz for example, even though it is a GenericTypeAnnotation
.
Here's an example that highlights this, http://felix-kling.de/esprima_ast_explorer/#/odivoefENV/16
@fkling and I have both identified that this is useful.
What should the API be? We could do a filter:
j.find(j.Identifier).filter(j.identifierIsVariable)
or a find:
j.find(j.OurIdentifierType)
not sure about the naming though.
Right before toSource()
I might want to determine if any changes were done in the currently processed file. Is there a way for it?
To know which methods are available, one has to to look at the source code. It would be cool if we could organize the method definitions in such a way that it makes it easy to auto generate documentation from the source.
The motivating use case here is the ability to transform the transform script with a tool like Babel (or other) prior to use.
Just say you're working on a large project where you don't control the build process and so you can't integrate your transform scripts with it.
Or alternatively, say you're wanting to run a transform script that comes from somewhere else (eg. another repo checked out somewhere else on the filesystem), and again you can't transparently pre-build the transform.
Current workaround is to make a simple wrapper that does the transform first.
Question is, is it outside the scope of jscodeshift to make it easy to plug-in some preprocessing step for the transform prior to using it? Possible questions:
jscodeshift
accept a transform script via standard input? (in which case you could do something like babel myTransform.js | jscodeshift ....
)--preprocess
option that allows the user to specify an executable to pre-process the transform before running it?I am regenerating nodes but I would like to retain indentation and comments for those nodes, i.e.
foo
.baz // bob
.bar
If I process this:
j(file.source)
.find(j.MemberExpression)
.replaceWith(
p => j.memberExpression(p.node.object, p.node.property)
)
.toSource()
I get:
foo.baz.bar
As in http://astexplorer.net/#/RKmXYV9kFT/1
Is there a way to retain indentation and comments? Keeping in mind that sometimes I might need to rename things.
For example I would like to traverse the AST and be able to tell that the second call to undeclaredCall
is on an undefined variable. Right now I iterate over the entire tree and would see that undeclaredCall
is defined within a functions' parameters and treat it as "declared" throughout the entire file.
function foo(undeclaredCall) {
undeclaredCall();
}
undeclaredCall();
If I'm able to traverse the AST via a DFS with hooks when I enter and exit different scopes, then I can remove undeclaredCall
from the list of declared variables when I leave the scope of foo
.
E.g.
let foo = 'x';
expression `${foo} * y`
would be equivalent to
let foo = 'x';
expression `${j.identifier(foo)} * y`
i.e. produce the AST for
x * y
Hi,
I think there might be something not working well, maybe in jscodeshift or in recast, but not completely sure yet. The case is when you try to replace a node A which is contained in another B. B has already been replaced. It uses strings as replacements in A and B. This is the example (this transformer is intended to add a trailing comma at the end of every property in object expressions): http://astexplorer.net/#/fU8E4pJxdx/4
The expected value would be:
var x = {
b: function(){
var z = {
b: 3,
c: 1,
};
},
d: 2,
};
var y = {
i: 2,
};
But as you can see, c: 1
does not contain a comma at the end in the example. I have tried it locally and the same happens. Doing some logging, the transformer passes through the replaceWith
function related with the
{
b: 3,
c: 1
}
after the replacement of the container ObjectExpression, and everything seems to be working fine, so it should be replacing it but the final result does not contain it. Any ideas? Am I missing something?
Say I have this code:
@Radium
export default class Button extends React.Component {
render() {}
}
Now, when I'm trying to add another decorator the to list, like so:
return j(file.source)
.find(j.ExportDefaultDeclaration)
.filter(p => (decl = p.value.declaration).type === 'ClassDeclaration'
&& decl.superClass.object.name === 'React' && decl.superClass.property.name === 'Component')
.replaceWith(p => {
const classDecl = p.value.declaration;
classDecl.decorators.push(j.decorator(j.identifier('injectStyle')))
return p.node;
})
.toSource();
the output code is being mangled, and the decorators are inserted AFTER the export default
bit. Also, the original decorator is still maintained...
@Radium
export default @Radium
@injectStyle
class Button extends React.Component {
render() {}
}
After running this transform jscodeshift ate up all my class decorators e.g.:
@connect(data => getDataProps(data))
class Screen extends React.Component {
}
became
class Screen extends React.Component {
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.