Handle JSX member expressions

packages/babel-plugin-apply-mdx-type-props/index.js

@@ -2,28 +2,41 @@ const {types: t} = require('@babel/core')
 const {declare} = require('@babel/helper-plugin-utils')
 const {startsWithCapitalLetter} = require('@mdx-js/util')
 
+const applyMdxType = (node, jsxName) => {
+  node.attributes.push(
+    t.jSXAttribute(t.jSXIdentifier(`mdxType`), t.stringLiteral(jsxName))
+  )
+}
+
 class BabelPluginApplyMdxTypeProp {
   constructor() {
     const names = []
     this.state = {names}
 
     this.plugin = declare(api => {
       api.assertVersion(7)
+      const {types: t} = api
 
       return {
         visitor: {
           JSXOpeningElement(path) {
+            if (t.isJSXMemberExpression(path.node.name)) {
+              const objName = path.node.name.object.name
+              const propName = path.node.name.property.name
+              const fullJsxName = `${objName}.${propName}`
+
+              names.push(objName)
+              names.push(fullJsxName)
+
+              applyMdxType(path.node, fullJsxName)
+            }
+
             const jsxName = path.node.name.name
 
             if (startsWithCapitalLetter(jsxName)) {
               names.push(jsxName)
 
-              path.node.attributes.push(
-                t.jSXAttribute(
-                  t.jSXIdentifier(`mdxType`),
-                  t.stringLiteral(jsxName)
-                )
-              )
+              applyMdxType(path.node, jsxName)
             }
           }
         }

packages/mdx/mdx-hast-to-jsx.js

@@ -151,7 +151,13 @@ MDXContent.isMDXComponent = true`
 ` +
       uniq(jsxNames)
         .filter(name => !importExportNames.includes(name))
-        .map(name => `const ${name} = makeShortcode("${name}");`)
+        .map(name => {
+          if (name.includes('.')) {
+            return `${name} = ${name} || makeShortcode("${name}");`
+          }
+
+          return `const ${name} = makeShortcode("${name}");`
+        })
         .join('\n')
 
     const moduleBase = `${importStatements}

packages/mdx/test/fixtures/export-with-shortcode.mdx

@@ -1,9 +1,9 @@
-export const Foo = () => (
+export const Foobar = () => (
   <div>
     <Button />
   </div>
 )
 
 # Hello, world!
 
-<Foo />
+<Foobar />

packages/mdx/test/index.test.js

@@ -245,7 +245,9 @@ it('Should not include export wrapper if skipExport is true', async () => {
 
 it('Should recognize components as properties', async () => {
   const result = await mdx('# Hello\n\n<MDX.Foo />')
-  expect(dropWhitespace(result)).toContain('<h1>{`Hello`}</h1> <MDX.Foo />')
+  expect(dropWhitespace(result)).toContain(
+    '<h1>{`Hello`}</h1> <MDX.Foo mdxType="MDX.Foo" />'
+  )
 })
 
 it('Should contain static isMDXComponent() function', async () => {

packages/mdx/test/render.test.js

@@ -18,7 +18,11 @@ const components = {
     React.createElement('h1', {style: {color: 'tomato'}}, children),
   Button: () => React.createElement('button', {}, 'Hello, button!'),
   del: ({children}) =>
-    React.createElement('del', {style: {color: 'crimson'}}, children)
+    React.createElement('del', {style: {color: 'crimson'}}, children),
+  Foo: {
+    Bar: ({children}) =>
+      React.createElement('p', {style: {color: 'salmon'}}, children)
+  }
 }
 
 it('renders using components from context', async () => {
@@ -75,3 +79,9 @@ it('renders delete component from context', async () => {
     '<p>Hello, <del style="color:crimson">world</del> MDX!</p>'
   )
 })
+
+it('renders the jsx element with that uses a member expression', async () => {
+  const result = await renderWithReact(`<Foo.Bar />`, {components})
+
+  expect(result).toContain('<p style="color:salmon"')
+})

packages/react/src/create-element.js

@@ -20,9 +20,21 @@ const MDXCreateElement = forwardRef((props, ref) => {
 
   const components = useMDXComponents(propComponents)
   const type = mdxType
+
+  const getMemberExpressionElement = () => {
+    if (!type.includes('.')) {
+      return
+    }
+
+    const [objName, propName] = type.split('.')
+    const component = (components[objName] || {})[propName]
+    return component
+  }
+
   const Component =
     components[`${parentName}.${type}`] ||
     components[type] ||
+    getMemberExpressionElement() ||
     DEFAULTS[type] ||
     originalType