Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time

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.