From 7454a6931e81ab67596948239f2769a07426708b Mon Sep 17 00:00:00 2001
From: Ankeet Maini <ankeet.maini@gmail.com>
Date: Thu, 30 Jul 2020 03:15:09 +0530
Subject: [PATCH] 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               | 25 ++++++++------
 packages/mdx/test/fixtures/with-shortcode.mdx |  3 ++
 .../mdx/test/fixtures/without-shortcode.mdx   |  5 +++
 packages/mdx/test/index.test.js               | 34 ++++++++++++-------
 .../test/__snapshots__/test.js.snap           |  6 ++--
 5 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 packages/mdx/test/fixtures/with-shortcode.mdx
 create mode 100644 packages/mdx/test/fixtures/without-shortcode.mdx

diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index 4a6541502..0c0dbc30e 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/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}`
 
diff --git a/packages/mdx/test/fixtures/with-shortcode.mdx b/packages/mdx/test/fixtures/with-shortcode.mdx
new file mode 100644
index 000000000..9b311ac38
--- /dev/null
+++ b/packages/mdx/test/fixtures/with-shortcode.mdx
@@ -0,0 +1,3 @@
+# Hello, world!
+
+<Foo />
diff --git a/packages/mdx/test/fixtures/without-shortcode.mdx b/packages/mdx/test/fixtures/without-shortcode.mdx
new file mode 100644
index 000000000..19a511e24
--- /dev/null
+++ b/packages/mdx/test/fixtures/without-shortcode.mdx
@@ -0,0 +1,5 @@
+import Foo from 'baz'
+
+# Hello, world!
+
+<Foo />
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
index 25bb3915a..0f994c2ac 100644
--- a/packages/mdx/test/index.test.js
+++ b/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'})
diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
index 3dd0b2012..c91c155e7 100644
--- a/packages/remark-mdx/test/__snapshots__/test.js.snap
+++ b/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\\");