8
8
[ ![ Backers] [ backers-badge ]] [ collective ]
9
9
[ ![ Chat] [ chat-badge ]] [ chat ]
10
10
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 ] .
18
36
19
37
## When to use this
20
38
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 .
23
41
24
- ## Install
42
+ When you are working with syntax trees and want all of MDX, use
43
+ [ ` mdast-util-mdx ` ] [ mdast-util-mdx ] instead.
25
44
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
28
49
29
- [ npm] [ ] :
50
+ This package is [ ESM only] [ esm ] .
51
+ In Node.js (version 12.20+, 14.14+, or 16.0+), install with [ npm] [ ] :
30
52
31
53
``` sh
32
54
npm install mdast-util-mdx-expression
33
55
```
34
56
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
+
35
71
## Use
36
72
37
- Say we have an MDX.js file, ` example.mdx ` :
73
+ Say our document ` example.mdx ` contains :
38
74
39
75
``` mdx
40
76
{
@@ -44,31 +80,31 @@ Say we have an MDX.js file, `example.mdx`:
44
80
b { true } .
45
81
```
46
82
47
- And our module, ` example.js ` , looks as follows:
83
+ …and our module ` example.js ` looks as follows:
48
84
49
85
``` js
50
- import fs from ' node:fs'
86
+ import fs from ' node:fs/promises '
51
87
import * as acorn from ' acorn'
52
88
import {fromMarkdown } from ' mdast-util-from-markdown'
53
89
import {toMarkdown } from ' mdast-util-to-markdown'
54
90
import {mdxExpression } from ' micromark-extension-mdx-expression'
55
91
import {mdxExpressionFromMarkdown , mdxExpressionToMarkdown } from ' mdast-util-mdx-expression'
56
92
57
- var doc = fs .readFileSync (' example.mdx' )
93
+ const doc = await fs .readFile (' example.mdx' )
58
94
59
- var tree = fromMarkdown (doc, {
95
+ const tree = fromMarkdown (doc, {
60
96
extensions: [mdxExpression ({acorn, addResult: true })],
61
97
mdastExtensions: [mdxExpressionFromMarkdown]
62
98
})
63
99
64
100
console .log (tree)
65
101
66
- var out = toMarkdown (tree, {extensions: [mdxExpressionToMarkdown]})
102
+ const out = toMarkdown (tree, {extensions: [mdxExpressionToMarkdown]})
67
103
68
104
console .log (out)
69
105
```
70
106
71
- Now, running ` node example ` yields (positional info removed for brevity):
107
+ …now running ` node example.js ` yields (positional info removed for brevity):
72
108
73
109
``` js
74
110
{
@@ -132,19 +168,20 @@ b {true}.
132
168
133
169
## API
134
170
135
- ### ` mdxExpressionFromMarkdown `
171
+ This package exports the identifiers ` mdxExpressionFromMarkdown ` and
172
+ ` mdxExpressionToMarkdown ` .
173
+ There is no default export.
136
174
137
- ### ` mdxExpressionToMarkdown `
175
+ ### ` mdxExpressionFromMarkdown `
138
176
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 ] .
143
178
144
179
When using the [ syntax extension with ` addResult ` ] [ extension ] , nodes will have
145
180
a ` data.estree ` field set to an [ ESTree] [ ] .
146
181
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 ] .
148
185
149
186
## Syntax tree
150
187
@@ -218,29 +255,53 @@ type FlowContentMdxExpression = MDXFlowExpression | FlowContent
218
255
type PhrasingContentMdxExpression = MDXTextExpression | PhrasingContent
219
256
```
220
257
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
+
221
292
## Related
222
293
223
- * [ ` remarkjs/remark ` ] [ remark ]
224
- — markdown processor powered by plugins
225
- * ` remarkjs/remark-mdx `
294
+ * [ ` remarkjs/remark-mdx ` ] [ remark-mdx ]
226
295
— 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
233
296
* [ ` syntax-tree/mdast-util-mdx ` ] [ mdast-util-mdx ]
234
297
— mdast utility to support MDX
235
- * [ ` micromark/micromark ` ] [ micromark ]
236
- — the smallest commonmark-compliant markdown parser that exists
237
298
* [ ` micromark/micromark-extension-mdx-expression ` ] [ extension ]
238
299
— micromark extension to parse MDX expressions
239
300
240
301
## Contribute
241
302
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.
244
305
See [ ` support.md ` ] [ support ] for ways to get help.
245
306
246
307
This project has a [ code of conduct] [ coc ] .
@@ -281,34 +342,42 @@ abide by its terms.
281
342
282
343
[ npm ] : https://docs.npmjs.com/cli/install
283
344
345
+ [ esm ] : https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
346
+
347
+ [ esmsh ] : https://esm.sh
348
+
349
+ [ typescript ] : https://www.typescriptlang.org
350
+
284
351
[ license ] : license
285
352
286
353
[ author ] : https://wooorm.com
287
354
288
- [ contributing ] : https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
355
+ [ health ] : https://github.com/syntax-tree/.github
289
356
290
- [ support ] : https://github.com/syntax-tree/.github/blob/HEAD/support .md
357
+ [ contributing ] : https://github.com/syntax-tree/.github/blob/main/contributing .md
291
358
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
293
360
294
- [ mdast ] : https://github.com/syntax-tree/mdast
361
+ [ coc ] : https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
295
362
296
- [ remark ] : https://github.com/remarkjs/remark
363
+ [ mdast ] : https://github.com/syntax-tree/mdast
297
364
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
299
366
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
301
368
302
- [ micromark ] : https://github.com/micromark/micromark
369
+ [ mdast-util-mdx ] : https://github.com/syntax-tree/mdast-util-mdx
303
370
304
371
[ extension ] : https://github.com/micromark/micromark-extension-mdx-expression
305
372
306
- [ mdast-util-mdx ] : https://github.com/syntax-tree/mdast-util-mdx
307
-
308
373
[ estree ] : https://github.com/estree/estree
309
374
310
375
[ dfn-literal ] : https://github.com/syntax-tree/mdast#literal
311
376
312
377
[ dfn-flow-content ] : #flowcontent-mdx-expression
313
378
314
379
[ 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