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
-}; -` + - 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
+ }; +` + 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! + + 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! + + 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
; - }; - 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
- }; + console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\") + return
+ }; 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(`
`, {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
-}; + console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\") + return
+ }; const Baz = makeShortcode(\\"Baz\\"); const Paragraph = makeShortcode(\\"Paragraph\\"); const Button = makeShortcode(\\"Button\\");