@storybook/angular 8.3.0-alpha.0 → 8.3.0-alpha.10

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

@@ -1,8 +1,8 @@
+import { CLIOptions } from 'storybook/internal/types';
 import { BuilderOutput } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { CLIOptions } from 'storybook/internal/types';
 import { AssetPattern, SourceMapUnion, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { JsonObject } from '@angular-devkit/core';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;

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

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("storybook/internal/common");
+const core_server_1 = require("storybook/internal/core-server");
+const telemetry_1 = require("storybook/internal/telemetry");
 const architect_1 = require("@angular-devkit/architect");
+const fd_package_json_1 = require("fd-package-json");
+const find_up_1 = require("find-up");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
-const find_up_1 = require("find-up");
-const fd_package_json_1 = require("fd-package-json");
-const common_1 = require("storybook/internal/common");
-const telemetry_1 = require("storybook/internal/telemetry");
-const core_server_1 = require("storybook/internal/core-server");
-const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
+const run_compodoc_1 = require("../utils/run-compodoc");
 (0, telemetry_1.addToGlobalContext)('cliVersion', common_1.versions.storybook);
 const commandBuilder = (options, context) => {
     const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {

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

@@ -23,12 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line import/no-extraneous-dependencies
-const vitest_1 = require("vitest");
 const architect_1 = require("@angular-devkit/architect");
 const testing_1 = require("@angular-devkit/architect/testing");
 const core_1 = require("@angular-devkit/core");
-const path = __importStar(require("path"));
+const path = __importStar(require("node:path"));
+const vitest_1 = require("vitest");
 const buildDevStandaloneMock = vitest_1.vi.fn();
 const buildStaticStandaloneMock = vitest_1.vi.fn();
 const buildMock = {

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

@@ -1,8 +1,8 @@
+import { CLIOptions } from 'storybook/internal/types';
 import { BuilderOutput } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { CLIOptions } from 'storybook/internal/types';
 import { AssetPattern, SourceMapUnion, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { JsonObject } from '@angular-devkit/core';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;

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

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("storybook/internal/common");
+const core_server_1 = require("storybook/internal/core-server");
+const telemetry_1 = require("storybook/internal/telemetry");
 const architect_1 = require("@angular-devkit/architect");
+const fd_package_json_1 = require("fd-package-json");
+const find_up_1 = require("find-up");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
-const find_up_1 = require("find-up");
-const fd_package_json_1 = require("fd-package-json");
-const common_1 = require("storybook/internal/common");
-const telemetry_1 = require("storybook/internal/telemetry");
-const core_server_1 = require("storybook/internal/core-server");
-const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
+const run_compodoc_1 = require("../utils/run-compodoc");
 (0, telemetry_1.addToGlobalContext)('cliVersion', common_1.versions.storybook);
 const commandBuilder = (options, context) => {
     const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {

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

@@ -1,34 +1,10 @@
 "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 });
-// eslint-disable-next-line import/no-extraneous-dependencies
-const vitest_1 = require("vitest");
 const architect_1 = require("@angular-devkit/architect");
 const testing_1 = require("@angular-devkit/architect/testing");
 const core_1 = require("@angular-devkit/core");
-const path = __importStar(require("path"));
+const node_path_1 = require("node:path");
+const vitest_1 = require("vitest");
 const buildDevStandaloneMock = vitest_1.vi.fn();
 const buildStaticStandaloneMock = vitest_1.vi.fn();
 const buildMock = {
@@ -74,7 +50,7 @@ vitest_1.describe.skip('Start Storybook Builder', () => {
         });
         // This will either take a Node package name, or a path to the directory
         // for the package.json file.
-        await architectHost.addBuilderFromPackage(path.join(__dirname, '../../..'));
+        await architectHost.addBuilderFromPackage((0, node_path_1.join)(__dirname, '../../..'));
     });
     (0, vitest_1.beforeEach)(() => {
         buildDevStandaloneMock.mockImplementation((_options) => Promise.resolve(_options));

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

@@ -1,38 +1,15 @@
 "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.runCompodoc = void 0;
-const rxjs_1 = require("rxjs");
-const path = __importStar(require("path"));
+const node_path_1 = require("node:path");
 const common_1 = require("storybook/internal/common");
+const rxjs_1 = require("rxjs");
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
 const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
-// path.relative is necessary to workaround a compodoc issue with
+// relative is necessary to workaround a compodoc issue with
 // absolute paths on windows machines
 const toRelativePath = (pathToTsConfig) => {
-    return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
+    return (0, node_path_1.isAbsolute)(pathToTsConfig) ? (0, node_path_1.relative)('.', pathToTsConfig) : pathToTsConfig;
 };
 const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
     return new rxjs_1.Observable((observer) => {

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line import/no-extraneous-dependencies
-const vitest_1 = require("vitest");
 const operators_1 = require("rxjs/operators");
+const vitest_1 = require("vitest");
 const run_compodoc_1 = require("./run-compodoc");
 const mockRunScript = vitest_1.vi.fn();
 vitest_1.vi.mock('storybook/internal/common', () => ({

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

@@ -1,6 +1,6 @@
+import { BuilderOptions, CLIOptions, LoadOptions } from 'storybook/internal/types';
 import { BuilderContext } from '@angular-devkit/architect';
 import { AssetPattern, SourceMapUnion, StyleElement, StylePreprocessorOptions } from '@angular-devkit/build-angular/src/builders/browser/schema';
-import { LoadOptions, CLIOptions, BuilderOptions } from 'storybook/internal/types';
 export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     enableProdMode: boolean;

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

@@ -7,14 +7,12 @@ type StoryRenderInfo = {
 /**
  * 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.
+ * If a target DOM node has a story UID attribute, it will be used as part of the selector for the
+ * Angular component.
  */
 export declare const STORY_UID_ATTRIBUTE = "data-sb-story-uid";
 export declare abstract class AbstractRenderer {
-    /**
-     * Wait and destroy the platform
-     */
+    /** Wait and destroy the platform */
     static resetApplications(domNode?: HTMLElement): void;
     protected previousStoryRenderInfo: Map<HTMLElement, StoryRenderInfo>;
     protected storyProps$: Subject<ICollection | undefined>;
@@ -24,8 +22,12 @@ export declare abstract class AbstractRenderer {
      *
      * @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
+     *
+     *   - 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}
      */
     render({ storyFnAngular, forced, component, targetDOMNode, }: {
@@ -35,21 +37,20 @@ export declare abstract class AbstractRenderer {
         targetDOMNode: HTMLElement;
     }): Promise<void>;
     /**
-     * Only ASCII alphanumerics can be used as HTML tag name.
-     * https://html.spec.whatwg.org/#elements-2
+     * 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"
-     * @protected
+     * 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
      */
     protected generateTargetSelectorFromStoryId(id: string): string;
-    /**
-     * Adds DOM element that angular will use as bootstrap component.
-     */
+    /** 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

@@ -6,23 +6,21 @@ const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
-const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 const BootstrapQueue_1 = require("./utils/BootstrapQueue");
+const PropertyExtractor_1 = require("./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.
+ * If a target DOM node has a story UID attribute, it will be used as part of the selector for the
+ * Angular component.
  */
 exports.STORY_UID_ATTRIBUTE = 'data-sb-story-uid';
 class AbstractRenderer {
     constructor() {
         this.previousStoryRenderInfo = new Map();
     }
-    /**
-     * Wait and destroy the platform
-     */
+    /** Wait and destroy the platform */
     static resetApplications(domNode) {
         applicationRefs.forEach((appRef, appDOMNode) => {
             if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) {
@@ -35,8 +33,12 @@ class AbstractRenderer {
      *
      * @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
+     *
+     *   - 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, }) {
@@ -86,25 +88,24 @@ class AbstractRenderer {
         applicationRefs.set(targetDOMNode, applicationRef);
     }
     /**
-     * Only ASCII alphanumerics can be used as HTML tag name.
-     * https://html.spec.whatwg.org/#elements-2
+     * 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"
-     * @protected
+     * 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;
     }
-    /**
-     * Adds DOM element that angular will use as bootstrap component.
-     */
+    /** Adds DOM element that angular will use as bootstrap component. */
     initAngularRootElement(targetDOMNode, targetSelector) {
         targetDOMNode.innerHTML = '';
         targetDOMNode.appendChild(document.createElement(targetSelector));

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

@@ -1,5 +1,5 @@
+import { Parameters, StoryFnAngularReturnType } from '../types';
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class CanvasRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;

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

@@ -1,8 +1,14 @@
-import { Type } from '@angular/core';
 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
@@ -10,6 +16,7 @@ import { ICollection } from '../types';
 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

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

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computesTemplateSourceFromComponent = exports.computesTemplateFromComponent = void 0;
+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)
@@ -17,6 +28,7 @@ const separateInputsOutputsAttributes = (ngComponentInputsOutputs, props = {}) =
 };
 /**
  * Converts a component into a template with inputs/outputs present in initial props
+ *
  * @param component
  * @param initialProps
  * @param innerTemplate
@@ -29,13 +41,28 @@ const computesTemplateFromComponent = (component, initialProps, innerTemplate =
         return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
     }
     const { inputs: initialInputs, outputs: initialOutputs } = separateInputsOutputsAttributes(ngComponentInputsOutputs, initialProps);
-    const templateInputs = initialInputs.length > 0 ? ` ${initialInputs.map((i) => `[${i}]="${i}"`).join(' ')}` : '';
+    const templateInputs = initialInputs.length > 0
+        ? ` ${initialInputs.map((i) => `[${i}]="${(0, exports.formatPropInTemplate)(i)}"`).join(' ')}`
+        : '';
     const templateOutputs = initialOutputs.length > 0
-        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        ? ` ${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) {
@@ -43,7 +70,7 @@ const createAngularInputProperty = ({ propertyName, value, argType, }) => {
             templateValue = `'${value}'`;
             break;
         case 'object':
-            templateValue = JSON.stringify(value)
+            templateValue = stringifyCircular(value)
                 .replace(/'/g, '\u2019')
                 .replace(/\\"/g, '\u201D')
                 .replace(/"([^-"]+)":/g, '$1: ')
@@ -60,6 +87,7 @@ const createAngularInputProperty = ({ propertyName, value, argType, }) => {
 };
 /**
  * Converts a component into a template with inputs/outputs present in initial props
+ *
  * @param component
  * @param initialProps
  * @param innerTemplate
@@ -85,7 +113,7 @@ const computesTemplateSourceFromComponent = (component, initialProps, argTypes)
             .join(' ')}`
         : '';
     const templateOutputs = initialOutputs.length > 0
-        ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
+        ? ` ${initialOutputs.map((i) => `(${i})="${(0, exports.formatPropInTemplate)(i)}($event)"`).join(' ')}`
         : '';
     return buildTemplate(ngComponentMetadata.selector, '', templateInputs, templateOutputs);
 };