@storybook/builder-webpack5 6.5.0-alpha.5 → 6.5.0-alpha.50

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,13 +19,13 @@ 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; }
 

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

@@ -15,8 +15,6 @@ var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
 var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
 
-var _WatchMissingNodeModulesPlugin = _interopRequireDefault(require("react-dev-utils/WatchMissingNodeModulesPlugin"));
-
 var _terserWebpackPlugin = _interopRequireDefault(require("terser-webpack-plugin"));
 
 var _webpackVirtualModules = _interopRequireDefault(require("webpack-virtual-modules"));
@@ -33,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; }
 
@@ -87,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
@@ -102,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,
@@ -112,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
@@ -184,8 +186,8 @@ 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'
-    }), isProd ? null : new _WatchMissingNodeModulesPlugin.default(_coreCommon.nodeModulesPaths), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
+      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)(), {
         test: /\.md$/,
@@ -201,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: {
@@ -210,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,21 +1,24 @@
-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; }
 
 /* eslint-disable import/no-unresolved */
-import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
-import { logger } from '{{clientLogger}}';
+import { addDecorator, addParameters, addLoader, addArgs, addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
 import * as config from '{{configFilename}}';
 Object.keys(config).forEach(function (key) {
   var value = config[key];
 
   switch (key) {
     case 'args':
+      {
+        return addArgs(value);
+      }
+
     case 'argTypes':
       {
-        return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+        return addArgTypes(value);
       }
 
     case 'decorators':
@@ -64,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; }
 

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;
 };

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

@@ -1,13 +1,13 @@
-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; }
 
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export 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);
@@ -40,12 +40,18 @@ export 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)(\?.*)?$/,
@@ -72,5 +78,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  }, cacheConfig);
+  }, cacheConfig), {}, {
+    experiments: _objectSpread(_objectSpread({}, storybookBaseConfig.experiments), lazyCompilationConfig)
+  });
 }

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

@@ -1,8 +1,8 @@
 import "core-js/modules/es.promise.js";
 
-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; }
 
@@ -10,12 +10,11 @@ import path from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import themingPaths from '@storybook/theming/paths';
-import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, nodeModulesPaths, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
+import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
 import { createBabelLoader } from './babel-loader-preview';
 import { useBaseTsSupport } from './useBaseTsSupport';
 var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
@@ -61,7 +60,7 @@ export default (async function (options) {
     var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
     virtualModuleMapping[storiesPath] = toImportFn(stories);
     var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
-    virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
+    virtualModuleMapping[configEntryPath] = handlebars(await 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
@@ -75,7 +74,9 @@ export default (async function (options) {
     var entryTemplate = await readTemplate(path.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`] = interpolate(entryTemplate, {
         configFilename: configFilename,
         clientApi: clientApi,
@@ -85,9 +86,11 @@ export default (async function (options) {
     });
 
     if (stories.length > 0) {
-      var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js'));
+      var storyTemplate = await readTemplate(path.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.resolve(path.join(workingDir, `generated-stories-entry.js`));
+      var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
 
       virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
         frameworkImportPath: frameworkImportPath
@@ -157,8 +160,8 @@ export default (async function (options) {
     }), new DefinePlugin(_objectSpread(_objectSpread({}, stringifyProcessEnvs(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
     })), new ProvidePlugin({
-      process: 'process/browser.js'
-    }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
+      process: require.resolve('process/browser.js')
+    }), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, es6Transpiler(), {
         test: /\.md$/,
@@ -174,7 +177,8 @@ export default (async function (options) {
         'react-dom': path.dirname(require.resolve('react-dom/package.json'))
       }),
       fallback: {
-        path: require.resolve('path-browserify')
+        path: require.resolve('path-browserify'),
+        assert: require.resolve('browser-assert')
       }
     },
     optimization: {
@@ -183,7 +187,7 @@ export default (async function (options) {
       },
       runtimeChunk: true,
       sideEffects: true,
-      usedExports: true,
+      usedExports: isProd,
       moduleIds: 'named',
       minimizer: isProd ? [new TerserWebpackPlugin({
         parallel: true,

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

@@ -1,21 +1,24 @@
-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; }
 
 /* eslint-disable import/no-unresolved */
-import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
-import { logger } from '{{clientLogger}}';
+import { addDecorator, addParameters, addLoader, addArgs, addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
 import * as config from '{{configFilename}}';
 Object.keys(config).forEach(function (key) {
   var value = config[key];
 
   switch (key) {
     case 'args':
+      {
+        return addArgs(value);
+      }
+
     case 'argTypes':
       {
-        return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+        return addArgTypes(value);
       }
 
     case 'decorators':
@@ -64,6 +67,7 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case '__namedExportsOrder':
     case 'decorateStory':
     case 'renderToDOM':
       {

package/dist/modern/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; }
 

package/dist/modern/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;
 };

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

@@ -1,13 +1,13 @@
-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; }
 
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export 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);
@@ -40,12 +40,18 @@ export 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)(\?.*)?$/,
@@ -72,5 +78,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  }, cacheConfig);
+  }, cacheConfig), {}, {
+    experiments: _objectSpread(_objectSpread({}, storybookBaseConfig.experiments), lazyCompilationConfig)
+  });
 }

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

@@ -1,8 +1,8 @@
 import "core-js/modules/es.promise.js";
 
-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; }
 
@@ -10,12 +10,11 @@ import path from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import themingPaths from '@storybook/theming/paths';
-import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, nodeModulesPaths, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
+import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
 import { createBabelLoader } from './babel-loader-preview';
 import { useBaseTsSupport } from './useBaseTsSupport';
 var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
@@ -61,7 +60,7 @@ export default (async function (options) {
     var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
     virtualModuleMapping[storiesPath] = toImportFn(stories);
     var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
-    virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
+    virtualModuleMapping[configEntryPath] = handlebars(await 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
@@ -75,7 +74,9 @@ export default (async function (options) {
     var entryTemplate = await readTemplate(path.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`] = interpolate(entryTemplate, {
         configFilename: configFilename,
         clientApi: clientApi,
@@ -85,9 +86,11 @@ export default (async function (options) {
     });
 
     if (stories.length > 0) {
-      var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js'));
+      var storyTemplate = await readTemplate(path.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.resolve(path.join(workingDir, `generated-stories-entry.js`));
+      var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
 
       virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
         frameworkImportPath: frameworkImportPath
@@ -157,8 +160,8 @@ export default (async function (options) {
     }), new DefinePlugin(_objectSpread(_objectSpread({}, stringifyProcessEnvs(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
     })), new ProvidePlugin({
-      process: 'process/browser.js'
-    }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
+      process: require.resolve('process/browser.js')
+    }), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, es6Transpiler(), {
         test: /\.md$/,
@@ -174,7 +177,8 @@ export default (async function (options) {
         'react-dom': path.dirname(require.resolve('react-dom/package.json'))
       }),
       fallback: {
-        path: require.resolve('path-browserify')
+        path: require.resolve('path-browserify'),
+        assert: require.resolve('browser-assert')
       }
     },
     optimization: {
@@ -183,7 +187,7 @@ export default (async function (options) {
       },
       runtimeChunk: true,
       sideEffects: true,
-      usedExports: true,
+      usedExports: isProd,
       moduleIds: 'named',
       minimizer: isProd ? [new TerserWebpackPlugin({
         parallel: true,

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

@@ -1,21 +1,24 @@
-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; }
 
 /* eslint-disable import/no-unresolved */
-import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
-import { logger } from '{{clientLogger}}';
+import { addDecorator, addParameters, addLoader, addArgs, addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from '{{clientApi}}';
 import * as config from '{{configFilename}}';
 Object.keys(config).forEach(function (key) {
   var value = config[key];
 
   switch (key) {
     case 'args':
+      {
+        return addArgs(value);
+      }
+
     case 'argTypes':
       {
-        return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+        return addArgTypes(value);
       }
 
     case 'decorators':
@@ -64,6 +67,7 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case '__namedExportsOrder':
     case 'decorateStory':
     case 'renderToDOM':
       {

package/dist/ts3.4/presets/preview-preset.d.ts

@@ -1,2 +1,3 @@
 export declare const webpack: (_: unknown, options: any) => Promise<import("webpack").Configuration>;
 export declare const entries: (_: unknown, options: any) => Promise<string[]>;
+export declare const babel: (config: any, options: any) => Promise<any>;

package/dist/ts3.9/index.d.ts

@@ -1,5 +1,5 @@
 import webpack, { Stats, Configuration } from 'webpack';
-import { Builder, Options } from '@storybook/core-common';
+import type { Builder, Options } from '@storybook/core-common';
 declare type WebpackBuilder = Builder<Configuration, Stats>;
 export declare const getConfig: WebpackBuilder['getConfig'];
 export declare const executor: {

package/dist/ts3.9/presets/preview-preset.d.ts

@@ -1,2 +1,3 @@
 export declare const webpack: (_: unknown, options: any) => Promise<import("webpack").Configuration>;
 export declare const entries: (_: unknown, options: any) => Promise<string[]>;
+export declare const babel: (config: any, options: any) => Promise<any>;

package/dist/ts3.9/preview/iframe-webpack.config.d.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack';
-import { Options } from '@storybook/core-common';
+import type { Configuration } from 'webpack';
+import type { Options } from '@storybook/core-common';
 declare const _default: (options: Options & Record<string, any>) => Promise<Configuration>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "6.5.0-alpha.5",
+  "version": "6.5.0-alpha.50",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -31,8 +31,7 @@
   },
   "files": [
     "dist/**/*",
-    "dll/**/*",
-    "types/**/*",
+    "templates/**/*",
     "*.js",
     "*.d.ts"
   ],
@@ -41,44 +40,25 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.12",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
-    "@babel/plugin-proposal-private-methods": "^7.12.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.12.1",
-    "@babel/plugin-transform-block-scoping": "^7.12.12",
-    "@babel/plugin-transform-classes": "^7.12.1",
-    "@babel/plugin-transform-destructuring": "^7.12.1",
-    "@babel/plugin-transform-for-of": "^7.12.1",
-    "@babel/plugin-transform-parameters": "^7.12.1",
-    "@babel/plugin-transform-shorthand-properties": "^7.12.1",
-    "@babel/plugin-transform-spread": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.5.0-alpha.5",
-    "@storybook/api": "6.5.0-alpha.5",
-    "@storybook/channel-postmessage": "6.5.0-alpha.5",
-    "@storybook/channels": "6.5.0-alpha.5",
-    "@storybook/client-api": "6.5.0-alpha.5",
-    "@storybook/client-logger": "6.5.0-alpha.5",
-    "@storybook/components": "6.5.0-alpha.5",
-    "@storybook/core-common": "6.5.0-alpha.5",
-    "@storybook/core-events": "6.5.0-alpha.5",
-    "@storybook/node-logger": "6.5.0-alpha.5",
-    "@storybook/preview-web": "6.5.0-alpha.5",
-    "@storybook/router": "6.5.0-alpha.5",
+    "@storybook/addons": "6.5.0-alpha.50",
+    "@storybook/api": "6.5.0-alpha.50",
+    "@storybook/channel-postmessage": "6.5.0-alpha.50",
+    "@storybook/channels": "6.5.0-alpha.50",
+    "@storybook/client-api": "6.5.0-alpha.50",
+    "@storybook/client-logger": "6.5.0-alpha.50",
+    "@storybook/components": "6.5.0-alpha.50",
+    "@storybook/core-common": "6.5.0-alpha.50",
+    "@storybook/core-events": "6.5.0-alpha.50",
+    "@storybook/node-logger": "6.5.0-alpha.50",
+    "@storybook/preview-web": "6.5.0-alpha.50",
+    "@storybook/router": "6.5.0-alpha.50",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.5",
-    "@storybook/theming": "6.5.0-alpha.5",
+    "@storybook/store": "6.5.0-alpha.50",
+    "@storybook/theming": "6.5.0-alpha.50",
     "@types/node": "^14.0.10 || ^16.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-macros": "^3.0.1",
-    "babel-plugin-polyfill-corejs3": "^0.1.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
     "core-js": "^3.8.2",
     "css-loader": "^5.0.1",
@@ -87,7 +67,7 @@
     "glob-promise": "^3.4.0",
     "html-webpack-plugin": "^5.0.0",
     "path-browserify": "^1.0.1",
-    "react-dev-utils": "^11.0.4",
+    "process": "^0.11.10",
     "stable": "^0.1.8",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.3",
@@ -100,10 +80,9 @@
   },
   "devDependencies": {
     "@types/case-sensitive-paths-webpack-plugin": "^2.1.4",
-    "@types/react-dev-utils": "^9.0.4",
     "@types/terser-webpack-plugin": "^5.0.2",
     "@types/webpack-dev-middleware": "^4.1.0",
-    "@types/webpack-hot-middleware": "^2.25.3",
+    "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-virtual-modules": "^0.1.0"
   },
   "peerDependencies": {
@@ -118,6 +97,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df18f2ad3794d61c59c6458f66f73635502b8963",
+  "gitHead": "6cf4571e5a1200613de94aa066fe93f75aec6ad1",
   "sbmodern": "dist/modern/index.js"
 }

package/{dist/cjs/preview → templates}/virtualModuleModernEntry.js.handlebars

@@ -1,4 +1,3 @@
-import fetch from 'unfetch';
 import global from 'global';
 
 import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
@@ -33,12 +32,12 @@ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore
 preview.initialize({ importFn, getProjectAnnotations });
 
 if (module.hot) {
-  module.hot.accept('./{{storiesFilename}}', () => {
+  import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
     // importFn has changed so we need to patch the new one in
     preview.onStoriesChanged({ importFn });
   });
 
-  module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
+  import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
     // getProjectAnnotations has changed so we need to patch the new one in
     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
   });

package/dist/esm/preview/virtualModuleModernEntry.js.handlebars

@@ -1,45 +0,0 @@
-import fetch from 'unfetch';
-import global from 'global';
-
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
-import { addons } from '@storybook/addons';
-import createPostMessageChannel from '@storybook/channel-postmessage';
-import createWebSocketChannel from '@storybook/channel-websocket';
-
-import { importFn } from './{{storiesFilename}}';
-
-const { SERVER_CHANNEL_URL } = global;
-
-const getProjectAnnotations = () =>
-  composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
-
-const channel = createPostMessageChannel({ page: 'preview' });
-addons.setChannel(channel);
-
-if (SERVER_CHANNEL_URL) {
-  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
-  addons.setServerChannel(serverChannel);
-  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-}
-
-const preview = new PreviewWeb();
-
-window.__STORYBOOK_PREVIEW__ = preview;
-window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
-
-preview.initialize({ importFn, getProjectAnnotations });
-
-if (module.hot) {
-  module.hot.accept('./{{storiesFilename}}', () => {
-    // importFn has changed so we need to patch the new one in
-    preview.onStoriesChanged({ importFn });
-  });
-
-  module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
-    // getProjectAnnotations has changed so we need to patch the new one in
-    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-  });
-}

package/dist/modern/preview/virtualModuleModernEntry.js.handlebars

@@ -1,45 +0,0 @@
-import fetch from 'unfetch';
-import global from 'global';
-
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
-import { addons } from '@storybook/addons';
-import createPostMessageChannel from '@storybook/channel-postmessage';
-import createWebSocketChannel from '@storybook/channel-websocket';
-
-import { importFn } from './{{storiesFilename}}';
-
-const { SERVER_CHANNEL_URL } = global;
-
-const getProjectAnnotations = () =>
-  composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
-
-const channel = createPostMessageChannel({ page: 'preview' });
-addons.setChannel(channel);
-
-if (SERVER_CHANNEL_URL) {
-  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
-  addons.setServerChannel(serverChannel);
-  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-}
-
-const preview = new PreviewWeb();
-
-window.__STORYBOOK_PREVIEW__ = preview;
-window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
-
-preview.initialize({ importFn, getProjectAnnotations });
-
-if (module.hot) {
-  module.hot.accept('./{{storiesFilename}}', () => {
-    // importFn has changed so we need to patch the new one in
-    preview.onStoriesChanged({ importFn });
-  });
-
-  module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
-    // getProjectAnnotations has changed so we need to patch the new one in
-    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-  });
-}