4 ms·

Grasp: Structural Search and Replace for JavaScript

60 points by jashkenas 13y ago

feistyio 13y ago
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 https://github.com/gkz/LiveScript [2] https://github.com/jashkenas/CoffeeScript https://github.com/jashkenas/CoffeeScript
- GeZe 13y ago
  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!
CWIZO 13y ago
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!
- GeZe 13y ago
  Looks like someone has started one: https://github.com/joneshf/sublime-grasp https://github.com/joneshf/sublime-grasp
gfodor 13y ago
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 13y 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.js#L201 https://github.com/gkz/grasp/blob/gh-pages/assets/js/command...
- jashkenas 13y 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/command.ls#L136-L146 https://github.com/gkz/grasp/blob/gh-pages/assets/_ls/comman...
CGamesPlay 13y 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 https://github.com/facebook/jsgrep
- monjaro 13y 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?
  - CGamesPlay 13y 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)
- GeZe 13y 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/ http://graspjs.com/docs/squery/) and equery (http://graspjs.com/docs/equery/ http://graspjs.com/docs/equery/)
roryokane 13y ago
Another structural-editing tool is ydiff (http://yinwang0.wordpress.com/2012/01/03/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 http://www.yinwang.org/resources/nav1-nav2.html

60 points by jashkenas 13y ago

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 https://github.com/gkz/LiveScript [2] https://github.com/jashkenas/CoffeeScript https://github.com/jashkenas/CoffeeScript

GeZe 13y ago
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!

CWIZO 13y ago

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!

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

gfodor 13y ago

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 13y 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.js#L201 https://github.com/gkz/grasp/blob/gh-pages/assets/js/command...

jashkenas 13y 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/command.ls#L136-L146 https://github.com/gkz/grasp/blob/gh-pages/assets/_ls/comman...

CGamesPlay 13y 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 https://github.com/facebook/jsgrep

monjaro 13y 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?
- CGamesPlay 13y 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)
GeZe 13y 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/ http://graspjs.com/docs/squery/) and equery (http://graspjs.com/docs/equery/ http://graspjs.com/docs/equery/)

roryokane 13y ago

Another structural-editing tool is ydiff (http://yinwang0.wordpress.com/2012/01/03/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 http://www.yinwang.org/resources/nav1-nav2.html