Permalink
Switch branches/tags
Nothing to show
Find file Copy path
178 lines (136 sloc) 4.03 KB

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.