unified

Project: syntax-tree/mdast-util-mdx-expression

Package: mdast-util-mdx-expression@1.1.0

  1. Dependents: 2
  2. mdast extension to parse and serialize MDX (or MDX.js) expressions
  1. util 143
  2. utility 139
  3. markdown 131
  4. unist 127
  5. mdast 85
  6. mdast-util 30
  7. mdx 26
  8. markup 18
  9. extension 9
  10. mdxjs 8
  11. expression 7

mdast-util-mdx-expression

Build Coverage Downloads Size Sponsors Backers Chat

Extension for mdast-util-from-markdown and/or mdast-util-to-markdown to support MDX (or MDX.js) expressions. When parsing (from-markdown), must be combined with micromark-extension-mdx-expression.

This utility handles parsing and serializing. See micromark-extension-mdx-expression for how the syntax works.

When to use this

Use mdast-util-mdx if you want all of MDX / MDX.js. Use this otherwise.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install mdast-util-mdx-expression

Use

Say we have an MDX.js file, example.mdx:

{
  a + 1
}

b {true}.

And our module, example.js, looks as follows:

import fs from 'node:fs'
import * as acorn from 'acorn'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {mdxExpression} from 'micromark-extension-mdx-expression'
import {mdxExpressionFromMarkdown, mdxExpressionToMarkdown} from 'mdast-util-mdx-expression'

var doc = fs.readFileSync('example.mdx')

var tree = fromMarkdown(doc, {
  extensions: [mdxExpression({acorn, addResult: true})],
  mdastExtensions: [mdxExpressionFromMarkdown]
})

console.log(tree)

var out = toMarkdown(tree, {extensions: [mdxExpressionToMarkdown]})

console.log(out)

Now, running node example yields (positional info removed for brevity):

{
  type: 'root',
  children: [
    {
      type: 'mdxFlowExpression',
      value: '\na + 1\n',
      data: {
        estree: {
          type: 'Program',
          body: [
            {
              type: 'ExpressionStatement',
              expression: {
                type: 'BinaryExpression',
                left: {type: 'Identifier', name: 'a'},
                operator: '+',
                right: {type: 'Literal', value: 1, raw: '1'}
              }
            }
          ],
          sourceType: 'module'
        }
      }
    },
    {
      type: 'paragraph',
      children: [
        {type: 'text', value: 'b '},
        {
          type: 'mdxTextExpression',
          value: 'true',
          data: {
            estree: {
              type: 'Program',
              body: [
                {
                  type: 'ExpressionStatement',
                  expression: {type: 'Literal', value: true, raw: 'true'}
                }
              ],
              sourceType: 'module'
            }
          }
        },
        {type: 'text', value: '.'}
      ]
    }
  ]
}
{
  a + 1
}

b {true}.

API

mdxExpressionFromMarkdown

mdxExpressionToMarkdown

Support MDX (or MDX.js) expressions. The exports are extensions, respectively for mdast-util-from-markdown and mdast-util-to-markdown.

When using the syntax extension with addResult, nodes will have a data.estree field set to an ESTree.

The indent of the value of MDXFlowExpressions is stripped.

Syntax tree

The following interfaces are added to mdast by this utility.

Nodes

MDXFlowExpression

interface MDXFlowExpression <: Literal {
  type: "mdxFlowExpression"
}

MDXFlowExpression (Literal) represents a JavaScript expression embedded in flow (block). It can be used where flow content is expected. Its content is represented by its value field.

For example, the following markdown:

{
  1 + 1
}

Yields:

{type: 'mdxFlowExpression', value: '\n1 + 1\n'}

MDXTextExpression

interface MDXTextExpression <: Literal {
  type: "mdxTextExpression"
}

MDXTextExpression (Literal) represents a JavaScript expression embedded in text (span, inline). It can be used where phrasing content is expected. Its content is represented by its value field.

For example, the following markdown:

a {1 + 1} b.

Yields:

{type: 'mdxTextExpression', value: '1 + 1'}

Content model

FlowContent (MDX expression)

type FlowContentMdxExpression = MDXFlowExpression | FlowContent

PhrasingContent (MDX expression)

type PhrasingContentMdxExpression = MDXTextExpression | PhrasingContent

Contribute

See contributing.md in syntax-tree/.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.

License

MIT © Titus Wormer