Make short codes function conditional. (#1088)

* Make short codes function conditional.

* Fix failing tests

Co-authored-by: John Otander <johnotander@gmail.com>

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

@@ -165,20 +165,23 @@ MDXContent.isMDXComponent = true`
     const jsxNames = allJsxNames.filter(name => name !== 'MDXLayout')
 
     const importExportNames = importNames.concat(exportNames)
-    const fakedModulesForGlobalScope =
-      `const makeShortcode = name => function MDXDefaultShortcode(props) {
-  console.warn("Component '" + name + "' was not imported, exported, or provided by MDXProvider as global scope")
-  return <div {...props}/>
-};
-` +
-      uniq(jsxNames)
-        .filter(name => !importExportNames.includes(name))
-        .map(name => `const ${name} = makeShortcode("${name}");`)
-        .join('\n')
+    const shortCodeDef = `const makeShortcode = name => function MDXDefaultShortcode(props) {
+      console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
+      return <div {...props}/>
+    };
+`
+    const fakedModulesForGlobalScope = uniq(jsxNames)
+      .filter(name => !importExportNames.includes(name))
+      .map(name => `const ${name} = makeShortcode("${name}");`)
+      .join('\n')
+    const fakedModules =
+      (fakedModulesForGlobalScope &&
+        [shortCodeDef, fakedModulesForGlobalScope].join('')) ||
+      ''
 
     const moduleBase = `${importStatements}
 ${exportStatementsPostMdxTypeProps}
-${fakedModulesForGlobalScope}
+${fakedModules}
 ${layoutProps}
 ${mdxLayout}`
 

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

@@ -0,0 +1,3 @@
+# Hello, world!
+
+<Foo />

packages/mdx/test/fixtures/without-shortcode.mdx

@@ -0,0 +1,5 @@
+import Foo from 'baz'
+
+# Hello, world!
+
+<Foo />

packages/mdx/test/index.test.js

@@ -16,6 +16,14 @@ const fixtureBlogPost = fs.readFileSync(
   path.join(__dirname, './fixtures/blog-post.mdx')
 )
 
+const fixtureWithoutShortcode = fs.readFileSync(
+  path.join(__dirname, './fixtures/without-shortcode.mdx')
+)
+
+const fixtureWithShortcode = fs.readFileSync(
+  path.join(__dirname, './fixtures/with-shortcode.mdx')
+)
+
 it('Should output parseable JSX', async () => {
   const result = await mdx('Hello World')
 
@@ -44,16 +52,6 @@ it('Should match sample blog post snapshot', async () => {
   expect(prettier.format(result, {parser: 'babel'})).toMatchInlineSnapshot(`
     "/* @jsx mdx */
 
-    const makeShortcode = (name) =>
-      function MDXDefaultShortcode(props) {
-        console.warn(
-          \\"Component '\\" +
-            name +
-            \\"' was not imported, exported, or provided by MDXProvider as global scope\\"
-        );
-        return <div {...props} />;
-      };
-
     const layoutProps = {};
     const MDXLayout = \\"wrapper\\";
     export default function MDXContent({ components, ...props }) {
@@ -333,9 +331,9 @@ test('Should handle layout props', () => {
       authors: ['fred', 'sally']
     };
     const makeShortcode = name => function MDXDefaultShortcode(props) {
-      console.warn(\\"Component '\\" + name + \\"' was not imported, exported, or provided by MDXProvider as global scope\\")
-      return <div {...props}/>
-    };
+          console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+          return <div {...props}/>
+        };
     const Foo = makeShortcode(\\"Foo\\");
     const Bar = makeShortcode(\\"Bar\\");
     const layoutProps = {
@@ -420,6 +418,16 @@ test('Should handle layout props', () => {
   `)
 })
 
+test('Should not add shortCodes definition if no shortCodes present', async () => {
+  const result = await mdx(fixtureWithoutShortcode)
+  expect(result).not.toContain('const makeShortcode = name')
+})
+
+test('Should contain shortcode definition', async () => {
+  const result = await mdx(fixtureWithShortcode)
+  expect(result).toContain('const makeShortcode = name')
+})
+
 it('Should include file name in Babel error', async () => {
   try {
     await mdx(`<br>`, {filepath: '/path/to/file.mdx'})

packages/remark-mdx/test/__snapshots__/test.js.snap

@@ -5,9 +5,9 @@ exports[`correctly transpiles 1`] = `
 
 export { Baz } from './foo';
 const makeShortcode = name => function MDXDefaultShortcode(props) {
-  console.warn(\\"Component '\\" + name + \\"' was not imported, exported, or provided by MDXProvider as global scope\\")
-  return <div {...props}/>
-};
+      console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+      return <div {...props}/>
+    };
 const Baz = makeShortcode(\\"Baz\\");
 const Paragraph = makeShortcode(\\"Paragraph\\");
 const Button = makeShortcode(\\"Button\\");