@storybook/angular 7.0.20 → 7.0.22

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

@@ -1,9 +1,31 @@
+/* eslint-disable global-require */
 // 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');
 const { default: StorybookNormalizeAngularEntryPlugin, } = require('./plugins/storybook-normalize-angular-entry-plugin');
+const getAngularWebpackUtils = () => {
+    try {
+        // Angular < 16.1.0
+        const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs');
+        return {
+            getCommonConfig,
+            getStylesConfig,
+            getDevServerConfig,
+            getTypeScriptConfig,
+        };
+    }
+    catch (e) {
+        // Angular > 16.1.0
+        const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
+        return {
+            getCommonConfig,
+            getStylesConfig,
+            getDevServerConfig,
+            getTypeScriptConfig,
+        };
+    }
+};
 /**
  * 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.
@@ -16,6 +38,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
     /**
      * Get angular-cli Webpack config
      */
+    const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } = getAngularWebpackUtils();
     const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
         // Default options
         index: 'noop-index',

package/dist/server/framework-preset-angular-ivy.js

@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.runNgcc = void 0;
-const core_1 = require("@angular/core");
 const path = __importStar(require("path"));
 /**
  * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
@@ -69,9 +68,10 @@ const runNgcc = async () => {
 };
 exports.runNgcc = runNgcc;
 const webpack = async (webpackConfig, options) => {
+    const { VERSION } = await loadEsmModule('@angular/core');
     const framework = await options.presets.apply('framework');
     const angularOptions = (typeof framework === 'object' ? framework.options : {});
-    const isAngular16OrNewer = parseInt(core_1.VERSION.major, 10) >= 16;
+    const isAngular16OrNewer = parseInt(VERSION.major, 10) >= 16;
     // Default to true, if undefined
     if (angularOptions.enableIvy === false) {
         return webpackConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.20",
+  "version": "7.0.22",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,21 +36,21 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/cli": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.22",
+    "@storybook/cli": "7.0.22",
+    "@storybook/client-logger": "7.0.22",
+    "@storybook/core-client": "7.0.22",
+    "@storybook/core-common": "7.0.22",
+    "@storybook/core-events": "7.0.22",
+    "@storybook/core-server": "7.0.22",
+    "@storybook/core-webpack": "7.0.22",
+    "@storybook/docs-tools": "7.0.22",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/telemetry": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.22",
+    "@storybook/node-logger": "7.0.22",
+    "@storybook/preview-api": "7.0.22",
+    "@storybook/telemetry": "7.0.22",
+    "@storybook/types": "7.0.22",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -125,4 +125,4 @@
     "tsConfig": "tsconfig.build.json"
   },
   "gitHead": "9fb2573aa274f3f69d3358050e8df9c903e8245f"
-}
+}

package/src/server/angular-cli-webpack.d.ts

@@ -0,0 +1,7 @@
+import { JsonObject } from '@angular-devkit/core';
+import { BuilderContext } from '@angular-devkit/architect';
+
+export declare function getWebpackConfig(
+  baseConfig: any,
+  options: { builderOptions: JsonObject; builderContext: BuilderContext }
+): any;

package/src/server/angular-cli-webpack.js

@@ -0,0 +1,127 @@
+/* eslint-disable global-require */
+// Private angular devkit stuff
+const {
+  generateI18nBrowserWebpackConfigFromContext,
+} = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
+const {
+  default: StorybookNormalizeAngularEntryPlugin,
+} = require('./plugins/storybook-normalize-angular-entry-plugin');
+
+const getAngularWebpackUtils = () => {
+  try {
+    // Angular < 16.1.0
+    const {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    } = require('@angular-devkit/build-angular/src/webpack/configs');
+
+    return {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    };
+  } catch (e) {
+    // Angular > 16.1.0
+    const {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
+
+    return {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    };
+  }
+};
+
+/**
+ * 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 { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
+    getAngularWebpackUtils();
+  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,
+    new StorybookNormalizeAngularEntryPlugin(),
+  ];
+
+  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/src/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -0,0 +1,54 @@
+const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
+
+/**
+ * Angular's webpack plugin @angular-devkit/build-angular/src/webpack/plugins/styles-webpack-plugin.js
+ * transforms the original webpackOptions.entry point array into a structure like this:
+ *
+ * ```js
+ * {
+ *  main: {
+ *    import: [...]
+ *  },
+ *
+ *  styles: {
+ *    import: [...]
+ *  },
+ * }
+ * ```
+ *
+ * Storybook throws an __webpack_require__.nmd is not a function error, when another runtime bundle (styles~runtime.iframe.bundle.js) is loaded.
+ * To prevent this error, we have to normalize the entry point to only generate one runtime bundle (main~runtime.iframe.bundle.js).
+ */
+export default class StorybookNormalizeAngularEntryPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.environment.tap(PLUGIN_NAME, () => {
+      const webpackOptions = compiler.options;
+      const entry =
+        typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+
+      webpackOptions.entry = async () => {
+        const entryResult = await entry;
+
+        if (entryResult.main && entryResult.styles) {
+          return {
+            main: {
+              import: Array.from(
+                new Set([...entryResult.main.import, ...entryResult.styles.import])
+              ),
+            },
+          };
+        }
+
+        return entry;
+      };
+    });
+
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+      this.compilation = compilation;
+    });
+  }
+}

package/src/typings.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;
+
+declare var __STORYBOOK_ADDONS_CHANNEL__: any;
+declare var __STORYBOOK_ADDONS_PREVIEW: any;
+declare var __STORYBOOK_COMPODOC_JSON__: any;
+declare var __STORYBOOK_CLIENT_API__: any;
+declare var __STORYBOOK_PREVIEW__: any;
+declare var __STORYBOOK_STORY_STORE__: any;
+declare var CHANNEL_OPTIONS: any;
+declare var DOCS_OPTIONS: any;
+
+declare var FEATURES:
+  | {
+      storyStoreV7?: boolean;
+      argTypeTargetsV7?: boolean;
+    }
+  | undefined;
+
+declare var IS_STORYBOOK: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
+declare var STORIES: any;
+declare var STORYBOOK_ENV: 'angular';
+declare var STORYBOOK_HOOKS_CONTEXT: any;