What is ESTree?

In this article, we review what is ESTree. We will look at:

1. @types/estree package 

2. ESTree dev dependency in Ripple

3. ESTree usage in Ripple

I found references to ESTree in Ripple codebase.

@types/estree package 

This package contains type definitions for estree. Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree.

ESTree is a specification that defines the standard structure (format) for representing JavaScript code as an Abstract Syntax Tree (AST).

Below is a comment picked from DefinitelyTyped/types/estree/index.d.ts.

// This definition file follows a somewhat unusual format. ESTree allows
// runtime type checks based on the `type` parameter. In order to explain this
// to typescript we want to use discriminated union types:
// https://github.com/Microsoft/TypeScript/pull/9163
//
// For ESTree this is a bit tricky because the high level interfaces like
// Node or Function are pulling double duty. We want to pass common fields down
// to the interfaces that extend them (like Identifier or
// ArrowFunctionExpression), but you can't extend a type union or enforce
// common fields on them. So we've split the high level interfaces into two
// types, a base type which passes down inherited fields, and a type union of
// all types which extend the base type. Only the type union is exported, and
// the union is how other types refer to the collection of inheriting types.
//
// This makes the definitions file here somewhat more difficult to maintain,
// but it has the notable advantage of making ESTree much easier to use as
// an end user.

When JavaScript code is parsed by tools like Babel, ESLint, or TypeScript, it’s converted into an AST, which is a tree-like representation of the code’s syntax. Different tools initially had different AST formats, so ESTree was created to provide a consistent structure for interoperability.

ESTree dev dependency in Ripple

I found @types/estree in devDepencies in package.json:

ESTree usage in Ripple

ESTree is used in a lot of places in Ripple codebase.

Below is one reference picked from ripple/utils/ast.js.

/**
 * @param {ESTree.AssignmentOperator} operator
 * @param {ESTree.Identifier | ESTree.MemberExpression} left
 * @param {ESTree.Expression} right
 */
export function build_assignment_value(operator, left, right) {
 return operator === '='
  ? right
  : // turn something like x += 1 into x = x + 1
   b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
}

Here ESTree is used indicate type of parameters used in functions.

Below is another reference picked from ripple/utils/builders.js.

/** @type {ESTree.DebuggerStatement} */
const debugger_builder = {
 type: 'DebuggerStatement'
};

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/estree/estree

2. https://github.com/ramu-narasinga/ripple/blob/main/packages/ripple/src/utils/builders.js

3. https://github.com/ramu-narasinga/ripple/blob/main/packages/ripple/src/utils/ast.js

4. https://www.npmjs.com/package/@types/estree

5. https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/estree