@web/dev-server-storybook/dist/shared/mdx/transformMdxToCsf.js

Dev server plugin for using storybook with es modules.

import { createRequire } from 'node:module';
import mdx from '@mdx-js/mdx';
import { transformAsync } from '@babel/core';
// @ts-ignore
import { createCompiler } from '@storybook/csf-tools/mdx.js';
import { createError } from '../utils.js';
const require = createRequire(import.meta.url);
const compilers = [createCompiler({})];
export async function transformMdxToCsf(body, filePath) {
    // turn MDX to JSX
    const jsx = `
      import { React, mdx } from '@web/storybook-prebuilt/web-components.js';

      ${await mdx(body, { compilers, filepath: filePath })}
    `;
    // turn JSX to JS
    const babelResult = await transformAsync(jsx, {
        filename: filePath,
        sourceMaps: true,
        plugins: [require.resolve('@babel/plugin-transform-react-jsx')],
    });
    if (!(babelResult === null || babelResult === void 0 ? void 0 : babelResult.code)) {
        throw createError(`Something went wrong while transforming ${filePath}`);
    }
    // rewrite imports
    let result = babelResult.code.replace(/@storybook\/addon-docs\/blocks/g, '@web/storybook-prebuilt/addon-docs/blocks.js');
    result = result.replace(/@storybook\/addon-docs/g, '@web/storybook-prebuilt/addon-docs/blocks.js');
    return result;
}
//# sourceMappingURL=transformMdxToCsf.js.map