Demo: support for different parsers?

[pierpo]

Hi,

I just encountered your very useful demo. Quite handy if you want to test your ESQuery queries interactively.
It works perfectly with Javascript.

However, I work with Typescript now and I'd still like to add custom ESLint rules easily.
I parse my tree using ASTExplorer https://astexplorer.net/ using different parsers, but I can't test my queries directly using the ESQuery demo.

Is there a way we can have this?

A quick win might be to be able to copy a syntax tree directly instead of code 😉

[brettz9]

I personally really like this idea. However, I think it might be better to get esquery filtering supported in ASTExplorer itself, as that already has robust options and display (I mentioned this in an offhand comment at fkling/astexplorer#483 already, but deserves its own issue I think).

[pierpo]

Seems relevant 😊
Thank you for your answer.

Actually, it turns out you can directly test on ASTExplorer an ESLint rule!
If you click on "Transform" above then ESLint you'll see the code for your rule and you can put your ESQuery there.

So, problem solved and nothing needs to be done 😊

Thank you!

[karlhorky]

Thanks for the tip @pierpo ! Although I couldn't copy out of the screenshot so easily 😬

Here's a new snippet based off of the technique in the screenshot for anyone else who wants to copy + paste into AST explorer:

export default function (context) {
  return {
    "JSXElement[openingElement.name.name='p'] > JSXElement[openingElement.name.name=/^span$/]": (
      node
    ) => {
      context.report({
        node,
        message: "Found"
      });
    }
  };
}

On AST explorer: https://astexplorer.net/#/gist/4699a2ceadc890386cbd0727734c3ca5/c9250ace00e2686b4d95879dff67341ce35d9018

[brettz9]

I should note that if that is ESLint v 4, then it is a different and I believe forked version of esquery, even while it may remain mostly the same.