@storybook/builder-webpack5 6.5.7 → 7.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/cjs/index.js +51 -4
  2. package/dist/cjs/presets/custom-webpack-preset.js +4 -4
  3. package/dist/cjs/preview/babel-loader-preview.js +3 -3
  4. package/dist/cjs/preview/base-webpack.config.js +4 -4
  5. package/dist/cjs/preview/iframe-webpack.config.js +31 -19
  6. package/dist/cjs/preview/useBaseTsSupport.js +1 -1
  7. package/dist/cjs/preview/virtualModuleStory.template.js +2 -2
  8. package/dist/cjs/types.js +5 -0
  9. package/dist/esm/index.js +26 -4
  10. package/dist/esm/presets/custom-webpack-preset.js +2 -2
  11. package/dist/esm/preview/babel-loader-preview.js +3 -3
  12. package/dist/esm/preview/base-webpack.config.js +4 -4
  13. package/dist/esm/preview/iframe-webpack.config.js +33 -20
  14. package/dist/esm/preview/useBaseTsSupport.js +1 -1
  15. package/dist/esm/preview/virtualModuleStory.template.js +1 -1
  16. package/dist/esm/types.js +1 -0
  17. package/dist/{ts3.9 → types}/index.d.ts +6 -2
  18. package/dist/{ts3.9 → types}/presets/custom-webpack-preset.d.ts +1 -1
  19. package/dist/{ts3.9 → types}/presets/preview-preset.d.ts +0 -0
  20. package/dist/{ts3.9 → types}/preview/babel-loader-preview.d.ts +0 -1
  21. package/dist/{ts3.9 → types}/preview/base-webpack.config.d.ts +0 -0
  22. package/dist/{ts3.9 → types}/preview/iframe-webpack.config.d.ts +0 -0
  23. package/dist/{ts3.9 → types}/preview/useBaseTsSupport.d.ts +0 -0
  24. package/dist/types/types.d.ts +40 -0
  25. package/package.json +32 -39
  26. package/templates/virtualModuleModernEntry.js.handlebars +2 -2
  27. package/dist/modern/index.js +0 -254
  28. package/dist/modern/presets/custom-webpack-preset.js +0 -49
  29. package/dist/modern/presets/preview-preset.js +0 -31
  30. package/dist/modern/preview/babel-loader-preview.js +0 -21
  31. package/dist/modern/preview/base-webpack.config.js +0 -84
  32. package/dist/modern/preview/iframe-webpack.config.js +0 -207
  33. package/dist/modern/preview/useBaseTsSupport.js +0 -8
  34. package/dist/modern/preview/virtualModuleEntry.template.js +0 -83
  35. package/dist/modern/preview/virtualModuleStory.template.js +0 -3
  36. package/dist/ts3.4/index.d.ts +0 -14
  37. package/dist/ts3.4/presets/custom-webpack-preset.d.ts +0 -6
  38. package/dist/ts3.4/presets/preview-preset.d.ts +0 -3
  39. package/dist/ts3.4/preview/babel-loader-preview.d.ts +0 -14
  40. package/dist/ts3.4/preview/base-webpack.config.d.ts +0 -3
  41. package/dist/ts3.4/preview/iframe-webpack.config.d.ts +0 -4
  42. package/dist/ts3.4/preview/useBaseTsSupport.d.ts +0 -5
package/dist/cjs/index.js CHANGED
@@ -3,6 +3,15 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ var _exportNames = {
7
+ executor: true,
8
+ getConfig: true,
9
+ bail: true,
10
+ start: true,
11
+ build: true,
12
+ corePresets: true,
13
+ overridePresets: true
14
+ };
6
15
  exports.start = exports.overridePresets = exports.getConfig = exports.executor = exports.corePresets = exports.build = exports.bail = void 0;
7
16
 
8
17
  require("core-js/modules/es.promise.js");
@@ -17,6 +26,22 @@ var _nodeLogger = require("@storybook/node-logger");
17
26
 
18
27
  var _coreCommon = require("@storybook/core-common");
19
28
 
29
+ var _coreWebpack = require("@storybook/core-webpack");
30
+
31
+ var _types = require("./types");
32
+
33
+ Object.keys(_types).forEach(function (key) {
34
+ if (key === "default" || key === "__esModule") return;
35
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
36
+ if (key in exports && exports[key] === _types[key]) return;
37
+ Object.defineProperty(exports, key, {
38
+ enumerable: true,
39
+ get: function () {
40
+ return _types[key];
41
+ }
42
+ });
43
+ });
44
+
20
45
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
46
 
22
47
  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); }
@@ -37,7 +62,7 @@ var executor = {
37
62
 
38
63
  var version = (await options.presets.apply('webpackVersion')) || '5';
39
64
  var webpackInstance = ((_await$options$preset = await options.presets.apply('webpackInstance')) === null || _await$options$preset === void 0 ? void 0 : _await$options$preset.default) || _webpack.default;
40
- (0, _coreCommon.checkWebpackVersion)({
65
+ (0, _coreWebpack.checkWebpackVersion)({
41
66
  version: version
42
67
  }, '5', 'builder-webpack5');
43
68
  return webpackInstance;
@@ -51,11 +76,11 @@ var getConfig = async function (options) {
51
76
  var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
52
77
  typescriptOptions: typescriptOptions
53
78
  }));
54
- var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
79
+ var framework = await presets.apply('framework', {}, options);
55
80
  return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
56
81
  babelOptions: babelOptions,
57
82
  typescriptOptions: typescriptOptions,
58
- [`${options.framework}Options`]: frameworkOptions
83
+ frameworkOptions: typeof framework === 'string' ? {} : framework === null || framework === void 0 ? void 0 : framework.options
59
84
  }));
60
85
  };
61
86
 
@@ -197,8 +222,30 @@ var builder = async function* builderGeneratorFn({
197
222
 
198
223
  var config = await getConfig(options);
199
224
  yield;
225
+ var compiler = webpackInstance(config);
226
+
227
+ if (!compiler) {
228
+ var err = `${config.name}: missing webpack compiler at runtime!`;
229
+
230
+ _nodeLogger.logger.error(err);
231
+
232
+ return {
233
+ hasErrors: function () {
234
+ return true;
235
+ },
236
+ hasWarnings: function () {
237
+ return false;
238
+ },
239
+ toJson: function () {
240
+ return {
241
+ warnings: [],
242
+ errors: [err]
243
+ };
244
+ }
245
+ };
246
+ }
247
+
200
248
  return new Promise(function (succeed, fail) {
201
- var compiler = webpackInstance(config);
202
249
  compiler.run(function (error, stats) {
203
250
  if (error || !stats || stats.hasErrors()) {
204
251
  _nodeLogger.logger.error('=> Failed to build the preview');
@@ -12,12 +12,12 @@ var webpackReal = _interopRequireWildcard(require("webpack"));
12
12
 
13
13
  var _nodeLogger = require("@storybook/node-logger");
14
14
 
15
- var _coreCommon = require("@storybook/core-common");
16
-
17
15
  var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
18
16
 
19
17
  var _tsDedent = _interopRequireDefault(require("ts-dedent"));
20
18
 
19
+ var _coreWebpack = require("@storybook/core-webpack");
20
+
21
21
  var _baseWebpack = require("../preview/base-webpack.config");
22
22
 
23
23
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,13 +43,13 @@ async function webpack(config, options) {
43
43
 
44
44
  if (webpackConfig) {
45
45
  return (0, _utilDeprecate.default)(webpackConfig, (0, _tsDedent.default)`
46
- You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
46
+ You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
47
47
  `)(finalDefaultConfig);
48
48
  } // Check whether user has a custom webpack config file and
49
49
  // return the (extended) base configuration if it's not available.
50
50
 
51
51
 
52
- var customConfig = (0, _coreCommon.loadCustomWebpackConfig)(configDir);
52
+ var customConfig = (0, _coreWebpack.loadCustomWebpackConfig)(configDir);
53
53
 
54
54
  if (typeof customConfig === 'function') {
55
55
  _nodeLogger.logger.info('=> Loading custom Webpack config (full-control mode).');
@@ -13,7 +13,7 @@ var _coreCommon = require("@storybook/core-common");
13
13
  */
14
14
  var useBaseTsSupport = function (framework) {
15
15
  // These packages both have their own TS implementation.
16
- return !['vue', 'angular'].includes(framework);
16
+ return !['@storybook/vue', '@storybook/angular'].includes(framework);
17
17
  };
18
18
 
19
19
  exports.useBaseTsSupport = useBaseTsSupport;
@@ -22,8 +22,8 @@ var createBabelLoader = function (options, framework) {
22
22
  return {
23
23
  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
24
24
  use: [{
25
- loader: require.resolve('babel-loader'),
26
- options: options
25
+ loader: require.resolve('babel-loader') // options,
26
+
27
27
  }],
28
28
  include: [(0, _coreCommon.getProjectRoot)()],
29
29
  exclude: /node_modules/
@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
16
16
  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; }
17
17
 
18
18
  async function createDefaultWebpackConfig(storybookBaseConfig, options) {
19
- var _storybookBaseConfig$;
19
+ var _coreOptions$builder, _storybookBaseConfig$;
20
20
 
21
21
  if (options.presetsList.some(function (preset) {
22
22
  return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -50,13 +50,13 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
50
50
 
51
51
  var isProd = storybookBaseConfig.mode !== 'development';
52
52
  var coreOptions = await options.presets.apply('core');
53
- var builderOptions = coreOptions.builder.options;
54
- var cacheConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.fsCache ? {
53
+ var builderOptions = ((_coreOptions$builder = coreOptions.builder) === null || _coreOptions$builder === void 0 ? void 0 : _coreOptions$builder.options) || {};
54
+ var cacheConfig = builderOptions.fsCache ? {
55
55
  cache: {
56
56
  type: 'filesystem'
57
57
  }
58
58
  } : {};
59
- var lazyCompilationConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.lazyCompilation && !isProd ? {
59
+ var lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? {
60
60
  lazyCompilation: {
61
61
  entries: false
62
62
  }
@@ -9,6 +9,8 @@ require("core-js/modules/es.promise.js");
9
9
 
10
10
  var _path = _interopRequireDefault(require("path"));
11
11
 
12
+ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
13
+
12
14
  var _webpack = require("webpack");
13
15
 
14
16
  var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
@@ -21,8 +23,6 @@ var _webpackVirtualModules = _interopRequireDefault(require("webpack-virtual-mod
21
23
 
22
24
  var _forkTsCheckerWebpackPlugin = _interopRequireDefault(require("fork-ts-checker-webpack-plugin"));
23
25
 
24
- var _paths = _interopRequireDefault(require("@storybook/theming/paths"));
25
-
26
26
  var _coreCommon = require("@storybook/core-common");
27
27
 
28
28
  var _babelLoaderPreview = require("./babel-loader-preview");
@@ -50,22 +50,37 @@ var _default = async function _default(options) {
50
50
  quiet = options.quiet,
51
51
  packageJson = options.packageJson,
52
52
  configType = options.configType,
53
- framework = options.framework,
54
- frameworkPath = options.frameworkPath,
55
53
  presets = options.presets,
56
54
  previewUrl = options.previewUrl,
57
55
  typescriptOptions = options.typescriptOptions,
58
- modern = options.modern,
59
56
  features = options.features,
60
57
  serverChannelUrl = options.serverChannelUrl;
58
+ var framework = await presets.apply('framework', undefined);
59
+
60
+ if (!framework) {
61
+ throw new Error((0, _tsDedent.default)`
62
+ You must to specify a framework in '.storybook/main.js' config.
63
+
64
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
65
+ `);
66
+ }
67
+
68
+ var _ref = typeof framework === 'string' ? {
69
+ name: framework,
70
+ options: {}
71
+ } : framework,
72
+ frameworkName = _ref.name,
73
+ frameworkOptions = _ref.options;
74
+
61
75
  var envs = await presets.apply('env');
62
- var logLevel = await presets.apply('logLevel', undefined);
63
- var frameworkOptions = await presets.apply(`${framework}Options`, {});
76
+ var logLevel = await presets.apply('logLevel', undefined); // FIXME: migrate away from frameworkOptions
77
+ // const frameworkOptions = await presets.apply(`${framework}Options`, {});
78
+
64
79
  var headHtmlSnippet = await presets.apply('previewHead');
65
80
  var bodyHtmlSnippet = await presets.apply('previewBody');
66
81
  var template = await presets.apply('previewMainTemplate');
67
82
  var coreOptions = await presets.apply('core');
68
- var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, framework);
83
+ var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, frameworkName);
69
84
  var isProd = configType === 'PRODUCTION';
70
85
  var configs = [...(await presets.apply('config', [], options)), (0, _coreCommon.loadPreviewOrConfigFile)(options)].filter(Boolean);
71
86
  var entries = await presets.apply('entries', [], options);
@@ -94,8 +109,7 @@ var _default = async function _default(options) {
94
109
  } else {
95
110
  var frameworkInitEntry = _path.default.resolve(_path.default.join(workingDir, 'storybook-init-framework-entry.js'));
96
111
 
97
- var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
98
- virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
112
+ virtualModuleMapping[frameworkInitEntry] = `import '${frameworkName}';`;
99
113
  entries.push(frameworkInitEntry);
100
114
  var entryTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleEntry.template.js'));
101
115
  configs.forEach(function (configFilename) {
@@ -119,14 +133,14 @@ var _default = async function _default(options) {
119
133
  var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.cjs`));
120
134
 
121
135
  virtualModuleMapping[_storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
122
- frameworkImportPath: frameworkImportPath
136
+ frameworkName: frameworkName
123
137
  }) // Make sure we also replace quotes for this one
124
138
  .replace("'{{stories}}'", stories.map(_coreCommon.toRequireContextString).join(','));
125
139
  entries.push(_storiesFilename);
126
140
  }
127
141
  }
128
142
 
129
- var shouldCheckTs = (0, _useBaseTsSupport.useBaseTsSupport)(framework) && typescriptOptions.check;
143
+ var shouldCheckTs = (0, _useBaseTsSupport.useBaseTsSupport)(frameworkName) && typescriptOptions.check;
130
144
  var tsCheckOptions = typescriptOptions.checkOptions || {};
131
145
  return {
132
146
  name: 'preview',
@@ -189,7 +203,7 @@ var _default = async function _default(options) {
189
203
  process: require.resolve('process/browser.js')
190
204
  }), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
191
205
  module: {
192
- rules: [babelLoader, (0, _coreCommon.es6Transpiler)(), {
206
+ rules: [babelLoader, {
193
207
  test: /\.md$/,
194
208
  type: 'asset/source'
195
209
  }]
@@ -197,14 +211,12 @@ var _default = async function _default(options) {
197
211
  resolve: {
198
212
  extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
199
213
  modules: ['node_modules'].concat(envs.NODE_PATH || []),
200
- mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
201
- alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? _paths.default : {}), storybookPaths), {}, {
202
- react: _path.default.dirname(require.resolve('react/package.json')),
203
- 'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
204
- }),
214
+ mainFields: ['browser', 'module', 'main'].filter(Boolean),
215
+ alias: storybookPaths,
205
216
  fallback: {
206
217
  path: require.resolve('path-browserify'),
207
- assert: require.resolve('browser-assert')
218
+ assert: require.resolve('browser-assert'),
219
+ util: require.resolve('util')
208
220
  }
209
221
  },
210
222
  optimization: {
@@ -11,7 +11,7 @@ exports.useBaseTsSupport = void 0;
11
11
  */
12
12
  var useBaseTsSupport = function (framework) {
13
13
  // These packages both have their own TS implementation.
14
- return !['vue', 'angular'].includes(framework);
14
+ return !['@storybook/vue', '@storybook/angular'].includes(framework);
15
15
  };
16
16
 
17
17
  exports.useBaseTsSupport = useBaseTsSupport;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- var _frameworkImportPath = require("{{frameworkImportPath}}");
3
+ var _frameworkName = require("{{frameworkName}}");
4
4
 
5
5
  /* eslint-disable import/no-unresolved */
6
- (0, _frameworkImportPath.configure)(['{{stories}}'], module, false);
6
+ (0, _frameworkName.configure)(['{{stories}}'], module, false);
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/dist/esm/index.js CHANGED
@@ -9,7 +9,9 @@ import webpack, { ProgressPlugin } from 'webpack';
9
9
  import webpackDevMiddleware from 'webpack-dev-middleware';
10
10
  import webpackHotMiddleware from 'webpack-hot-middleware';
11
11
  import { logger } from '@storybook/node-logger';
12
- import { useProgressReporting, checkWebpackVersion } from '@storybook/core-common';
12
+ import { useProgressReporting } from '@storybook/core-common';
13
+ import { checkWebpackVersion } from '@storybook/core-webpack';
14
+ export * from './types';
13
15
  var compilation;
14
16
  var reject;
15
17
  export var executor = {
@@ -30,11 +32,11 @@ export var getConfig = async function (options) {
30
32
  var babelOptions = await presets.apply('babel', {}, _objectSpread(_objectSpread({}, options), {}, {
31
33
  typescriptOptions: typescriptOptions
32
34
  }));
33
- var frameworkOptions = await presets.apply(`${options.framework}Options`, {}, options);
35
+ var framework = await presets.apply('framework', {}, options);
34
36
  return presets.apply('webpack', {}, _objectSpread(_objectSpread({}, options), {}, {
35
37
  babelOptions: babelOptions,
36
38
  typescriptOptions: typescriptOptions,
37
- [`${options.framework}Options`]: frameworkOptions
39
+ frameworkOptions: typeof framework === 'string' ? {} : framework === null || framework === void 0 ? void 0 : framework.options
38
40
  }));
39
41
  };
40
42
  var asyncIterator;
@@ -164,8 +166,28 @@ var builder = async function* builderGeneratorFn({
164
166
  logger.info('=> Compiling preview..');
165
167
  var config = await getConfig(options);
166
168
  yield;
169
+ var compiler = webpackInstance(config);
170
+
171
+ if (!compiler) {
172
+ var err = `${config.name}: missing webpack compiler at runtime!`;
173
+ logger.error(err);
174
+ return {
175
+ hasErrors: function () {
176
+ return true;
177
+ },
178
+ hasWarnings: function () {
179
+ return false;
180
+ },
181
+ toJson: function () {
182
+ return {
183
+ warnings: [],
184
+ errors: [err]
185
+ };
186
+ }
187
+ };
188
+ }
189
+
167
190
  return new Promise(function (succeed, fail) {
168
- var compiler = webpackInstance(config);
169
191
  compiler.run(function (error, stats) {
170
192
  if (error || !stats || stats.hasErrors()) {
171
193
  logger.error('=> Failed to build the preview');
@@ -1,9 +1,9 @@
1
1
  import "core-js/modules/es.promise.js";
2
2
  import * as webpackReal from 'webpack';
3
3
  import { logger } from '@storybook/node-logger';
4
- import { loadCustomWebpackConfig } from '@storybook/core-common';
5
4
  import deprecate from 'util-deprecate';
6
5
  import dedent from 'ts-dedent';
6
+ import { loadCustomWebpackConfig } from '@storybook/core-webpack';
7
7
  import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
8
8
  export async function webpack(config, options) {
9
9
  // @ts-ignore
@@ -22,7 +22,7 @@ export async function webpack(config, options) {
22
22
 
23
23
  if (webpackConfig) {
24
24
  return deprecate(webpackConfig, dedent`
25
- You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
25
+ You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
26
26
  `)(finalDefaultConfig);
27
27
  } // Check whether user has a custom webpack config file and
28
28
  // return the (extended) base configuration if it's not available.
@@ -6,14 +6,14 @@ import { getProjectRoot } from '@storybook/core-common';
6
6
 
7
7
  export var useBaseTsSupport = function (framework) {
8
8
  // These packages both have their own TS implementation.
9
- return !['vue', 'angular'].includes(framework);
9
+ return !['@storybook/vue', '@storybook/angular'].includes(framework);
10
10
  };
11
11
  export var createBabelLoader = function (options, framework) {
12
12
  return {
13
13
  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
14
14
  use: [{
15
- loader: require.resolve('babel-loader'),
16
- options: options
15
+ loader: require.resolve('babel-loader') // options,
16
+
17
17
  }],
18
18
  include: [getProjectRoot()],
19
19
  exclude: /node_modules/
@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
7
7
  import "core-js/modules/es.promise.js";
8
8
  import { logger } from '@storybook/node-logger';
9
9
  export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
10
- var _storybookBaseConfig$;
10
+ var _coreOptions$builder, _storybookBaseConfig$;
11
11
 
12
12
  if (options.presetsList.some(function (preset) {
13
13
  return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -40,13 +40,13 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
40
40
 
41
41
  var isProd = storybookBaseConfig.mode !== 'development';
42
42
  var coreOptions = await options.presets.apply('core');
43
- var builderOptions = coreOptions.builder.options;
44
- var cacheConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.fsCache ? {
43
+ var builderOptions = ((_coreOptions$builder = coreOptions.builder) === null || _coreOptions$builder === void 0 ? void 0 : _coreOptions$builder.options) || {};
44
+ var cacheConfig = builderOptions.fsCache ? {
45
45
  cache: {
46
46
  type: 'filesystem'
47
47
  }
48
48
  } : {};
49
- var lazyCompilationConfig = builderOptions !== null && builderOptions !== void 0 && builderOptions.lazyCompilation && !isProd ? {
49
+ var lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? {
50
50
  lazyCompilation: {
51
51
  entries: false
52
52
  }
@@ -7,14 +7,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  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; }
8
8
 
9
9
  import path from 'path';
10
+ import dedent from 'ts-dedent';
10
11
  import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
11
- import HtmlWebpackPlugin from 'html-webpack-plugin';
12
+ import HtmlWebpackPlugin from 'html-webpack-plugin'; // @ts-ignore // -- this has typings for webpack4 in it, won't work
13
+
12
14
  import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
13
15
  import TerserWebpackPlugin from 'terser-webpack-plugin';
14
16
  import VirtualModulePlugin from 'webpack-virtual-modules';
15
17
  import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
16
- import themingPaths from '@storybook/theming/paths';
17
- import { toRequireContextString, es6Transpiler, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
18
+ import { toRequireContextString, stringifyProcessEnvs, handlebars, interpolate, toImportFn, normalizeStories, readTemplate, loadPreviewOrConfigFile } from '@storybook/core-common';
18
19
  import { createBabelLoader } from './babel-loader-preview';
19
20
  import { useBaseTsSupport } from './useBaseTsSupport';
20
21
  var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
@@ -29,22 +30,37 @@ export default (async function (options) {
29
30
  quiet = options.quiet,
30
31
  packageJson = options.packageJson,
31
32
  configType = options.configType,
32
- framework = options.framework,
33
- frameworkPath = options.frameworkPath,
34
33
  presets = options.presets,
35
34
  previewUrl = options.previewUrl,
36
35
  typescriptOptions = options.typescriptOptions,
37
- modern = options.modern,
38
36
  features = options.features,
39
37
  serverChannelUrl = options.serverChannelUrl;
38
+ var framework = await presets.apply('framework', undefined);
39
+
40
+ if (!framework) {
41
+ throw new Error(dedent`
42
+ You must to specify a framework in '.storybook/main.js' config.
43
+
44
+ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
45
+ `);
46
+ }
47
+
48
+ var _ref = typeof framework === 'string' ? {
49
+ name: framework,
50
+ options: {}
51
+ } : framework,
52
+ frameworkName = _ref.name,
53
+ frameworkOptions = _ref.options;
54
+
40
55
  var envs = await presets.apply('env');
41
- var logLevel = await presets.apply('logLevel', undefined);
42
- var frameworkOptions = await presets.apply(`${framework}Options`, {});
56
+ var logLevel = await presets.apply('logLevel', undefined); // FIXME: migrate away from frameworkOptions
57
+ // const frameworkOptions = await presets.apply(`${framework}Options`, {});
58
+
43
59
  var headHtmlSnippet = await presets.apply('previewHead');
44
60
  var bodyHtmlSnippet = await presets.apply('previewBody');
45
61
  var template = await presets.apply('previewMainTemplate');
46
62
  var coreOptions = await presets.apply('core');
47
- var babelLoader = createBabelLoader(babelOptions, framework);
63
+ var babelLoader = createBabelLoader(babelOptions, frameworkName);
48
64
  var isProd = configType === 'PRODUCTION';
49
65
  var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
50
66
  var entries = await presets.apply('entries', [], options);
@@ -68,8 +84,7 @@ export default (async function (options) {
68
84
  entries.push(configEntryPath);
69
85
  } else {
70
86
  var frameworkInitEntry = path.resolve(path.join(workingDir, 'storybook-init-framework-entry.js'));
71
- var frameworkImportPath = frameworkPath || `@storybook/${framework}`;
72
- virtualModuleMapping[frameworkInitEntry] = `import '${frameworkImportPath}';`;
87
+ virtualModuleMapping[frameworkInitEntry] = `import '${frameworkName}';`;
73
88
  entries.push(frameworkInitEntry);
74
89
  var entryTemplate = await readTemplate(path.join(__dirname, 'virtualModuleEntry.template.js'));
75
90
  configs.forEach(function (configFilename) {
@@ -93,14 +108,14 @@ export default (async function (options) {
93
108
  var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
94
109
 
95
110
  virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
96
- frameworkImportPath: frameworkImportPath
111
+ frameworkName: frameworkName
97
112
  }) // Make sure we also replace quotes for this one
98
113
  .replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
99
114
  entries.push(_storiesFilename);
100
115
  }
101
116
  }
102
117
 
103
- var shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check;
118
+ var shouldCheckTs = useBaseTsSupport(frameworkName) && typescriptOptions.check;
104
119
  var tsCheckOptions = typescriptOptions.checkOptions || {};
105
120
  return {
106
121
  name: 'preview',
@@ -163,7 +178,7 @@ export default (async function (options) {
163
178
  process: require.resolve('process/browser.js')
164
179
  }), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
165
180
  module: {
166
- rules: [babelLoader, es6Transpiler(), {
181
+ rules: [babelLoader, {
167
182
  test: /\.md$/,
168
183
  type: 'asset/source'
169
184
  }]
@@ -171,14 +186,12 @@ export default (async function (options) {
171
186
  resolve: {
172
187
  extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
173
188
  modules: ['node_modules'].concat(envs.NODE_PATH || []),
174
- mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
175
- alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? themingPaths : {}), storybookPaths), {}, {
176
- react: path.dirname(require.resolve('react/package.json')),
177
- 'react-dom': path.dirname(require.resolve('react-dom/package.json'))
178
- }),
189
+ mainFields: ['browser', 'module', 'main'].filter(Boolean),
190
+ alias: storybookPaths,
179
191
  fallback: {
180
192
  path: require.resolve('path-browserify'),
181
- assert: require.resolve('browser-assert')
193
+ assert: require.resolve('browser-assert'),
194
+ util: require.resolve('util')
182
195
  }
183
196
  },
184
197
  optimization: {
@@ -4,5 +4,5 @@
4
4
  */
5
5
  export var useBaseTsSupport = function (framework) {
6
6
  // These packages both have their own TS implementation.
7
- return !['vue', 'angular'].includes(framework);
7
+ return !['@storybook/vue', '@storybook/angular'].includes(framework);
8
8
  };
@@ -1,3 +1,3 @@
1
1
  /* eslint-disable import/no-unresolved */
2
- import { configure } from '{{frameworkImportPath}}';
2
+ import { configure } from '{{frameworkName}}';
3
3
  configure(['{{stories}}'], module, false);
@@ -0,0 +1 @@
1
+ export {};
@@ -1,5 +1,6 @@
1
1
  import webpack, { Stats, Configuration } from 'webpack';
2
2
  import type { Builder, Options } from '@storybook/core-common';
3
+ export * from './types';
3
4
  declare type WebpackBuilder = Builder<Configuration, Stats>;
4
5
  declare type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
5
6
  export declare const executor: {
@@ -7,8 +8,11 @@ export declare const executor: {
7
8
  };
8
9
  export declare const getConfig: WebpackBuilder['getConfig'];
9
10
  export declare const bail: WebpackBuilder['bail'];
10
- export declare const start: (options: BuilderStartOptions) => Promise<unknown>;
11
+ export declare const start: (options: BuilderStartOptions) => Promise<void | {
12
+ stats: webpack.Stats;
13
+ totalTime: [number, number];
14
+ bail: (e?: Error) => Promise<void>;
15
+ }>;
11
16
  export declare const build: (options: BuilderStartOptions) => Promise<void | webpack.Stats>;
12
17
  export declare const corePresets: string[];
13
18
  export declare const overridePresets: string[];
14
- export {};
@@ -1,5 +1,5 @@
1
1
  import * as webpackReal from 'webpack';
2
- import { Options } from '@storybook/core-common';
2
+ import type { Options } from '@storybook/core-common';
3
3
  import type { Configuration } from 'webpack';
4
4
  export declare function webpack(config: Configuration, options: Options): Promise<any>;
5
5
  export declare const webpackInstance: () => Promise<typeof webpackReal>;
@@ -7,7 +7,6 @@ export declare const createBabelLoader: (options: any, framework: string) => {
7
7
  test: RegExp;
8
8
  use: {
9
9
  loader: string;
10
- options: any;
11
10
  }[];
12
11
  include: string[];
13
12
  exclude: RegExp;