Update mdast-util-mdx (#1925)

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

Author: wooorm

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-lock.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",

package.json

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

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

@@ -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/esbuild/test/index.test.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/mdx/test/compile.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