mdast-util-mdxjs-esm

Extension for mdast-util-from-markdown and/or mdast-util-to-markdown to support ESM import/exports for MDX.js in mdast. 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.

You probably should use micromark-extension-mdxjs with mdast-util-mdxjs (which includes this package) to support all of MDX.js. Or use it all through remark-mdxjs (remark).

Install

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 script, example.js, looks as follows:

var fs = require('fs')
var acorn = require('acorn')
var syntax = require('micromark-extension-mdxjs-esm')
var fromMarkdown = require('mdast-util-from-markdown')
var toMarkdown = require('mdast-util-to-markdown')
var mdxjsEsm = require('mdast-util-mdxjs-esm')

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

var tree = fromMarkdown(doc, {
  extensions: [syntax({acorn: acorn, addResult: true})],
  mdastExtensions: [mdxjsEsm.fromMarkdown]
})

console.log(tree)

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

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',
          start: 0,
          end: 35,
          loc: [SourceLocation],
          body: [Array],
          sourceType: 'module'
        }
      }
    },
    {type: 'paragraph', children: [{type: 'text', value: 'd'}]}
  ]
}

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

d

API

mdxjsEsm.fromMarkdown

mdxjsEsm.toMarkdown

Note: the separate extensions are also available at mdast-util-mdxjs-esm/from-markdown and mdast-util-mdxjs-esm/to-markdown.

Support ESM import/exports in MDX.js. 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 esm 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\''
}

ESMContent

type ESMContent = MDXJSEsm

ESM content represent imported and exported information about the document.

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

FlowContent (MDX.js ESM)

type FlowContentMdxjsEsm = ESMContent | FlowContent

Related

• remarkjs/remark — markdown processor powered by plugins
• remarkjs/remark-mdxjs — remark plugin to support MDX.js
• syntax-tree/mdast-util-from-markdown — mdast parser using micromark to create mdast from markdown
• syntax-tree/mdast-util-to-markdown — mdast serializer to create markdown from mdast
• syntax-tree/mdast-util-mdxjs — mdast utility to support all of MDX.js
• micromark/micromark — the smallest commonmark-compliant markdown parser that exists
• micromark/micromark-extension-mdxjs-esm — micromark extension to parse ESM

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