Show JSON path

[zmorris]

Hi AST Explorer is fantastic but trying to keep all the nodes straight in my head is darn near impossible. Could you add a status field somewhere that shows the JSON path to the currently selected element, something like http://jsonpathfinder.com/ ?

Also it would be really fantastic to be able to enter a JSON path and have it select/highlight that node. I realize this is a little complex though so just showing the path would provide most of the functionality I need.

Oh and as far as JSON path string standards on this go, JSONPath.stringify() works ok. Otherwise you could just show the path in bracket form ['some']['path']['here'] and use JSON.stringify() to quote each node's name for display between the brackets.

Thanks for your hard work so far!

[fkling]

Good idea 😃

[0xdevalias]

I'd also be interested in being able to see/copy an esquery style path/selector, which could be very cool/useful:

• https://github.com/estools/esquery

  • ESQuery is a library for querying the AST output by Esprima for patterns of syntax using a CSS style selector system.

  • Demo: https://estools.github.io/esquery/

I believer eslint also uses esquery for it's selectors, which are documented here:

• https://eslint.org/docs/latest/extend/selectors

  • A selector is a string that can be used to match nodes in an Abstract Syntax Tree (AST).
    This is useful for describing a particular syntax pattern in your code.

    The syntax for AST selectors is similar to the syntax for CSS selectors. If you’ve used CSS selectors before, the syntax for AST selectors should be easy to understand.

Also potentially tangentially related:

• https://tree-sitter.github.io/tree-sitter/code-navigation-systems
  • https://tree-sitter.github.io/tree-sitter/using-parsers#pattern-matching-with-queries