Grasp: Structural Search and Replace for JavaScript

this is one of those things that makes you wonder why it isn't already a standard tool. my only guess is perhaps the net benefit to something like this isn't high compared to grep. either way, great work.

gunn• 13 years ago

The CLI in the demo is amazing. I had to investigate how I could run 'rm -r' instantly.

The answer is: https://github.com/gkz/grasp/blob/gh-pages/assets/js/command...

jashkenas• 13 years ago

And what's even neater is how the JavaScript you linked to looks fairly normal (and efficient) at first glance...

But the real source lies here: https://github.com/gkz/grasp/blob/gh-pages/assets/_ls/comman...

CGamesPlay2• 13 years ago

I released something similar to this, jsgrep, but the query syntax is actual JS with special variables marking the placeholders. I think the patch syntax makes more intuitive sense in jsgrep; although it is more limited:

  $ cat c.js
  f(x < y, x == z);
  $ grasp bi --replace '{{.r}}+{{.l}}' c.js
  f(y+x, z+x);

In jsgrep, the same substitution could be made by:

  -f(A < B, B == C)
  +f(A + B, B + C)

jsgrep: https://github.com/facebook/jsgrep

monjaro• 13 years ago

jsgrep looks very neat as well. I like the patch syntax. However, I don't think this example is quite equivalent. In the grasp example, it replaces every binary operator, not just that specific call. Could you show how to represent the same thing in jsgrep?

CGamesPlay2• 13 years ago

Not possible in jsgrep without enumerating all of the binary options (I can't think of a good reason for needing to do that though). It's more suited for doing API changes:

  -foo(A, B, true)
  +fooWithOption(A, B)

GeZe3• 13 years ago

Cool project! As monjaro mentions, the two examples are not equivalent however - the grasp example replaces every binary expression (alias: bi) with an addition operation with the right and left hand sides switched. This is a very trivial example, but hints at the great power available.

Grasp has two different query types, the default, squery - selector query, CSS style selectors, and equery (-e, --equery) - example query, JS code examples with wildcards.

In the grasp example above, we are using squery. jsgrep is similar to equery. You could do the following search in equery, and it would be more equivalent to the example you posted:

    f(__ < __, __ == __)

The only thing missing is the named wildcards for easy replace - that's a good idea and a feature to add to grasp 0.2.0!

You can check out the docs on squery (http://graspjs.com/docs/squery/) and equery (http://graspjs.com/docs/equery/)

roryokane• 13 years ago

Another structural-editing tool is ydiff (http://yinwang0.wordpress.com/2012/01/03/ydiff/), which can display structural diffs between JavaScript files. Demo: http://www.yinwang.org/resources/nav1-nav2.html

Grasp: Structural Search and Replace for JavaScript

Related Stories