creevey 0.9.0-beta.1 → 0.9.0-beta.10

package/lib/esm/server/loaders/hooks/mdx.js

@@ -0,0 +1,15 @@
+import { addHook } from 'pirates';
+import { resolveFromStorybookAddonDocs } from '../../storybook/helpers';
+export const addMDXHook = async getStory => {
+  const mdx = (await import(resolveFromStorybookAddonDocs('@mdx-js/mdx'))).default;
+  const {
+    mdxOptions
+  } = await import('../webpack/mdx-loader');
+  addHook((code, filename) => {
+    const story = getStory();
+    if (!story || !filename.startsWith(story)) return code;
+    return mdx.sync(code, mdxOptions());
+  }, {
+    exts: ['.mdx']
+  });
+};

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

@@ -0,0 +1,49 @@
+import { addHook } from 'pirates';
+import { logger } from '../../logger';
+import { resolveFromStorybook, storybookConfigRef } from '../../storybook/helpers';
+export const addSvelteHook = async getStory => {
+  const {
+    compile,
+    preprocess
+  } = await import(resolveFromStorybook('svelte/compiler'));
+  const {
+    default: svelteCSFLoader
+  } = await import(resolveFromStorybook('@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader'));
+  addHook((code, filename) => {
+    var _options$compilerOpti;
+
+    const story = getStory();
+    const config = 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.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']
+  });
+};

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

@@ -0,0 +1,246 @@
+import { rmdirSync, writeFile } from 'fs';
+import path from 'path';
+import webpack from 'webpack';
+import nodeExternals from 'webpack-node-externals';
+import { extensions as fallbackExtensions, getCreeveyCache } from '../../utils';
+import { getStorybookFramework, hasDocsAddon, importStorybookConfig, resolveFromStorybook } from '../../storybook/helpers';
+import { noop } from '../../../types';
+import { emitWebpackMessage, subscribeOn } from '../../messages';
+import { logger } from '../../logger';
+let isInitiated = false;
+let dumpStats = noop;
+
+function handleWebpackBuild(error, stats) {
+  var _stats$toJson$warning;
+
+  dumpStats(stats);
+
+  if (error || !stats || stats.hasErrors()) {
+    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;
+    emitWebpackMessage({
+      type: 'success'
+    });
+  } else {
+    emitWebpackMessage({
+      type: 'rebuild succeeded'
+    });
+  }
+
+  return;
+}
+
+async function applyMdxLoader(config, areAddonsRemoved, loader) {
+  const {
+    mdxLoaders
+  } = await import('./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 import(resolveFromStorybook(`@storybook/${framework}/dist/cjs/server/options`));
+  const options = {
+    quiet: true,
+    configType: 'PRODUCTION',
+    outputDir,
+    configDir,
+    ...storybookFrameworkOptions
+  }; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+  const {
+    getPreviewBuilder
+  } = await import(resolveFromStorybook('@storybook/core-server/dist/cjs/utils/get-preview-builder')); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+  const {
+    loadAllPresets
+  } = await import(resolveFromStorybook('@storybook/core-common')); // 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
+    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
+    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: [...(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 importStorybookConfig();
+
+    if (((_config$core = config.core) === null || _config$core === void 0 ? void 0 : _config$core.builder) == 'webpack5') {
+      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;
+}
+
+export default async function compile(config, {
+  debug,
+  ui
+}) {
+  var _storybookWebpackConf, _storybookWebpackConf2, _storybookWebpackConf3, _extensions$map, _storybookWebpackConf4, _storybookWebpackConf5;
+
+  const storybookFramework = getStorybookFramework();
+  const outputDir = path.join(getCreeveyCache(), 'storybook');
+
+  try {
+    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) ?? fallbackExtensions;
+  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 (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')}`
+  }, nodeExternals({
+    includeAbsolutePaths: true,
+    allowlist: /(webpack|dummy-hmr|generated-stories-entry|generated-config-entry|generated-other-entry)/
+  }), // TODO Don't work well with monorepos
+  nodeExternals({
+    modulesDir: 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 = webpack(storybookWebpackConfig);
+
+  if (debug) {
+    dumpStats = stats => {
+      if (!stats) return;
+      writeFile(path.join(config.reportDir, 'stats.json'), JSON.stringify(stats.toJson(), null, 2), noop);
+    };
+  }
+
+  if (ui) {
+    const watcher = storybookWebpackCompiler.watch({}, handleWebpackBuild);
+    subscribeOn('shutdown', () => watcher.close(noop));
+  } else {
+    storybookWebpackCompiler.run(handleWebpackBuild);
+  }
+}

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

@@ -0,0 +1,152 @@
+import path from 'path';
+import { codeFrameColumns } from '@babel/code-frame';
+import { getOptions } from 'loader-utils';
+import { validate } from 'schema-utils';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import { commonVisitor, mdxVisitor, previewVisitor, storyVisitor, FileType } from '../babel/helpers';
+import { logger } from '../../logger';
+
+function transform(ast) {
+  traverse(ast, { ...commonVisitor,
+    ...(fileType == FileType.Preview ? previewVisitor : undefined),
+    ...(fileType == FileType.Story ? storyVisitor : undefined),
+    ...(isMDX ? mdxVisitor : undefined)
+  }, undefined, {
+    resourcePath,
+    fileType,
+    isMDX,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    visitedTopPaths: new Set(),
+    visitedBindings: new Set(),
+    reexportedStories
+  });
+  return generate(ast, {
+    retainLines: true
+  }).code;
+}
+
+function toPosix(filePath) {
+  return filePath.split(path.win32.sep).join(path.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.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.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 = 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()
+};
+export default function loader(source) {
+  const options = this ? getOptions(this) || defaultOptions : defaultOptions;
+  validate(schema, options, {
+    name: 'Creevey Stories Loader'
+  });
+  fileType = FileType.Invalid;
+
+  if (this) {
+    const issuerResource = getIssuerResource(this);
+    resourcePath = this.resourcePath;
+
+    if (isStoryFile(this)) {
+      fileType = FileType.Story;
+      isMDX = path.parse(resourcePath).ext == '.mdx';
+      stories.add(this.resourcePath);
+    } else if (isPreview(this, options)) {
+      fileType = FileType.Preview;
+      previewPath = this.resourcePath;
+    } else if (isEntry(this)) {
+      fileType = FileType.Entry;
+      entries.add(this.resourcePath);
+      return source;
+    } else if (issuerResource && stories.has(issuerResource) && options.debug) {
+      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 = parse(source, {
+      sourceType: 'module',
+      plugins: ['classProperties', 'decorators-legacy', 'jsx', 'typescript']
+    });
+    return transform(ast);
+  } catch (error) {
+    this && logger.warn('Failed to transform file', this.resourcePath);
+
+    if (typeof error == 'object' && error && 'loc' in error) {
+      logger.warn(codeFrameColumns(source, {
+        start: error.loc
+      }, {
+        highlightCode: true
+      }));
+    } else {
+      logger.warn(error);
+    }
+
+    return source;
+  }
+}

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

@@ -0,0 +1,32 @@
+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);
+    }
+
+  });
+});
+export default {};

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

@@ -0,0 +1,58 @@
+/* eslint-disable */
+
+/* Copy-paste from storybook/addons/docs/src/frameworks/common/preset.ts */
+import { resolveFromStorybook, resolveFromStorybookAddonDocs, resolveFromStorybookBuilderWebpack4 } from '../../storybook/helpers';
+export 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'
+
+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 = [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(resolveFromStorybookAddonDocs(plugin)));
+
+const createCompiler = require(resolveFromStorybook('@storybook/addon-docs/mdx-compiler-plugin'));
+
+export const mdxOptions = (options = {}) => ({
+  compilers: [createCompiler(options)],
+  remarkPlugins
+});
+export 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;
+  mdxLoaders = [{
+    loader: resolveFromStorybookBuilderWebpack4('babel-loader'),
+    options: createBabelOptions({
+      babelOptions,
+      mdxBabelOptions,
+      configureJSX
+    })
+  }, {
+    loader: resolveFromStorybookAddonDocs('@mdx-js/loader'),
+    options: mdxOptions(options)
+  }];
+  return webpackConfig;
+}

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

@@ -0,0 +1,27 @@
+import cluster from 'cluster';
+import { isWebpackMessage } from '../../../types';
+import { emitWebpackMessage } from '../../messages';
+export function startWebpackCompiler() {
+  return new Promise((resolve, reject) => {
+    cluster.setupMaster({
+      args: ['--webpack', ...process.argv.slice(2)]
+    });
+    const webpackCompiler = cluster.fork();
+    webpackCompiler.on('message', message => {
+      if (!isWebpackMessage(message)) return;
+      Object.values(cluster.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 emitWebpackMessage(message);
+      }
+    });
+  });
+}

package/lib/esm/server/logger.js

@@ -0,0 +1,20 @@
+import chalk from 'chalk';
+import { default as Logger } from 'loglevel';
+import prefix from 'loglevel-plugin-prefix';
+export { getLogger } from 'loglevel';
+export const colors = {
+  TRACE: chalk.magenta,
+  DEBUG: chalk.cyan,
+  INFO: chalk.blue,
+  WARN: chalk.yellow,
+  ERROR: chalk.red
+};
+prefix.reg(Logger);
+prefix.apply(Logger, {
+  format(level, name = 'Creevey') {
+    const levelColor = colors[level.toUpperCase()];
+    return `[${name}:${chalk.gray(process.pid)}] ${levelColor(level)} =>`;
+  }
+
+});
+export const logger = Logger.getLogger('Creevey');

package/lib/esm/server/master/api.js

@@ -0,0 +1,60 @@
+import WebSocket from 'ws';
+import { logger } from '../logger';
+
+function broadcast(wss, message) {
+  wss.clients.forEach(ws => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  });
+}
+
+export default function creeveyApi(runner) {
+  return {
+    subscribe(wss) {
+      runner.on('update', payload => broadcast(wss, {
+        type: 'update',
+        payload
+      }));
+    },
+
+    handleMessage(ws, message) {
+      if (typeof message != 'string') {
+        logger.info('unhandled message', message);
+        return;
+      }
+
+      const command = JSON.parse(message);
+
+      switch (command.type) {
+        case 'status':
+          {
+            ws.send(JSON.stringify({
+              type: 'status',
+              payload: runner.status
+            }));
+            return;
+          }
+
+        case 'start':
+          {
+            runner.start(command.payload);
+            return;
+          }
+
+        case 'stop':
+          {
+            runner.stop();
+            return;
+          }
+
+        case 'approve':
+          {
+            void runner.approve(command.payload);
+            return;
+          }
+      }
+    }
+
+  };
+}