@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.
- package/dist/cjs/index.js +51 -4
- package/dist/cjs/presets/custom-webpack-preset.js +4 -4
- package/dist/cjs/preview/babel-loader-preview.js +3 -3
- package/dist/cjs/preview/base-webpack.config.js +4 -4
- package/dist/cjs/preview/iframe-webpack.config.js +31 -19
- package/dist/cjs/preview/useBaseTsSupport.js +1 -1
- package/dist/cjs/preview/virtualModuleStory.template.js +2 -2
- package/dist/cjs/types.js +5 -0
- package/dist/esm/index.js +26 -4
- package/dist/esm/presets/custom-webpack-preset.js +2 -2
- package/dist/esm/preview/babel-loader-preview.js +3 -3
- package/dist/esm/preview/base-webpack.config.js +4 -4
- package/dist/esm/preview/iframe-webpack.config.js +33 -20
- package/dist/esm/preview/useBaseTsSupport.js +1 -1
- package/dist/esm/preview/virtualModuleStory.template.js +1 -1
- package/dist/esm/types.js +1 -0
- package/dist/{ts3.9 → types}/index.d.ts +6 -2
- package/dist/{ts3.9 → types}/presets/custom-webpack-preset.d.ts +1 -1
- package/dist/{ts3.9 → types}/presets/preview-preset.d.ts +0 -0
- package/dist/{ts3.9 → types}/preview/babel-loader-preview.d.ts +0 -1
- package/dist/{ts3.9 → types}/preview/base-webpack.config.d.ts +0 -0
- package/dist/{ts3.9 → types}/preview/iframe-webpack.config.d.ts +0 -0
- package/dist/{ts3.9 → types}/preview/useBaseTsSupport.d.ts +0 -0
- package/dist/types/types.d.ts +40 -0
- package/package.json +32 -39
- package/templates/virtualModuleModernEntry.js.handlebars +2 -2
- package/dist/modern/index.js +0 -254
- package/dist/modern/presets/custom-webpack-preset.js +0 -49
- package/dist/modern/presets/preview-preset.js +0 -31
- package/dist/modern/preview/babel-loader-preview.js +0 -21
- package/dist/modern/preview/base-webpack.config.js +0 -84
- package/dist/modern/preview/iframe-webpack.config.js +0 -207
- package/dist/modern/preview/useBaseTsSupport.js +0 -8
- package/dist/modern/preview/virtualModuleEntry.template.js +0 -83
- package/dist/modern/preview/virtualModuleStory.template.js +0 -3
- package/dist/ts3.4/index.d.ts +0 -14
- package/dist/ts3.4/presets/custom-webpack-preset.d.ts +0 -6
- package/dist/ts3.4/presets/preview-preset.d.ts +0 -3
- package/dist/ts3.4/preview/babel-loader-preview.d.ts +0 -14
- package/dist/ts3.4/preview/base-webpack.config.d.ts +0 -3
- package/dist/ts3.4/preview/iframe-webpack.config.d.ts +0 -4
- 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,
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
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)(
|
|
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,
|
|
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: [
|
|
201
|
-
alias:
|
|
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
|
|
3
|
+
var _frameworkName = require("{{frameworkName}}");
|
|
4
4
|
|
|
5
5
|
/* eslint-disable import/no-unresolved */
|
|
6
|
-
(0,
|
|
6
|
+
(0, _frameworkName.configure)(['{{stories}}'], module, false);
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
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,
|
|
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: [
|
|
175
|
-
alias:
|
|
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: {
|
|
@@ -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<
|
|
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>;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|