Create the _mdxMdxContent component outside of the MDXContent component

mdx-js · Jun 14, 2022 · 5ef0558 · 5ef0558
1 parent ac44dc7
commit 5ef0558
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 57 deletions.
diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js
@@ -231,7 +231,7 @@ export function recmaDocument(options = {}) {
           child.expression.type === 'JSXElement')
       ) {
         content = true
-        replacement.push(createMdxContent(child.expression))
+        replacement.push(...createMdxContent(child.expression, Boolean(layout)))
         // The following catch-all branch is because plugins might’ve added
         // other things.
         // Normally, we only have import/export/jsx, but just add whatever’s
@@ -244,7 +244,7 @@ export function recmaDocument(options = {}) {
 
     // If there was no JSX content at all, add an empty function.
     if (!content) {
-      replacement.push(createMdxContent())
+      replacement.push(...createMdxContent(undefined, Boolean(layout)))
     }
 
     exportedIdentifiers.push(['MDXContent', 'default'])
@@ -481,9 +481,10 @@ export function recmaDocument(options = {}) {
 
   /**
    * @param {Expression} [content]
-   * @returns {FunctionDeclaration}
+   * @param {boolean} [hasLayout]
+   * @returns {FunctionDeclaration[]}
    */
-  function createMdxContent(content) {
+  function createMdxContent(content, hasLayout) {
     /** @type {JSXElement} */
     const element = {
       type: 'JSXElement',
@@ -508,7 +509,12 @@ export function recmaDocument(options = {}) {
           openingElement: {
             type: 'JSXOpeningElement',
             name: {type: 'JSXIdentifier', name: '_createMdxContent'},
-            attributes: [],
+            attributes: [
+              {
+                type: 'JSXSpreadAttribute',
+                argument: {type: 'Identifier', name: 'props'}
+              }
+            ],
             selfClosing: true
           },
           closingElement: null,
@@ -518,7 +524,21 @@ export function recmaDocument(options = {}) {
     }
 
     // @ts-expect-error: JSXElements are expressions.
-    const consequent = /** @type {Expression} */ (element)
+    let consequent = /** @type {Expression} */ (element)
+
+    if (!hasLayout) {
+      consequent = {
+        type: 'ConditionalExpression',
+        test: {type: 'Identifier', name: 'MDXLayout'},
+        consequent,
+        alternate: {
+          type: 'CallExpression',
+          callee: {type: 'Identifier', name: '_createMdxContent'},
+          arguments: [{type: 'Identifier', name: 'props'}],
+          optional: false
+        }
+      }
+    }
 
     let argument = content || {type: 'Literal', value: null}
 
@@ -535,44 +555,36 @@ export function recmaDocument(options = {}) {
       argument = argument.children[0]
     }
 
-    return {
-      type: 'FunctionDeclaration',
-      id: {type: 'Identifier', name: 'MDXContent'},
-      params: [
-        {
-          type: 'AssignmentPattern',
-          left: {type: 'Identifier', name: 'props'},
-          right: {type: 'ObjectExpression', properties: []}
+    return [
+      {
+        type: 'FunctionDeclaration',
+        id: {type: 'Identifier', name: '_createMdxContent'},
+        params: [{type: 'Identifier', name: 'props'}],
+        body: {
+          type: 'BlockStatement',
+          body: [{type: 'ReturnStatement', argument}]
         }
-      ],
-      body: {
-        type: 'BlockStatement',
-        body: [
-          {
-            type: 'ReturnStatement',
-            argument: {
-              type: 'ConditionalExpression',
-              test: {type: 'Identifier', name: 'MDXLayout'},
-              consequent,
-              alternate: {
-                type: 'CallExpression',
-                callee: {type: 'Identifier', name: '_createMdxContent'},
-                arguments: [],
-                optional: false
-              }
-            }
-          },
+      },
+      {
+        type: 'FunctionDeclaration',
+        id: {type: 'Identifier', name: 'MDXContent'},
+        params: [
           {
-            type: 'FunctionDeclaration',
-            id: {type: 'Identifier', name: '_createMdxContent'},
-            params: [],
-            body: {
-              type: 'BlockStatement',
-              body: [{type: 'ReturnStatement', argument}]
-            }
+            type: 'AssignmentPattern',
+            left: {type: 'Identifier', name: 'props'},
+            right: {type: 'ObjectExpression', properties: []}
           }
-        ]
+        ],
+        body: {
+          type: 'BlockStatement',
+          body: [
+            {
+              type: 'ReturnStatement',
+              argument: consequent
+            }
+          ]
+        }
       }
-    }
+    ]
   }
 }
diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js
@@ -76,43 +76,43 @@ export function recmaJsxRewrite(options = {}) {
     walk(tree, {
       enter(_node) {
         const node = /** @type {Node} */ (_node)
+        const newScope = /** @type {Scope|undefined} */ (
+          // @ts-expect-error: periscopic doesn’t support JSX.
+          scopeInfo.map.get(node)
+        )
 
         if (
           node.type === 'FunctionDeclaration' ||
           node.type === 'FunctionExpression' ||
           node.type === 'ArrowFunctionExpression'
         ) {
-          fnStack.push({
+          const stackLength = fnStack.push({
             objects: [],
             components: [],
             tags: [],
             references: {},
             node
           })
-        }
 
-        let fnScope = fnStack[0]
+          // MDXContent only ever contains MDXLayout
+          if (
+            isNamedFunction(node, 'MDXContent') &&
+            newScope &&
+            !inScope(newScope, 'MDXLayout')
+          ) {
+            fnStack[stackLength - 1].components.push('MDXLayout')
+          }
+        }
 
+        const fnScope = fnStack[0]
         if (
           !fnScope ||
-          (!isNamedFunction(fnScope.node, 'MDXContent') &&
+          (!isNamedFunction(fnScope.node, '_createMdxContent') &&
             !providerImportSource)
         ) {
           return
         }
 
-        if (
-          fnStack[1] &&
-          isNamedFunction(fnStack[1].node, '_createMdxContent')
-        ) {
-          fnScope = fnStack[1]
-        }
-
-        const newScope = /** @type {Scope|undefined} */ (
-          // @ts-expect-error: periscopic doesn’t support JSX.
-          scopeInfo.map.get(node)
-        )
-
         if (newScope) {
           newScope.node = node
           currentScope = newScope