@phenomnomnominal/tsquery

What is @phenomnomnominal/tsquery?

The @phenomnomnominal/tsquery package is a powerful tool for querying TypeScript AST (Abstract Syntax Tree) using a CSS-like selector system. It allows developers to easily find nodes within TypeScript source code, making it useful for tasks such as code analysis, refactoring, and more.

What are @phenomnomnominal/tsquery's main functionalities?

Querying TypeScript AST

This feature allows you to query TypeScript AST nodes by using CSS-like selectors. In the provided code, `tsquery.ast` generates an AST from the source code, and `tsquery` function is used to find all identifiers named 'foo'.

import { tsquery } from '@phenomnomnominal/tsquery';
const ast = tsquery.ast(sourceCode);
const nodes = tsquery(ast, 'Identifier[name="foo"]');

Counting specific nodes

This feature is useful for analyzing the code to count specific types of statements or nodes. Here, the code counts how many 'IfStatement' nodes are in the provided source code.

import { tsquery } from '@phenomnomnominal/tsquery';
const ast = tsquery.ast(sourceCode);
const count = tsquery(ast, 'IfStatement').length;

Other packages similar to @phenomnomnominal/tsquery

typescript-eslint

typescript-eslint is a plugin that allows for linting TypeScript code with ESLint. It uses an AST to analyze the code, similar to tsquery, but is more focused on linting and enforcing coding standards rather than general querying.

ts-morph

ts-morph provides an easier API to work with the TypeScript compiler's AST. It offers functionalities similar to tsquery but with additional features like code manipulation and emitting, making it more versatile for tasks that involve modifying the codebase.

README

TSQuery

TSQuery is a port of the ESQuery API for TypeScript! TSQuery allows you to query a TypeScript AST for patterns of syntax using a CSS style selector system.

Demos:

ESQuery demo - note that the demo requires JavaScript code, not TypeScript TSQuery demo by Uri Shaked

Installation

npm install @phenomnomnominal/tsquery --save-dev

Examples

Say we want to select all instances of an identifier with name "Animal", e.g. the identifier in the class declaration, and the identifier in the extends declaration.

We would do something like the following:

import { ast, query } from '@phenomnomnominal/tsquery';

const typescript = `

class Animal {
    constructor(public name: string) { }
    move(distanceInMeters: number = 0) {
        console.log(\`\${this.name} moved \${distanceInMeters}m.\`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

`;

const ast = ast(typescript);
const nodes = query(ast, 'Identifier[name="Animal"]');
console.log(nodes.length); // 2

Selectors

The following selectors are supported:

• AST node type: ForStatement (see common node types)
• wildcard: *
• attribute existence: [attr]
• attribute value: [attr="foo"] or [attr=123]
• attribute regex: [attr=/foo.*/]
• attribute conditions: [attr!="foo"], [attr>2], [attr<3], [attr>=2], or [attr<=3]
• nested attribute: [attr.level2="foo"]
• field: FunctionDeclaration > Identifier.id
• First or last child: :first-child or :last-child
• nth-child (no ax+b support): :nth-child(2)
• nth-last-child (no ax+b support): :nth-last-child(1)
• descendant: ancestor descendant
• child: parent > child
• following sibling: node ~ sibling
• adjacent sibling: node + adjacent
• negation: :not(ForStatement)
• matches-any: :matches([attr] > :first-child, :last-child)
• has: IfStatement:has([name="foo"])
• class of AST node: :statement, :expression, :declaration, :function, or :pattern

Common AST node types

• Identifier - any identifier (name of a function, class, variable, etc)
• IfStatement, ForStatement, WhileStatement, DoStatement - control flow
• FunctionDeclaration, ClassDeclaration, ArrowFunction - declarations
• VariableStatement - var, const, let.
• ImportDeclaration - any import statement
• StringLiteral - any string
• TrueKeyword, FalseKeyword, NullKeyword, AnyKeyword - various keywords
• CallExpression - function call
• NumericLiteral - any numeric constant
• NoSubstitutionTemplateLiteral, TemplateExpression - template strings and expressions

API:

ast:

Parse a string of code into an Abstract Syntax Tree which can then be queried with TSQuery Selectors.

import { ast } from '@phenomnomnominal/tsquery';

const sourceFile = ast('const x = 1;');

includes:

Check for Nodes within a given string of code or AST Node matching a Selector.

import { includes } from '@phenomnomnominal/tsquery';

const hasIdentifier = includes('const x = 1;', 'Identifier');

map:

Transform AST Nodes within a given Node matching a Selector. Can be used to do Node-based replacement or removal of parts of the input AST.

import { factory } from 'typescript';
import { map } from '@phenomnomnominal/tsquery';

const tree = ast('const x = 1;')
const updatedTree = map(tree, 'Identifier', () => factory.createIdentifier('y'));

match:

Find AST Nodes within a given AST Node matching a Selector.

import { ast, match } from '@phenomnomnominal/tsquery';

const tree = ast('const x = 1;')
const [xNode] = match(tree, 'Identifier');

parse:

Parse a string into an ESQuery Selector.

import { parse } from '@phenomnomnominal/tsquery';

const selector = parse(':matches([attr] > :first-child, :last-child)');

print:

Print a given Node or SourceFile to a string, using the default TypeScript printer.

import { print } from '@phenomnomnominal/tsquery';
import { factory } from 'typescript';

  // create synthetic node:
const node = factory.createArrowFunction(
  // ...
);
const code = print(node);

project:

Get all the SourceFiles included in a the TypeScript project described by a given config file.

import { project } from '@phenomnomnominal/tsquery';

const files = project('./tsconfig.json');

files:

Get all the file paths included ina the TypeScript project described by a given config file.

import { files } from '@phenomnomnominal/tsquery';

const filePaths = files('./tsconfig.json');

match:

Find AST Nodes within a given string of code or AST Node matching a Selector.

import {query } from '@phenomnomnominal/tsquery';

const [xNode] = query('const x = 1;', 'Identifier');

replace:

Transform AST Nodes within a given Node matching a Selector. Can be used to do string-based replacement or removal of parts of the input AST. The updated code will be printed with the TypeScript Printer, so you may need to run your own formatter on any output code.

import { replace } from '@phenomnomnominal/tsquery';

const updatedCode = replace('const x = 1;', 'Identifier', () => 'y'));