88[ ![ Backers] [ backers-badge ]] [ collective ]
99[ ![ Chat] [ chat-badge ]] [ chat ]
1010
11- Extension for [ ` mdast-util-from-markdown ` ] [ from-markdown ] and/or
12- [ ` mdast-util-to-markdown ` ] [ to-markdown ] to support MDX (or MDX.js) expressions.
13- When parsing (` from-markdown ` ), must be combined with
14- [ ` micromark-extension-mdx-expression ` ] [ extension ] .
15-
16- This utility handles parsing and serializing.
17- See [ ` micromark-extension-mdx-expression ` ] [ extension ] for how the syntax works.
11+ [ mdast] [ ] extensions to parse and serialize [ MDX] [ ] expressions.
12+
13+ ## Contents
14+
15+ * [ What is this?] ( #what-is-this )
16+ * [ When to use this] ( #when-to-use-this )
17+ * [ Install] ( #install )
18+ * [ Use] ( #use )
19+ * [ API] ( #api )
20+ * [ ` mdxExpressionFromMarkdown ` ] ( #mdxexpressionfrommarkdown )
21+ * [ ` mdxExpressionToMarkdown ` ] ( #mdxexpressiontomarkdown )
22+ * [ Syntax tree] ( #syntax-tree )
23+ * [ Nodes] ( #nodes )
24+ * [ Content model] ( #content-model )
25+ * [ Types] ( #types )
26+ * [ Compatibility] ( #compatibility )
27+ * [ Related] ( #related )
28+ * [ Contribute] ( #contribute )
29+ * [ License] ( #license )
30+
31+ ## What is this?
32+
33+ This package contains extensions that add support for the expression syntax
34+ enabled by MDX to [ ` mdast-util-from-markdown ` ] [ mdast-util-from-markdown ] and
35+ [ ` mdast-util-to-markdown ` ] [ mdast-util-to-markdown ] .
1836
1937## When to use this
2038
21- Use [ ` mdast-util-mdx ` ] [ mdast-util-mdx ] if you want all of MDX / MDX.js .
22- Use this otherwise .
39+ These tools are all rather low-level .
40+ In most cases, you’d want to use [ ` remark-mdx ` ] [ remark-mdx ] with remark instead .
2341
24- ## Install
42+ When you are working with syntax trees and want all of MDX, use
43+ [ ` mdast-util-mdx ` ] [ mdast-util-mdx ] instead.
2544
26- This package is [ ESM only] ( https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c ) :
27- Node 12+ is needed to use it and it must be ` import ` ed instead of ` require ` d.
45+ When working with ` mdast-util-from-markdown ` , you must combine this package with
46+ [ ` micromark-extension-mdx-expression ` ] [ extension ] .
47+
48+ ## Install
2849
29- [ npm] [ ] :
50+ This package is [ ESM only] [ esm ] .
51+ In Node.js (version 12.20+, 14.14+, or 16.0+), install with [ npm] [ ] :
3052
3153``` sh
3254npm install mdast-util-mdx-expression
3355```
3456
57+ In Deno with [ ` esm.sh ` ] [ esmsh ] :
58+
59+ ``` js
60+ import {mdxExpressionFromMarkdown , mdxExpressionToMarkdown } from ' https://esm.sh/mdast-util-mdx-expression@1'
61+ ```
62+
63+ In browsers with [ ` esm.sh ` ] [ esmsh ] :
64+
65+ ``` html
66+ <script type =" module" >
67+ import {mdxExpressionFromMarkdown , mdxExpressionToMarkdown } from ' https://esm.sh/mdast-util-mdx-expression@1?bundle'
68+ </script >
69+ ```
70+
3571## Use
3672
37- Say we have an MDX.js file, ` example.mdx ` :
73+ Say our document ` example.mdx ` contains :
3874
3975``` mdx
4076{
@@ -44,31 +80,31 @@ Say we have an MDX.js file, `example.mdx`:
4480b { true } .
4581```
4682
47- And our module, ` example.js ` , looks as follows:
83+ …and our module ` example.js ` looks as follows:
4884
4985``` js
50- import fs from ' node:fs'
86+ import fs from ' node:fs/promises '
5187import * as acorn from ' acorn'
5288import {fromMarkdown } from ' mdast-util-from-markdown'
5389import {toMarkdown } from ' mdast-util-to-markdown'
5490import {mdxExpression } from ' micromark-extension-mdx-expression'
5591import {mdxExpressionFromMarkdown , mdxExpressionToMarkdown } from ' mdast-util-mdx-expression'
5692
57- var doc = fs .readFileSync (' example.mdx' )
93+ const doc = await fs .readFile (' example.mdx' )
5894
59- var tree = fromMarkdown (doc, {
95+ const tree = fromMarkdown (doc, {
6096 extensions: [mdxExpression ({acorn, addResult: true })],
6197 mdastExtensions: [mdxExpressionFromMarkdown]
6298})
6399
64100console .log (tree)
65101
66- var out = toMarkdown (tree, {extensions: [mdxExpressionToMarkdown]})
102+ const out = toMarkdown (tree, {extensions: [mdxExpressionToMarkdown]})
67103
68104console .log (out)
69105```
70106
71- Now, running ` node example ` yields (positional info removed for brevity):
107+ …now running ` node example.js ` yields (positional info removed for brevity):
72108
73109``` js
74110{
@@ -132,19 +168,20 @@ b {true}.
132168
133169## API
134170
135- ### ` mdxExpressionFromMarkdown `
171+ This package exports the identifiers ` mdxExpressionFromMarkdown ` and
172+ ` mdxExpressionToMarkdown ` .
173+ There is no default export.
136174
137- ### ` mdxExpressionToMarkdown `
175+ ### ` mdxExpressionFromMarkdown `
138176
139- Support MDX (or MDX.js) expressions.
140- The exports are extensions, respectively for
141- [ ` mdast-util-from-markdown ` ] [ from-markdown ] and
142- [ ` mdast-util-to-markdown ` ] [ to-markdown ] .
177+ Extension for [ ` mdast-util-from-markdown ` ] [ mdast-util-from-markdown ] .
143178
144179When using the [ syntax extension with ` addResult ` ] [ extension ] , nodes will have
145180a ` data.estree ` field set to an [ ESTree] [ ] .
146181
147- The indent of the value of ` MDXFlowExpression ` s is stripped.
182+ ### ` mdxExpressionToMarkdown `
183+
184+ Extension for [ ` mdast-util-to-markdown ` ] [ mdast-util-to-markdown ] .
148185
149186## Syntax tree
150187
@@ -218,29 +255,53 @@ type FlowContentMdxExpression = MDXFlowExpression | FlowContent
218255type PhrasingContentMdxExpression = MDXTextExpression | PhrasingContent
219256```
220257
258+ ## Types
259+
260+ This package is fully typed with [ TypeScript] [ ] .
261+ It exports the additional types ` MdxFlowExpression ` and ` MdxTextExpression ` .
262+
263+ It also registers the node types with ` @types/mdast ` .
264+ If you’re working with the syntax tree, make sure to import this utility
265+ somewhere in your types, as that registers the new node types in the tree.
266+
267+ ``` js
268+ /**
269+ * @typedef {import('mdast-util-mdx-expression')}
270+ */
271+
272+ import {visit } from ' unist-util-visit'
273+
274+ /** @type {import('mdast').Root} */
275+ const tree = getMdastNodeSomeHow ()
276+
277+ visit (tree, (node ) => {
278+ // `node` can now be an expression node.
279+ })
280+ ```
281+
282+ ## Compatibility
283+
284+ Projects maintained by the unified collective are compatible with all maintained
285+ versions of Node.js.
286+ As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
287+ Our projects sometimes work with older versions, but this is not guaranteed.
288+
289+ This plugin works with ` mdast-util-from-markdown ` version 1+ and
290+ ` mdast-util-to-markdown ` version 1+.
291+
221292## Related
222293
223- * [ ` remarkjs/remark ` ] [ remark ]
224- — markdown processor powered by plugins
225- * ` remarkjs/remark-mdx `
294+ * [ ` remarkjs/remark-mdx ` ] [ remark-mdx ]
226295 — remark plugin to support MDX
227- * ` remarkjs/remark-mdxjs `
228- — remark plugin to support MDX.js
229- * [ ` syntax-tree/mdast-util-from-markdown ` ] [ from-markdown ]
230- — mdast parser using ` micromark ` to create mdast from markdown
231- * [ ` syntax-tree/mdast-util-to-markdown ` ] [ to-markdown ]
232- — mdast serializer to create markdown from mdast
233296* [ ` syntax-tree/mdast-util-mdx ` ] [ mdast-util-mdx ]
234297 — mdast utility to support MDX
235- * [ ` micromark/micromark ` ] [ micromark ]
236- — the smallest commonmark-compliant markdown parser that exists
237298* [ ` micromark/micromark-extension-mdx-expression ` ] [ extension ]
238299 — micromark extension to parse MDX expressions
239300
240301## Contribute
241302
242- See [ ` contributing.md ` in ` syntax-tree/.github ` ] [ contributing ] for ways to get
243- started.
303+ See [ ` contributing.md ` ] [ contributing ] in [ ` syntax-tree/.github ` ] [ health ] for
304+ ways to get started.
244305See [ ` support.md ` ] [ support ] for ways to get help.
245306
246307This project has a [ code of conduct] [ coc ] .
@@ -281,34 +342,42 @@ abide by its terms.
281342
282343[ npm ] : https://docs.npmjs.com/cli/install
283344
345+ [ esm ] : https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
346+
347+ [ esmsh ] : https://esm.sh
348+
349+ [ typescript ] : https://www.typescriptlang.org
350+
284351[ license ] : license
285352
286353[ author ] : https://wooorm.com
287354
288- [ contributing ] : https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
355+ [ health ] : https://github.com/syntax-tree/.github
289356
290- [ support ] : https://github.com/syntax-tree/.github/blob/HEAD/support .md
357+ [ contributing ] : https://github.com/syntax-tree/.github/blob/main/contributing .md
291358
292- [ coc ] : https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct .md
359+ [ support ] : https://github.com/syntax-tree/.github/blob/main/support .md
293360
294- [ mdast ] : https://github.com/syntax-tree/mdast
361+ [ coc ] : https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
295362
296- [ remark ] : https://github.com/remarkjs/remark
363+ [ mdast ] : https://github.com/syntax-tree/mdast
297364
298- [ from-markdown ] : https://github.com/syntax-tree/mdast-util-from-markdown
365+ [ mdast-util- from-markdown] : https://github.com/syntax-tree/mdast-util-from-markdown
299366
300- [ to-markdown ] : https://github.com/syntax-tree/mdast-util-to-markdown
367+ [ mdast-util- to-markdown] : https://github.com/syntax-tree/mdast-util-to-markdown
301368
302- [ micromark ] : https://github.com/micromark/micromark
369+ [ mdast-util-mdx ] : https://github.com/syntax-tree/mdast-util-mdx
303370
304371[ extension ] : https://github.com/micromark/micromark-extension-mdx-expression
305372
306- [ mdast-util-mdx ] : https://github.com/syntax-tree/mdast-util-mdx
307-
308373[ estree ] : https://github.com/estree/estree
309374
310375[ dfn-literal ] : https://github.com/syntax-tree/mdast#literal
311376
312377[ dfn-flow-content ] : #flowcontent-mdx-expression
313378
314379[ dfn-phrasing-content ] : #phrasingcontent-mdx-expression
380+
381+ [ remark-mdx ] : https://mdxjs.com/packages/remark-mdx/
382+
383+ [ mdx ] : https://mdxjs.com
0 commit comments