creevey 0.9.0-beta.1 → 0.9.0-beta.3

package/lib/cjs/server/loaders/hooks/svelte.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addSvelteHook = void 0;
+
+var _pirates = require("pirates");
+
+var _logger = require("../../logger");
+
+var _helpers = require("../../storybook/helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const addSvelteHook = async getStory => {
+  const {
+    compile,
+    preprocess
+  } = await Promise.resolve(`${(0, _helpers.resolveFromStorybook)('svelte/compiler')}`).then(s => _interopRequireWildcard(require(s)));
+  const {
+    default: svelteCSFLoader
+  } = await Promise.resolve(`${(0, _helpers.resolveFromStorybook)('@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader')}`).then(s => _interopRequireWildcard(require(s)));
+  (0, _pirates.addHook)((code, filename) => {
+    var _options$compilerOpti;
+
+    const story = getStory();
+    const config = _helpers.storybookConfigRef.current;
+    const {
+      svelteOptions: options = {}
+    } = config; // NOTE: Copy-paste compiling code from https://github.com/sveltejs/svelte-loader/blob/3c4d66d/index.js
+
+    const compileOptions = {
+      filename,
+      css: false,
+      ...options.compilerOptions,
+      format: ((_options$compilerOpti = options.compilerOptions) === null || _options$compilerOpti === void 0 ? void 0 : _options$compilerOpti.format) || 'esm'
+    }; // TODO Can't use preprocess here because it async and hook must be sync
+    // The only way to fix it, load stories by using `import()` instead of require
+    // And write native nodejs `.svelte` resolver https://nodejs.org/api/esm.html#esm_resolve_specifier_context_defaultresolve
+    // const processed = await preprocess(code, options.preprocess, { filename });
+
+    void preprocess;
+    const {
+      js: {
+        code: compiledCode
+      },
+      warnings
+    } = compile(code, compileOptions);
+    warnings.forEach(warning => _logger.logger.warn(warning));
+    if (!story || !filename.startsWith(story)) return compiledCode;
+    return svelteCSFLoader.call({
+      _module: {
+        resource: filename
+      }
+    }, compiledCode); // TODO Extract parameters from `create_fragment` that created by compiler
+    // TODO Write babel transformation for it
+  }, {
+    exts: ['.svelte']
+  });
+};
+
+exports.addSvelteHook = addSvelteHook;

package/lib/cjs/server/loaders/webpack/compile.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = compile;
+
+var _fs = require("fs");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _webpack = _interopRequireDefault(require("webpack"));
+
+var _webpackNodeExternals = _interopRequireDefault(require("webpack-node-externals"));
+
+var _utils = require("../../utils");
+
+var _helpers = require("../../storybook/helpers");
+
+var _types = require("../../../types");
+
+var _messages = require("../../messages");
+
+var _logger = require("../../logger");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+let isInitiated = false;
+let dumpStats = _types.noop;
+
+function handleWebpackBuild(error, stats) {
+  var _stats$toJson$warning;
+
+  dumpStats(stats);
+
+  if (error || !stats || stats.hasErrors()) {
+    (0, _messages.emitWebpackMessage)({
+      type: isInitiated ? 'rebuild failed' : 'fail'
+    });
+    console.error('=> Failed to build the Storybook preview bundle');
+    if (error) return console.error(error.message);
+
+    if (stats && (stats.hasErrors() || stats.hasWarnings())) {
+      var _statsJson$errors, _statsJson$warnings;
+
+      const statsJson = stats.toJson();
+      (_statsJson$errors = statsJson.errors) === null || _statsJson$errors === void 0 ? void 0 : _statsJson$errors.forEach(e => console.error(e));
+      (_statsJson$warnings = statsJson.warnings) === null || _statsJson$warnings === void 0 ? void 0 : _statsJson$warnings.forEach(e => console.error(e));
+      return;
+    }
+  }
+
+  stats === null || stats === void 0 ? void 0 : (_stats$toJson$warning = stats.toJson().warnings) === null || _stats$toJson$warning === void 0 ? void 0 : _stats$toJson$warning.forEach(e => console.warn(e));
+
+  if (!isInitiated) {
+    isInitiated = true;
+    (0, _messages.emitWebpackMessage)({
+      type: 'success'
+    });
+  } else {
+    (0, _messages.emitWebpackMessage)({
+      type: 'rebuild succeeded'
+    });
+  }
+
+  return;
+}
+
+async function applyMdxLoader(config, areAddonsRemoved, loader) {
+  const {
+    mdxLoaders
+  } = await Promise.resolve().then(() => _interopRequireWildcard(require('./mdx-loader')));
+  mdxLoaders.splice(1, 0, loader);
+  const mdxRegexps = [/(stories|story)\.mdx$/]; // NOTE replace md/mdx to null loader
+
+  const mdRegexps = [/\.md$/, /\.mdx$/];
+
+  if (areAddonsRemoved) {
+    var _config$module2, _config$module2$rules;
+
+    mdRegexps.forEach(test => {
+      var _config$module, _config$module$rules;
+
+      return (_config$module = config.module) === null || _config$module === void 0 ? void 0 : (_config$module$rules = _config$module.rules) === null || _config$module$rules === void 0 ? void 0 : _config$module$rules.unshift({
+        test,
+        exclude: /(stories|story)\.mdx$/,
+        use: require.resolve('null-loader')
+      });
+    });
+    (_config$module2 = config.module) === null || _config$module2 === void 0 ? void 0 : (_config$module2$rules = _config$module2.rules) === null || _config$module2$rules === void 0 ? void 0 : _config$module2$rules.unshift({
+      test: /(stories|story)\.mdx$/,
+      use: mdxLoaders
+    });
+  } else {
+    var _config$module3, _config$module3$rules, _config$module4, _config$module4$rules, _config$module5, _config$module5$rules;
+
+    // NOTE Exclude addons' entry points
+    config.entry = Array.isArray(config.entry) ? config.entry.filter(entry => !/@storybook(\/|\\)addon/.test(entry)) : config.entry;
+    (_config$module3 = config.module) === null || _config$module3 === void 0 ? void 0 : (_config$module3$rules = _config$module3.rules) === null || _config$module3$rules === void 0 ? void 0 : _config$module3$rules.flatMap(rule => typeof rule == 'object' && 'test' in rule ? rule : []).filter(rule => mdRegexps.some(test => {
+      var _rule$test;
+
+      return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) == test.toString();
+    })).forEach(rule => rule.use = require.resolve('null-loader'));
+    (_config$module4 = config.module) === null || _config$module4 === void 0 ? void 0 : (_config$module4$rules = _config$module4.rules) === null || _config$module4$rules === void 0 ? void 0 : _config$module4$rules.flatMap(rule => typeof rule == 'object' && 'test' in rule ? rule : []).filter(rule => mdxRegexps.some(test => {
+      var _rule$test2;
+
+      return ((_rule$test2 = rule.test) === null || _rule$test2 === void 0 ? void 0 : _rule$test2.toString()) == test.toString();
+    })).forEach(rule => rule.use = mdxLoaders); // NOTE Exclude source-loader
+
+    config.module = { ...config.module,
+      rules: ((_config$module5 = config.module) === null || _config$module5 === void 0 ? void 0 : (_config$module5$rules = _config$module5.rules) === null || _config$module5$rules === void 0 ? void 0 : _config$module5$rules.flatMap(rule => typeof rule == 'object' && 'test' in rule ? rule : []).filter(rule => !(typeof rule.loader == 'string' && /@storybook(\/|\\)source-loader/.test(rule.loader)))) ?? []
+    };
+  }
+}
+
+async function getWebpackConfigForStorybook_6_2(framework, configDir, outputDir) {
+  const {
+    default: storybookFrameworkOptions
+  } = await Promise.resolve(`${(0, _helpers.resolveFromStorybook)(`@storybook/${framework}/dist/cjs/server/options`)}`).then(s => _interopRequireWildcard(require(s)));
+  const options = {
+    quiet: true,
+    configType: 'PRODUCTION',
+    outputDir,
+    configDir,
+    ...storybookFrameworkOptions
+  }; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+  const {
+    getPreviewBuilder
+  } = await Promise.resolve(`${(0, _helpers.resolveFromStorybook)('@storybook/core-server/dist/cjs/utils/get-preview-builder')}`).then(s => _interopRequireWildcard(require(s))); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+  const {
+    loadAllPresets
+  } = await Promise.resolve(`${(0, _helpers.resolveFromStorybook)('@storybook/core-common')}`).then(s => _interopRequireWildcard(require(s))); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+
+  const builder = await getPreviewBuilder(configDir); // NOTE: Copy-paste from storybook/lib/core-server/src/build-dev.ts
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+
+  const presets = loadAllPresets({
+    corePresets: [// eslint-disable-next-line node/no-missing-require
+    (0, _helpers.resolveFromStorybook)('@storybook/core-server/dist/cjs/presets/common-preset'), // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    ...builder.corePresets, // eslint-disable-next-line node/no-missing-require
+    (0, _helpers.resolveFromStorybook)('@storybook/core-server/dist/cjs/presets/babel-cache-preset')],
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    overridePresets: [...((0, _helpers.hasDocsAddon)() ? [require.resolve('./mdx-loader')] : []), // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    ...builder.overridePresets],
+    ...options
+  }); // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
+
+  return builder.getConfig({ ...options,
+    presets
+  });
+}
+
+async function removeAddons() {
+  try {
+    var _config$core;
+
+    const config = await (0, _helpers.importStorybookConfig)();
+
+    if (((_config$core = config.core) === null || _config$core === void 0 ? void 0 : _config$core.builder) == 'webpack5') {
+      _logger.logger.warn("Be aware Creevey doesn't fully support webpack@5, some feature might not work well");
+    }
+
+    if (config.addons && config.stories) {
+      config.addons = [];
+      return true;
+    }
+  } catch (_) {
+    /* noop */
+  }
+
+  return false;
+}
+
+async function compile(config, {
+  debug,
+  ui
+}) {
+  var _storybookWebpackConf, _storybookWebpackConf2, _storybookWebpackConf3, _extensions$map, _storybookWebpackConf4, _storybookWebpackConf5;
+
+  const storybookFramework = (0, _helpers.getStorybookFramework)();
+
+  const outputDir = _path.default.join((0, _utils.getCreeveyCache)(), 'storybook');
+
+  try {
+    (0, _fs.rmdirSync)(outputDir, {
+      recursive: true
+    });
+  } catch (_) {
+    /* noop */
+  }
+
+  const creeveyLoader = {
+    loader: require.resolve('./creevey-loader'),
+    options: {
+      debug,
+      storybookDir: config.storybookDir
+    }
+  };
+  process.env.NODE_ENV = 'production'; // NOTE Remove addons by monkey patching, only for new config file (main.js)
+
+  const areAddonsRemoved = await removeAddons();
+  const getWebpackConfig = getWebpackConfigForStorybook_6_2;
+  const storybookWebpackConfig = await getWebpackConfig(storybookFramework, config.storybookDir, outputDir);
+  const extensions = ((_storybookWebpackConf = storybookWebpackConfig.resolve) === null || _storybookWebpackConf === void 0 ? void 0 : _storybookWebpackConf.extensions) ?? _utils.extensions;
+  delete storybookWebpackConfig.optimization;
+  storybookWebpackConfig.devtool = false;
+  storybookWebpackConfig.performance = false;
+  storybookWebpackConfig.profile = debug;
+  storybookWebpackConfig.mode = 'development';
+  storybookWebpackConfig.target = 'node';
+  storybookWebpackConfig.output = { ...storybookWebpackConfig.output,
+    filename: 'main.js'
+  }; // NOTE Add hack to allow stories HMR work in nodejs
+
+  Array.isArray(storybookWebpackConfig.entry) && storybookWebpackConfig.entry.unshift(require.resolve('./dummy-hmr')); // NOTE apply creevey loader to output from mdx loader
+
+  if ((0, _helpers.hasDocsAddon)()) await applyMdxLoader(storybookWebpackConfig, areAddonsRemoved, creeveyLoader); // NOTE Add creevey-loader to cut off all unnecessary code except stories meta and tests
+
+  (_storybookWebpackConf2 = storybookWebpackConfig.module) === null || _storybookWebpackConf2 === void 0 ? void 0 : (_storybookWebpackConf3 = _storybookWebpackConf2.rules) === null || _storybookWebpackConf3 === void 0 ? void 0 : _storybookWebpackConf3.unshift({
+    enforce: 'pre',
+    test: new RegExp(`\\.(${(_extensions$map = extensions.map(x => x.slice(1))) === null || _extensions$map === void 0 ? void 0 : _extensions$map.join('|')})$`),
+    exclude: /node_modules/,
+    use: creeveyLoader
+  });
+  const aliases = ((_storybookWebpackConf4 = storybookWebpackConfig.resolve) === null || _storybookWebpackConf4 === void 0 ? void 0 : _storybookWebpackConf4.alias) ?? {};
+  const excluded = ['@storybook/addons', '@storybook/api', '@storybook/channel-postmessage', '@storybook/channels', '@storybook/client-api', '@storybook/client-logger', '@storybook/components', '@storybook/core-events', '@storybook/router', '@storybook/semver', '@storybook/theming']; // NOTE Exclude from bundle all modules from node_modules
+
+  storybookWebpackConfig.externals = [...(Array.isArray(aliases) ? aliases.map(({
+    name,
+    alias
+  }) => [name, alias]) : Object.entries(aliases)).filter(([alias]) => excluded.includes(alias)).flatMap(([, aliasPath]) => aliasPath == false ? [] : (Array.isArray(aliasPath) ? aliasPath : [aliasPath]).map(x => ({
+    [x]: `commonjs ${x}`
+  }))), // NOTE Replace `@storybook/${framework}` to ../../storybook.ts
+  {
+    [`@storybook/${storybookFramework}`]: `commonjs ${require.resolve('../../storybook/entry')}`
+  }, (0, _webpackNodeExternals.default)({
+    includeAbsolutePaths: true,
+    allowlist: /(webpack|dummy-hmr|generated-stories-entry|generated-config-entry|generated-other-entry)/
+  }), // TODO Don't work well with monorepos
+  (0, _webpackNodeExternals.default)({
+    modulesDir: (0, _helpers.resolveFromStorybook)('@storybook/core-client').split('@storybook')[0],
+    includeAbsolutePaths: true,
+    allowlist: /(webpack|dummy-hmr|generated-stories-entry|generated-config-entry|generated-other-entry)/
+  })]; // NOTE Exclude some plugins
+
+  const excludedPlugins = ['DocgenPlugin', 'ForkTsCheckerWebpackPlugin'];
+  storybookWebpackConfig.plugins = (_storybookWebpackConf5 = storybookWebpackConfig.plugins) === null || _storybookWebpackConf5 === void 0 ? void 0 : _storybookWebpackConf5.filter(plugin => !excludedPlugins.includes(plugin.constructor.name));
+  const storybookWebpackCompiler = (0, _webpack.default)(storybookWebpackConfig);
+
+  if (debug) {
+    dumpStats = stats => {
+      if (!stats) return;
+      (0, _fs.writeFile)(_path.default.join(config.reportDir, 'stats.json'), JSON.stringify(stats.toJson(), null, 2), _types.noop);
+    };
+  }
+
+  if (ui) {
+    const watcher = storybookWebpackCompiler.watch({}, handleWebpackBuild);
+    (0, _messages.subscribeOn)('shutdown', () => watcher.close(_types.noop));
+  } else {
+    storybookWebpackCompiler.run(handleWebpackBuild);
+  }
+}

package/lib/cjs/server/loaders/webpack/creevey-loader.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loader;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _codeFrame = require("@babel/code-frame");
+
+var _loaderUtils = require("loader-utils");
+
+var _schemaUtils = require("schema-utils");
+
+var _parser = require("@babel/parser");
+
+var _traverse = _interopRequireDefault(require("@babel/traverse"));
+
+var _generator = _interopRequireDefault(require("@babel/generator"));
+
+var _helpers = require("../babel/helpers");
+
+var _logger = require("../../logger");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function transform(ast) {
+  (0, _traverse.default)(ast, { ..._helpers.commonVisitor,
+    ...(fileType == _helpers.FileType.Preview ? _helpers.previewVisitor : undefined),
+    ...(fileType == _helpers.FileType.Story ? _helpers.storyVisitor : undefined),
+    ...(isMDX ? _helpers.mdxVisitor : undefined)
+  }, undefined, {
+    resourcePath,
+    fileType,
+    isMDX,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visitedTopPaths: new Set(),
+    visitedBindings: new Set(),
+    reexportedStories
+  });
+  return (0, _generator.default)(ast, {
+    retainLines: true
+  }).code;
+}
+
+function toPosix(filePath) {
+  return filePath.split(_path.default.win32.sep).join(_path.default.posix.sep).replace(/^[a-z]:/i, '');
+}
+
+function getIssuerResource(context) {
+  var _context$_module, _context$_module$issu;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+  return (_context$_module = context._module) === null || _context$_module === void 0 ? void 0 : (_context$_module$issu = _context$_module.issuer) === null || _context$_module$issu === void 0 ? void 0 : _context$_module$issu.resource;
+}
+
+function getIssuerConstructorName(context) {
+  var _context$_module2, _context$_module2$iss, _context$_module2$iss2;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+  return (_context$_module2 = context._module) === null || _context$_module2 === void 0 ? void 0 : (_context$_module2$iss = _context$_module2.issuer) === null || _context$_module2$iss === void 0 ? void 0 : (_context$_module2$iss2 = _context$_module2$iss.constructor) === null || _context$_module2$iss2 === void 0 ? void 0 : _context$_module2$iss2.name;
+}
+
+function isEntry(context) {
+  return getIssuerConstructorName(context) == 'MultiModule';
+}
+
+function isPreview(context, options) {
+  const {
+    dir: resourceDir,
+    name: resourceName
+  } = _path.default.posix.parse(toPosix(context.resourcePath));
+
+  const storybookDir = typeof options.storybookDir == 'string' ? toPosix(options.storybookDir) : '';
+  const isConfigFile = resourceDir == storybookDir && (resourceName == 'preview' || resourceName == 'config');
+  const issuerResource = getIssuerResource(context);
+  return Boolean(issuerResource && entries.has(issuerResource) && isConfigFile);
+}
+
+function isStoryFile(context) {
+  var _reexportedStories$ge, _context$_module3;
+
+  const issuerResource = getIssuerResource(context);
+  return getIssuerConstructorName(context) == 'ContextModule' || // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  Boolean(issuerResource && ((_reexportedStories$ge = reexportedStories.get(issuerResource)) === null || _reexportedStories$ge === void 0 ? void 0 : _reexportedStories$ge.has((_context$_module3 = context._module) === null || _context$_module3 === void 0 ? void 0 : _context$_module3.rawRequest))) || issuerResource == previewPath && _path.default.posix.parse(toPosix(previewPath)).name == 'config';
+} // NOTE: non-story files before preview => issuer.resource is entry
+
+
+const schema = {
+  type: 'object',
+  properties: {
+    debug: {
+      type: 'boolean'
+    },
+    storybookDir: {
+      type: 'string'
+    }
+  }
+};
+let fileType = _helpers.FileType.Invalid;
+let isMDX = false;
+let previewPath = '';
+let resourcePath = '';
+const entries = new Set();
+const stories = new Set();
+const reexportedStories = new Map();
+
+const isTest = () => process.env.__CREEVEY_ENV__ == 'test';
+
+const defaultOptions = {
+  get debug() {
+    return isTest();
+  },
+
+  storybookDir: process.cwd()
+};
+
+function loader(source) {
+  const options = this ? (0, _loaderUtils.getOptions)(this) || defaultOptions : defaultOptions;
+  (0, _schemaUtils.validate)(schema, options, {
+    name: 'Creevey Stories Loader'
+  });
+  fileType = _helpers.FileType.Invalid;
+
+  if (this) {
+    const issuerResource = getIssuerResource(this);
+    resourcePath = this.resourcePath;
+
+    if (isStoryFile(this)) {
+      fileType = _helpers.FileType.Story;
+      isMDX = _path.default.parse(resourcePath).ext == '.mdx';
+      stories.add(this.resourcePath);
+    } else if (isPreview(this, options)) {
+      fileType = _helpers.FileType.Preview;
+      previewPath = this.resourcePath;
+    } else if (isEntry(this)) {
+      fileType = _helpers.FileType.Entry;
+      entries.add(this.resourcePath);
+      return source;
+    } else if (issuerResource && stories.has(issuerResource) && options.debug) {
+      _logger.logger.warn('Trying to transform possible non-story file', this.resourcePath, 'Please check the', issuerResource); // TODO Add link to docs, how creevey works and what user should do in this situation
+
+    }
+  }
+
+  if (isTest() && !Number.isNaN(Number(process.env.CREEVEY_LOADER_FILE_TYPE))) {
+    fileType = Number(process.env.CREEVEY_LOADER_FILE_TYPE);
+  }
+
+  try {
+    const ast = (0, _parser.parse)(source, {
+      sourceType: 'module',
+      plugins: ['classProperties', 'decorators-legacy', 'jsx', 'typescript']
+    });
+    return transform(ast);
+  } catch (error) {
+    this && _logger.logger.warn('Failed to transform file', this.resourcePath);
+
+    if (typeof error == 'object' && error && 'loc' in error) {
+      _logger.logger.warn((0, _codeFrame.codeFrameColumns)(source, {
+        start: error.loc
+      }, {
+        highlightCode: true
+      }));
+    } else {
+      _logger.logger.warn(error);
+    }
+
+    return source;
+  }
+}

package/lib/cjs/server/loaders/webpack/dummy-hmr.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+global.__CREEVEY_HMR_DATA__ = global.__CREEVEY_HMR_DATA__ ?? {};
+Object.entries(__webpack_require__.m).forEach(([key, moduleFn]) => {
+  __webpack_require__.m[key] = new Proxy(moduleFn, {
+    apply(target, thisArg, args) {
+      const [module] = args;
+      const {
+        data
+      } = global.__CREEVEY_HMR_DATA__[module.i] = global.__CREEVEY_HMR_DATA__[module.i] ?? {
+        data: {}
+      };
+      Object.assign(module, {
+        hot: {
+          accept() {
+            /* noop */
+          },
+
+          get data() {
+            return data;
+          },
+
+          dispose(callback) {
+            global.__CREEVEY_HMR_DATA__[module.i].callback = callback;
+          }
+
+        }
+      });
+      return target.apply(thisArg, args);
+    }
+
+  });
+});
+var _default = {};
+exports.default = _default;

package/lib/cjs/server/loaders/webpack/mdx-loader.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mdxOptions = exports.mdxLoaders = void 0;
+exports.webpack = webpack;
+
+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.resolveFromStorybookBuilderWebpack4)('babel-loader'),
+    options: createBabelOptions({
+      babelOptions,
+      mdxBabelOptions,
+      configureJSX
+    })
+  }, {
+    loader: (0, _helpers.resolveFromStorybookAddonDocs)('@mdx-js/loader'),
+    options: mdxOptions(options)
+  }];
+  return webpackConfig;
+}

package/lib/cjs/server/loaders/webpack/start.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startWebpackCompiler = startWebpackCompiler;
+
+var _cluster = _interopRequireDefault(require("cluster"));
+
+var _types = require("../../../types");
+
+var _messages = require("../../messages");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function startWebpackCompiler() {
+  return new Promise((resolve, reject) => {
+    _cluster.default.setupMaster({
+      args: ['--webpack', ...process.argv.slice(2)]
+    });
+
+    const webpackCompiler = _cluster.default.fork();
+
+    webpackCompiler.on('message', message => {
+      if (!(0, _types.isWebpackMessage)(message)) return;
+      Object.values(_cluster.default.workers ?? {}).filter(worker => worker != webpackCompiler).forEach(worker => worker === null || worker === void 0 ? void 0 : worker.send(message));
+
+      switch (message.type) {
+        case 'success':
+          return resolve();
+
+        case 'fail':
+          return reject();
+
+        case 'rebuild succeeded':
+        case 'rebuild failed':
+          return (0, _messages.emitWebpackMessage)(message);
+      }
+    });
+  });
+}