Fix MDXContent to allow missing props

Vue router does not pass props in. Closes GH-82. Closes GH-83. Reviewed-by: Titus Wormer <[email protected]>
wooorm · Sep 8, 2021 · bebab6d · bebab6d
1 parent bb86319
commit bebab6d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/lib/plugin/recma-document.js b/lib/plugin/recma-document.js
@@ -484,7 +484,13 @@ export function recmaDocument(options = {}) {
     return {
       type: 'FunctionDeclaration',
       id: {type: 'Identifier', name: 'MDXContent'},
-      params: [{type: 'Identifier', name: 'props'}],
+      params: [
+        {
+          type: 'AssignmentPattern',
+          left: {type: 'Identifier', name: 'props'},
+          right: {type: 'ObjectExpression', properties: []}
+        }
+      ],
       body: {
         type: 'BlockStatement',
         body: [

diff --git a/readme.md b/readme.md
@@ -169,7 +169,7 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
 
 export const Thing = () => _jsx(_Fragment, {children: 'World!'})
 
-function MDXContent(props) {
+function MDXContent(props = {}) {
   const _components = Object.assign({h1: 'h1'}, props.components)
   const {wrapper: MDXLayout} = _components
   const _content = _jsx(_Fragment, {
@@ -380,14 +380,14 @@ async function main(code) {
 ```js
 import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
 export const no = 3.14
-function MDXContent(props) { /* … */ }
+function MDXContent(props = {}) { /* … */ }
 export default MDXContent
 ```
 
 ```js
 const {Fragment: _Fragment, jsx: _jsx} = arguments[0]
 const no = 3.14
-function MDXContent(props) { /* … */ }
+function MDXContent(props = {}) { /* … */ }
 return {no, default: MDXContent}
 ```
 
@@ -435,7 +435,7 @@ console.log(String(compileSync(code, {outputFormat: 'function-body', useDynamicI
 const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]
 const {name} = await import('./meta.js')
 const {no} = await import('./numbers.js')
-function MDXContent(props) { /* … */ }
+function MDXContent(props = {}) { /* … */ }
 return {no, default: MDXContent}
 ```
 
@@ -476,7 +476,7 @@ async function main() {
 ```js
 import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
 export {number} from 'https://a.full/data.js'
-function MDXContent(props) { /* … */ }
+function MDXContent(props = {}) { /* … */ }
 export default MDXContent
 ```
 
@@ -549,7 +549,7 @@ compile(file, {providerImportSource: '@mdx-js/react'})
 
  export const Thing = () => React.createElement(React.Fragment, null, 'World!')
 
- function MDXContent(props) {
+ function MDXContent(props = {}) {
 -  const _components = Object.assign({h1: 'h1'}, props.components)
 +  const _components = Object.assign({h1: 'h1'}, _provideComponents(), props.components)
    const {wrapper: MDXLayout} = _components
@@ -583,7 +583,7 @@ compile(file, {jsx: true})
 -export const Thing = () => React.createElement(React.Fragment, null, 'World!')
 +export const Thing = () => <>World!</>
 
- function MDXContent(props) {
+ function MDXContent(props = {}) {
    const _components = Object.assign({h1: 'h1'}, props.components)
    const {wrapper: MDXLayout} = _components
 -  const _content = _jsx(_Fragment, {

diff --git a/test/core.js b/test/core.js
@@ -658,7 +658,7 @@ test('jsx', async (t) => {
     String(compileSync('*a*', {jsx: true})),
     [
       '/*@jsxRuntime automatic @jsxImportSource react*/',
-      'function MDXContent(props) {',
+      'function MDXContent(props = {}) {',
       '  const _components = Object.assign({',
       '    p: "p",',
       '    em: "em"',
@@ -676,7 +676,7 @@ test('jsx', async (t) => {
     String(compileSync('<a {...b} c d="1" e={1} />', {jsx: true})),
     [
       '/*@jsxRuntime automatic @jsxImportSource react*/',
-      'function MDXContent(props) {',
+      'function MDXContent(props = {}) {',
       '  const _components = Object.assign({}, props.components), {wrapper: MDXLayout} = _components;',
       '  const _content = <><a {...b} c d="1" e={1} /></>;',
       '  return MDXLayout ? <MDXLayout {...props}>{_content}</MDXLayout> : _content;',
@@ -691,7 +691,7 @@ test('jsx', async (t) => {
     String(compileSync('<><a:b /><c.d/></>', {jsx: true})),
     [
       '/*@jsxRuntime automatic @jsxImportSource react*/',
-      'function MDXContent(props) {',
+      'function MDXContent(props = {}) {',
       '  const _components = Object.assign({}, props.components), {wrapper: MDXLayout, c} = _components;',
       '  const _content = <><><a:b /><c.d /></></>;',
       '  return MDXLayout ? <MDXLayout {...props}>{_content}</MDXLayout> : _content;',
@@ -707,7 +707,7 @@ test('jsx', async (t) => {
     [
       '/*@jsxRuntime automatic @jsxImportSource react*/',
       '/*1*/',
-      'function MDXContent(props) {',
+      'function MDXContent(props = {}) {',
       '  const _components = Object.assign({}, props.components), {wrapper: MDXLayout} = _components;',
       '  const _content = <><>{"a "}{}{" b"}</></>;',
       '  return MDXLayout ? <MDXLayout {...props}>{_content}</MDXLayout> : _content;',
@@ -722,7 +722,7 @@ test('jsx', async (t) => {
     String(compileSync('Hello {props.name}', {jsx: true})),
     [
       '/*@jsxRuntime automatic @jsxImportSource react*/',
-      'function MDXContent(props) {',
+      'function MDXContent(props = {}) {',
       '  const _components = Object.assign({',
       '    p: "p"',
       '  }, props.components), {wrapper: MDXLayout} = _components;',