Skip to content

Commit 603e884

Browse files
committed
Add improved docs
1 parent 448fb5c commit 603e884

File tree

1 file changed

+119
-50
lines changed

1 file changed

+119
-50
lines changed

readme.md

Lines changed: 119 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,69 @@
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
3254
npm 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`:
4480
b {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'
5187
import * as acorn from 'acorn'
5288
import {fromMarkdown} from 'mdast-util-from-markdown'
5389
import {toMarkdown} from 'mdast-util-to-markdown'
5490
import {mdxExpression} from 'micromark-extension-mdx-expression'
5591
import {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

64100
console.log(tree)
65101

66-
var out = toMarkdown(tree, {extensions: [mdxExpressionToMarkdown]})
102+
const out = toMarkdown(tree, {extensions: [mdxExpressionToMarkdown]})
67103

68104
console.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

144179
When using the [syntax extension with `addResult`][extension], nodes will have
145180
a `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
218255
type 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.
244305
See [`support.md`][support] for ways to get help.
245306

246307
This 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

Comments
 (0)