Grasp: Structural Search and Replace for JavaScript | Hacker News Reader

Grasp: Structural Search and Replace for JavaScript

graspjs.com

60 pointsjashkenas12 comments

Open articleView on HN

Fun facts:

Grasp is by the author of LiveScript[1].

This was submitted by the author of CoffeeScript[2]

[1] https://github.com/gkz/LiveScript

[2] https://github.com/jashkenas/CoffeeScript

I plan to add support for both LiveScript and CoffeeScript to grasp in the future.

PS. If anyone has any questions about grasp please let me know!

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...

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...

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

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/)

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?

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)

This is really amazing. I'll try t out on our codebase first thing on Monday.

I've asked on GH, but I guess I can repeat the question here: any plans to create a SublimeText plugin for this?

Great job!

Looks like someone has started one: https://github.com/joneshf/sublime-grasp

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

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.

Reply on news.ycombinator.com