@storybook/builder-webpack5 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.overridePresets = exports.corePresets = exports.build = exports.bail = exports.start = exports.executor = exports.getConfig = void 0;
+exports.start = exports.overridePresets = exports.getConfig = exports.executor = exports.corePresets = exports.build = exports.bail = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -19,18 +19,31 @@ var _coreCommon = require("@storybook/core-common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var compilation;
 var reject;
+var executor = {
+  get: async function (options) {
+    var _await$options$preset;
+
+    var version = (await options.presets.apply('webpackVersion')) || '5';
+    var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || _webpack.default;
+    (0, _coreCommon.checkWebpackVersion)({
+      version: version
+    }, '5', 'builder-webpack5');
+    return webpackInstance;
+  }
+};
+exports.executor = executor;
 
 var getConfig = async function (options) {
   var presets = options.presets;
@@ -47,21 +60,51 @@ var getConfig = async function (options) {
 };
 
 exports.getConfig = getConfig;
-var executor = {
-  get: async function (options) {
-    var _await$options$preset;
+var asyncIterator;
 
-    var version = (await options.presets.apply('webpackVersion')) || '5';
-    var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || _webpack.default;
-    (0, _coreCommon.checkWebpackVersion)({
-      version: version
-    }, '5', 'builder-webpack5');
-    return webpackInstance;
+var bail = async function () {
+  if (asyncIterator) {
+    try {
+      // we tell the builder (that started) to stop ASAP and wait
+      await asyncIterator.throw(new Error());
+    } catch (e) {//
+    }
   }
+
+  if (reject) {
+    reject();
+  } // we wait for the compiler to finish it's work, so it's command-line output doesn't interfere
+
+
+  return new Promise(function (res, rej) {
+    if (process && compilation) {
+      try {
+        compilation.close(function () {
+          return res();
+        });
+
+        _nodeLogger.logger.warn('Force closed preview build');
+      } catch (err) {
+        _nodeLogger.logger.warn('Unable to close preview build!');
+
+        res();
+      }
+    } else {
+      res();
+    }
+  });
 };
-exports.executor = executor;
+/**
+ * This function is a generator so that we can abort it mid process
+ * in case of failure coming from other processes e.g. preview builder
+ *
+ * I am sorry for making you read about generators today :')
+ */
+
 
-var start = async function ({
+exports.bail = bail;
+
+var starter = async function* starterGeneratorFn({
   startTime: startTime,
   options: options,
   router: router
@@ -69,7 +112,9 @@ var start = async function ({
   var _config$output;
 
   var webpackInstance = await executor.get(options);
+  yield;
   var config = await getConfig(options);
+  yield;
   var compiler = webpackInstance(config);
 
   if (!compiler) {
@@ -101,6 +146,7 @@ var start = async function ({
       handler = _await$useProgressRep.handler,
       modulesCount = _await$useProgressRep.modulesCount;
 
+  yield;
   new _webpack.ProgressPlugin({
     handler: handler,
     modulesCount: modulesCount
@@ -116,6 +162,7 @@ var start = async function ({
     compilation.waitUntilValid(ready);
     reject = stop;
   });
+  yield;
 
   if (!stats) {
     throw new Error('no stats after building preview');
@@ -131,38 +178,25 @@ var start = async function ({
     totalTime: process.hrtime(startTime)
   };
 };
+/**
+ * This function is a generator so that we can abort it mid process
+ * in case of failure coming from other processes e.g. manager builder
+ *
+ * I am sorry for making you read about generators today :')
+ */
 
-exports.start = start;
-
-var bail = function (e) {
-  if (reject) {
-    reject();
-  }
-
-  if (process) {
-    try {
-      compilation.close();
-
-      _nodeLogger.logger.warn('Force closed preview build');
-    } catch (err) {
-      _nodeLogger.logger.warn('Unable to close preview build!');
-    }
-  }
-
-  throw e;
-};
-
-exports.bail = bail;
 
-var build = async function ({
-  options: options,
-  startTime: startTime
+var builder = async function* builderGeneratorFn({
+  startTime: startTime,
+  options: options
 }) {
   var webpackInstance = await executor.get(options);
+  yield;
 
   _nodeLogger.logger.info('=> Compiling preview..');
 
   var config = await getConfig(options);
+  yield;
   return new Promise(function (succeed, fail) {
     var compiler = webpackInstance(config);
     compiler.run(function (error, stats) {
@@ -181,10 +215,10 @@ var build = async function ({
         }
 
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
-          var _stats$toJson = stats.toJson({
+          var _stats$toJson = stats.toJson(typeof config.stats === 'string' ? config.stats : _objectSpread({
             warnings: true,
             errors: true
-          }),
+          }, config.stats)),
               _stats$toJson$warning = _stats$toJson.warnings,
               warnings = _stats$toJson$warning === void 0 ? [] : _stats$toJson$warning,
               _stats$toJson$errors = _stats$toJson.errors,
@@ -229,6 +263,32 @@ var build = async function ({
   });
 };
 
+var start = async function (options) {
+  asyncIterator = starter(options);
+  var result;
+
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    result = await asyncIterator.next();
+  } while (!result.done);
+
+  return result.value;
+};
+
+exports.start = start;
+
+var build = async function (options) {
+  asyncIterator = builder(options);
+  var result;
+
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    result = await asyncIterator.next();
+  } while (!result.done);
+
+  return result.value;
+};
+
 exports.build = build;
 var corePresets = [require.resolve('./presets/preview-preset.js')];
 exports.corePresets = corePresets;

package/dist/cjs/presets/custom-webpack-preset.js

@@ -22,9 +22,9 @@ var _baseWebpack = require("../preview/base-webpack.config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+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; }
 
 async function webpack(config, options) {
   // @ts-ignore

package/dist/cjs/presets/preview-preset.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.entries = exports.webpack = void 0;
+exports.webpack = exports.entries = exports.babel = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -30,4 +30,12 @@ var entries = async function (_, options) {
   return result;
 };
 
-exports.entries = entries;
+exports.entries = entries;
+
+var babel = async function (config, options) {
+  // FIXME: Add this to overrides to only apply to story files
+  config.plugins.push('babel-plugin-named-exports-order');
+  return config;
+};
+
+exports.babel = babel;

package/dist/cjs/preview/babel-loader-preview.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createBabelLoader = exports.useBaseTsSupport = void 0;
+exports.useBaseTsSupport = exports.createBabelLoader = void 0;
 
 var _coreCommon = require("@storybook/core-common");
 

package/dist/cjs/preview/base-webpack.config.js

@@ -9,14 +9,14 @@ require("core-js/modules/es.promise.js");
 
 var _nodeLogger = require("@storybook/node-logger");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _options, _storybookBaseConfig$;
+  var _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -50,12 +50,18 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
 
   var isProd = storybookBaseConfig.mode !== 'development';
   var coreOptions = await options.presets.apply('core');
-  var cacheConfig = (_options = coreOptions.builder.options) !== null && _options !== void 0 && _options.fsCache ? {
+  var builderOptions = coreOptions.builder.options;
+  var cacheConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.fsCache ? {
     cache: {
       type: 'filesystem'
     }
   } : {};
-  return _objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
+  var lazyCompilationConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.lazyCompilation && !isProd ? {
+    lazyCompilation: {
+      entries: false
+    }
+  } : {};
+  return _objectSpread(_objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
       rules: [...storybookBaseConfig.module.rules, cssLoaders, {
         test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
@@ -82,5 +88,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  }, cacheConfig);
+  }, cacheConfig), {}, {
+    experiments: _objectSpread(_objectSpread({}, storybookBaseConfig.experiments), lazyCompilationConfig)
+  });
 }

package/dist/cjs/preview/iframe-webpack.config.js

@@ -31,9 +31,9 @@ var _useBaseTsSupport = require("./useBaseTsSupport");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -85,7 +85,7 @@ var _default = async function _default(options) {
 
     var configEntryPath = _path.default.resolve(_path.default.join(workingDir, 'storybook-config-entry.js'));
 
-    virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
+    virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars')), {
       storiesFilename: storiesFilename,
       configs: configs
     } // We need to double escape `\` for webpack. We may have some in windows paths
@@ -100,7 +100,9 @@ var _default = async function _default(options) {
     var entryTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleEntry.template.js'));
     configs.forEach(function (configFilename) {
       var clientApi = storybookPaths['@storybook/client-api'];
-      var clientLogger = storybookPaths['@storybook/client-logger'];
+      var clientLogger = storybookPaths['@storybook/client-logger']; // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
+      // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
+
       virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = (0, _coreCommon.interpolate)(entryTemplate, {
         configFilename: configFilename,
         clientApi: clientApi,
@@ -110,9 +112,11 @@ var _default = async function _default(options) {
     });
 
     if (stories.length > 0) {
-      var storyTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleStory.template.js'));
+      var storyTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleStory.template.js')); // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
+      // in the user's webpack mode, which may be strict about the use of require/import.
+      // See https://github.com/storybookjs/storybook/issues/14877
 
-      var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.js`));
+      var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.cjs`));
 
       virtualModuleMapping[_storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
         frameworkImportPath: frameworkImportPath
@@ -182,7 +186,7 @@ var _default = async function _default(options) {
     }), new _webpack.DefinePlugin(_objectSpread(_objectSpread({}, (0, _coreCommon.stringifyProcessEnvs)(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
     })), new _webpack.ProvidePlugin({
-      process: 'process/browser.js'
+      process: require.resolve('process/browser.js')
     }), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, (0, _coreCommon.es6Transpiler)(), {
@@ -199,7 +203,8 @@ var _default = async function _default(options) {
         'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
       }),
       fallback: {
-        path: require.resolve('path-browserify')
+        path: require.resolve('path-browserify'),
+        assert: require.resolve('browser-assert')
       }
     },
     optimization: {
@@ -208,7 +213,7 @@ var _default = async function _default(options) {
       },
       runtimeChunk: true,
       sideEffects: true,
-      usedExports: true,
+      usedExports: isProd,
       moduleIds: 'named',
       minimizer: isProd ? [new _terserWebpackPlugin.default({
         parallel: true,

package/dist/cjs/preview/virtualModuleEntry.template.js

@@ -1,6 +1,6 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -67,6 +67,7 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case '__namedExportsOrder':
     case 'decorateStory':
     case 'renderToDOM':
       {

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -12,6 +12,18 @@ import { logger } from '@storybook/node-logger';
 import { useProgressReporting, checkWebpackVersion } from '@storybook/core-common';
 var compilation;
 var reject;
+export var executor = {
+  get: async function (options) {
+    var _await$options$preset;
+
+    var version = (await options.presets.apply('webpackVersion')) || '5';
+    var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || webpack;
+    checkWebpackVersion({
+      version: version
+    }, '5', 'builder-webpack5');
+    return webpackInstance;
+  }
+};
 export var getConfig = async function (options) {
   var presets = options.presets;
   var typescriptOptions = await presets.apply('typescript', {}, options);
@@ -25,19 +37,45 @@ export var getConfig = async function (options) {
     [`${options.framework}Options`]: frameworkOptions
   }));
 };
-export var executor = {
-  get: async function (options) {
-    var _await$options$preset;
-
-    var version = (await options.presets.apply('webpackVersion')) || '5';
-    var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || webpack;
-    checkWebpackVersion({
-      version: version
-    }, '5', 'builder-webpack5');
-    return webpackInstance;
+var asyncIterator;
+export var bail = async function () {
+  if (asyncIterator) {
+    try {
+      // we tell the builder (that started) to stop ASAP and wait
+      await asyncIterator.throw(new Error());
+    } catch (e) {//
+    }
   }
+
+  if (reject) {
+    reject();
+  } // we wait for the compiler to finish it's work, so it's command-line output doesn't interfere
+
+
+  return new Promise(function (res, rej) {
+    if (process && compilation) {
+      try {
+        compilation.close(function () {
+          return res();
+        });
+        logger.warn('Force closed preview build');
+      } catch (err) {
+        logger.warn('Unable to close preview build!');
+        res();
+      }
+    } else {
+      res();
+    }
+  });
 };
-export var start = async function ({
+/**
+ * This function is a generator so that we can abort it mid process
+ * in case of failure coming from other processes e.g. preview builder
+ *
+ * I am sorry for making you read about generators today :')
+ */
+
+var starter = async function* starterGeneratorFn({
   startTime: startTime,
   options: options,
   router: router
@@ -45,7 +83,9 @@ export var start = async function ({
   var _config$output;
 
   var webpackInstance = await executor.get(options);
+  yield;
   var config = await getConfig(options);
+  yield;
   var compiler = webpackInstance(config);
 
   if (!compiler) {
@@ -75,6 +115,7 @@ export var start = async function ({
       handler = _await$useProgressRep.handler,
       modulesCount = _await$useProgressRep.modulesCount;
 
+  yield;
   new ProgressPlugin({
     handler: handler,
     modulesCount: modulesCount
@@ -90,6 +131,7 @@ export var start = async function ({
     compilation.waitUntilValid(ready);
     reject = stop;
   });
+  yield;
 
   if (!stats) {
     throw new Error('no stats after building preview');
@@ -105,29 +147,23 @@ export var start = async function ({
     totalTime: process.hrtime(startTime)
   };
 };
-export var bail = function (e) {
-  if (reject) {
-    reject();
-  }
+/**
+ * This function is a generator so that we can abort it mid process
+ * in case of failure coming from other processes e.g. manager builder
+ *
+ * I am sorry for making you read about generators today :')
+ */
 
-  if (process) {
-    try {
-      compilation.close();
-      logger.warn('Force closed preview build');
-    } catch (err) {
-      logger.warn('Unable to close preview build!');
-    }
-  }
 
-  throw e;
-};
-export var build = async function ({
-  options: options,
-  startTime: startTime
+var builder = async function* builderGeneratorFn({
+  startTime: startTime,
+  options: options
 }) {
   var webpackInstance = await executor.get(options);
+  yield;
   logger.info('=> Compiling preview..');
   var config = await getConfig(options);
+  yield;
   return new Promise(function (succeed, fail) {
     var compiler = webpackInstance(config);
     compiler.run(function (error, stats) {
@@ -144,10 +180,10 @@ export var build = async function ({
         }
 
         if (stats && (stats.hasErrors() || stats.hasWarnings())) {
-          var _stats$toJson = stats.toJson({
+          var _stats$toJson = stats.toJson(typeof config.stats === 'string' ? config.stats : _objectSpread({
             warnings: true,
             errors: true
-          }),
+          }, config.stats)),
               _stats$toJson$warning = _stats$toJson.warnings,
               warnings = _stats$toJson$warning === void 0 ? [] : _stats$toJson$warning,
               _stats$toJson$errors = _stats$toJson.errors,
@@ -191,5 +227,28 @@ export var build = async function ({
     });
   });
 };
+
+export var start = async function (options) {
+  asyncIterator = starter(options);
+  var result;
+
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    result = await asyncIterator.next();
+  } while (!result.done);
+
+  return result.value;
+};
+export var build = async function (options) {
+  asyncIterator = builder(options);
+  var result;
+
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    result = await asyncIterator.next();
+  } while (!result.done);
+
+  return result.value;
+};
 export var corePresets = [require.resolve('./presets/preview-preset.js')];
 export var overridePresets = [require.resolve('./presets/custom-webpack-preset.js')];

package/dist/esm/presets/preview-preset.js

@@ -14,4 +14,9 @@ export var entries = async function (_, options) {
   }
 
   return result;
+};
+export var babel = async function (config, options) {
+  // FIXME: Add this to overrides to only apply to story files
+  config.plugins.push('babel-plugin-named-exports-order');
+  return config;
 };