@storybook/builder-webpack5 7.0.0-alpha.1 → 7.0.0-alpha.4

package/dist/cjs/index.js

@@ -102,6 +102,7 @@ var bail = async function () {
 
 
   return new Promise(function (res, rej) {
+    // @ts-ignore
     if (process && compilation) {
       try {
         compilation.close(function () {
@@ -290,6 +291,7 @@ var builder = async function* builderGeneratorFn({
       });
 
       if (stats && stats.hasWarnings()) {
+        // @ts-ignore
         stats.toJson({
           warnings: true
         }).warnings.forEach(function (e) {

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

@@ -3,27 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBaseTsSupport = exports.createBabelLoader = void 0;
+exports.createBabelLoader = void 0;
 
 var _coreCommon = require("@storybook/core-common");
 
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['@storybook/vue', '@storybook/angular'].includes(framework);
-};
-
-exports.useBaseTsSupport = useBaseTsSupport;
-
-var createBabelLoader = function (options, framework) {
+var createBabelLoader = function (options, typescriptOptions) {
   return {
-    test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+    test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
     use: [{
-      loader: require.resolve('babel-loader') // options,
-
+      loader: require.resolve('babel-loader'),
+      options: options
     }],
     include: [(0, _coreCommon.getProjectRoot)()],
     exclude: /node_modules/

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

@@ -16,15 +16,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 _coreOptions$builder, _storybookBaseConfig$;
+  var _options$presetsList, _options$presetsList2, _coreOptions$builder, _storybookBaseConfig$, _storybookBaseConfig$2;
 
-  if (options.presetsList.some(function (preset) {
+  if ((_options$presetsList = options.presetsList) !== null && _options$presetsList !== void 0 && _options$presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
   })) {
     return storybookBaseConfig;
   }
 
-  var hasPostcssAddon = options.presetsList.some(function (preset) {
+  var hasPostcssAddon = (_options$presetsList2 = options.presetsList) === null || _options$presetsList2 === void 0 ? void 0 : _options$presetsList2.some(function (preset) {
     return /@storybook(\/|\\)addon-postcss/.test(typeof preset === 'string' ? preset : preset.name);
   });
   var cssLoaders = {};
@@ -63,7 +63,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   } : {};
   return _objectSpread(_objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
-      rules: [...storybookBaseConfig.module.rules, cssLoaders, {
+      rules: [...(((_storybookBaseConfig$ = storybookBaseConfig.module) === null || _storybookBaseConfig$ === void 0 ? void 0 : _storybookBaseConfig$.rules) || []), cssLoaders, {
         test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
         type: 'asset/resource',
         generator: {
@@ -83,7 +83,7 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
       }]
     }),
     resolve: _objectSpread(_objectSpread({}, storybookBaseConfig.resolve), {}, {
-      fallback: _objectSpread(_objectSpread({}, (_storybookBaseConfig$ = storybookBaseConfig.resolve) === null || _storybookBaseConfig$ === void 0 ? void 0 : _storybookBaseConfig$.fallback), {}, {
+      fallback: _objectSpread(_objectSpread({}, (_storybookBaseConfig$2 = storybookBaseConfig.resolve) === null || _storybookBaseConfig$2 === void 0 ? void 0 : _storybookBaseConfig$2.fallback), {}, {
         crypto: false,
         assert: false
       })

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

@@ -27,8 +27,6 @@ var _coreCommon = require("@storybook/core-common");
 
 var _babelLoaderPreview = require("./babel-loader-preview");
 
-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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,21 +35,23 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'components', 'core-events', 'router', 'theming', 'semver', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
+var storybookPaths = _objectSpread({
+  global: _path.default.dirname(require.resolve(`global/package.json`))
+}, ['addons', 'api', 'store', 'channels', 'channel-postmessage', 'channel-websocket', 'components', 'core-events', 'router', 'theming', 'semver', 'preview-web', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
   return _objectSpread(_objectSpread({}, acc), {}, {
     [`@storybook/${sbPackage}`]: _path.default.dirname(require.resolve(`@storybook/${sbPackage}/package.json`))
   });
-}, {});
+}, {}));
 
 var _default = async function _default(options) {
-  var babelOptions = options.babelOptions,
-      _options$outputDir = options.outputDir,
+  var _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? _path.default.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
       packageJson = options.packageJson,
       configType = options.configType,
       presets = options.presets,
       previewUrl = options.previewUrl,
+      babelOptions = options.babelOptions,
       typescriptOptions = options.typescriptOptions,
       features = options.features,
       serverChannelUrl = options.serverChannelUrl;
@@ -72,16 +72,13 @@ var _default = async function _default(options) {
       frameworkName = _ref.name,
       frameworkOptions = _ref.options;
 
+  var isProd = configType === 'PRODUCTION';
   var envs = await presets.apply('env');
-  var logLevel = await presets.apply('logLevel', undefined); // FIXME: migrate away from frameworkOptions
-  // const frameworkOptions = await presets.apply(`${framework}Options`, {});
-
+  var logLevel = await presets.apply('logLevel', undefined);
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var coreOptions = await presets.apply('core');
-  var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, frameworkName);
-  var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), (0, _coreCommon.loadPreviewOrConfigFile)(options)].filter(Boolean);
   var entries = await presets.apply('entries', [], options);
   var workingDir = process.cwd();
@@ -140,7 +137,7 @@ var _default = async function _default(options) {
     }
   }
 
-  var shouldCheckTs = (0, _useBaseTsSupport.useBaseTsSupport)(frameworkName) && typescriptOptions.check;
+  var shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
   var tsCheckOptions = typescriptOptions.checkOptions || {};
   return {
     name: 'preview',
@@ -203,7 +200,7 @@ var _default = async function _default(options) {
       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, {
+      rules: [(0, _babelLoaderPreview.createBabelLoader)(babelOptions, typescriptOptions), {
         test: /\.md$/,
         type: 'asset/source'
       }]
@@ -233,9 +230,7 @@ var _default = async function _default(options) {
           sourceMap: true,
           mangle: false,
           keep_fnames: true
-        } // It looks like the types from `@types/terser-webpack-plugin` are not matching the latest version of
-        // Webpack yet
-
+        }
       })] : []
     },
     performance: {

package/dist/esm/index.js

@@ -55,6 +55,7 @@ export var bail = async function () {
 
 
   return new Promise(function (res, rej) {
+    // @ts-ignore
     if (process && compilation) {
       try {
         compilation.close(function () {
@@ -230,6 +231,7 @@ var builder = async function* builderGeneratorFn({
       });
 
       if (stats && stats.hasWarnings()) {
+        // @ts-ignore
         stats.toJson({
           warnings: true
         }).warnings.forEach(function (e) {

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

@@ -1,19 +1,10 @@
 import { getProjectRoot } from '@storybook/core-common';
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-
-export var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['@storybook/vue', '@storybook/angular'].includes(framework);
-};
-export var createBabelLoader = function (options, framework) {
+export var createBabelLoader = function (options, typescriptOptions) {
   return {
-    test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+    test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
     use: [{
-      loader: require.resolve('babel-loader') // options,
-
+      loader: require.resolve('babel-loader'),
+      options: options
     }],
     include: [getProjectRoot()],
     exclude: /node_modules/

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

@@ -7,15 +7,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _coreOptions$builder, _storybookBaseConfig$;
+  var _options$presetsList, _options$presetsList2, _coreOptions$builder, _storybookBaseConfig$, _storybookBaseConfig$2;
 
-  if (options.presetsList.some(function (preset) {
+  if ((_options$presetsList = options.presetsList) !== null && _options$presetsList !== void 0 && _options$presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
   })) {
     return storybookBaseConfig;
   }
 
-  var hasPostcssAddon = options.presetsList.some(function (preset) {
+  var hasPostcssAddon = (_options$presetsList2 = options.presetsList) === null || _options$presetsList2 === void 0 ? void 0 : _options$presetsList2.some(function (preset) {
     return /@storybook(\/|\\)addon-postcss/.test(typeof preset === 'string' ? preset : preset.name);
   });
   var cssLoaders = {};
@@ -53,7 +53,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   } : {};
   return _objectSpread(_objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
-      rules: [...storybookBaseConfig.module.rules, cssLoaders, {
+      rules: [...(((_storybookBaseConfig$ = storybookBaseConfig.module) === null || _storybookBaseConfig$ === void 0 ? void 0 : _storybookBaseConfig$.rules) || []), cssLoaders, {
         test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
         type: 'asset/resource',
         generator: {
@@ -73,7 +73,7 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
       }]
     }),
     resolve: _objectSpread(_objectSpread({}, storybookBaseConfig.resolve), {}, {
-      fallback: _objectSpread(_objectSpread({}, (_storybookBaseConfig$ = storybookBaseConfig.resolve) === null || _storybookBaseConfig$ === void 0 ? void 0 : _storybookBaseConfig$.fallback), {}, {
+      fallback: _objectSpread(_objectSpread({}, (_storybookBaseConfig$2 = storybookBaseConfig.resolve) === null || _storybookBaseConfig$2 === void 0 ? void 0 : _storybookBaseConfig$2.fallback), {}, {
         crypto: false,
         assert: false
       })

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

@@ -17,21 +17,24 @@ import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { toRequireContextString, 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) {
+
+var storybookPaths = _objectSpread({
+  global: path.dirname(require.resolve(`global/package.json`))
+}, ['addons', 'api', 'store', 'channels', 'channel-postmessage', 'channel-websocket', 'components', 'core-events', 'router', 'theming', 'semver', 'preview-web', 'client-api', 'client-logger'].reduce(function (acc, sbPackage) {
   return _objectSpread(_objectSpread({}, acc), {}, {
     [`@storybook/${sbPackage}`]: path.dirname(require.resolve(`@storybook/${sbPackage}/package.json`))
   });
-}, {});
+}, {}));
+
 export default (async function (options) {
-  var babelOptions = options.babelOptions,
-      _options$outputDir = options.outputDir,
+  var _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? path.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
       packageJson = options.packageJson,
       configType = options.configType,
       presets = options.presets,
       previewUrl = options.previewUrl,
+      babelOptions = options.babelOptions,
       typescriptOptions = options.typescriptOptions,
       features = options.features,
       serverChannelUrl = options.serverChannelUrl;
@@ -52,16 +55,13 @@ export default (async function (options) {
       frameworkName = _ref.name,
       frameworkOptions = _ref.options;
 
+  var isProd = configType === 'PRODUCTION';
   var envs = await presets.apply('env');
-  var logLevel = await presets.apply('logLevel', undefined); // FIXME: migrate away from frameworkOptions
-  // const frameworkOptions = await presets.apply(`${framework}Options`, {});
-
+  var logLevel = await presets.apply('logLevel', undefined);
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
   var coreOptions = await presets.apply('core');
-  var babelLoader = createBabelLoader(babelOptions, frameworkName);
-  var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
   var entries = await presets.apply('entries', [], options);
   var workingDir = process.cwd();
@@ -115,7 +115,7 @@ export default (async function (options) {
     }
   }
 
-  var shouldCheckTs = useBaseTsSupport(frameworkName) && typescriptOptions.check;
+  var shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
   var tsCheckOptions = typescriptOptions.checkOptions || {};
   return {
     name: 'preview',
@@ -178,7 +178,7 @@ export default (async function (options) {
       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, {
+      rules: [createBabelLoader(babelOptions, typescriptOptions), {
         test: /\.md$/,
         type: 'asset/source'
       }]
@@ -208,9 +208,7 @@ export default (async function (options) {
           sourceMap: true,
           mangle: false,
           keep_fnames: true
-        } // It looks like the types from `@types/terser-webpack-plugin` are not matching the latest version of
-        // Webpack yet
-
+        }
       })] : []
     },
     performance: {

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ import webpack, { Stats, Configuration } from 'webpack';
 import type { Builder, Options } from '@storybook/core-common';
 export * from './types';
 declare type WebpackBuilder = Builder<Configuration, Stats>;
-declare type BuilderStartOptions = Partial<Parameters<WebpackBuilder['start']>['0']>;
+declare type BuilderStartOptions = Parameters<WebpackBuilder['start']>['0'];
 export declare const executor: {
     get: (options: Options) => Promise<typeof webpack>;
 };
@@ -11,7 +11,7 @@ export declare const bail: WebpackBuilder['bail'];
 export declare const start: (options: BuilderStartOptions) => Promise<void | {
     stats: webpack.Stats;
     totalTime: [number, number];
-    bail: (e?: Error) => Promise<void>;
+    bail: (e?: Error | undefined) => Promise<void>;
 }>;
 export declare const build: (options: BuilderStartOptions) => Promise<void | webpack.Stats>;
 export declare const corePresets: string[];

package/dist/types/preview/babel-loader-preview.d.ts

@@ -1,12 +1,9 @@
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-export declare const useBaseTsSupport: (framework: string) => boolean;
-export declare const createBabelLoader: (options: any, framework: string) => {
+import { TypescriptOptions } from '../types';
+export declare const createBabelLoader: (options: any, typescriptOptions: TypescriptOptions) => {
     test: RegExp;
     use: {
         loader: string;
+        options: any;
     }[];
     include: string[];
     exclude: RegExp;

package/dist/types/preview/iframe-webpack.config.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.4",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -33,22 +33,23 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addons": "7.0.0-alpha.1",
-    "@storybook/api": "7.0.0-alpha.1",
-    "@storybook/channel-postmessage": "7.0.0-alpha.1",
-    "@storybook/channels": "7.0.0-alpha.1",
-    "@storybook/client-api": "7.0.0-alpha.1",
-    "@storybook/client-logger": "7.0.0-alpha.1",
-    "@storybook/components": "7.0.0-alpha.1",
-    "@storybook/core-common": "7.0.0-alpha.1",
-    "@storybook/core-events": "7.0.0-alpha.1",
-    "@storybook/core-webpack": "7.0.0-alpha.1",
-    "@storybook/node-logger": "7.0.0-alpha.1",
-    "@storybook/preview-web": "7.0.0-alpha.1",
-    "@storybook/router": "7.0.0-alpha.1",
+    "@storybook/addons": "7.0.0-alpha.4",
+    "@storybook/api": "7.0.0-alpha.4",
+    "@storybook/channel-postmessage": "7.0.0-alpha.4",
+    "@storybook/channel-websocket": "7.0.0-alpha.4",
+    "@storybook/channels": "7.0.0-alpha.4",
+    "@storybook/client-api": "7.0.0-alpha.4",
+    "@storybook/client-logger": "7.0.0-alpha.4",
+    "@storybook/components": "7.0.0-alpha.4",
+    "@storybook/core-common": "7.0.0-alpha.4",
+    "@storybook/core-events": "7.0.0-alpha.4",
+    "@storybook/core-webpack": "7.0.0-alpha.4",
+    "@storybook/node-logger": "7.0.0-alpha.4",
+    "@storybook/preview-web": "7.0.0-alpha.4",
+    "@storybook/router": "7.0.0-alpha.4",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "7.0.0-alpha.1",
-    "@storybook/theming": "7.0.0-alpha.1",
+    "@storybook/store": "7.0.0-alpha.4",
+    "@storybook/theming": "7.0.0-alpha.4",
     "@types/node": "^14.0.10 || ^16.0.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-exports-order": "^0.0.2",
@@ -59,6 +60,7 @@
     "fork-ts-checker-webpack-plugin": "^7.2.8",
     "glob": "^7.1.6",
     "glob-promise": "^3.4.0",
+    "global": "^4.4.0",
     "html-webpack-plugin": "^5.5.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
@@ -91,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b90b85210f66da59656c2ef58b0910b156256bea"
+  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00"
 }

package/dist/cjs/preview/useBaseTsSupport.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useBaseTsSupport = void 0;
-
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['@storybook/vue', '@storybook/angular'].includes(framework);
-};
-
-exports.useBaseTsSupport = useBaseTsSupport;

package/dist/esm/preview/useBaseTsSupport.js

@@ -1,8 +0,0 @@
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-export var useBaseTsSupport = function (framework) {
-  // These packages both have their own TS implementation.
-  return !['@storybook/vue', '@storybook/angular'].includes(framework);
-};

package/dist/types/preview/useBaseTsSupport.d.ts

@@ -1,5 +0,0 @@
-/**
- * Returns true if the framework can use the base TS config.
- * @param {string} framework
- */
-export declare const useBaseTsSupport: (framework: string) => boolean;