mdast-util-mdxjs-esm
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    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-mdxjs-esm

    DownloadsWeekly Downloads

    223,572

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    13.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar