@storybook/angular 7.1.0-alpha.9 → 7.1.0-beta.0

package/jest.config.js

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

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@storybook/angular",
-  "version": "7.1.0-alpha.9",
+  "version": "7.1.0-beta.0",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
     "angular"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/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": "frameworks/angular"
+    "directory": "code/frameworks/angular"
   },
   "funding": {
     "type": "opencollective",
@@ -36,21 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.1.0-alpha.9",
-    "@storybook/cli": "7.1.0-alpha.9",
-    "@storybook/client-logger": "7.1.0-alpha.9",
-    "@storybook/core-client": "7.1.0-alpha.9",
-    "@storybook/core-common": "7.1.0-alpha.9",
-    "@storybook/core-events": "7.1.0-alpha.9",
-    "@storybook/core-server": "7.1.0-alpha.9",
-    "@storybook/core-webpack": "7.1.0-alpha.9",
-    "@storybook/docs-tools": "7.1.0-alpha.9",
+    "@storybook/builder-webpack5": "7.1.0-beta.0",
+    "@storybook/cli": "7.1.0-beta.0",
+    "@storybook/client-logger": "7.1.0-beta.0",
+    "@storybook/core-common": "7.1.0-beta.0",
+    "@storybook/core-events": "7.1.0-beta.0",
+    "@storybook/core-server": "7.1.0-beta.0",
+    "@storybook/core-webpack": "7.1.0-beta.0",
+    "@storybook/docs-tools": "7.1.0-beta.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.9",
-    "@storybook/node-logger": "7.1.0-alpha.9",
-    "@storybook/preview-api": "7.1.0-alpha.9",
-    "@storybook/telemetry": "7.1.0-alpha.9",
-    "@storybook/types": "7.1.0-alpha.9",
+    "@storybook/manager-api": "7.1.0-beta.0",
+    "@storybook/node-logger": "7.1.0-beta.0",
+    "@storybook/preview-api": "7.1.0-beta.0",
+    "@storybook/telemetry": "7.1.0-beta.0",
+    "@storybook/types": "7.1.0-beta.0",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -61,52 +60,51 @@
     "semver": "^7.3.7",
     "telejson": "^7.0.3",
     "ts-dedent": "^2.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "util-deprecate": "^1.0.2",
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1500.4",
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular-devkit/core": "^15.1.1",
-    "@angular/animations": "^15.1.1",
-    "@angular/cli": "^15.1.1",
-    "@angular/common": "^15.1.1",
-    "@angular/compiler": "^15.1.1",
-    "@angular/compiler-cli": "^15.1.1",
-    "@angular/core": "^15.1.1",
-    "@angular/forms": "^15.1.1",
-    "@angular/platform-browser": "^15.1.1",
-    "@angular/platform-browser-dynamic": "^15.1.1",
-    "@types/rimraf": "^3.0.2",
+    "@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": "^12.2.3",
-    "jest-specific-snapshot": "^7.0.0",
-    "rimraf": "^3.0.2",
+    "jest-preset-angular": "^13.0.1",
+    "jest-specific-snapshot": "^8.0.0",
     "tmp": "^0.2.1",
-    "typescript": "~4.9.3",
+    "typescript": "^5.0.4",
     "webpack": "5",
-    "zone.js": "^0.12.0"
+    "zone.js": "^0.13.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 16.0.0",
-    "@angular/cli": ">=14.1.0 < 16.0.0",
-    "@angular/common": ">=14.1.0 < 16.0.0",
-    "@angular/compiler": ">=14.1.0 < 16.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 16.0.0",
-    "@angular/core": ">=14.1.0 < 16.0.0",
-    "@angular/forms": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
+    "@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",
+    "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0"
   },
   "peerDependenciesMeta": {
@@ -124,5 +122,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "ec112401efaae6d3d4996c790a30301177570da9"
-}
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

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/header.component.ts

@@ -4,7 +4,7 @@ import type { User } from './User';
 @Component({
   selector: 'storybook-header',
   template: `<header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

package/template/cli/page.component.ts

@@ -10,7 +10,7 @@ import type { User } from './User';
       (onLogin)="doLogin()"
       (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

package/template/components/form.component.ts

@@ -6,7 +6,7 @@ import { Component, Output, EventEmitter } from '@angular/core';
     <form id="interaction-test-form" (submit)="handleSubmit($event)">
       <label>
         Enter Value
-        <input type="text" data-testid="value" [value]="value" required />
+        <input type="text" data-testid="value" [(ngModel)]="value" required />
       </label>
       <button type="submit">Submit</button>
       <p *ngIf="complete">Completed!!</p>

package/dist/server/framework-preset-angular-cli.test.d.ts

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