Skip to content

Latest commit

 

History

History
177 lines (136 loc) · 4.03 KB

AST.md

File metadata and controls

177 lines (136 loc) · 4.03 KB
Raw

JSX extensions to Mozilla AST Format

JSX extends ECMAScript ESTree AST format with the following node types:

JSX Names

JSX Identifier subtype

interface JSXIdentifier <: Identifier {
    type: "JSXIdentifier";
}

Namespaced names

Property-like namespace syntax (tag names only):

interface JSXMemberExpression <: Expression {
    type: "JSXMemberExpression";
    object: JSXMemberExpression | JSXIdentifier;
    property: JSXIdentifier;
}

XML-based namespace syntax:

interface JSXNamespacedName <: Expression {
    type: "JSXNamespacedName";
    namespace: JSXIdentifier;
    name: JSXIdentifier;
}

JSX Expression Container

JSX adds empty "expression" type in order to allow comments in JSX text:

interface JSXEmptyExpression <: Node {
    type: "JSXEmptyExpression";
}

Any expression used as attribute value or inside JSX text should is wrapped into expression container:

interface JSXExpressionContainer <: Node {
    type: "JSXExpressionContainer";
    expression: Expression | JSXEmptyExpression;
}

A JSX element uses a special form of an expression container for an iterator child who should be “spread out” inside an element’s children list:

interface JSXSpreadChild <: Node {
    type: "JSXSpreadChild";
    expression: Expression;
}

JSX Boundary Tags

Any JSX element is bounded by tags — either self-closing or both opening and closing elements:

interface JSXBoundaryElement <: Node {
    name: JSXIdentifier | JSXMemberExpression | JSXNamespacedName;
}

interface JSXOpeningElement <: JSXBoundaryElement {
    type: "JSXOpeningElement";
    attributes: [ JSXAttribute | JSXSpreadAttribute ];
    selfClosing: boolean;
}

interface JSXClosingElement <: JSXBoundaryElement {
    type: "JSXClosingElement";
}

JSX Attributes

Opening element ("tag") may contain attributes:

interface JSXAttribute <: Node {
    type: "JSXAttribute";
    name: JSXIdentifier | JSXNamespacedName;
    value: Literal | JSXExpressionContainer | JSXElement | JSXFragment | null;
}

interface JSXSpreadAttribute <: SpreadElement {
    type: "JSXSpreadAttribute";
}

JSX Text

JSX Text node stores a string literal found in JSX element children.

interface JSXText <: Node {
  type: "JSXText";
  value: string;
  raw: string;
}

JSX Element

JSX element consists of opening element, list of children and optional closing element:

interface JSXElement <: Expression {
    type: "JSXElement";
    openingElement: JSXOpeningElement;
    children: [ JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment ];
    closingElement: JSXClosingElement | null;
}

JSX Fragment

JSX fragment consists of an opening fragment, list of children, and closing fragment:

interface JSXFragment <: Expression {
    type: "JSXFragment";
    openingFragment: JSXOpeningFragment;
    children: [ JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment ];
    closingFragment: JSXClosingFragment;
}
interface JSXOpeningFragment <: Node {
    type: "JSXOpeningFragment";
}
interface JSXClosingFragment <: Node {
    type: "JSXClosingFragment";
}

Tools that work with JSX AST

License

Copyright (c) 2014 - present, Facebook, Inc. All rights reserved.

This work is licensed under a Creative Commons Attribution 4.0 International License.