@storybook/angular 9.1.0-alpha.5 → 9.1.0-alpha.7

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

@@ -1,164 +0,0 @@
-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.d.ts

@@ -1,12 +0,0 @@
-import { Parameters, StoryFnAngularReturnType } from '../types';
-import { AbstractRenderer } from './AbstractRenderer';
-export declare class CanvasRenderer extends AbstractRenderer {
-    render(options: {
-        storyFnAngular: StoryFnAngularReturnType;
-        forced: boolean;
-        parameters: Parameters;
-        component: any;
-        targetDOMNode: HTMLElement;
-    }): Promise<void>;
-    beforeFullRender(): Promise<void>;
-}

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

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasRenderer = void 0;
-const AbstractRenderer_1 = require("./AbstractRenderer");
-class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
-    async render(options) {
-        await super.render(options);
-    }
-    async beforeFullRender() {
-        CanvasRenderer.resetApplications();
-    }
-}
-exports.CanvasRenderer = CanvasRenderer;

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

@@ -1,9 +0,0 @@
-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.d.ts

@@ -1,24 +0,0 @@
-import { ArgTypes } from 'storybook/internal/types';
-import { Type } from '@angular/core';
-import { ICollection } from '../types';
-/**
- * Returns the property name, if it can be accessed with dot notation. If not, it returns
- * `this['propertyName']`.
- */
-export declare const formatPropInTemplate: (propertyName: string) => string;
-/**
- * Converts a component into a template with inputs/outputs present in initial props
- *
- * @param component
- * @param initialProps
- * @param innerTemplate
- */
-export declare const computesTemplateFromComponent: (component: Type<unknown>, initialProps?: ICollection, innerTemplate?: string) => string;
-/**
- * Converts a component into a template with inputs/outputs present in initial props
- *
- * @param component
- * @param initialProps
- * @param innerTemplate
- */
-export declare const computesTemplateSourceFromComponent: (component: Type<unknown>, initialProps?: ICollection, argTypes?: ArgTypes) => string | null;

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

@@ -1,160 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = exports.formatPropInTemplate = void 0;
-const NgComponentAnalyzer_1 = require("./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']`.
- */
-const formatPropInTemplate = (propertyName) => isValidIdentifier(propertyName) ? propertyName : `this['${propertyName}']`;
-exports.formatPropInTemplate = formatPropInTemplate;
-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
- */
-const computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
-    const ngComponentMetadata = (0, NgComponentAnalyzer_1.getComponentDecoratorMetadata)(component);
-    const ngComponentInputsOutputs = (0, NgComponentAnalyzer_1.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}]="${(0, exports.formatPropInTemplate)(i)}"`).join(' ')}`
-        : '';
-    const templateOutputs = initialOutputs.length > 0
-        ? ` ${initialOutputs.map((i) => `(${i})="${(0, exports.formatPropInTemplate)(i)}($event)"`).join(' ')}`
-        : '';
-    return buildTemplate(ngComponentMetadata.selector, innerTemplate, templateInputs, templateOutputs);
-};
-exports.computesTemplateFromComponent = computesTemplateFromComponent;
-/** 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
- */
-const computesTemplateSourceFromComponent = (component, initialProps, argTypes) => {
-    const ngComponentMetadata = (0, NgComponentAnalyzer_1.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 = (0, NgComponentAnalyzer_1.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})="${(0, exports.formatPropInTemplate)(i)}($event)"`).join(' ')}`
-        : '';
-    return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
-};
-exports.computesTemplateSourceFromComponent = computesTemplateSourceFromComponent;
-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);
-};

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

@@ -1,154 +0,0 @@
-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);
-};

package/dist/client/angular-beta/ComputesTemplateFromComponent.test.d.ts

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