@storybook/angular 8.5.0 → 8.6.0-alpha.1

package/dist/builders/build-storybook/index.d.ts

@@ -16,11 +16,12 @@ export type StorybookBuilderOptions = JsonObject & {
     preserveSymlinks?: boolean;
     assets?: AssetPattern[];
     sourceMap?: SourceMapUnion;
+    experimentalZoneless?: boolean;
 } & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'test' | 'webpackStatsJson' | 'statsJson' | 'disableTelemetry' | 'debugWebpack' | 'previewUrl'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {
     [key: string]: any;
 };
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<JsonObject & {
+declare const _default: import("@angular-devkit/architect").Builder<JsonObject & {
     browserTarget?: string | null | undefined;
     tsConfig?: string | undefined;
     test: boolean;
@@ -33,5 +34,6 @@ declare const _default: import("@angular-devkit/architect/src/internal").Builder
     preserveSymlinks?: boolean | undefined;
     assets?: AssetPattern[] | undefined;
     sourceMap?: SourceMapUnion | undefined;
+    experimentalZoneless?: boolean | undefined;
 } & Pick<CLIOptions, "statsJson" | "outputDir" | "configDir" | "loglevel" | "quiet" | "test" | "webpackStatsJson" | "disableTelemetry" | "debugWebpack" | "previewUrl">>;
 export default _default;

package/dist/builders/build-storybook/index.js

@@ -24,7 +24,7 @@ const commandBuilder = (options, context) => {
             outputDir: 'SBCONFIG_OUTPUT_DIR',
             configDir: 'SBCONFIG_CONFIG_DIR',
         });
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, test, outputDir, quiet, enableProdMode = true, webpackStatsJson, statsJson, debugWebpack, disableTelemetry, assets, previewUrl, sourceMap = false, preserveSymlinks = false, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, test, outputDir, quiet, enableProdMode = true, webpackStatsJson, statsJson, debugWebpack, disableTelemetry, assets, previewUrl, sourceMap = false, preserveSymlinks = false, experimentalZoneless = false, } = options;
         const standaloneOptions = {
             packageJson: (0, fd_package_json_1.findPackageSync)(__dirname),
             configDir,
@@ -43,6 +43,7 @@ const commandBuilder = (options, context) => {
                 ...(assets ? { assets } : {}),
                 sourceMap,
                 preserveSymlinks,
+                experimentalZoneless,
             },
             tsConfig,
             webpackStatsJson,

package/dist/builders/build-storybook/schema.json

@@ -121,6 +121,11 @@
             "type": ["boolean", "object"],
             "description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
             "default": false
+        },
+        "experimentalZoneless": {
+            "type": "boolean",
+            "description": "Experimental: Use zoneless change detection.",
+            "default": false
         }
     },
     "additionalProperties": false,

package/dist/builders/start-storybook/index.d.ts

@@ -14,9 +14,10 @@ export type StorybookBuilderOptions = JsonObject & {
     assets?: AssetPattern[];
     preserveSymlinks?: boolean;
     sourceMap?: SourceMapUnion;
+    experimentalZoneless?: boolean;
 } & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry' | 'initialPath' | 'open' | 'docs' | 'debugWebpack' | 'webpackStatsJson' | 'statsJson' | 'loglevel' | 'previewUrl'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<JsonObject & {
+declare const _default: import("@angular-devkit/architect").Builder<JsonObject & {
     browserTarget?: string | null | undefined;
     tsConfig?: string | undefined;
     compodoc: boolean;
@@ -27,5 +28,6 @@ declare const _default: import("@angular-devkit/architect/src/internal").Builder
     assets?: AssetPattern[] | undefined;
     preserveSymlinks?: boolean | undefined;
     sourceMap?: SourceMapUnion | undefined;
+    experimentalZoneless?: boolean | undefined;
 } & Pick<CLIOptions, "docs" | "statsJson" | "configDir" | "loglevel" | "quiet" | "webpackStatsJson" | "disableTelemetry" | "debugWebpack" | "previewUrl" | "port" | "host" | "initialPath" | "https" | "sslCa" | "sslCert" | "sslKey" | "smokeTest" | "open" | "ci">>;
 export default _default;

package/dist/builders/start-storybook/index.js

@@ -30,7 +30,7 @@ const commandBuilder = (options, context) => {
             ci: 'CI',
         });
         options.port = parseInt(`${options.port}`, 10);
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, initialPath, open, debugWebpack, loglevel, webpackStatsJson, statsJson, previewUrl, sourceMap = false, preserveSymlinks = false, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, initialPath, open, debugWebpack, loglevel, webpackStatsJson, statsJson, previewUrl, sourceMap = false, preserveSymlinks = false, experimentalZoneless = false, } = options;
         const standaloneOptions = {
             packageJson: (0, fd_package_json_1.findPackageSync)(__dirname),
             ci,
@@ -54,6 +54,7 @@ const commandBuilder = (options, context) => {
                 ...(assets ? { assets } : {}),
                 preserveSymlinks,
                 sourceMap,
+                experimentalZoneless,
             },
             tsConfig,
             initialPath,

package/dist/builders/start-storybook/schema.json

@@ -157,6 +157,11 @@
             "type": ["boolean", "object"],
             "description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
             "default": false
+        },
+        "experimentalZoneless": {
+            "type": "boolean",
+            "description": "Experimental: Use zoneless change detection.",
+            "default": false
         }
     },
     "additionalProperties": false,

package/dist/builders/utils/standalone-options.d.ts

@@ -11,6 +11,7 @@ export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
         assets?: AssetPattern[];
         sourceMap?: SourceMapUnion;
         preserveSymlinks?: boolean;
+        experimentalZoneless?: boolean;
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -4,6 +4,11 @@ type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;
 };
+declare global {
+    const STORYBOOK_ANGULAR_OPTIONS: {
+        experimentalZoneless: boolean;
+    };
+}
 /**
  * Attribute name for the story UID that may be written to the targetDOMNode.
  *
@@ -50,6 +55,19 @@ export declare abstract class AbstractRenderer {
      * @protected
      */
     protected generateTargetSelectorFromStoryId(id: string): string;
+    /**
+     * Angular is unable to handle components that have selectors with accented attributes.
+     *
+     * Therefore, stories break when meta's title contains accents.
+     * https://github.com/storybookjs/storybook/issues/29132
+     *
+     * This method filters accents from a given raw id. For example, this method converts
+     * 'Example/Button with an "é" accent' into 'Example/Button with an "e" accent'.
+     *
+     * @memberof AbstractRenderer
+     * @protected
+     */
+    protected generateStoryUIdFromRawStoryUid(rawStoryUid: string | null): string | null;
     /** Adds DOM element that angular will use as bootstrap component. */
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;

package/dist/client/angular-beta/AbstractRenderer.js

@@ -1,4 +1,27 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = exports.STORY_UID_ATTRIBUTE = void 0;
 const platform_browser_1 = require("@angular/platform-browser");
@@ -63,7 +86,7 @@ class AbstractRenderer {
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
         const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
-        const storyUid = targetDOMNode.getAttribute(exports.STORY_UID_ATTRIBUTE);
+        const storyUid = this.generateStoryUIdFromRawStoryUid(targetDOMNode.getAttribute(exports.STORY_UID_ATTRIBUTE));
         const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
         if (storyUid !== null) {
             const element = targetDOMNode.querySelector(targetSelector);
@@ -75,14 +98,24 @@ class AbstractRenderer {
             targetSelector: componentSelector,
             analyzedMetadata,
         });
+        const providers = [
+            (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+            ...analyzedMetadata.applicationProviders,
+            ...(storyFnAngular.applicationConfig?.providers ?? []),
+        ];
+        if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
+            const { provideExperimentalZonelessChangeDetection } = await Promise.resolve().then(() => __importStar(require('@angular/core')));
+            if (!provideExperimentalZonelessChangeDetection) {
+                throw new Error('Experimental zoneless change detection requires Angular 18 or higher');
+            }
+            else {
+                providers.unshift(provideExperimentalZonelessChangeDetection());
+            }
+        }
         const applicationRef = await (0, BootstrapQueue_1.queueBootstrapping)(() => {
             return (0, platform_browser_1.bootstrapApplication)(application, {
                 ...storyFnAngular.applicationConfig,
-                providers: [
-                    (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
-                    ...analyzedMetadata.applicationProviders,
-                    ...(storyFnAngular.applicationConfig?.providers ?? []),
-                ],
+                providers,
             });
         });
         applicationRefs.set(targetDOMNode, applicationRef);
@@ -105,6 +138,25 @@ class AbstractRenderer {
         const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
         return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
     }
+    /**
+     * Angular is unable to handle components that have selectors with accented attributes.
+     *
+     * Therefore, stories break when meta's title contains accents.
+     * https://github.com/storybookjs/storybook/issues/29132
+     *
+     * This method filters accents from a given raw id. For example, this method converts
+     * 'Example/Button with an "é" accent' into 'Example/Button with an "e" accent'.
+     *
+     * @memberof AbstractRenderer
+     * @protected
+     */
+    generateStoryUIdFromRawStoryUid(rawStoryUid) {
+        if (rawStoryUid === null) {
+            return rawStoryUid;
+        }
+        const accentCharacters = /[\u0300-\u036f]/g;
+        return rawStoryUid.normalize('NFD').replace(accentCharacters, '');
+    }
     /** Adds DOM element that angular will use as bootstrap component. */
     initAngularRootElement(targetDOMNode, targetSelector) {
         targetDOMNode.innerHTML = '';

package/dist/client/angular-beta/RendererFactory.test.js

@@ -28,6 +28,8 @@ vitest_1.vi.mock('@angular/platform-browser-dynamic');
         rootDocstargetDOMNode = global.document.getElementById('root-docs');
         platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
         vitest_1.vi.spyOn(console, 'log').mockImplementation(() => { });
+        // @ts-expect-error Ignore
+        globalThis.STORYBOOK_ANGULAR_OPTIONS = { experimentalZoneless: false };
     });
     (0, vitest_1.afterEach)(() => {
         vitest_1.vi.clearAllMocks();

package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.js

@@ -20,7 +20,9 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
         let FooComponent = class FooComponent {
         };
         FooComponent = __decorate([
-            (0, core_1.Component)({})
+            (0, core_1.Component)({
+                standalone: false,
+            })
         ], FooComponent);
         (0, vitest_1.expect)((0, NgComponentAnalyzer_1.getComponentInputsOutputs)(FooComponent)).toEqual({
             inputs: [],
@@ -36,8 +38,13 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
     (0, vitest_1.it)('should return I/O', () => {
         let FooComponent = class FooComponent {
             constructor() {
+                this.signalInput = (0, core_1.input)();
+                this.signalInputAliased = (0, core_1.input)('signalInputAliased', {
+                    alias: 'signalInputAliasedAlias',
+                });
                 this.output = new core_1.EventEmitter();
                 this.outputWithBindingPropertyName = new core_1.EventEmitter();
+                this.signalOutput = (0, core_1.output)();
             }
         };
         __decorate([
@@ -61,6 +68,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
                 template: '',
                 inputs: ['inputInComponentMetadata'],
                 outputs: ['outputInComponentMetadata'],
+                standalone: false,
             })
         ], FooComponent);
         const fooComponentFactory = resolveComponentFactory(FooComponent);
@@ -77,7 +85,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
                 { propName: 'outputWithBindingPropertyName', templateName: 'outputPropertyName' },
             ],
         });
-        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));
+        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs.map(({ isSignal, ...rest }) => rest)));
         (0, vitest_1.expect)(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));
     });
     (0, vitest_1.it)("should return I/O when some of component metadata has the same name as one of component's properties", () => {
@@ -108,11 +116,12 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
                 template: '',
                 inputs: ['input', 'inputWithBindingPropertyName'],
                 outputs: ['outputWithBindingPropertyName'],
+                standalone: false,
             })
         ], FooComponent);
         const fooComponentFactory = resolveComponentFactory(FooComponent);
         const { inputs, outputs } = (0, NgComponentAnalyzer_1.getComponentInputsOutputs)(FooComponent);
-        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));
+        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs.map(({ isSignal, ...rest }) => rest)));
         (0, vitest_1.expect)(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));
     });
     (0, vitest_1.it)('should return I/O in the presence of multiple decorators', () => {
@@ -131,6 +140,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
         FooComponent = __decorate([
             (0, core_1.Component)({
                 template: '',
+                standalone: false,
             })
         ], FooComponent);
         const fooComponentFactory = resolveComponentFactory(FooComponent);
@@ -142,7 +152,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
             ],
             outputs: [],
         });
-        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));
+        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs.map(({ isSignal, ...rest }) => rest)));
         (0, vitest_1.expect)(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));
     });
     (0, vitest_1.it)('should return I/O with extending classes', () => {
@@ -159,6 +169,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
         BarComponent = __decorate([
             (0, core_1.Component)({
                 template: '',
+                standalone: false,
             })
         ], BarComponent);
         let FooComponent = class FooComponent extends BarComponent {
@@ -174,6 +185,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
         FooComponent = __decorate([
             (0, core_1.Component)({
                 template: '',
+                standalone: false,
             })
         ], FooComponent);
         const fooComponentFactory = resolveComponentFactory(FooComponent);
@@ -186,7 +198,7 @@ const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
             ],
             outputs: [],
         });
-        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));
+        (0, vitest_1.expect)(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs.map(({ isSignal, ...rest }) => rest)));
         (0, vitest_1.expect)(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));
     });
 });

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -11,19 +11,19 @@ const TEST_TOKEN = new core_1.InjectionToken('testToken');
 const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
 const TestService = (0, core_1.Injectable)()(class {
 });
-const TestComponent1 = (0, core_1.Component)({})(class {
+const TestComponent1 = (0, core_1.Component)({ standalone: false })(class {
 });
-const TestComponent2 = (0, core_1.Component)({})(class {
+const TestComponent2 = (0, core_1.Component)({ standalone: false })(class {
 });
-const StandaloneTestComponent = (0, core_1.Component)({ standalone: true })(class {
+const StandaloneTestComponent = (0, core_1.Component)({})(class {
 });
-const StandaloneTestDirective = (0, core_1.Directive)({ standalone: true })(class {
+const StandaloneTestDirective = (0, core_1.Directive)({})(class {
 });
-const MixedTestComponent1 = (0, core_1.Component)({ standalone: true })(class extends StandaloneTestComponent {
+const MixedTestComponent1 = (0, core_1.Component)({})(class extends StandaloneTestComponent {
 });
-const MixedTestComponent2 = (0, core_1.Component)({})(class extends MixedTestComponent1 {
+const MixedTestComponent2 = (0, core_1.Component)({ standalone: false })(class extends MixedTestComponent1 {
 });
-const MixedTestComponent3 = (0, core_1.Component)({ standalone: true })(class extends MixedTestComponent2 {
+const MixedTestComponent3 = (0, core_1.Component)({})(class extends MixedTestComponent2 {
 });
 const TestModuleWithDeclarations = (0, core_1.NgModule)({ declarations: [TestComponent1] })(class {
 });

package/dist/client/globals.d.ts

@@ -1,21 +1 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app. You can add your own
- * extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge> = 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-/**
- * Required to support Web Animations `@angular/animation`. Needed for: All but Chrome, Firefox and
- * Opera. http://caniuse.com/#feat=web-animation
- */
-/** Zone JS is required by Angular itself. */
-import 'zone.js';
+export {};

package/dist/client/globals.js

@@ -21,8 +21,6 @@ const global_1 = require("@storybook/global");
  * Opera. http://caniuse.com/#feat=web-animation
  */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-/** Zone JS is required by Angular itself. */
-require("zone.js");
 // Included with Angular CLI.
 /** APPLICATION IMPORTS */
 /**

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackFinal = void 0;
 const node_logger_1 = require("storybook/internal/node-logger");
 const server_errors_1 = require("storybook/internal/server-errors");
+const builder_webpack5_1 = require("@storybook/builder-webpack5");
 const architect_1 = require("@angular-devkit/architect");
 const core_1 = require("@angular-devkit/core");
 const find_up_1 = require("find-up");
@@ -16,13 +17,20 @@ async function webpackFinal(baseConfig, options) {
     checkForLegacyBuildOptions(options);
     const builderContext = getBuilderContext(options);
     const builderOptions = await getBuilderOptions(options, builderContext);
-    return (0, angular_cli_webpack_1.getWebpackConfig)(baseConfig, {
+    const webpackConfig = await (0, angular_cli_webpack_1.getWebpackConfig)(baseConfig, {
         builderOptions: {
             watch: options.configType === 'DEVELOPMENT',
             ...builderOptions,
         },
         builderContext,
     });
+    webpackConfig.plugins = webpackConfig.plugins ?? [];
+    webpackConfig.plugins.push(new builder_webpack5_1.WebpackDefinePlugin({
+        STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
+            experimentalZoneless: builderOptions.experimentalZoneless,
+        }),
+    }));
+    return webpackConfig;
 }
 exports.webpackFinal = webpackFinal;
 /** Get Builder Context If storybook is not start by angular builder create dumb BuilderContext */

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

@@ -1,13 +1,9 @@
 import { Options as CoreOptions } from 'storybook/internal/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';
+import { StandaloneOptions } from '../builders/utils/standalone-options';
 export type PresetOptions = CoreOptions & {
     angularBrowserTarget?: string | null;
-    angularBuilderOptions?: {
-        styles?: StyleElement[];
-        stylePreprocessorOptions?: StylePreprocessorOptions;
-    };
+    angularBuilderOptions?: StandaloneOptions['angularBuilderOptions'];
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.5.0",
+  "version": "8.6.0-alpha.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -33,17 +33,17 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node ../../../scripts/node_modules/.bin/tsc",
+    "check": "yarn run -T tsc",
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.5.0",
-    "@storybook/components": "8.5.0",
-    "@storybook/core-webpack": "8.5.0",
+    "@storybook/builder-webpack5": "8.6.0-alpha.1",
+    "@storybook/components": "8.6.0-alpha.1",
+    "@storybook/core-webpack": "8.6.0-alpha.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "8.5.0",
-    "@storybook/preview-api": "8.5.0",
-    "@storybook/theming": "8.5.0",
+    "@storybook/manager-api": "8.6.0-alpha.1",
+    "@storybook/preview-api": "8.6.0-alpha.1",
+    "@storybook/theming": "8.6.0-alpha.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
@@ -58,27 +58,28 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^0.2.24",
-    "@angular-devkit/architect": "^0.1703.0",
-    "@angular-devkit/build-angular": "^17.3.0",
-    "@angular-devkit/core": "^17.3.0",
-    "@angular/animations": "^17.3.0",
-    "@angular/cli": "^17.3.0",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/compiler-cli": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@analogjs/vite-plugin-angular": "^1.12.1",
+    "@angular-devkit/architect": "^0.1901.1",
+    "@angular-devkit/build-angular": "^19.1.1",
+    "@angular-devkit/core": "^19.1.1",
+    "@angular/animations": "^19.1.1",
+    "@angular/cli": "^19.1.1",
+    "@angular/common": "^19.1.1",
+    "@angular/compiler": "^19.1.1",
+    "@angular/compiler-cli": "^19.1.1",
+    "@angular/core": "^19.1.1",
+    "@angular/forms": "^19.1.1",
+    "@angular/platform-browser": "^19.1.1",
+    "@angular/platform-browser-dynamic": "^19.1.1",
     "@types/cross-spawn": "^6.0.2",
     "@types/node": "^22.0.0",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
+    "rimraf": "^6.0.1",
     "tmp": "^0.2.1",
     "typescript": "^5.3.2",
     "webpack": "5",
-    "zone.js": "^0.14.2"
+    "zone.js": "^0.15.0"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
@@ -93,13 +94,16 @@
     "@angular/platform-browser": ">=15.0.0 < 20.0.0",
     "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
-    "storybook": "^8.5.0",
+    "storybook": "^8.6.0-alpha.1",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/cli": {
       "optional": true
+    },
+    "zone.js": {
+      "optional": true
     }
   },
   "engines": {

package/template/cli/page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<PageComponent>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);