@storybook/angular 0.0.0-pr-23609-sha-f47ef339

package/dist/server/framework-preset-angular-ivy.d.ts

@@ -0,0 +1,10 @@
+import { Configuration } from 'webpack';
+import { PresetOptions } from './preset-options';
+/**
+ * Run ngcc for converting modules to ivy format before starting storybook
+ * This step is needed in order to support Ivy in storybook
+ *
+ * Information about Ivy can be found here https://angular.io/guide/ivy
+ */
+export declare const runNgcc: () => Promise<void>;
+export declare const webpack: (webpackConfig: Configuration, options: PresetOptions) => Promise<Configuration>;

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

@@ -0,0 +1,103 @@
+"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.webpack = exports.runNgcc = void 0;
+const path = __importStar(require("path"));
+const fs_1 = __importDefault(require("fs"));
+/**
+ * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+function loadEsmModule(modulePath) {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    return new Function('modulePath', `return import(modulePath);`)(modulePath);
+}
+/**
+ * Run ngcc for converting modules to ivy format before starting storybook
+ * This step is needed in order to support Ivy in storybook
+ *
+ * Information about Ivy can be found here https://angular.io/guide/ivy
+ */
+const runNgcc = async () => {
+    let ngcc;
+    try {
+        // eslint-disable-next-line global-require
+        ngcc = require('@angular/compiler-cli/ngcc');
+    }
+    catch (error) {
+        ngcc = await loadEsmModule('@angular/compiler-cli/ngcc');
+    }
+    ngcc.process({
+        // should be async: true but does not work due to
+        // https://github.com/storybookjs/storybook/pull/11157/files#r615413803
+        async: false,
+        basePath: path.join(process.cwd(), 'node_modules'),
+        createNewEntryPointFormats: true,
+        compileAllFormats: false, // --first-only
+    });
+};
+exports.runNgcc = runNgcc;
+const webpack = async (webpackConfig, options) => {
+    const packageJsonPath = require.resolve('@angular/core/package.json');
+    const packageJson = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf8'));
+    const VERSION = packageJson.version;
+    const framework = await options.presets.apply('framework');
+    const angularOptions = (typeof framework === 'object' ? framework.options : {});
+    const angularMajorVersion = VERSION.split('.')[0];
+    const isAngular16OrNewer = parseInt(angularMajorVersion, 10) >= 16;
+    // Default to true, if undefined
+    if (angularOptions.enableIvy === false) {
+        return webpackConfig;
+    }
+    let extraMainFields = [];
+    if (angularOptions.enableNgcc !== false && !isAngular16OrNewer) {
+        // TODO: Drop if Angular 14 and 15 are not supported anymore
+        (0, exports.runNgcc)();
+        extraMainFields = ['es2015_ivy_ngcc', 'module_ivy_ngcc', 'main_ivy_ngcc'];
+    }
+    if (!isAngular16OrNewer) {
+        extraMainFields.push('es2015');
+    }
+    return {
+        ...webpackConfig,
+        resolve: {
+            ...webpackConfig.resolve,
+            mainFields: [...extraMainFields, 'browser', 'module', 'main'],
+        },
+    };
+};
+exports.webpack = webpack;

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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: any);
+    options: any;
+    apply(compiler: any): void;
+    compilation: any;
+}

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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).
+ */
+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;
+        });
+    }
+}
+exports.default = StorybookNormalizeAngularEntryPlugin;

package/dist/server/preset-options.d.ts

@@ -0,0 +1,13 @@
+import { Options as CoreOptions } from '@storybook/types';
+import { BuilderContext } from '@angular-devkit/architect';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+export type PresetOptions = CoreOptions & {
+    angularBrowserTarget?: string | null;
+    angularBuilderOptions?: {
+        styles?: StyleElement[];
+        stylePreprocessorOptions?: StylePreprocessorOptions;
+    };
+    angularBuilderContext?: BuilderContext | null;
+    tsConfig?: string;
+};

package/dist/server/preset-options.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/server/utils/filter-out-styling-rules.d.ts

@@ -0,0 +1,2 @@
+import { Configuration, RuleSetRule } from 'webpack';
+export declare const filterOutStylingRules: (config: Configuration) => RuleSetRule[];

package/dist/server/utils/filter-out-styling-rules.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterOutStylingRules = void 0;
+const isStylingRule = (rule) => {
+    const { test } = rule;
+    if (!test) {
+        return false;
+    }
+    if (!(test instanceof RegExp)) {
+        return false;
+    }
+    return test.test('.css') || test.test('.scss') || test.test('.sass');
+};
+const filterOutStylingRules = (config) => {
+    return config.module.rules.filter((rule) => !isStylingRule(rule));
+};
+exports.filterOutStylingRules = filterOutStylingRules;

package/dist/server/utils/module-is-available.d.ts

@@ -0,0 +1 @@
+export declare const moduleIsAvailable: (moduleName: string) => boolean;

package/dist/server/utils/module-is-available.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moduleIsAvailable = void 0;
+const moduleIsAvailable = (moduleName) => {
+    try {
+        require.resolve(moduleName);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};
+exports.moduleIsAvailable = moduleIsAvailable;

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact } from '@storybook/core-webpack';
+import { StorybookConfigWebpack, BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder } from '@storybook/builder-webpack5';
+type FrameworkName = '@storybook/angular';
+type BuilderName = '@storybook/builder-webpack5';
+export type FrameworkOptions = AngularOptions & {
+    builder?: BuilderOptions;
+};
+type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfigBase['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & StorybookConfigBase['typescript'];
+};
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
+export interface AngularOptions {
+    enableIvy?: boolean;
+    enableNgcc?: boolean;
+}
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/jest.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports = {
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+  preset: 'jest-preset-angular/presets/defaults-esm',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
+  coverageDirectory: './coverage/testapp',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
+    '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)',
+  ],
+};

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "@storybook/angular",
+  "version": "0.0.0-pr-23609-sha-f47ef339",
+  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
+  "keywords": [
+    "storybook",
+    "angular"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/angular"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.mjs",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc",
+    "prep": "../../../scripts/prepare/tsc.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-webpack5": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/cli": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/client-logger": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-common": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-events": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-server": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-webpack": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/docs-tools": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/node-logger": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/preview-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/telemetry": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/types": "0.0.0-pr-23609-sha-f47ef339",
+    "@types/node": "^16.0.0",
+    "@types/react": "^16.14.34",
+    "@types/react-dom": "^16.9.14",
+    "@types/semver": "^7.3.4",
+    "@types/webpack-env": "^1.18.0",
+    "find-up": "^5.0.0",
+    "read-pkg-up": "^7.0.1",
+    "semver": "^7.3.7",
+    "telejson": "^7.0.3",
+    "ts-dedent": "^2.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "util-deprecate": "^1.0.2",
+    "webpack": "5"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "^0.1600.0-rc.4",
+    "@angular-devkit/build-angular": "^16.0.0-rc.4",
+    "@angular-devkit/core": "^16.0.0-rc.4",
+    "@angular/animations": "^16.0.0-rc.4",
+    "@angular/cli": "^16.0.0-rc.4",
+    "@angular/common": "^16.0.0-rc.4",
+    "@angular/compiler": "^16.0.0-rc.4",
+    "@angular/compiler-cli": "^16.0.0-rc.4",
+    "@angular/core": "^16.0.0-rc.4",
+    "@angular/forms": "^16.0.0-rc.4",
+    "@angular/platform-browser": "^16.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "^16.0.0-rc.4",
+    "@types/cross-spawn": "^6.0.2",
+    "@types/tmp": "^0.2.3",
+    "cross-spawn": "^7.0.3",
+    "jest": "^29.3.1",
+    "jest-preset-angular": "^13.0.1",
+    "jest-specific-snapshot": "^8.0.0",
+    "tmp": "^0.2.1",
+    "typescript": "^5.0.4",
+    "webpack": "5",
+    "zone.js": "^0.13.0"
+  },
+  "peerDependencies": {
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1700.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 17.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 17.0.0",
+    "@angular/cli": ">=14.1.0 < 17.0.0",
+    "@angular/common": ">=14.1.0 < 17.0.0",
+    "@angular/compiler": ">=14.1.0 < 17.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 17.0.0",
+    "@angular/core": ">=14.1.0 < 17.0.0",
+    "@angular/forms": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0",
+    "@babel/core": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "rxjs": "^6.0.0 || ^7.4.0",
+    "typescript": "^4.0.0 || ^5.0.0",
+    "zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/cli": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "builders": "dist/builders/builders.json",
+  "bundler": {
+    "tsConfig": "tsconfig.build.json"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

package/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

package/renderer.d.ts

@@ -0,0 +1 @@
+export * from './dist/renderer.d';

package/renderer.js

@@ -0,0 +1 @@
+module.exports = require('./dist/renderer');

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,21 @@
+/* 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: import('@storybook/types').StorybookConfig['features'];
+
+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;

package/template/cli/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }]
+  }
+}