Fix components used directly and as objects

Closes GH-36.
wooorm · Apr 11, 2021 · 9011b9b · 9011b9b
1 parent e3d387d
commit 9011b9b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/lib/plugin/recma-jsx-rewrite.js b/lib/plugin/recma-jsx-rewrite.js
@@ -173,14 +173,18 @@ export function recmaJsxRewrite(options = {}) {
         }
 
         for (name of scope.objects) {
-          actual.push(
-            u('Property', {
-              kind: 'init',
-              shorthand: true,
-              key: u('Identifier', {name}),
-              value: u('Identifier', {name})
-            })
-          )
+          // In some cases, a component is used directly (`<X>`) but it’s also
+          // used as an object (`<X.Y>`).
+          if (!actual.some((d) => d.value.name === name)) {
+            actual.push(
+              u('Property', {
+                kind: 'init',
+                shorthand: true,
+                key: u('Identifier', {name}),
+                value: u('Identifier', {name})
+              })
+            )
+          }
         }
 
         if (defaults.length > 0 || actual.length > 0) {

diff --git a/test/core.js b/test/core.js
@@ -205,6 +205,27 @@ test('xdm', async function (t) {
     'should support passing in `components` (for members) to `MDXContent`'
   )
 
+  t.equal(
+    renderToStaticMarkup(
+      React.createElement(await run(compileSync('<X /> and <X.Y />')), {
+        components: {
+          X: Object.assign(
+            function (props) {
+              return React.createElement('span', props, '!')
+            },
+            {
+              Y(props) {
+                return React.createElement('span', props, '?')
+              }
+            }
+          )
+        }
+      })
+    ),
+    '<p><span>!</span> and <span>?</span></p>',
+    'should support passing in `components` directly and as an object w/ members'
+  )
+
   t.equal(
     renderToStaticMarkup(
       React.createElement(await run(compileSync('*a*')), {