Add improved docs

Author: wooorm

readme.md

@@ -8,38 +8,78 @@
 [![Backers][backers-badge]][collective]
 [![Chat][chat-badge]][chat]
 
-Extension for [`mdast-util-from-markdown`][from-markdown] and/or
-[`mdast-util-to-markdown`][to-markdown] to support MDX (or MDX.js) in
-**[mdast][]**.
-When parsing (`from-markdown`), must be combined with either
-[`micromark-extension-mdx`][mdx] or [`micromark-extension-mdxjs`][mdxjs].
+[mdast][] extensions to parse and serialize [MDX][]: ESM import/exports,
+JavaScript expressions, and JSX.
+
+## Contents
+
+*   [What is this?](#what-is-this)
+*   [When to use this](#when-to-use-this)
+*   [Install](#install)
+*   [Use](#use)
+*   [API](#api)
+    *   [`mdxFromMarkdown()`](#mdxfrommarkdown)
+    *   [`mdxToMarkdown(options?)`](#mdxtomarkdownoptions)
+*   [Syntax tree](#syntax-tree)
+*   [Types](#types)
+*   [Compatibility](#compatibility)
+*   [Related](#related)
+*   [Contribute](#contribute)
+*   [License](#license)
+
+## What is this?
+
+This package contains extensions for
+[`mdast-util-from-markdown`][mdast-util-from-markdown] and
+[`mdast-util-to-markdown`][mdast-util-to-markdown] to enable the features that
+MDX adds to markdown: import/exports (`export x from 'y'`), expressions
+(`{z}`), and JSX (`<Component />`).
 
 ## When to use this
 
+These tools are all rather low-level.
+In many cases, you’d want to use [`remark-mdx`][remark-mdx] with remark instead.
+
 Use this if you’re dealing with the AST manually and want to support all of MDX.
-You can also use the extensions separately:
+Instead of this package, you can also use the extensions separately:
 
 *   [`mdast-util-mdx-expression`](https://github.com/syntax-tree/mdast-util-mdx-expression)
-    — support MDX (or MDX.js) expressions
+    — support MDX expressions
 *   [`mdast-util-mdx-jsx`](https://github.com/syntax-tree/mdast-util-mdx-jsx)
-    — support MDX (or MDX.js) JSX
+    — support MDX JSX
 *   [`mdast-util-mdxjs-esm`](https://github.com/syntax-tree/mdast-util-mdxjs-esm)
-    — support MDX.js ESM
+    — support MDX ESM
 
-## Install
+When working with `mdast-util-from-markdown`, you must combine this package with
+[`micromark/micromark-extension-mdx`][mdx] or
+[`micromark/micromark-extension-mdxjs`][mdxjs].
 
-This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
-Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
+## Install
 
-[npm][]:
+This package is [ESM only][esm].
+In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
 
 ```sh
 npm install mdast-util-mdx
 ```
 
+In Deno with [`esm.sh`][esmsh]:
+
+```js
+import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@2'
+```
+
+In browsers with [`esm.sh`][esmsh]:
+
+```html
+<script type="module">
+  import {mdxFromMarkdown, mdxToMarkdown} from 'https://esm.sh/mdast-util-mdx@2?bundle'
+</script>
+```
+
 ## Use
 
-Say we have the following file, `example.mdx`:
+Say our document `example.mdx` contains:
 
 ```markdown
 import Box from "place"
@@ -59,16 +99,16 @@ Which you can also put inline: {1+1}.
 </Box>
 ```
 
-And our script, `example.js`, looks as follows:
+…and our module `example.js` looks as follows:
 
 ```js
-import fs from 'node:fs'
+import fs from 'node:fs/promises'
 import {fromMarkdown} from 'mdast-util-from-markdown'
 import {toMarkdown} from 'mdast-util-to-markdown'
 import {mdxjs} from 'micromark-extension-mdxjs'
 import {mdxFromMarkdown, mdxToMarkdown} from 'mdast-util-mdx'
 
-const doc = fs.readFileSync('example.mdx')
+const doc = await fs.readFile('example.mdx')
 
 const tree = fromMarkdown(doc, {
   extensions: [mdxjs()],
@@ -82,7 +122,7 @@ const out = toMarkdown(tree, {extensions: [mdxToMarkdown()]})
 console.log(out)
 ```
 
-Now, running `node example` yields (positional info removed for brevity):
+…now running `node example.js` yields (positional info removed for brevity):
 
 ```js
 {
@@ -222,42 +262,88 @@ Which you can also put inline: {1+1}.
 
 ## API
 
-This package exports the following identifier: `mdxFromMarkdown`,
-`mdxToMarkdown`.
+This package exports the identifiers `mdxFromMarkdown` and `mdxToMarkdown`.
 There is no default export.
 
 ### `mdxFromMarkdown()`
 
+Extension for [`mdast-util-from-markdown`][mdast-util-from-markdown].
+
+When using the [syntax extension with `addResult`][mdxjs], nodes will have
+a `data.estree` field set to an [ESTree][].
+
 ### `mdxToMarkdown(options?)`
 
-Support MDX (or MDX.js).
-The exports are functions that can be called to respectively get an extension
-for [`mdast-util-from-markdown`][from-markdown] and
-[`mdast-util-to-markdown`][to-markdown].
+Extension for [`mdast-util-to-markdown`][mdast-util-to-markdown].
+
+##### `options`
+
+Configuration (optional).
+Currently passes through `quote`, `quoteSmart`, `tightSelfClosing`, and
+`printWidth` to [`mdast-util-mdx-jsx`][options].
+
+## Syntax tree
+
+This utility combines several mdast utilities.
+See their readmes for the node types supported in the tree:
+
+*   [`mdast-util-mdx-expression`](https://github.com/syntax-tree/mdast-util-mdx-expression#syntax-tree)
+    — support MDX expressions
+*   [`mdast-util-mdx-jsx`](https://github.com/syntax-tree/mdast-util-mdx-jsx#syntax-tree)
+    — support MDX JSX
+*   [`mdast-util-mdxjs-esm`](https://github.com/syntax-tree/mdast-util-mdxjs-esm#syntax-tree)
+    — support MDX ESM
+
+## Types
 
-The options to `mdxToMarkdown` are [passed to `mdxJsxToMarkdown`][options].
+This package is fully typed with [TypeScript][].
+It exports the additional types `MdxFlowExpression`, `MdxTextExpression`,
+`MdxjsEsm`, `MdxJsxAttributeValueExpression`, `MdxJsxAttribute`,
+`MdxJsxExpressionAttribute`, `MdxJsxFlowElement`,
+`MdxJsxTextElement`, and `ToMarkdownOptions`.
+
+It also registers the node types with `@types/mdast`.
+If you’re working with the syntax tree, make sure to import this utility
+somewhere in your types, as that registers the new node types in the tree.
+
+```js
+/**
+ * @typedef {import('mdast-util-mdx')}
+ */
+
+import {visit} from 'unist-util-visit'
+
+/** @type {import('mdast').Root} */
+const tree = getMdastNodeSomeHow()
+
+visit(tree, (node) => {
+  // `node` can now be an expression, JSX, or ESM node.
+})
+```
+
+## Compatibility
+
+Projects maintained by the unified collective are compatible with all maintained
+versions of Node.js.
+As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
+Our projects sometimes work with older versions, but this is not guaranteed.
+
+This utility works with `mdast-util-from-markdown` version 1+ and
+`mdast-util-to-markdown` version 1+.
 
 ## Related
 
-*   [`remarkjs/remark`][remark]
-    — markdown processor powered by plugins
 *   [`remarkjs/remark-mdx`][remark-mdx]
-    — remark plugin to support MDX (or MDX.js)
-*   [`micromark/micromark`][micromark]
-    — the smallest commonmark-compliant markdown parser that exists
+    — remark plugin to support MDX
 *   [`micromark/micromark-extension-mdx`][mdx]
     — micromark extension to parse MDX
 *   [`micromark/micromark-extension-mdxjs`][mdxjs]
-    — micromark extension to parse MDX.js
-*   [`syntax-tree/mdast-util-from-markdown`][from-markdown]
-    — mdast parser using `micromark` to create mdast from markdown
-*   [`syntax-tree/mdast-util-to-markdown`][to-markdown]
-    — mdast serializer to create markdown from mdast
+    — micromark extension to parse JavaScript-aware MDX
 
 ## Contribute
 
-See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
-started.
+See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
+ways to get started.
 See [`support.md`][support] for ways to get help.
 
 This project has a [code of conduct][coc].
@@ -298,25 +384,29 @@ abide by its terms.
 
 [npm]: https://docs.npmjs.com/cli/install
 
+[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
+
+[esmsh]: https://esm.sh
+
+[typescript]: https://www.typescriptlang.org
+
 [license]: license
 
 [author]: https://wooorm.com
 
-[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
+[health]: https://github.com/syntax-tree/.github
 
-[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
+[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
 
-[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
+[support]: https://github.com/syntax-tree/.github/blob/main/support.md
 
-[mdast]: https://github.com/syntax-tree/mdast
-
-[remark]: https://github.com/remarkjs/remark
+[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
 
-[from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
+[mdast]: https://github.com/syntax-tree/mdast
 
-[to-markdown]: https://github.com/syntax-tree/mdast-util-to-markdown
+[mdast-util-from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
 
-[micromark]: https://github.com/micromark/micromark
+[mdast-util-to-markdown]: https://github.com/syntax-tree/mdast-util-to-markdown
 
 [mdx]: https://github.com/micromark/micromark-extension-mdx
 
@@ -325,3 +415,5 @@ abide by its terms.
 [remark-mdx]: https://github.com/mdx-js/mdx/tree/next/packages/remark-mdx
 
 [options]: https://github.com/syntax-tree/mdast-util-mdx-jsx#mdxjsxtomarkdownoptions
+
+[estree]: https://github.com/estree/estree