@storybook/angular 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/client/docs/sourceDecorator.mjs

@@ -0,0 +1,48 @@
+import { SourceType } from 'storybook/internal/docs-tools';
+import { useRef, emitTransformCode, useEffect } from 'storybook/preview-api';
+import { computesTemplateSourceFromComponent } from '../../renderer';
+export const skipSourceRender = (context) => {
+    const sourceParams = context?.parameters.docs?.source;
+    // always render if the user forces it
+    if (sourceParams?.type === SourceType.DYNAMIC) {
+        return false;
+    }
+    // never render if the user is forcing the block to render code, or
+    // if the user provides code
+    return sourceParams?.code || sourceParams?.type === SourceType.CODE;
+};
+/**
+ * Angular source decorator.
+ *
+ * @param storyFn Fn
+ * @param context StoryContext
+ */
+export const sourceDecorator = (storyFn, context) => {
+    const story = storyFn();
+    const source = useRef(undefined);
+    useEffect(() => {
+        if (skipSourceRender(context)) {
+            return;
+        }
+        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 = 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) {
+                emitTransformCode(newSource, context);
+                source.current = newSource;
+            }
+        }
+        else if (template && template !== source.current) {
+            emitTransformCode(template, context);
+            source.current = template;
+        }
+    });
+    return story;
+};

package/dist/client/docs/types.mjs

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

package/dist/client/globals.mjs

@@ -0,0 +1,31 @@
+import { global } from '@storybook/global';
+/**
+ * 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
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+// Included with Angular CLI.
+/** APPLICATION IMPORTS */
+/**
+ * Date, currency, decimal and percent pipes. Needed for: All but Chrome, Firefox, Edge, IE11 and
+ * Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/** Need to import at least one locale-data with intl. */
+// import 'intl/locale-data/jsonp/en';
+global.STORYBOOK_ENV = 'angular';

package/dist/client/index.mjs

@@ -0,0 +1,9 @@
+/// <reference types="webpack-env" />
+import './globals';
+export * from './public-types';
+export * from './portable-stories';
+export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';
+// optimization: stop HMR propagation in webpack
+if (typeof module !== 'undefined')
+    module?.hot?.decline();

package/dist/client/portable-stories.mjs

@@ -0,0 +1,26 @@
+import { setProjectAnnotations as originalSetProjectAnnotations, setDefaultProjectAnnotations, } from 'storybook/preview-api';
+import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './render';
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/angular';
+ *
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(projectAnnotations) {
+    setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+    return originalSetProjectAnnotations(projectAnnotations);
+}

package/dist/client/preview-prod.mjs

@@ -0,0 +1,2 @@
+import { enableProdMode } from '@angular/core';
+enableProdMode();

package/dist/client/public-types.mjs

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

package/dist/client/render.mjs

@@ -0,0 +1,14 @@
+import '@angular/compiler';
+import { RendererFactory } from './angular-beta/RendererFactory';
+export const rendererFactory = new RendererFactory();
+export const render = (props) => ({ props });
+export async function renderToCanvas({ storyFn, showMain, forceRemount, storyContext: { component } }, element) {
+    showMain();
+    const renderer = await rendererFactory.getRendererInstance(element);
+    await renderer.render({
+        storyFnAngular: storyFn(),
+        component,
+        forced: !forceRemount,
+        targetDOMNode: element,
+    });
+}

package/dist/client/types.mjs

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

package/dist/node/index.mjs

@@ -0,0 +1,3 @@
+export function defineMain(config) {
+    return config;
+}

package/dist/server/__mocks-ng-workspace__/minimal-config/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/some-config/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/with-nx/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/with-nx-workspace/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/with-options-styles/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

package/dist/server/__mocks-ng-workspace__/without-tsConfig/src/main.mjs

@@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';

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

@@ -0,0 +1,80 @@
+"use strict";
+// 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 { 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.
+ * FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
+ *
+ * @param {any} baseConfig Previous webpack config from storybook
+ * @param {any} options { builderOptions, builderContext }
+ */
+exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
+    /** Get angular-cli Webpack config */
+    const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
+        // Default options
+        index: 'noop-index',
+        main: 'noop-main',
+        // Options provided by user
+        ...builderOptions,
+        styles: builderOptions.styles
+            ?.map((style) => (typeof style === 'string' ? style : style.input))
+            .filter((style) => typeof style === 'string' || style.inject !== false),
+        outputPath: typeof builderOptions.outputPath === 'string'
+            ? builderOptions.outputPath
+            : (builderOptions.outputPath?.base ?? 'noop-out'),
+        // Fixed options
+        optimization: false,
+        namedChunks: false,
+        progress: false,
+        buildOptimizer: false,
+        aot: false,
+    }, builderContext, (wco) => [
+        getCommonConfig(wco),
+        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 ?? []),
+    ];
+    // 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/dist/server/framework-preset-angular-cli.mjs

@@ -0,0 +1,81 @@
+import { logger } from 'storybook/internal/node-logger';
+import { AngularLegacyBuildOptionsError } from 'storybook/internal/server-errors';
+import { WebpackDefinePlugin, WebpackIgnorePlugin } from '@storybook/builder-webpack5';
+import { targetFromTargetString } from '@angular-devkit/architect';
+import { logging } from '@angular-devkit/core';
+import { sync as findUpSync } from 'find-up';
+import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack';
+import { moduleIsAvailable } from './utils/module-is-available';
+export async function webpackFinal(baseConfig, options) {
+    if (!moduleIsAvailable('@angular-devkit/build-angular')) {
+        logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
+        return baseConfig;
+    }
+    checkForLegacyBuildOptions(options);
+    const builderContext = getBuilderContext(options);
+    const builderOptions = await getBuilderOptions(options, builderContext);
+    const webpackConfig = await getCustomWebpackConfig(baseConfig, {
+        builderOptions: {
+            watch: options.configType === 'DEVELOPMENT',
+            ...builderOptions,
+        },
+        builderContext,
+    });
+    webpackConfig.plugins = webpackConfig.plugins ?? [];
+    webpackConfig.plugins.push(new WebpackDefinePlugin({
+        STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
+            experimentalZoneless: builderOptions.experimentalZoneless,
+        }),
+    }));
+    try {
+        require.resolve('@angular/animations');
+    }
+    catch (e) {
+        webpackConfig.plugins.push(new WebpackIgnorePlugin({
+            resourceRegExp: /@angular\/platform-browser\/animations$/,
+        }));
+    }
+    return webpackConfig;
+}
+/** Get Builder Context If storybook is not start by angular builder create dumb BuilderContext */
+function getBuilderContext(options) {
+    return (options.angularBuilderContext ??
+        {
+            target: { project: 'noop-project', builder: '', options: {} },
+            workspaceRoot: process.cwd(),
+            getProjectMetadata: () => ({}),
+            getTargetOptions: () => ({}),
+            logger: new logging.Logger('Storybook'),
+        });
+}
+/** Get builder options Merge target options from browser target and from storybook options */
+async function getBuilderOptions(options, builderContext) {
+    /** Get Browser Target options */
+    let browserTargetOptions = {};
+    if (options.angularBrowserTarget) {
+        const browserTarget = targetFromTargetString(options.angularBrowserTarget);
+        logger.info(`=> Using angular browser target options from "${browserTarget.project}:${browserTarget.target}${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`);
+        browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
+    }
+    /** Merge target options from browser target options and from storybook options */
+    const builderOptions = {
+        ...browserTargetOptions,
+        ...options.angularBuilderOptions,
+        tsConfig: options.tsConfig ??
+            findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+            browserTargetOptions.tsConfig,
+    };
+    logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
+    return builderOptions;
+}
+/**
+ * Checks if using legacy configuration that doesn't use builder and logs message referring to
+ * migration docs.
+ */
+function checkForLegacyBuildOptions(options) {
+    if (options.angularBrowserTarget !== undefined) {
+        // Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without)
+        return;
+    }
+    throw new AngularLegacyBuildOptionsError();
+}

package/dist/server/framework-preset-angular-docs.mjs

@@ -0,0 +1,6 @@
+import { hasDocsOrControls } from 'storybook/internal/docs-tools';
+export const previewAnnotations = (entry = [], options) => {
+    if (!hasDocsOrControls(options))
+        return entry;
+    return [...entry, require.resolve('../client/docs/config')];
+};

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

@@ -0,0 +1,56 @@
+import { join } from 'node:path';
+/**
+ * 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
+ */
+export const runNgcc = async () => {
+    let ngcc;
+    try {
+        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: join(process.cwd(), 'node_modules'), // absolute path to node_modules
+        createNewEntryPointFormats: true, // --create-ivy-entry-points
+        compileAllFormats: false, // --first-only
+    });
+};
+export const webpack = async (webpackConfig, options) => {
+    const framework = await options.presets.apply('framework');
+    const angularOptions = (typeof framework === 'object' ? framework.options : {});
+    // Default to true, if undefined
+    if (angularOptions.enableIvy === false) {
+        return webpackConfig;
+    }
+    return {
+        ...webpackConfig,
+        resolve: {
+            ...webpackConfig.resolve,
+            mainFields: ['browser', 'module', 'main'],
+        },
+    };
+};

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

@@ -0,0 +1,52 @@
+const PLUGIN_NAME = 'storybook-normalize-angular-entry-plugin';
+/**
+ * This plugin is designed to modify the Webpack configuration for Storybook projects that use
+ * Angular, specifically to prevent multiple runtime bundle issues by merging 'main' and 'styles'
+ * entry points. It ensures that only one runtime bundle is generated to avoid
+ * '**webpack_require**.nmd is not a function' errors.
+ */
+export default class StorybookNormalizeAngularEntryPlugin {
+    constructor(options) {
+        this.options = options; // Store options if future configuration is needed
+    }
+    apply(compiler) {
+        compiler.hooks.environment.tap(PLUGIN_NAME, () => {
+            // Store the original entry configuration
+            const originalEntry = compiler.options.entry;
+            // Overwrite the entry configuration to normalize it
+            compiler.options.entry = async () => {
+                let entryResult;
+                // Handle the case where the original entry is a function, which could be async
+                if (typeof originalEntry === 'function') {
+                    try {
+                        // Execute the function and await its result, in case it returns a promise
+                        entryResult = await originalEntry();
+                    }
+                    catch (error) {
+                        // Log the error and re-throw it to ensure it's visible and doesn't silently fail
+                        console.error('Failed to execute the entry function:', error);
+                        throw error;
+                    }
+                }
+                else {
+                    // If the original entry is not a function, use it as is
+                    entryResult = originalEntry;
+                }
+                // Merge 'main' and 'styles' entries if both exist
+                if (entryResult && entryResult.main && entryResult.styles) {
+                    // Combine and deduplicate imports from 'main' and 'styles'
+                    return {
+                        main: {
+                            import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
+                        },
+                    };
+                }
+                // If not both 'main' and 'styles' are present, return the original or resolved entry result
+                return entryResult;
+            };
+        });
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            this.compilation = compilation;
+        });
+    }
+}

package/dist/server/preset-options.mjs

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

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

@@ -0,0 +1,13 @@
+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');
+};
+export const filterOutStylingRules = (config) => {
+    return config.module.rules.filter((rule) => !isStylingRule(rule));
+};

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

@@ -0,0 +1,9 @@
+export const moduleIsAvailable = (moduleName) => {
+    try {
+        require.resolve(moduleName);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.0-beta.11",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -52,20 +52,15 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "9.0.0-beta.1",
-    "@storybook/core-webpack": "9.0.0-beta.1",
+    "@storybook/builder-webpack5": "9.0.0-beta.11",
+    "@storybook/core-webpack": "9.0.0-beta.11",
     "@storybook/global": "^5.0.0",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@types/semver": "^7.3.4",
     "@types/webpack-env": "^1.18.0",
     "fd-package-json": "^1.2.0",
     "find-up": "^5.0.0",
-    "semver": "^7.3.7",
     "telejson": "8.0.0",
     "ts-dedent": "^2.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
-    "util-deprecate": "^1.0.2",
     "webpack": "5"
   },
   "devDependencies": {
@@ -74,7 +69,6 @@
     "@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",
@@ -82,13 +76,9 @@
     "@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.7.3",
+    "typescript": "^5.8.3",
     "webpack": "5",
     "zone.js": "^0.15.0"
   },
@@ -106,7 +96,7 @@
     "@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-beta.1",
+    "storybook": "^9.0.0-beta.11",
     "typescript": "^4.9.0 || ^5.0.0",
     "zone.js": ">=0.14.0"
   },