Fix rewriting of components for custom elements

packages/mdx/lib/plugin/recma-jsx-rewrite.js

@@ -72,6 +72,8 @@ export function recmaJsxRewrite(options = {}) {
     let createErrorHelper
     /** @type {Scope|null} */
     let currentScope
+    /** @type {Map<string | number, string>} */
+    const idToInvalidComponentName = new Map()
 
     walk(tree, {
       enter(_node) {
@@ -193,16 +195,24 @@ export function recmaJsxRewrite(options = {}) {
               fnScope.tags.push(id)
             }
 
-            node.openingElement.name = toJsxIdOrMemberExpression([
-              '_components',
-              id
-            ])
+            /** @type {(string | number)[]} */
+            let jsxIdExpression = ['_components', id]
+            if (isIdentifierName(id) === false) {
+              let invalidComponentName = idToInvalidComponentName.get(id)
+              if (invalidComponentName === undefined) {
+                invalidComponentName = `_component${idToInvalidComponentName.size}`
+                idToInvalidComponentName.set(id, invalidComponentName)
+              }
+
+              jsxIdExpression = [invalidComponentName]
+            }
+
+            node.openingElement.name =
+              toJsxIdOrMemberExpression(jsxIdExpression)
 
             if (node.closingElement) {
-              node.closingElement.name = toJsxIdOrMemberExpression([
-                '_components',
-                id
-              ])
+              node.closingElement.name =
+                toJsxIdOrMemberExpression(jsxIdExpression)
             }
           }
         }
@@ -259,7 +269,11 @@ export function recmaJsxRewrite(options = {}) {
           /** @type {Array<Statement>} */
           const statements = []
 
-          if (defaults.length > 0 || actual.length > 0) {
+          if (
+            defaults.length > 0 ||
+            actual.length > 0 ||
+            idToInvalidComponentName.size > 0
+          ) {
             if (providerImportSource) {
               importProvider = true
               parameters.push({
@@ -344,6 +358,27 @@ export function recmaJsxRewrite(options = {}) {
               componentsInit = {type: 'Identifier', name: '_components'}
             }
 
+            for (const [
+              _componentsId,
+              _componentName
+            ] of idToInvalidComponentName) {
+              // For component IDs that render invalid JSX (ex. <_components.custom-element>),
+              // Generate a separate variable to index into `_components`
+              // i.e. `const _component0 = _components['custom-element']`
+              //      `return <_component0>...`
+              declarations.push({
+                type: 'VariableDeclarator',
+                id: {type: 'Identifier', name: _componentName},
+                init: {
+                  type: 'MemberExpression',
+                  object: {type: 'Identifier', name: '_components'},
+                  property: {type: 'Literal', value: _componentsId},
+                  computed: true,
+                  optional: false
+                }
+              })
+            }
+
             if (componentsPattern) {
               declarations.push({
                 type: 'VariableDeclarator',

packages/mdx/test/compile.js

@@ -860,11 +860,11 @@ test('jsx', async () => {
       'function _createMdxContent(props) {',
       '  const _components = Object.assign({',
       '    "a-b": "a-b"',
-      '  }, props.components);',
-      '  return <>{<_components.a-b></_components.a-b>}</>;',
+      '  }, props.components), _component0 = _components["a-b"];',
+      '  return <>{<_component0></_component0>}</>;',
       '}',
       'function MDXContent(props = {}) {',
-      '  const {wrapper: MDXLayout} = props.components || ({});',
+      '  const _component0 = _components["a-b"], {wrapper: MDXLayout} = props.components || ({});',
       '  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);',
       '}',
       'export default MDXContent;',