tree-sitter-javascript icon indicating copy to clipboard operation
tree-sitter-javascript copied to clipboard

Unable to query jsx comments

Open numToStr opened this issue 3 years ago • 0 comments

I am trying to query all the comments inside the jsx using (jsx_expression (comment)+) query but the Query class is unable to parse the same and throws this error

const query = new Parser.Query(Js, `(jsx_expression (comment) @_comments)`);
              ^

Error: Query error of type TSQueryErrorStructure at position 16
    at Object.<anonymous> (/home/hello/Documents/code/medevice/yo.js:8:15)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
const Yoo = () => {
  return (
    <div>
      <section>
        {/* <p>hello</p> */}
      </section>
    </div>
  );
};

Here's a link to the TypeScript Playground showing that the snippet above is valid JavaScript or TypeScript:

The output of tree-sitter parse is the following:

This is the output of the treesitter playground

program [0, 0] - [9, 0]
  lexical_declaration [0, 0] - [8, 2]
    variable_declarator [0, 6] - [8, 1]
      name: identifier [0, 6] - [0, 9]
      value: arrow_function [0, 12] - [8, 1]
        parameters: formal_parameters [0, 12] - [0, 14]
        body: statement_block [0, 18] - [8, 1]
          return_statement [1, 2] - [7, 4]
            parenthesized_expression [1, 9] - [7, 3]
              jsx_element [2, 4] - [6, 10]
                open_tag: jsx_opening_element [2, 4] - [2, 9]
                  name: identifier [2, 5] - [2, 8]
                jsx_text [2, 9] - [3, 6]
                jsx_element [3, 6] - [5, 16]
                  open_tag: jsx_opening_element [3, 6] - [3, 15]
                    name: identifier [3, 7] - [3, 14]
                  jsx_text [3, 15] - [4, 8]
                  jsx_expression [4, 8] - [4, 28]
                    comment [4, 9] - [4, 27]
                  jsx_text [4, 28] - [5, 6]
                  close_tag: jsx_closing_element [5, 6] - [5, 16]
                    name: identifier [5, 8] - [5, 15]
                jsx_text [5, 16] - [6, 4]
                close_tag: jsx_closing_element [6, 4] - [6, 10]
                  name: identifier [6, 6] - [6, 9]

Sample

const Parser = require("tree-sitter");
const Js = require("tree-sitter-javascript");

const parser = new Parser();

parser.setLanguage(Js);

const query = new Parser.Query(Js, `(jsx_expression (comment)+ @_comment)`);

const tree = parser.parse(`
const Yoo = () => {
  return (
    <div>
      <section>
        {/* <p>hello</p> */}
      </section>
    </div>
  );
};
`);

for (const match of query.matches(tree.rootNode)) {
    console.log("------------");
    match.captures.forEach((x) => {
        console.log(x);
    });
    console.log("------------");
}

Version

"tree-sitter": "^0.20.0",
"tree-sitter-javascript": "^0.19.0",

numToStr avatar Apr 04 '22 13:04 numToStr