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

package/dist/builders/utils/error-handler.mjs

@@ -0,0 +1,33 @@
+import { logger, instance as npmLog } from 'storybook/internal/node-logger';
+import { dedent } from 'ts-dedent';
+export const printErrorDetails = (error) => {
+    // Duplicate code for Standalone error handling
+    // Source: https://github.com/storybookjs/storybook/blob/39c7ba09ad84fbd466f9c25d5b92791a5450b9f6/lib/core-server/src/build-dev.ts#L136
+    npmLog.heading = '';
+    if (error instanceof Error) {
+        if (error.error) {
+            logger.error(error.error);
+        }
+        else if (error.stats && error.stats.compilation.errors) {
+            error.stats.compilation.errors.forEach((e) => logger.plain(e));
+        }
+        else {
+            logger.error(error);
+        }
+    }
+    else if (error.compilation?.errors) {
+        error.compilation.errors.forEach((e) => logger.plain(e));
+    }
+    logger.line();
+};
+export const errorSummary = (error) => {
+    return error.close
+        ? dedent `
+      FATAL broken build!, will close the process,
+      Fix the error below and restart storybook.
+    `
+        : dedent `
+      Broken build, fix the error above.
+      You may need to refresh the browser.
+    `;
+};

package/dist/builders/utils/run-compodoc.mjs

@@ -0,0 +1,31 @@
+import { isAbsolute, relative } from 'node:path';
+import { JsPackageManagerFactory } from 'storybook/internal/common';
+import { Observable } from 'rxjs';
+const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
+const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
+// relative is necessary to workaround a compodoc issue with
+// absolute paths on windows machines
+const toRelativePath = (pathToTsConfig) => {
+    return isAbsolute(pathToTsConfig) ? relative('.', pathToTsConfig) : pathToTsConfig;
+};
+export const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
+    return new Observable((observer) => {
+        const tsConfigPath = toRelativePath(tsconfig);
+        const finalCompodocArgs = [
+            ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
+            ...compodocArgs,
+        ];
+        const packageManager = JsPackageManagerFactory.getPackageManager();
+        try {
+            const stdout = packageManager.runPackageCommandSync('compodoc', finalCompodocArgs, context.workspaceRoot, 'inherit');
+            context.logger.info(stdout);
+            observer.next();
+            observer.complete();
+        }
+        catch (e) {
+            context.logger.error(e);
+            observer.error();
+        }
+    });
+};

package/dist/builders/utils/run-compodoc.spec.mjs

@@ -0,0 +1,74 @@
+import { take } from 'rxjs/operators';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { runCompodoc } from './run-compodoc';
+const mockRunScript = vi.fn();
+vi.mock('storybook/internal/common', () => ({
+    JsPackageManagerFactory: {
+        getPackageManager: () => ({
+            runPackageCommandSync: mockRunScript,
+        }),
+    },
+}));
+const builderContextLoggerMock = {
+    createChild: vi.fn(),
+    log: vi.fn(),
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    fatal: vi.fn(),
+};
+describe('runCompodoc', () => {
+    afterEach(() => {
+        mockRunScript.mockClear();
+    });
+    const builderContextMock = {
+        workspaceRoot: 'path/to/project',
+        logger: builderContextLoggerMock,
+    };
+    it('should run compodoc with tsconfig from context', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, builderContextMock)
+            .pipe(take(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
+    });
+    it('should run compodoc with tsconfig from compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-p', 'path/to/tsconfig.stories.json'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, builderContextMock)
+            .pipe(take(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'], 'path/to/project', 'inherit');
+    });
+    it('should run compodoc with default output folder.', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, builderContextMock)
+            .pipe(take(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], 'path/to/project', 'inherit');
+    });
+    it('should run with custom output folder specified with --output compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['--output', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, builderContextMock)
+            .pipe(take(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], 'path/to/project', 'inherit');
+    });
+    it('should run with custom output folder specified with -d compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-d', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, builderContextMock)
+            .pipe(take(1))
+            .subscribe();
+        expect(mockRunScript).toHaveBeenCalledWith('compodoc', ['-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], 'path/to/project', 'inherit');
+    });
+});

package/dist/builders/utils/standalone-options.mjs

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

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

@@ -0,0 +1,164 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { BehaviorSubject } from 'rxjs';
+import { stringify } from 'telejson';
+import { getApplication } from './StorybookModule';
+import { storyPropsProvider } from './StorybookProvider';
+import { queueBootstrapping } from './utils/BootstrapQueue';
+import { PropertyExtractor } from './utils/PropertyExtractor';
+const applicationRefs = new Map();
+/**
+ * Attribute name for the story UID that may be written to the targetDOMNode.
+ *
+ * If a target DOM node has a story UID attribute, it will be used as part of the selector for the
+ * Angular component.
+ */
+export const STORY_UID_ATTRIBUTE = 'data-sb-story-uid';
+export class AbstractRenderer {
+    constructor() {
+        this.previousStoryRenderInfo = new Map();
+    }
+    /** Wait and destroy the platform */
+    static resetApplications(domNode) {
+        applicationRefs.forEach((appRef, appDOMNode) => {
+            if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
+                appRef.destroy();
+            }
+        });
+    }
+    /**
+     * Bootstrap main angular module with main component or send only new `props` with storyProps$
+     *
+     * @param storyFnAngular {StoryFnAngularReturnType}
+     * @param forced {boolean} If :
+     *
+     *   - True render will only use the StoryFn `props' in storyProps observable that will update sotry's
+     *       component/template properties. Improves performance without reloading the whole
+     *       module&component if props changes
+     *   - False fully recharges or initializes angular module & component
+     *
+     * @param component {Component}
+     */
+    async render({ storyFnAngular, forced, component, targetDOMNode, }) {
+        const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
+        const newStoryProps$ = new BehaviorSubject(storyFnAngular.props);
+        if (!this.fullRendererRequired({
+            targetDOMNode,
+            storyFnAngular,
+            moduleMetadata: {
+                ...storyFnAngular.moduleMetadata,
+            },
+            forced,
+        })) {
+            this.storyProps$.next(storyFnAngular.props);
+            return;
+        }
+        await this.beforeFullRender(targetDOMNode);
+        // Complete last BehaviorSubject and set a new one for the current module
+        if (this.storyProps$) {
+            this.storyProps$.complete();
+        }
+        this.storyProps$ = newStoryProps$;
+        this.initAngularRootElement(targetDOMNode, targetSelector);
+        const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
+        await analyzedMetadata.init();
+        const storyUid = this.generateStoryUIdFromRawStoryUid(targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE));
+        const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
+        if (storyUid !== null) {
+            const element = targetDOMNode.querySelector(targetSelector);
+            element.toggleAttribute(storyUid, true);
+        }
+        const application = getApplication({
+            storyFnAngular,
+            component,
+            targetSelector: componentSelector,
+            analyzedMetadata,
+        });
+        const providers = [
+            storyPropsProvider(newStoryProps$),
+            ...analyzedMetadata.applicationProviders,
+            ...(storyFnAngular.applicationConfig?.providers ?? []),
+        ];
+        if (STORYBOOK_ANGULAR_OPTIONS?.experimentalZoneless) {
+            const { provideExperimentalZonelessChangeDetection } = await import('@angular/core');
+            if (!provideExperimentalZonelessChangeDetection) {
+                throw new Error('Experimental zoneless change detection requires Angular 18 or higher');
+            }
+            else {
+                providers.unshift(provideExperimentalZonelessChangeDetection());
+            }
+        }
+        const applicationRef = await queueBootstrapping(() => {
+            return bootstrapApplication(application, {
+                ...storyFnAngular.applicationConfig,
+                providers,
+            });
+        });
+        applicationRefs.set(targetDOMNode, applicationRef);
+    }
+    /**
+     * Only ASCII alphanumerics can be used as HTML tag name. https://html.spec.whatwg.org/#elements-2
+     *
+     * Therefore, stories break when non-ASCII alphanumerics are included in target selector.
+     * https://github.com/storybookjs/storybook/issues/15147
+     *
+     * This method returns storyId when it doesn't contain any non-ASCII alphanumerics. Otherwise, it
+     * generates a valid HTML tag name from storyId by removing non-ASCII alphanumerics from storyId,
+     * prefixing "sb-", and suffixing "-component"
+     *
+     * @memberof AbstractRenderer
+     * @protected
+     */
+    generateTargetSelectorFromStoryId(id) {
+        const invalidHtmlTag = /[^A-Za-z0-9-]/g;
+        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 = '';
+        targetDOMNode.appendChild(document.createElement(targetSelector));
+    }
+    fullRendererRequired({ targetDOMNode, storyFnAngular, moduleMetadata, forced, }) {
+        const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
+        const currentStoryRender = {
+            storyFnAngular,
+            moduleMetadataSnapshot: stringify(moduleMetadata, { maxDepth: 50 }),
+        };
+        this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender);
+        if (
+        // check `forceRender` of story RenderContext
+        !forced ||
+            // if it's the first rendering and storyProps$ is not init
+            !this.storyProps$) {
+            return true;
+        }
+        // force the rendering if the template has changed
+        const hasChangedTemplate = !!storyFnAngular?.template &&
+            previousStoryRenderInfo?.storyFnAngular?.template !== storyFnAngular.template;
+        if (hasChangedTemplate) {
+            return true;
+        }
+        // force the rendering if the metadata structure has changed
+        const hasChangedModuleMetadata = currentStoryRender.moduleMetadataSnapshot !== previousStoryRenderInfo?.moduleMetadataSnapshot;
+        return hasChangedModuleMetadata;
+    }
+}

package/dist/client/angular-beta/CanvasRenderer.mjs

@@ -0,0 +1,9 @@
+import { AbstractRenderer } from './AbstractRenderer';
+export class CanvasRenderer extends AbstractRenderer {
+    async render(options) {
+        await super.render(options);
+    }
+    async beforeFullRender() {
+        CanvasRenderer.resetApplications();
+    }
+}

package/dist/client/angular-beta/ComputesTemplateFromComponent.mjs

@@ -0,0 +1,154 @@
+import { getComponentDecoratorMetadata, getComponentInputsOutputs, } from './utils/NgComponentAnalyzer';
+/**
+ * Check if the name matches the criteria for a valid identifier. A valid identifier can only
+ * contain letters, digits, underscores, or dollar signs. It cannot start with a digit.
+ */
+const isValidIdentifier = (name) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name);
+/**
+ * Returns the property name, if it can be accessed with dot notation. If not, it returns
+ * `this['propertyName']`.
+ */
+export const formatPropInTemplate = (propertyName) => isValidIdentifier(propertyName) ? propertyName : `this['${propertyName}']`;
+const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) => {
+    const inputs = ngComponentInputsOutputs.inputs
+        .filter((i) => i.templateName in props)
+        .map((i) => i.templateName);
+    const outputs = ngComponentInputsOutputs.outputs
+        .filter((o) => o.templateName in props)
+        .map((o) => o.templateName);
+    return {
+        inputs,
+        outputs,
+        otherProps: Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k)),
+    };
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ *
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+export const computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
+    const ngComponentMetadata = getComponentDecoratorMetadata(component);
+    const ngComponentInputsOutputs = getComponentInputsOutputs(component);
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
+    }
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs.map((i) => `[${i}]="${formatPropInTemplate(i)}"`).join(' ')}`
+        : '';
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${formatPropInTemplate(i)}($event)"`).join(' ')}`
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
+};
+/** Stringify an object with a placholder in the circular references. */
+function stringifyCircular(obj) {
+    const seen = new Set();
+    return JSON.stringify(obj, (key, value) => {
+        if (typeof value === 'object' && value !== null) {
+            if (seen.has(value)) {
+                return '[Circular]';
+            }
+            seen.add(value);
+        }
+        return value;
+    });
+}
+const createAngularInputProperty = ({ propertyName, value, argType, }) => {
+    let templateValue;
+    switch (typeof value) {
+        case 'string':
+            templateValue = `'${value}'`;
+            break;
+        case 'object':
+            templateValue = stringifyCircular(value)
+                .replace(/'/g, '\u2019')
+                .replace(/\\"/g, '\u201D')
+                .replace(/"([^-"]+)":/g, '$1: ')
+                .replace(/"/g, "'")
+                .replace(/\u2019/g, "\\'")
+                .replace(/\u201D/g, "\\'")
+                .split(',')
+                .join(', ');
+            break;
+        default:
+            templateValue = value;
+    }
+    return `[${propertyName}]="${templateValue}"`;
+};
+/**
+ * Converts a component into a template with inputs/outputs present in initial props
+ *
+ * @param component
+ * @param initialProps
+ * @param innerTemplate
+ */
+export const computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
+    const ngComponentMetadata = getComponentDecoratorMetadata(component);
+    if (!ngComponentMetadata) {
+        return null;
+    }
+    if (!ngComponentMetadata.selector) {
+        // Allow to add renderer component when NgComponent selector is undefined
+        return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;
+    }
+    const ngComponentInputsOutputs = getComponentInputsOutputs(component);
+    const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
+    const templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs
+            .map((propertyName) => createAngularInputProperty({
+            propertyName,
+            value: initialProps[propertyName],
+            argType: argTypes?.[propertyName],
+        }))
+            .join(' ')}`
+        : '';
+    const templateOutputs = initialOutputs.length > 0
+        ? ` ${initialOutputs.map((i) => `(${i})="${formatPropInTemplate(i)}($event)"`).join(' ')}`
+        : '';
+    return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
+};
+const buildTemplate = (selector, innerTemplate, inputs, outputs) => {
+    // https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#syntax-elements
+    const voidElements = [
+        'area',
+        'base',
+        'br',
+        'col',
+        'command',
+        'embed',
+        'hr',
+        'img',
+        'input',
+        'keygen',
+        'link',
+        'meta',
+        'param',
+        'source',
+        'track',
+        'wbr',
+    ];
+    const firstSelector = selector.split(',')[0];
+    const templateReplacers = [
+        [/(^.*?)(?=[,])/, '$1'],
+        [/(^\..+)/, 'div$1'],
+        [/(^\[.+?])/, 'div$1'],
+        [/([\w[\]]+)(\s*,[\w\s-[\],]+)+/, `$1`],
+        [/#([\w-]+)/, ` id="$1"`],
+        [/((\.[\w-]+)+)/, (_, c) => ` class="${c.split `.`.join ` `.trim()}"`],
+        [/(\[.+?])/g, (_, a) => ` ${a.slice(1, -1)}`],
+        [
+            /([\S]+)(.*)/,
+            (template, elementSelector) => {
+                return voidElements.some((element) => elementSelector === element)
+                    ? template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs} />`)
+                    : template.replace(/([\S]+)(.*)/, `<$1$2${inputs}${outputs}>${innerTemplate}</$1>`);
+            },
+        ],
+    ];
+    return templateReplacers.reduce((prevSelector, [searchValue, replacer]) => prevSelector.replace(searchValue, replacer), firstSelector);
+};