Skip to content

Commit

Permalink
Move mdx import out of loader into compile
Browse files Browse the repository at this point in the history
To simplify the vite implementation of MDX1
  • Loading branch information
shilman committed Feb 13, 2023
1 parent d58cb03 commit d7a3376
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 8 deletions.
3 changes: 0 additions & 3 deletions loader.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const { dirname } = require('path');
const { compile } = require('./dist/index');

// FIXME: we shouldn't be doing this, but we need it
Expand All @@ -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
Expand Down
12 changes: 8 additions & 4 deletions src/sb-mdx-plugin.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -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';
Expand Down
5 changes: 4 additions & 1 deletion src/sb-mdx-plugin.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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)};`,
Expand Down

0 comments on commit d7a3376

Please sign in to comment.