Nightly Procrastination Machine

    mdast-util-mdx-expression
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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

    Related

    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

    Install

    npm i mdast-util-mdx-expression

    DownloadsWeekly Downloads

    224,463

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    15.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar