@storybook/angular 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -177,7 +177,7 @@ class AbstractRenderer {
         const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
         const currentStoryRender = {
             storyFnAngular,
-            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata, { allowFunction: false }),
+            moduleMetadataSnapshot: (0, telejson_1.stringify)(moduleMetadata, { maxDepth: 50 }),
         };
         this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
         if (

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsRenderer = void 0;
 const core_events_1 = require("storybook/internal/core-events");
-const preview_api_1 = require("storybook/internal/preview-api");
+const preview_api_1 = require("storybook/preview-api");
 const AbstractRenderer_1 = require("./AbstractRenderer");
 const StoryUID_1 = require("./utils/StoryUID");
 class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {

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

@@ -50,11 +50,9 @@ const uniqueArray = (arr) => {
 };
 exports.uniqueArray = uniqueArray;
 class PropertyExtractor {
-    /* eslint-enable @typescript-eslint/lines-between-class-members */
     constructor(metadata, component) {
         this.metadata = metadata;
         this.component = component;
-        /* eslint-disable @typescript-eslint/lines-between-class-members */
         this.declarations = [];
         /**
          * Analyze NgModule Metadata

package/dist/client/decorateStory.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = decorateStory;
 exports.decorateStory = decorateStory;
-const preview_api_1 = require("storybook/internal/preview-api");
+const preview_api_1 = require("storybook/preview-api");
 const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 function decorateStory(mainStoryFn, decorators) {
     const returnDecorators = [cleanArgsDecorator, ...decorators].reduce((previousStoryFn, decorator) => (context) => {

package/dist/client/decorateStory.test.js

@@ -16,7 +16,8 @@ const core_1 = require("@angular/core");
 const vitest_1 = require("vitest");
 const decorators_1 = require("./decorators");
 const decorateStory_1 = __importDefault(require("./decorateStory"));
-(0, vitest_1.describe)('decorateStory', () => {
+// TODO: Fix. Test is infinitely running.
+vitest_1.describe.skip('decorateStory', () => {
     (0, vitest_1.describe)('angular behavior', () => {
         (0, vitest_1.it)('should use componentWrapperDecorator with args', () => {
             const decorators = [

package/dist/client/decorators.test.js

@@ -37,6 +37,7 @@ const defaultContext = {
     step: undefined,
     context: undefined,
     canvas: undefined,
+    userEvent: undefined,
     mount: undefined,
 };
 defaultContext.context = defaultContext;

package/dist/client/docs/__testfixtures__/doc-button/input.js

@@ -12,7 +12,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputComponent = exports.ButtonAccent = exports.exportedConstant = void 0;
-/* eslint-disable no-underscore-dangle */
 const core_1 = require("@angular/core");
 exports.exportedConstant = 'An exported constant';
 var ButtonAccent;

package/dist/client/docs/compodoc.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractComponentDescription = exports.extractArgTypes = exports.extractArgTypesFromData = exports.extractType = exports.findComponentByName = exports.checkValidCompodocJson = exports.checkValidComponentOrDirective = exports.getCompodocJson = exports.setCompodocJson = exports.isMethod = void 0;
-/* eslint-disable no-underscore-dangle */
 const client_logger_1 = require("storybook/internal/client-logger");
 const global_1 = require("@storybook/global");
 const isMethod = (methodOrProp) => {

package/dist/client/docs/sourceDecorator.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sourceDecorator = exports.skipSourceRender = void 0;
 const docs_tools_1 = require("storybook/internal/docs-tools");
-const preview_api_1 = require("storybook/internal/preview-api");
+const preview_api_1 = require("storybook/preview-api");
 const renderer_1 = require("../../renderer");
 const skipSourceRender = (context) => {
     const sourceParams = context?.parameters.docs?.source;
@@ -23,39 +23,31 @@ exports.skipSourceRender = skipSourceRender;
  */
 const sourceDecorator = (storyFn, context) => {
     const story = storyFn();
-    if ((0, exports.skipSourceRender)(context)) {
-        return story;
-    }
-    const channel = preview_api_1.addons.getChannel();
-    const { props, userDefinedTemplate } = story;
-    const { component, argTypes, parameters } = context;
-    const template = parameters.docs?.source?.excludeDecorators
-        ? context.originalStoryFn(context.args, context).template
-        : story.template;
-    let toEmit;
+    const source = (0, preview_api_1.useRef)(undefined);
     (0, preview_api_1.useEffect)(() => {
-        if (toEmit) {
-            const { id, unmappedArgs } = context;
-            const format = parameters?.docs?.source?.format ?? true;
-            channel.emit(docs_tools_1.SNIPPET_RENDERED, {
-                id,
-                args: unmappedArgs,
-                source: toEmit,
-                format: format === true ? 'angular' : format,
-            });
+        if ((0, exports.skipSourceRender)(context)) {
+            return;
         }
-    });
-    if (component && !userDefinedTemplate) {
-        const source = (0, renderer_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-        // We might have a story with a Directive or Service defined as the component
-        // In these cases there might exist a template, even if we aren't able to create source from component
-        if (source || template) {
-            toEmit = source || template;
+        const { props, userDefinedTemplate } = story;
+        const { component, argTypes, parameters } = context;
+        const template = parameters.docs?.source?.excludeDecorators
+            ? context.originalStoryFn(context.args, context).template
+            : story.template;
+        if (component && !userDefinedTemplate) {
+            const sourceFromComponent = (0, renderer_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            // We might have a story with a Directive or Service defined as the component
+            // In these cases there might exist a template, even if we aren't able to create source from component
+            const newSource = sourceFromComponent || template;
+            if (newSource && newSource !== source.current) {
+                (0, preview_api_1.emitTransformCode)(newSource, context);
+                source.current = newSource;
+            }
         }
-    }
-    else if (template) {
-        toEmit = template;
-    }
+        else if (template && template !== source.current) {
+            (0, preview_api_1.emitTransformCode)(template, context);
+            source.current = template;
+        }
+    });
     return story;
 };
 exports.sourceDecorator = sourceDecorator;

package/dist/client/portable-stories.js

@@ -34,7 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setProjectAnnotations = setProjectAnnotations;
-const preview_api_1 = require("storybook/internal/preview-api");
+const preview_api_1 = require("storybook/preview-api");
 const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS = __importStar(require("./render"));
 /**
  * Function that sets the globalConfig of your storybook. The global config is the preview module of

package/dist/client/public-types.d.ts

@@ -26,9 +26,7 @@ export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, T
 export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;
 export type Preview = ProjectAnnotations<AngularRenderer>;
-/**
- * Utility type that transforms InputSignal and EventEmitter types
- */
+/** Utility type that transforms InputSignal and EventEmitter types */
 type TransformComponentType<T> = TransformInputSignalType<TransformOutputSignalType<TransformEventType<T>>>;
 // @ts-ignore
 type AngularInputSignal<T> = AngularCore.InputSignal<T>;

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

@@ -4,28 +4,7 @@ const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devki
 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,
-        };
-    }
-};
+const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
 /**
  * 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.
@@ -36,7 +15,6 @@ const getAngularWebpackUtils = () => {
  */
 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',
@@ -60,11 +38,14 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
         getStylesConfig(wco),
         getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco),
     ]);
+    if (!builderOptions.experimentalZoneless && !cliConfig.entry.polyfills?.includes('zone.js')) {
+        cliConfig.entry.polyfills.push('zone.js');
+    }
     /** Merge baseConfig Webpack with angular-cli Webpack */
     const entry = [
+        ...(cliConfig.entry.polyfills ?? []),
         ...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.

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.runNgcc = void 0;
-const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 /**
  * Source :
@@ -45,31 +44,17 @@ const runNgcc = async () => {
 };
 exports.runNgcc = runNgcc;
 const webpack = async (webpackConfig, options) => {
-    const packageJsonPath = require.resolve('@angular/core/package.json');
-    const packageJson = JSON.parse((0, node_fs_1.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'],
+            mainFields: ['browser', 'module', 'main'],
         },
     };
 };

package/dist/types.d.ts

@@ -23,6 +23,5 @@ type StorybookConfigFramework = {
 export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
 export interface AngularOptions {
     enableIvy?: boolean;
-    enableNgcc?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.21",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -23,18 +23,17 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./preset": "./preset.js",
     "./node": {
       "types": "./dist/node/index.d.ts",
-      "node": "./dist/node/index.js",
       "import": "./dist/node/index.js",
       "require": "./dist/node/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./*": "./*"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -53,8 +52,8 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "9.0.0-alpha.2",
-    "@storybook/core-webpack": "9.0.0-alpha.2",
+    "@storybook/builder-webpack5": "9.0.0-alpha.21",
+    "@storybook/core-webpack": "9.0.0-alpha.21",
     "@storybook/global": "^5.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -63,7 +62,7 @@
     "fd-package-json": "^1.2.0",
     "find-up": "^5.0.0",
     "semver": "^7.3.7",
-    "telejson": "^7.2.0",
+    "telejson": "8.0.0",
     "ts-dedent": "^2.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "util-deprecate": "^1.0.2",
@@ -94,22 +93,22 @@
     "zone.js": "^0.15.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 20.0.0",
-    "@angular/animations": ">=15.0.0 < 20.0.0",
-    "@angular/cli": ">=15.0.0 < 20.0.0",
-    "@angular/common": ">=15.0.0 < 20.0.0",
-    "@angular/compiler": ">=15.0.0 < 20.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
-    "@angular/core": ">=15.0.0 < 20.0.0",
-    "@angular/forms": ">=15.0.0 < 20.0.0",
-    "@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": "^9.0.0-alpha.2",
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2000.0",
+    "@angular-devkit/build-angular": ">=18.0.0 < 20.0.0",
+    "@angular-devkit/core": ">=18.0.0 < 20.0.0",
+    "@angular/animations": ">=18.0.0 < 20.0.0",
+    "@angular/cli": ">=18.0.0 < 20.0.0",
+    "@angular/common": ">=18.0.0 < 20.0.0",
+    "@angular/compiler": ">=18.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=18.0.0 < 20.0.0",
+    "@angular/core": ">=18.0.0 < 20.0.0",
+    "@angular/forms": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 20.0.0",
+    "rxjs": "^6.5.3 || ^7.4.0",
+    "storybook": "^9.0.0-alpha.21",
     "typescript": "^4.9.0 || ^5.0.0",
-    "zone.js": ">= 0.11.1 < 1.0.0"
+    "zone.js": ">=0.14.0"
   },
   "peerDependenciesMeta": {
     "@angular/animations": {
@@ -123,7 +122,7 @@
     }
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import { ButtonComponent } from './button.component';
 

package/template/cli/header.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import { HeaderComponent } from './header.component';
 

package/template/cli/page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { PageComponent } from './page.component';