creevey/lib/server/loaders/webpack/mdx-loader.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.webpack = webpack;
exports.mdxOptions = exports.mdxLoaders = void 0;

var _helpers = require("../../storybook/helpers");

/* eslint-disable */

/* Copy-paste from storybook/addons/docs/src/frameworks/common/preset.ts */
let mdxLoaders = []; // for frameworks that are not working with react, we need to configure
// the jsx to transpile mdx, for now there will be a flag for that
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'

exports.mdxLoaders = mdxLoaders;

function createBabelOptions({
  babelOptions,
  mdxBabelOptions,
  configureJSX
}) {
  const babelPlugins = (mdxBabelOptions === null || mdxBabelOptions === void 0 ? void 0 : mdxBabelOptions.plugins) || (babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [];
  const jsxPlugin = [(0, _helpers.resolveFromStorybookAddonDocs)('@babel/plugin-transform-react-jsx'), {
    pragma: 'React.createElement',
    pragmaFrag: 'React.Fragment'
  }];
  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
  return {
    // don't use the root babelrc by default (users can override this in mdxBabelOptions)
    babelrc: false,
    configFile: false,
    ...babelOptions,
    ...mdxBabelOptions,
    plugins
  };
}

const remarkPlugins = ['remark-slug', 'remark-external-links'].map(plugin => require((0, _helpers.resolveFromStorybookAddonDocs)(plugin)));

const createCompiler = require((0, _helpers.resolveFromStorybook)('@storybook/addon-docs/mdx-compiler-plugin'));

const mdxOptions = (options = {}) => ({
  compilers: [createCompiler(options)],
  remarkPlugins
});

exports.mdxOptions = mdxOptions;

function webpack(webpackConfig = {}, options = {}) {
  // it will reuse babel options that are already in use in storybook
  // also, these babel options are chained with other presets.
  const {
    babelOptions,
    mdxBabelOptions,
    configureJSX = true
  } = options;
  exports.mdxLoaders = mdxLoaders = [{
    loader: (0, _helpers.isStorybookVersionLessThan)(6, 2) ? (0, _helpers.resolveFromStorybookCore)('babel-loader') : (0, _helpers.resolveFromStorybookBuilderWebpack4)('babel-loader'),
    options: createBabelOptions({
      babelOptions,
      mdxBabelOptions,
      configureJSX
    })
  }, {
    loader: (0, _helpers.resolveFromStorybookAddonDocs)('@mdx-js/loader'),
    options: mdxOptions(options)
  }];
  return webpackConfig;
}