Merge pull request #20 from storybookjs/shilman/move-mdx-import-from-…

…loader Move mdx import out of loader into compile
storybookjs · Feb 13, 2023 · f408fc9 · f408fc9
2 parents d58cb03 + d7a3376
commit f408fc9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/loader.js b/loader.js
@@ -1,4 +1,3 @@
-const { dirname } = require('path');
 const { compile } = require('./dist/index');
 
 // FIXME: we shouldn't be doing this, but we need it
@@ -9,10 +8,8 @@ const { compile } = require('./dist/index');
 // Which generates the code:
 //
 // export const foo = () => <div>hi</div>;
-const mdxReactPackage = dirname(require.resolve('@mdx-js/react/package.json'));
 const DEFAULT_RENDERER = `
 import React from 'react';
-import { mdx } from '${mdxReactPackage}';
 `;
 
 // Lifted from MDXv1 loader

diff --git a/src/sb-mdx-plugin.test.ts b/src/sb-mdx-plugin.test.ts
@@ -31,10 +31,13 @@ function clean(content: any) {
 }
 
 function compile(content: any) {
-  const code = mdx.sync(content, {
-    // filepath: filePath,
-    compilers: [createCompiler({})],
-  });
+  const code = mdx
+    .sync(content, {
+      // filepath: filePath,
+      compilers: [createCompiler({})],
+    })
+    // sanitize resolved path so test is same on any machine
+    .replace(/import { mdx } from (.*)/, "import { mdx } from '@mdx-js/react';");
 
   return prettier
     .format(code, {
@@ -971,6 +974,7 @@ describe('docs-mdx-compiler-plugin', () => {
     ).toMatchInlineSnapshot(`
       /* @jsxRuntime classic */
       /* @jsx mdx */
+      import { mdx } from '@mdx-js/react';
       import { assertIsFn, AddContext } from '@storybook/addon-docs';
 
       import { Meta } from '@storybook/addon-docs';

diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts
@@ -1,3 +1,4 @@
+import { dirname } from 'path';
 import { toJSX } from '@mdx-js/mdx/mdx-hast-to-jsx';
 import { parse, parseExpression } from '@babel/parser';
 import * as t from '@babel/types';
@@ -508,8 +509,10 @@ function extractExports(root: Element, options: CompilerOptions) {
   metaExport.includeStories = JSON.stringify(includeStories);
 
   const defaultJsx = toJSX(root, {}, { ...options, skipExport: true });
+  const mdxReactPackage = dirname(require.resolve('@mdx-js/react/package.json'));
   const fullJsx = [
-    'import { assertIsFn, AddContext } from "@storybook/addon-docs";',
+    `import { mdx } from '${mdxReactPackage}';
+     import { assertIsFn, AddContext } from "@storybook/addon-docs";`,
     defaultJsx,
     ...storyExports,
     `const componentMeta = ${stringifyMeta(metaExport)};`,