@storybook/angular 6.5.9 → 7.0.0-alpha.2

package/dist/types/server/angular-cli-webpack-13.x.x.js

@@ -0,0 +1,70 @@
+// Private angular devkit stuff
+const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
+const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
+/**
+ * Extract webpack config from angular-cli 13.x.x
+ * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
+ * FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
+ *
+ * @param {*} baseConfig Previous webpack config from storybook
+ * @param {*} options { builderOptions, builderContext }
+ */
+exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
+    /**
+     * Get angular-cli Webpack config
+     */
+    const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
+        // Default options
+        index: 'noop-index',
+        main: 'noop-main',
+        outputPath: 'noop-out',
+        // Options provided by user
+        ...builderOptions,
+        // Fixed options
+        optimization: false,
+        namedChunks: false,
+        progress: false,
+        buildOptimizer: false,
+        aot: false,
+    }, builderContext, (wco) => [
+        getCommonConfig(wco),
+        getStylesConfig(wco),
+        getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
+    ]);
+    /**
+     * Merge baseConfig Webpack with angular-cli Webpack
+     */
+    const entry = [
+        ...baseConfig.entry,
+        ...(cliConfig.entry.styles ?? []),
+        ...(cliConfig.entry.polyfills ?? []),
+    ];
+    // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
+    // because @angular-devkit/build-angular created rules have include/exclude for global style files.
+    const rulesExcludingStyles = filterOutStylingRules(baseConfig);
+    const module = {
+        ...baseConfig.module,
+        rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
+    };
+    const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
+    const resolve = {
+        ...baseConfig.resolve,
+        modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
+        plugins: [
+            new TsconfigPathsPlugin({
+                configFile: builderOptions.tsConfig,
+                mainFields: ['browser', 'module', 'main'],
+            }),
+        ],
+    };
+    return {
+        ...baseConfig,
+        entry,
+        module,
+        plugins,
+        resolve,
+        resolveLoader: cliConfig.resolveLoader,
+    };
+};

package/dist/types/server/angular-cli-webpack-older.d.ts

@@ -0,0 +1,6 @@
+import webpack, { Configuration } from 'webpack';
+import type { PresetOptions } from './preset-options';
+/**
+ * Old way currently support version lower than 12.2.x
+ */
+export declare function getWebpackConfig(baseConfig: webpack.Configuration, options: PresetOptions): Promise<Configuration>;

package/dist/types/server/angular-cli-webpack-older.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWebpackConfig = void 0;
+const node_logger_1 = require("@storybook/node-logger");
+const tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
+const architect_1 = require("@angular-devkit/architect");
+const angular_read_workspace_1 = require("./angular-read-workspace");
+const angular_devkit_build_webpack_1 = require("./angular-devkit-build-webpack");
+const filter_out_styling_rules_1 = require("./utils/filter-out-styling-rules");
+/**
+ * Old way currently support version lower than 12.2.x
+ */
+async function getWebpackConfig(baseConfig, options) {
+    const dirToSearch = process.cwd();
+    // Read angular workspace
+    let workspaceConfig;
+    try {
+        workspaceConfig = await (0, angular_read_workspace_1.readAngularWorkspaceConfig)(dirToSearch);
+    }
+    catch (error) {
+        node_logger_1.logger.error(`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`);
+        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
+        return baseConfig;
+    }
+    // Find angular project target
+    let project;
+    let target;
+    let confName;
+    try {
+        // Default behavior when `angularBrowserTarget` are not explicitly defined to null
+        if (options.angularBrowserTarget !== null) {
+            const browserTarget = options.angularBrowserTarget
+                ? (0, architect_1.targetFromTargetString)(options.angularBrowserTarget)
+                : {
+                    configuration: undefined,
+                    project: (0, angular_read_workspace_1.getDefaultProjectName)(workspaceConfig),
+                    target: 'build',
+                };
+            const fondProject = (0, angular_read_workspace_1.findAngularProjectTarget)(workspaceConfig, browserTarget.project, browserTarget.target);
+            project = fondProject.project;
+            target = fondProject.target;
+            confName = browserTarget.configuration;
+            node_logger_1.logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}${confName ? `:${confName}` : ''}" for configuring Storybook`);
+        }
+        // Start storybook when only tsConfig is provided.
+        if (options.angularBrowserTarget === null && options.tsConfig) {
+            node_logger_1.logger.info(`=> Using default angular project with "tsConfig:${options.tsConfig}"`);
+            project = { root: '', extensions: {}, targets: undefined };
+            target = { builder: '', options: { tsConfig: options.tsConfig } };
+        }
+    }
+    catch (error) {
+        node_logger_1.logger.error(`=> Could not find angular project: ${error.message}`);
+        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
+        return baseConfig;
+    }
+    // Use angular-cli to get some webpack config
+    let angularCliWebpackConfig;
+    try {
+        angularCliWebpackConfig = await (0, angular_devkit_build_webpack_1.extractAngularCliWebpackConfig)(dirToSearch, project, target, confName);
+        node_logger_1.logger.info(`=> Using angular-cli webpack config`);
+    }
+    catch (error) {
+        node_logger_1.logger.error(`=> Could not get angular cli webpack config`);
+        throw error;
+    }
+    return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig);
+}
+exports.getWebpackConfig = getWebpackConfig;
+function mergeAngularCliWebpackConfig({ cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }, baseConfig) {
+    // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
+    // because @angular-devkit/build-angular created rules have include/exclude for global style files.
+    const rulesExcludingStyles = (0, filter_out_styling_rules_1.filterOutStylingRules)(baseConfig);
+    // styleWebpackConfig.entry adds global style files to the webpack context
+    const entry = [
+        ...baseConfig.entry,
+        // @ts-ignore
+        ...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
+    ];
+    const module = {
+        ...baseConfig.module,
+        rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles],
+    };
+    // We use cliCommonConfig plugins to serve static assets files.
+    const plugins = [
+        ...cliStyleWebpackConfig.plugins,
+        ...cliCommonWebpackConfig.plugins,
+        ...baseConfig.plugins,
+    ];
+    const resolve = {
+        ...baseConfig.resolve,
+        modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules])),
+        plugins: [
+            new tsconfig_paths_webpack_plugin_1.default({
+                configFile: tsConfigPath,
+                mainFields: ['browser', 'module', 'main'],
+            }),
+        ],
+    };
+    return {
+        ...baseConfig,
+        entry,
+        module,
+        plugins,
+        resolve,
+        resolveLoader: cliCommonWebpackConfig.resolveLoader,
+    };
+}

package/dist/{ts3.9 → types}/server/angular-devkit-build-webpack.d.ts

@@ -4,22 +4,22 @@
  *
  * It uses code block of angular cli to extract parts of webpack configuration
  */
-import webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { workspaces } from '@angular-devkit/core';
 export declare type AngularCliWebpackConfig = {
     cliCommonWebpackConfig: {
-        plugins: webpack.Plugin[];
+        plugins: Configuration['plugins'];
         resolve: {
             modules: string[];
         };
-        resolveLoader: webpack.ResolveLoader;
+        resolveLoader: Configuration['resolveLoader'];
     };
     cliStyleWebpackConfig: {
-        entry: string | string[] | webpack.Entry | webpack.EntryFunc;
+        entry: Configuration['entry'];
         module: {
-            rules: webpack.RuleSetRule[];
+            rules: Configuration['module']['rules'];
         };
-        plugins: webpack.Plugin[];
+        plugins: Configuration['plugins'];
     };
     tsConfigPath: string;
 };

package/dist/{ts3.9 → types}/server/angular-devkit-build-webpack.js

@@ -7,7 +7,11 @@
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -20,19 +24,10 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -47,12 +42,12 @@ const normalize_optimization_1 = require("./utils/normalize-optimization");
 const importAngularCliWebpackConfigGenerator = () => {
     let angularWebpackConfig;
     // First we look for webpack config according to directory structure of Angular 11
-    if (module_is_available_1.moduleIsAvailable('@angular-devkit/build-angular/src/webpack/configs')) {
+    if ((0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular/src/webpack/configs')) {
         // eslint-disable-next-line global-require
         angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
     }
     // We fallback on directory structure of Angular 10 (and below)
-    else if (module_is_available_1.moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs')) {
+    else if ((0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs')) {
         // eslint-disable-next-line global-require
         angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
     }
@@ -66,18 +61,18 @@ const importAngularCliWebpackConfigGenerator = () => {
 };
 const importAngularCliReadTsconfigUtil = () => {
     // First we look for webpack config according to directory structure of Angular 11
-    if (module_is_available_1.moduleIsAvailable('@angular-devkit/build-angular/src/utils/read-tsconfig')) {
+    if ((0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular/src/utils/read-tsconfig')) {
         // eslint-disable-next-line global-require
         return require('@angular-devkit/build-angular/src/utils/read-tsconfig');
     }
     // We fallback on directory structure of Angular 10 (and below)
-    if (module_is_available_1.moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig')) {
+    if ((0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig')) {
         // eslint-disable-next-line global-require
         return require('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig');
     }
     throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"');
 };
-const buildWebpackConfigOptions = (dirToSearch, project, target, confName) => __awaiter(void 0, void 0, void 0, function* () {
+const buildWebpackConfigOptions = async (dirToSearch, project, target, confName) => {
     let conf = {};
     if (confName) {
         if (!target.configurations) {
@@ -88,65 +83,82 @@ const buildWebpackConfigOptions = (dirToSearch, project, target, confName) => __
         }
         conf = target.configurations[confName];
     }
-    const projectBuildOptions = Object.assign(Object.assign({}, target.options), conf);
+    const projectBuildOptions = { ...target.options, ...conf };
     const requiredOptions = ['tsConfig'];
     if (!requiredOptions.every((key) => !!projectBuildOptions[key])) {
         throw new Error(`Missing required options in project target. Check "${requiredOptions.join(', ')}"`);
     }
-    const workspaceRootNormalized = core_1.normalize(dirToSearch);
-    const projectRootNormalized = core_1.resolve(workspaceRootNormalized, core_1.normalize(project.root || ''));
+    const workspaceRootNormalized = (0, core_1.normalize)(dirToSearch);
+    const projectRootNormalized = (0, core_1.resolve)(workspaceRootNormalized, (0, core_1.normalize)(project.root || ''));
     const sourceRootNormalized = project.sourceRoot
-        ? core_1.resolve(workspaceRootNormalized, core_1.normalize(project.sourceRoot))
+        ? (0, core_1.resolve)(workspaceRootNormalized, (0, core_1.normalize)(project.sourceRoot))
         : undefined;
-    const tsConfigPath = path_1.default.resolve(core_1.getSystemPath(workspaceRootNormalized), projectBuildOptions.tsConfig);
-    const tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
-    const ts = yield Promise.resolve().then(() => __importStar(require('typescript')));
+    const tsConfigPath = path_1.default.resolve((0, core_1.getSystemPath)(workspaceRootNormalized), projectBuildOptions.tsConfig);
+    const tsConfig = await importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
+    const ts = await Promise.resolve().then(() => __importStar(require('typescript')));
     const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
-    const buildOptions = Object.assign(Object.assign({ 
+    const buildOptions = {
         // Default options
-        budgets: [], fileReplacements: [], main: '', outputPath: 'dist/storybook-angular', scripts: [], sourceMap: {}, styles: [], lazyModules: [] }, projectBuildOptions), { assets: normalize_asset_patterns_1.normalizeAssetPatterns(projectBuildOptions.assets || [], workspaceRootNormalized, projectRootNormalized, sourceRootNormalized), optimization: normalize_optimization_1.normalizeOptimization(projectBuildOptions.optimization), 
+        budgets: [],
+        fileReplacements: [],
+        main: '',
+        outputPath: 'dist/storybook-angular',
+        scripts: [],
+        sourceMap: {},
+        styles: [],
+        // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        lazyModules: [],
+        // Project Options
+        ...projectBuildOptions,
+        assets: (0, normalize_asset_patterns_1.normalizeAssetPatterns)(projectBuildOptions.assets || [], workspaceRootNormalized, projectRootNormalized, sourceRootNormalized),
+        optimization: (0, normalize_optimization_1.normalizeOptimization)(projectBuildOptions.optimization),
         // Forced options
-        statsJson: false, forkTypeChecker: false });
+        statsJson: false,
+        // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        forkTypeChecker: false,
+    };
     return {
-        root: core_1.getSystemPath(workspaceRootNormalized),
+        projectName: 'this-is-just-a-fake-name-for-getting-rid-of-the-error',
+        root: (0, core_1.getSystemPath)(workspaceRootNormalized),
         // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^)
-        logger: node_1.createConsoleLogger(),
-        projectRoot: core_1.getSystemPath(projectRootNormalized),
-        sourceRoot: sourceRootNormalized ? core_1.getSystemPath(sourceRootNormalized) : undefined,
+        logger: (0, node_1.createConsoleLogger)(),
+        projectRoot: (0, core_1.getSystemPath)(projectRootNormalized),
+        sourceRoot: sourceRootNormalized ? (0, core_1.getSystemPath)(sourceRootNormalized) : undefined,
         buildOptions,
         tsConfig,
         tsConfigPath,
         scriptTarget,
     };
-});
+};
 /**
  * Uses angular cli to extract webpack configuration.
  * The `AngularCliWebpackConfig` type lists the parts used by storybook
  */
-function extractAngularCliWebpackConfig(dirToSearch, project, target, confName) {
-    var _a;
-    return __awaiter(this, void 0, void 0, function* () {
-        const { getCommonConfig, getStylesConfig } = importAngularCliWebpackConfigGenerator();
-        const webpackConfigOptions = yield buildWebpackConfigOptions(dirToSearch, project, target, confName);
-        const cliCommonConfig = getCommonConfig(webpackConfigOptions);
-        const cliStyleConfig = getStylesConfig(webpackConfigOptions);
-        return {
-            cliCommonWebpackConfig: {
-                plugins: cliCommonConfig.plugins,
-                resolve: {
-                    modules: (_a = cliCommonConfig.resolve) === null || _a === void 0 ? void 0 : _a.modules,
-                },
-                resolveLoader: cliCommonConfig.resolveLoader,
+async function extractAngularCliWebpackConfig(dirToSearch, project, target, confName) {
+    const { getCommonConfig, getStylesConfig } = importAngularCliWebpackConfigGenerator();
+    const webpackConfigOptions = await buildWebpackConfigOptions(dirToSearch, project, target, confName);
+    const cliCommonConfig = getCommonConfig(webpackConfigOptions);
+    const cliStyleConfig = getStylesConfig(webpackConfigOptions);
+    return {
+        cliCommonWebpackConfig: {
+            plugins: cliCommonConfig.plugins,
+            resolve: {
+                modules: cliCommonConfig.resolve?.modules,
             },
-            cliStyleWebpackConfig: {
-                entry: cliStyleConfig.entry,
-                module: {
-                    rules: [...cliStyleConfig.module.rules],
-                },
-                plugins: cliStyleConfig.plugins,
+            resolveLoader: cliCommonConfig.resolveLoader,
+        },
+        cliStyleWebpackConfig: {
+            entry: cliStyleConfig.entry,
+            module: {
+                rules: [...cliStyleConfig.module.rules],
             },
-            tsConfigPath: webpackConfigOptions.tsConfigPath,
-        };
-    });
+            plugins: cliStyleConfig.plugins,
+        },
+        tsConfigPath: webpackConfigOptions.tsConfigPath,
+    };
 }
 exports.extractAngularCliWebpackConfig = extractAngularCliWebpackConfig;

package/dist/{ts3.9 → types}/server/angular-read-workspace.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findAngularProjectTarget = exports.getDefaultProjectName = exports.readAngularWorkspaceConfig = void 0;
 const node_1 = require("@angular-devkit/core/node");
@@ -18,7 +9,7 @@ const core_1 = require("@angular-devkit/core");
  * - Either from NX if it is present
  * - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core
  */
-exports.readAngularWorkspaceConfig = (dirToSearch) => __awaiter(void 0, void 0, void 0, function* () {
+const readAngularWorkspaceConfig = async (dirToSearch) => {
     const host = core_1.workspaces.createWorkspaceHost(new node_1.NodeJsSyncHost());
     try {
         /**
@@ -49,9 +40,10 @@ exports.readAngularWorkspaceConfig = (dirToSearch) => __awaiter(void 0, void 0,
     catch (e) {
         // Ignore if the client does not use NX
     }
-    return (yield core_1.workspaces.readWorkspace(dirToSearch, host)).workspace;
-});
-exports.getDefaultProjectName = (workspace) => {
+    return (await core_1.workspaces.readWorkspace(dirToSearch, host)).workspace;
+};
+exports.readAngularWorkspaceConfig = readAngularWorkspaceConfig;
+const getDefaultProjectName = (workspace) => {
     const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
     if (environmentProjectName) {
         return environmentProjectName;
@@ -68,7 +60,8 @@ exports.getDefaultProjectName = (workspace) => {
     }
     throw new Error('No angular projects found');
 };
-exports.findAngularProjectTarget = (workspace, projectName, targetName) => {
+exports.getDefaultProjectName = getDefaultProjectName;
+const findAngularProjectTarget = (workspace, projectName, targetName) => {
     if (!workspace.projects || !Object.keys(workspace.projects).length) {
         throw new Error('No angular projects found');
     }
@@ -82,3 +75,4 @@ exports.findAngularProjectTarget = (workspace, projectName, targetName) => {
     const target = project.targets.get(targetName);
     return { project, target };
 };
+exports.findAngularProjectTarget = findAngularProjectTarget;

package/dist/{ts3.9 → types}/server/create-fork-ts-checker-plugin.js

@@ -9,7 +9,7 @@ const node_logger_1 = require("@storybook/node-logger");
 function default_1(tsLoaderOptions) {
     if (tsLoaderOptions && tsLoaderOptions.configFile) {
         return new fork_ts_checker_webpack_plugin_1.default({
-            tsconfig: tsLoaderOptions.configFile,
+            typescript: { configFile: tsLoaderOptions.configFile },
             async: true,
         });
     }

package/dist/{ts3.9 → types}/server/framework-preset-angular-cli.d.ts

@@ -1,3 +1,3 @@
 import webpack from 'webpack';
-import { PresetOptions } from './options';
+import type { PresetOptions } from './preset-options';
 export declare function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions): Promise<webpack.Configuration>;

package/dist/types/server/framework-preset-angular-cli.js

@@ -0,0 +1,175 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackFinal = void 0;
+const node_logger_1 = require("@storybook/node-logger");
+const architect_1 = require("@angular-devkit/architect");
+const find_up_1 = require("find-up");
+const semver_1 = __importDefault(require("@storybook/semver"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
+const core_1 = require("@angular-devkit/core");
+const module_is_available_1 = require("./utils/module-is-available");
+const angular_cli_webpack_12_2_x_1 = require("./angular-cli-webpack-12.2.x");
+const angular_cli_webpack_13_x_x_1 = require("./angular-cli-webpack-13.x.x");
+const angular_cli_webpack_older_1 = require("./angular-cli-webpack-older");
+const angular_read_workspace_1 = require("./angular-read-workspace");
+async function webpackFinal(baseConfig, options) {
+    if (!(0, module_is_available_1.moduleIsAvailable)('@angular-devkit/build-angular')) {
+        node_logger_1.logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
+        return baseConfig;
+    }
+    const angularCliVersion = await Promise.resolve().then(() => __importStar(require('@angular/cli'))).then((m) => semver_1.default.coerce(m.VERSION.full));
+    /**
+     * Ordered array to use the specific  getWebpackConfig according to some condition like angular-cli version
+     */
+    const webpackGetterByVersions = [
+        {
+            info: '=> Loading angular-cli config for angular >= 13.0.0',
+            condition: semver_1.default.satisfies(angularCliVersion, '>=13.0.0'),
+            getWebpackConfig: async (_baseConfig, _options) => {
+                const builderContext = getBuilderContext(_options);
+                const builderOptions = await getBuilderOptions(_options, builderContext);
+                const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
+                return (0, angular_cli_webpack_13_x_x_1.getWebpackConfig)(_baseConfig, {
+                    builderOptions: {
+                        watch: options.configType === 'DEVELOPMENT',
+                        ...legacyDefaultOptions,
+                        ...builderOptions,
+                    },
+                    builderContext,
+                });
+            },
+        },
+        {
+            info: '=> Loading angular-cli config for angular 12.2.x',
+            condition: semver_1.default.satisfies(angularCliVersion, '12.2.x') && options.angularBuilderContext,
+            getWebpackConfig: async (_baseConfig, _options) => {
+                const builderContext = getBuilderContext(_options);
+                const builderOptions = await getBuilderOptions(_options, builderContext);
+                return (0, angular_cli_webpack_12_2_x_1.getWebpackConfig)(_baseConfig, {
+                    builderOptions,
+                    builderContext,
+                });
+            },
+        },
+        {
+            info: '=> Loading angular-cli config for angular lower than 12.2.0',
+            condition: true,
+            getWebpackConfig: angular_cli_webpack_older_1.getWebpackConfig,
+        },
+    ];
+    const webpackGetter = webpackGetterByVersions.find((wg) => wg.condition);
+    node_logger_1.logger.info(webpackGetter.info);
+    return Promise.resolve(webpackGetter.getWebpackConfig(baseConfig, options));
+}
+exports.webpackFinal = webpackFinal;
+/**
+ * Get Builder Context
+ * If storybook is not start by angular builder create dumb BuilderContext
+ */
+function getBuilderContext(options) {
+    return (options.angularBuilderContext ??
+        {
+            target: { project: 'noop-project', builder: '', options: {} },
+            workspaceRoot: process.cwd(),
+            getProjectMetadata: () => ({}),
+            getTargetOptions: () => ({}),
+            logger: new core_1.logging.Logger('Storybook'),
+        });
+}
+/**
+ * Get builder options
+ * Merge target options from browser target and from storybook options
+ */
+async function getBuilderOptions(options, builderContext) {
+    /**
+     * Get Browser Target options
+     */
+    let browserTargetOptions = {};
+    if (options.angularBrowserTarget) {
+        const browserTarget = (0, architect_1.targetFromTargetString)(options.angularBrowserTarget);
+        node_logger_1.logger.info(`=> Using angular browser target options from "${browserTarget.project}:${browserTarget.target}${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`);
+        browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
+    }
+    /**
+     * Merge target options from browser target options and from storybook options
+     */
+    const builderOptions = {
+        ...browserTargetOptions,
+        ...options.angularBuilderOptions,
+        tsConfig: options.tsConfig ??
+            (0, find_up_1.sync)('tsconfig.json', { cwd: options.configDir }) ??
+            browserTargetOptions.tsConfig,
+    };
+    node_logger_1.logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
+    return builderOptions;
+}
+/**
+ * Get options from legacy way
+ * /!\ This is only for backward compatibility and would be removed on Storybook 7.0
+ * only work for angular.json with [defaultProject].build or "storybook.build" config
+ */
+async function getLegacyDefaultBuildOptions(options) {
+    if (options.angularBrowserTarget !== undefined) {
+        // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without)
+        return {};
+    }
+    node_logger_1.logger.warn((0, ts_dedent_1.default) `Your Storybook startup uses a solution that will not be supported in version 7.0. 
+            You must use angular builder to have an explicit configuration on the project used in angular.json
+            Read more at:
+            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
+            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
+          `);
+    const dirToSearch = process.cwd();
+    // Read angular workspace
+    let workspaceConfig;
+    try {
+        workspaceConfig = await (0, angular_read_workspace_1.readAngularWorkspaceConfig)(dirToSearch);
+    }
+    catch (error) {
+        node_logger_1.logger.error(`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`);
+        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
+        return {};
+    }
+    // Find angular project target
+    try {
+        const browserTarget = {
+            configuration: undefined,
+            project: (0, angular_read_workspace_1.getDefaultProjectName)(workspaceConfig),
+            target: 'build',
+        };
+        const { target } = (0, angular_read_workspace_1.findAngularProjectTarget)(workspaceConfig, browserTarget.project, browserTarget.target);
+        node_logger_1.logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`);
+        return { ...target.options };
+    }
+    catch (error) {
+        node_logger_1.logger.error(`=> Could not find angular project: ${error.message}`);
+        node_logger_1.logger.info(`=> Fail to load angular-cli config. Using base config`);
+        return {};
+    }
+}