Project: micromark/micromark-extension-mdx-jsx

Package: micromark-extension-mdx-jsx@0.3.3

  1. Dependencies: 4·Dependents: 2
  2. micromark extension to support MDX or MDX.js JSX
  1. unified 169
  2. markdown 142
  3. mdx 29
  4. jsx 17
  5. javascript 17
  6. micromark 16
  7. micromark-extension 16
  8. mdxjs 8
  9. ecmascript 7
  10. js 5
  11. es 3


Build Coverage Downloads Size Sponsors Backers Chat

micromark extension to support MDX (or MDX.js) JSX.

This package provides the low-level modules for integrating with the micromark tokenizer but has no handling of compiling to HTML: go to a syntax tree instead.

You should use this with mdast-util-mdx-jsx (mdast). Alternatively, use either micromark-extension-mdx or micromark-extension-mdxjs with mdast-util-mdx to support all of MDX (or MDX.js). Or, use it through remark-mdx (remark).



npm install micromark-extension-mdx-jsx


See mdast-util-mdx-jsx for an example.



Support MDX (or MDX.js) JSX.

The export of syntax is a function that can be called with options and returns an extension for the micromark parser (to tokenize JSX; can be passed in extensions).


Acorn parser to use (Acorn, optional).


Options to pass to acorn (Object, default: {ecmaVersion: 2020, sourceType: 'module'}). All fields can be set. Positional info (loc, range) is set on ES nodes regardless of acorn options.


Whether to add an estree field to the mdxTextJsx and mdxFlowJsx tokens with the results from acorn (boolean, default: false).


This extensions support both MDX and MDX.js. The first is agnostic to the programming language (it could contain attribute expressions and attribute value expressions with Rust or so), the last is specific to JavaScript (in which case attribute expressions must be spread expressions). To turn on gnostic mode, pass acorn.

The syntax of JSX supported here is described in W3C Backus–Naur form with the following additions:

  1. A - B — matches any string that matches A but does not match B.
  2. 'string' — same as "string" but with single quotes.
  3. BREAK — lookahead match for a block break opportunity (either EOF (end of file), U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), or another JSX tag)

The syntax is defined as follows, however, do note that interleaving (mixing) of markdown and MDX is defined elsewhere, and that the constraints are imposed in mdast-util-mdx-jsx.

; Entries
mdxFlow ::= *spaceOrTab element *spaceOrTab BREAK
mdxText ::= element

element ::= selfClosing | closed
selfClosing ::=
  ; constraint: tag MUST be named, MUST NOT be closing, and MUST be self-closing
closed ::=
  ; constraint: tag MUST NOT be closing and MUST NOT be self-closing
  ; constraint: tag MUST be closing, MUST NOT be self-closing, MUST NOT have
  ; attributes, and either both tags MUST have the same name or both tags MUST
  ; be nameless

data ::= element | text

; constraint: markdown whitespace (spaceOrTab | '\r' | '\n') is NOT
; allowed directly after `<` in order to allow `1 < 3` in markdown.
tag ::=
  '<' *1closing
  *1(*whitespace name *1attributesAfterIdentifier *1closing)
  *whitespace '>'

attributesAfterIdentifier ::=
  1*whitespace (attributesBoolean | attributesValue) |
  *whitespace attributesExpression |
attributesAfterValue ::=
  *whitespace (attributesBoolean | attributesExpression | attributesValue)
attributesBoolean ::= key *1attributesAfterIdentifier
; Note: in gnostic mode the value of the expression must instead be a single valid ES spread
; expression
attributesExpression ::= expression *1attributesAfterValue
attributesValue ::= key initializer *1attributesAfterValue

closing ::= *whitespace '/'

name ::= identifier *1(local | members)
key ::= identifier *1local
local ::= *whitespace ':' *whitespace identifier
members ::= member *member
member ::= *whitespace '.' *whitespace identifier

identifier ::= identifierStart *identifierPart
initializer ::= *whitespace '=' *whitespace value
value ::= doubleQuoted | singleQuoted | expression
; Note: in gnostic mode the value must instead be a single valid ES expression
expression ::= '{' *(expressionText | expression) '}'

doubleQuoted ::= '"' *doubleQuotedText '"'
singleQuoted ::= "'" *singleQuotedText "'"

spaceOrTab ::= ' ' | '\t'
text ::= character - '<' - '{'
whitespace ::= esWhitespace
doubleQuotedText ::= character - '"'
singleQuotedText ::= character - "'"
expressionText ::= character - '{' - '}'
identifierStart ::= esIdentifierStart
identifierPart ::= esIdentifierPart | '-'

; Unicode
; Any unicode code point
character ::=

; ECMAScript
; See “IdentifierStart”: <https://tc39.es/ecma262/#prod-IdentifierStart>
esIdentifierStart ::=
; See “IdentifierPart”: <https://tc39.es/ecma262/#prod-IdentifierPart>
esIdentifierPart ::=
; See “Whitespace”: <https://tc39.es/ecma262/#prod-WhiteSpace>
esWhitespace ::=


In gnostic mode, expressions are parsed with micromark-extension-mdx-expression, which also throws certain errors.

Unexpected end of file $at, expected $expect

This error occurs for many different reasons if something was opened but not closed (source: micromark-extension-mdx-jsx, rule id: unexpected-eof).

Some examples are:

<a b
<a b:
<a b=
<a b="
<a b='
<a b={

Unexpected character $at, expected $expect

This error occurs for many different reasons if an unexpected character is seen (source: micromark-extension-mdx-jsx, rule id: unexpected-character).

Some examples are:

<a b!>
<a b:1>
<a b=>


Many tokens are used:


See contributing.md in micromark/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.


MIT © Titus Wormer