unified

Project: syntax-tree/mdast-util-mdxjs-esm

Package: mdast-util-mdxjs-esm@1.1.1

  1. Dependents: 2
  2. mdast extension to parse and serialize MDX.js ESM (import/exports)
  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. export 4
  12. esm 3
  13. import 2

mdast-util-mdxjs-esm

Build Coverage Downloads Size Sponsors Backers Chat

Extension for mdast-util-from-markdown and/or mdast-util-to-markdown to support MDX.js ESM import/exports. When parsing (from-markdown), must be combined with micromark-extension-mdxjs-esm.

This utility handles parsing and serializing. See micromark-extension-mdxjs-esm 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-mdxjs-esm

Use

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

import a from 'b'
export var c = ''

d

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

import fs from 'fs'
import * as acorn from 'acorn'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {mdxjsEsm} from 'micromark-extension-mdxjs-esm'
import {mdxjsEsmFromMarkdown, mdxjsEsmToMarkdown} from 'mdast-util-mdxjs-esm'

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

const tree = fromMarkdown(doc, {
  extensions: [mdxjsEsm({acorn, addResult: true})],
  mdastExtensions: [mdxjsEsmFromMarkdown]
})

console.log(tree)

const out = toMarkdown(tree, {extensions: [mdxjsEsmToMarkdown]})

console.log(out)

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

{
  type: 'root',
  children: [
    {
      type: 'mdxjsEsm',
      value: "import a from 'b'\nexport var c = ''",
      data: {
        estree: {
          type: 'Program',
          body: [
            {
              type: 'ImportDeclaration',
              specifiers: [
                {
                  type: 'ImportDefaultSpecifier',
                  local: {type: 'Identifier', name: 'a'}
                }
              ],
              source: {type: 'Literal', value: 'b', raw: "'b'"}
            },
            {
              type: 'ExportNamedDeclaration',
              declaration: {
                type: 'VariableDeclaration',
                declarations: [
                  {
                    type: 'VariableDeclarator',
                    id: {type: 'Identifier', name: 'c'},
                    init: {type: 'Literal', value: '', raw: "''"}
                  }
                ],
                kind: 'var'
              },
              specifiers: [],
              source: null
            }
          ],
          sourceType: 'module'
        }
      }
    },
    {type: 'paragraph', children: [{type: 'text', value: 'd'}]}
  ]
}
import a from 'b'
export var c = ''

d

API

This package exports the following identifier: mdxjsEsmFromMarkdown, mdxjsEsmToMarkdown. There is no default export.

mdxjsEsmFromMarkdown

mdxjsEsmToMarkdown

Support MDX.js ESM import/exports. 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

Syntax tree

The following interfaces are added to mdast by this utility.

Nodes

MDXJSEsm

interface MDXJSEsm <: Literal {
  type: "mdxjsEsm"
}

MDXJSEsm (Literal) represents ESM import/exports embedded in MDX. It can be used where flow content is expected. Its content is represented by its value field.

For example, the following Markdown:

import a from 'b'

Yields:

{
  type: 'mdxjsEsm',
  value: 'import a from \'b\''
}

Content model

FlowContent (MDX.js ESM)

type FlowContentMdxjsEsm = MDXJSEsm | FlowContent

Note that when ESM is present, it can only exist as top-level content: if it has a parent, that parent must be Root.

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