@storybook/angular 7.5.0-alpha.4 → 7.5.0-alpha.6

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

@@ -23,7 +23,7 @@ const commandBuilder = (options, context) => {
             outputDir: 'SBCONFIG_OUTPUT_DIR',
             configDir: 'SBCONFIG_CONFIG_DIR',
         });
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, enableProdMode = true, webpackStatsJson, disableTelemetry, assets, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, enableProdMode = true, webpackStatsJson, debugWebpack, disableTelemetry, assets, previewUrl, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
@@ -42,6 +42,8 @@ const commandBuilder = (options, context) => {
             },
             tsConfig,
             webpackStatsJson,
+            debugWebpack,
+            previewUrl,
         };
         return standaloneOptions;
     }), (0, operators_1.switchMap)((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })), (0, operators_1.map)(() => {

package/dist/builders/build-storybook/schema.json

@@ -29,6 +29,11 @@
             "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
             "pattern": "(silly|verbose|info|warn|silent)"
         },
+        "debugWebpack": {
+            "type": "boolean",
+            "description": "Debug the Webpack configuration",
+            "default": false
+        },
         "enableProdMode": {
             "type": "boolean",
             "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.",
@@ -62,6 +67,10 @@
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },
+        "previewUrl": {
+            "type": "string",
+            "description": "Disables the default storybook preview and lets you use your own"
+        },
         "styles": {
             "type": "array",
             "description": "Global styles to be included in the build.",

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

@@ -30,7 +30,7 @@ const commandBuilder = (options, context) => {
         });
         // eslint-disable-next-line no-param-reassign
         options.port = parseInt(`${options.port}`, 10);
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, initialPath, open, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, enableProdMode = false, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, initialPath, open, debugWebpack, loglevel, webpackStatsJson, previewUrl, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
@@ -56,6 +56,10 @@ const commandBuilder = (options, context) => {
             tsConfig,
             initialPath,
             open,
+            debugWebpack,
+            loglevel,
+            webpackStatsJson,
+            previewUrl,
         };
         return standaloneOptions;
     }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)((port) => {

package/dist/builders/start-storybook/schema.json

@@ -10,6 +10,11 @@
             "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
             "default": null
         },
+        "debugWebpack": {
+            "type": "boolean",
+            "description": "Debug the Webpack configuration",
+            "default": false
+        },
         "tsConfig": {
             "type": "string",
             "description": "The full path for the TypeScript configuration file, relative to the current workspace."
@@ -123,6 +128,20 @@
         "initialPath": {
             "type": "string",
             "description": "URL path to be appended when visiting Storybook for the first time"
+        },
+        "webpackStatsJson": {
+            "type": "string",
+            "description": "Write Webpack Stats JSON to disk",
+            "default": false
+        },
+        "previewUrl": {
+            "type": "string",
+            "description": "Disables the default storybook preview and lets you use your own"
+        },
+        "loglevel": {
+            "type": "string",
+            "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+            "pattern": "(silly|verbose|info|warn|silent)"
         }
     },
     "additionalProperties": false,

package/dist/client/argsToTemplate.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+export interface ArgsToTemplateOptions<T> {
+    /**
+     * An array of keys to specifically include in the output.
+     * If provided, only the keys from this array will be included in the output,
+     * irrespective of the `exclude` option. Undefined values will still be excluded from the output.
+     */
+    include?: Array<T>;
+    /**
+     * An array of keys to specifically exclude from the output.
+     * If provided, these keys will be omitted from the output. This option is
+     * ignored if the `include` option is also provided
+     */
+    exclude?: Array<T>;
+}
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+export declare function argsToTemplate<A extends Record<string, any>>(args: A, options?: ArgsToTemplateOptions<keyof A>): string;

package/dist/client/argsToTemplate.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argsToTemplate = void 0;
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+function argsToTemplate(args, options = {}) {
+    const includeSet = options.include ? new Set(options.include) : null;
+    const excludeSet = options.exclude ? new Set(options.exclude) : null;
+    return Object.entries(args)
+        .filter(([key]) => args[key] !== undefined)
+        .filter(([key]) => {
+        if (includeSet)
+            return includeSet.has(key);
+        if (excludeSet)
+            return !excludeSet.has(key);
+        return true;
+    })
+        .map(([key, value]) => typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`)
+        .join(' ');
+}
+exports.argsToTemplate = argsToTemplate;

package/dist/client/argsToTemplate.test.d.ts

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

package/dist/client/argsToTemplate.test.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const argsToTemplate_1 = require("./argsToTemplate"); // adjust path
+describe('argsToTemplate', () => {
+    it('should correctly convert args to template string and exclude undefined values', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: undefined,
+            prop3: 'value3',
+        };
+        const options = {};
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should include properties from include option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            include: ['prop1', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should include non-undefined properties from include option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: undefined,
+        };
+        const options = {
+            include: ['prop1', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1"');
+    });
+    it('should exclude properties from exclude option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            exclude: ['prop2'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should exclude properties from exclude option and undefined properties', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: undefined,
+        };
+        const options = {
+            exclude: ['prop2'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1"');
+    });
+    it('should prioritize include over exclude when both options are given', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            include: ['prop1', 'prop2'],
+            exclude: ['prop2', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+    });
+    it('should work when neither include nor exclude options are given', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+        };
+        const options = {};
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+    });
+    it('should bind events correctly when value is a function', () => {
+        const args = { event1: () => { }, event2: () => { } };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
+        expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+    });
+    it('should mix properties and events correctly', () => {
+        const args = { input: 'Value1', event1: () => { } };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
+        expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+    });
+});

package/dist/client/globals.d.ts

@@ -20,4 +20,4 @@
 /** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';
+import 'zone.js';

package/dist/client/globals.js

@@ -24,7 +24,7 @@ const global_1 = require("@storybook/global");
 /** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-require("zone.js/dist/zone"); // Included with Angular CLI.
+require("zone.js"); // Included with Angular CLI.
 /** *************************************************************************************************
  * APPLICATION IMPORTS
  */

package/dist/client/index.d.ts

@@ -3,3 +3,4 @@ export * from './public-api';
 export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';

package/dist/client/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
+exports.argsToTemplate = exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
 require("./globals");
 // eslint-disable-next-line import/export
 __exportStar(require("./public-api"), exports);
@@ -25,6 +25,8 @@ var decorators_1 = require("./decorators");
 Object.defineProperty(exports, "moduleMetadata", { enumerable: true, get: function () { return decorators_1.moduleMetadata; } });
 Object.defineProperty(exports, "componentWrapperDecorator", { enumerable: true, get: function () { return decorators_1.componentWrapperDecorator; } });
 Object.defineProperty(exports, "applicationConfig", { enumerable: true, get: function () { return decorators_1.applicationConfig; } });
+var argsToTemplate_1 = require("./argsToTemplate");
+Object.defineProperty(exports, "argsToTemplate", { enumerable: true, get: function () { return argsToTemplate_1.argsToTemplate; } });
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.6",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,21 +37,21 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.5.0-alpha.4",
-    "@storybook/cli": "7.5.0-alpha.4",
-    "@storybook/client-logger": "7.5.0-alpha.4",
-    "@storybook/core-common": "7.5.0-alpha.4",
-    "@storybook/core-events": "7.5.0-alpha.4",
-    "@storybook/core-server": "7.5.0-alpha.4",
-    "@storybook/core-webpack": "7.5.0-alpha.4",
-    "@storybook/docs-tools": "7.5.0-alpha.4",
+    "@storybook/builder-webpack5": "7.5.0-alpha.6",
+    "@storybook/cli": "7.5.0-alpha.6",
+    "@storybook/client-logger": "7.5.0-alpha.6",
+    "@storybook/core-common": "7.5.0-alpha.6",
+    "@storybook/core-events": "7.5.0-alpha.6",
+    "@storybook/core-server": "7.5.0-alpha.6",
+    "@storybook/core-webpack": "7.5.0-alpha.6",
+    "@storybook/docs-tools": "7.5.0-alpha.6",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.5.0-alpha.4",
-    "@storybook/node-logger": "7.5.0-alpha.4",
-    "@storybook/preview-api": "7.5.0-alpha.4",
-    "@storybook/telemetry": "7.5.0-alpha.4",
-    "@storybook/types": "7.5.0-alpha.4",
-    "@types/node": "^16.0.0",
+    "@storybook/manager-api": "7.5.0-alpha.6",
+    "@storybook/node-logger": "7.5.0-alpha.6",
+    "@storybook/preview-api": "7.5.0-alpha.6",
+    "@storybook/telemetry": "7.5.0-alpha.6",
+    "@storybook/types": "7.5.0-alpha.6",
+    "@types/node": "^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
@@ -106,7 +106,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
-    "zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0"
+    "zone.js": ">= 0.11.1 < 1.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/cli": {