Update mdast-util-mdx (#1925)

Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>

docs/blog/conf.server.mdx

@@ -18,7 +18,7 @@ MDXConf is a free and online conference for the MDX community.
 Whether you’re just learning about MDX or an expert, there’ll be something for
 you! {/* more */}
 
-August 24th, 2020 at 8am PDT/3pm UST <br/> Online • Free
+August 24th, 2020 at 8am PDT/3pm UST <br /> Online • Free
 
 ## Watch
 

docs/docs/getting-started.server.mdx

@@ -107,7 +107,7 @@ See:
   <https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#related>
 */}
 
-<a name="mdxprovider"/>
+<a name="mdxprovider" />
 
 ### JSX
 

docs/index.server.mdx

@@ -113,10 +113,7 @@ This makes writing long-form content with components a blast. {/* more */}
       It was followed by a warm spring which caused flood conditions in many of
       the nearby rivers.
 
-      <Chart
-        year={year}
-        color="#fcb32c"
-      />
+      <Chart year={year} color="#fcb32c" />
     </div>
 
     {/* lint enable */}

docs/playground.server.mdx

@@ -9,6 +9,11 @@ export const info = {
   published: new Date('2021-09-13'),
   modified: new Date('2021-11-01')
 }
+export const playgroundSource = `Hello, world!
+Below is an example of markdown in JSX.
+
+<div style={{padding: '1rem', backgroundColor: 'violet'}}>
+Try and change the background color to \`tomato\`.`
 
 <Note type="important">
   **Note**: V2 is around the corner.
@@ -31,13 +36,7 @@ This can be helpful for debugging or exploring.
 To read about how the MDX format works, we recommend that you start with
 [§ What is MDX][what].
 
-<Editor children={`Hello, world!
-Below is an example of markdown in JSX.
-
-<div style={{padding: '1rem', backgroundColor: 'violet'}}>
-  Try and change the background color to \`tomato\`.
-</div>
-`}/>
+<Editor children={playgroundSource} />
 
 [what]: /docs/what-is-mdx/
 

package.json

@@ -48,7 +48,7 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-security": "^1.0.0",
     "estree-util-value-to-estree": "^1.0.0",
-    "globby": "^12.0.0",
+    "globby": "^13.0.0",
     "hast-to-hyperscript": "^10.0.0",
     "hast-util-select": "^5.0.0",
     "hast-util-to-text": "^3.0.0",

packages/esbuild/test/files/mdx-file-importing-markdown.mdx

@@ -5,4 +5,4 @@ import Content from './md-file.md'
 
 A <Pill>little pill</Pill>.
 
-<Content/>
+<Content />

packages/esbuild/test/index.test.js

@@ -4,6 +4,8 @@
  * @typedef {import('hast').Root} Root
  * @typedef {import('vfile').VFile} VFile
  * @typedef {import('mdx/types').MDXContent} MDXContent
+ *
+ * @typedef {import('remark-mdx')}
  */
 
 import {promises as fs} from 'fs'
@@ -241,7 +243,6 @@ test('@mdx-js/esbuild', async () => {
                */
               (tree, file) => {
                 const esm = tree.children[0] // Export
-                // @ts-expect-error To do: mdast-util-mdx should probably also extend hast?
                 assert.ok(esm && esm.type === 'mdxjsEsm')
                 const eol = tree.children[1] // EOL between both, no position.
                 assert.ok(eol && eol.type === 'text')
@@ -252,7 +253,6 @@ test('@mdx-js/esbuild', async () => {
                 const text = head.children[0] // Text in heading
                 assert.ok(text && text.type === 'text')
                 const jsx = head.children[1] // JSX in heading
-                // @ts-expect-error To do: mdast-util-mdx should probably also extend hast?
                 assert.ok(jsx && jsx.type === 'mdxJsxTextElement')
                 console.log(head)
                 file.message('1')

packages/mdx/test/compile.js

@@ -696,13 +696,13 @@ test('compile', async () => {
         remarkPlugins: [
           () => (/** @type {Root} */ tree) => {
             tree.children.unshift({
-              // @ts-expect-error To do: mdast-util-mdx should probably also extend hast?
               type: 'mdxjsEsm',
               value: '',
               data: {
                 estree: {
                   type: 'Program',
                   comments: [],
+                  sourceType: 'module',
                   body: [
                     {
                       type: 'VariableDeclaration',

packages/remark-mdx/index.js

@@ -1,6 +1,9 @@
 /**
  * @typedef {import('mdast').Root} Root
- * @typedef {import('micromark-extension-mdxjs').Options} Options
+ * @typedef {import('micromark-extension-mdxjs').Options} MicromarkOptions
+ * @typedef {import('mdast-util-mdx').ToMarkdownOptions} ToMarkdownOptions
+ * @typedef {MicromarkOptions & ToMarkdownOptions} Options
+ *
  * @typedef {import('mdast-util-mdx')} DoNotTouchAsThisImportItIncludesMdxInTree
  */
 
@@ -17,8 +20,8 @@ export default function remarkMdx(options = {}) {
   const data = this.data()
 
   add('micromarkExtensions', mdxjs(options))
-  add('fromMarkdownExtensions', mdxFromMarkdown)
-  add('toMarkdownExtensions', mdxToMarkdown)
+  add('fromMarkdownExtensions', mdxFromMarkdown())
+  add('toMarkdownExtensions', mdxToMarkdown(options))
 
   /**
    * @param {string} field

packages/remark-mdx/package.json

@@ -40,7 +40,7 @@
     "index.js"
   ],
   "dependencies": {
-    "mdast-util-mdx": "^1.0.0",
+    "mdast-util-mdx": "^2.0.0",
     "micromark-extension-mdxjs": "^1.0.0"
   },
   "devDependencies": {

packages/remark-mdx/test/index.js

@@ -1,9 +1,9 @@
 /**
  * @typedef {import('mdast').Root} Root
  * @typedef {import('mdast').Content} Content
- * @typedef {import('mdast-util-mdx').MDXJsxAttribute} MDXJsxAttribute
- * @typedef {import('mdast-util-mdx').MDXJsxAttributeValueExpression} MDXJsxAttributeValueExpression
- * @typedef {import('mdast-util-mdx').MDXJsxExpressionAttribute} MDXJsxExpressionAttribute
+ * @typedef {import('mdast-util-mdx').MdxJsxAttribute} MdxJsxAttribute
+ * @typedef {import('mdast-util-mdx').MdxJsxAttributeValueExpression} MdxJsxAttributeValueExpression
+ * @typedef {import('mdast-util-mdx').MdxJsxExpressionAttribute} MdxJsxExpressionAttribute
  */
 
 import {test} from 'uvu'
@@ -109,7 +109,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b/> charlie.\n',
+    'Alpha <b /> charlie.\n',
     'should serialize a tag with a name'
   )
 
@@ -127,7 +127,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b bravo/> charlie.\n',
+    'Alpha <b bravo /> charlie.\n',
     'should serialize a boolean attribute (element)'
   )
 
@@ -148,7 +148,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b bravo="bravo"/> charlie.\n',
+    'Alpha <b bravo="bravo" /> charlie.\n',
     'should serialize an attribute (element)'
   )
 
@@ -169,7 +169,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b br:avo="bravo"/> charlie.\n',
+    'Alpha <b br:avo="bravo" /> charlie.\n',
     'should serialize a prefixed attribute (element)'
   )
 
@@ -190,7 +190,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b {...props}/> charlie.\n',
+    'Alpha <b {...props} /> charlie.\n',
     'should serialize a attribute expression (element)'
   )
 
@@ -220,7 +220,7 @@ test('stringify', () => {
         ])
       ])
     ),
-    'Alpha <b b={1 + 1}/> charlie.\n',
+    'Alpha <b b={1 + 1} /> charlie.\n',
     'should serialize an expression attribute (element)'
   )
 
@@ -317,7 +317,7 @@ function cleanEstree(tree) {
   visit(tree, onvisit)
 
   /**
-   * @param {Root|Content|MDXJsxAttribute|MDXJsxExpressionAttribute|MDXJsxAttributeValueExpression} node
+   * @param {Root|Content|MdxJsxAttribute|MdxJsxExpressionAttribute|MdxJsxAttributeValueExpression} node
    */
   function onvisit(node) {
     if (