@storybook/angular 7.1.0-alpha.1 → 7.1.0-alpha.11

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

@@ -13,6 +13,17 @@ export type StorybookBuilderOptions = JsonObject & {
     stylePreprocessorOptions?: StylePreprocessorOptions;
     assets?: AssetPattern[];
 } & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'>;
-export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
+export type StorybookBuilderOutput = JsonObject & BuilderOutput & {
+    [key: string]: any;
+};
+declare const _default: import("@angular-devkit/architect/src/internal").Builder<JsonObject & {
+    browserTarget?: string | null | undefined;
+    tsConfig?: string | undefined;
+    docs: boolean;
+    compodoc: boolean;
+    compodocArgs: string[];
+    styles?: StyleElement[] | undefined;
+    stylePreprocessorOptions?: StylePreprocessorOptions | undefined;
+    assets?: AssetPattern[] | undefined;
+} & Pick<CLIOptions, "webpackStatsJson" | "outputDir" | "configDir" | "loglevel" | "quiet" | "disableTelemetry">>;
 export default _default;

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

@@ -6,12 +6,13 @@ const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const cli_1 = require("@storybook/cli");
+const telemetry_1 = require("@storybook/telemetry");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
-exports.default = (0, architect_1.createBuilder)(commandBuilder);
-function commandBuilder(options, context) {
-    return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
+(0, telemetry_1.addToGlobalContext)('cliVersion', cli_1.versions.storybook);
+const commandBuilder = (options, context) => {
+    const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
         const runCompodoc$ = options.compodoc
             ? (0, run_compodoc_1.runCompodoc)({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe((0, operators_1.mapTo)({ tsConfig }))
             : (0, rxjs_1.of)({});
@@ -45,7 +46,9 @@ function commandBuilder(options, context) {
     }), (0, operators_1.switchMap)((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })), (0, operators_1.map)(() => {
         return { success: true };
     }));
-}
+    return builder;
+};
+exports.default = (0, architect_1.createBuilder)(commandBuilder);
 async function setup(options, context) {
     let browserOptions;
     let browserTarget;

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

@@ -14,5 +14,14 @@ export type StorybookBuilderOptions = JsonObject & {
     assets?: AssetPattern[];
 } & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
-declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
+declare const _default: import("@angular-devkit/architect/src/internal").Builder<JsonObject & {
+    browserTarget?: string | null | undefined;
+    tsConfig?: string | undefined;
+    docs: boolean;
+    compodoc: boolean;
+    compodocArgs: string[];
+    styles?: StyleElement[] | undefined;
+    stylePreprocessorOptions?: StylePreprocessorOptions | undefined;
+    assets?: AssetPattern[] | undefined;
+} & Pick<CLIOptions, "port" | "configDir" | "quiet" | "disableTelemetry" | "host" | "https" | "sslCa" | "sslCert" | "sslKey" | "smokeTest" | "ci">>;
 export default _default;

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

@@ -6,12 +6,13 @@ const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
 const read_pkg_up_1 = require("read-pkg-up");
 const cli_1 = require("@storybook/cli");
+const telemetry_1 = require("@storybook/telemetry");
 const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const error_handler_1 = require("../utils/error-handler");
-exports.default = (0, architect_1.createBuilder)(commandBuilder);
-function commandBuilder(options, context) {
-    return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
+(0, telemetry_1.addToGlobalContext)('cliVersion', cli_1.versions.storybook);
+const commandBuilder = (options, context) => {
+    const builder = (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
         const runCompodoc$ = options.compodoc
             ? (0, run_compodoc_1.runCompodoc)({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe((0, operators_1.mapTo)({ tsConfig }))
             : (0, rxjs_1.of)({});
@@ -54,7 +55,9 @@ function commandBuilder(options, context) {
     }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)((port) => {
         return { success: true, info: { port } };
     }));
-}
+    return builder;
+};
+exports.default = (0, architect_1.createBuilder)(commandBuilder);
 async function setup(options, context) {
     let browserOptions;
     let browserTarget;

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

@@ -14,4 +14,4 @@ export declare const computesTemplateFromComponent: (component: Type<unknown>, i
  * @param initialProps
  * @param innerTemplate
  */
-export declare const computesTemplateSourceFromComponent: (component: Type<unknown>, initialProps?: ICollection, argTypes?: ArgTypes) => string;
+export declare const computesTemplateSourceFromComponent: (component: Type<unknown>, initialProps?: ICollection, argTypes?: ArgTypes) => string | null;

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

@@ -1,5 +1,5 @@
 import { Provider, InjectionToken } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ICollection } from '../types';
-export declare const STORY_PROPS: InjectionToken<Subject<ICollection>>;
+export declare const STORY_PROPS: InjectionToken<Subject<ICollection | undefined>>;
 export declare const storyPropsProvider: (storyProps$: Subject<ICollection | undefined>) => Provider;

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

@@ -11,6 +11,6 @@ export declare const createStorybookWrapperComponent: ({ selector, template, sto
     storyComponent: Type<unknown> | undefined;
     styles: string[];
     moduleMetadata: NgModuleMetadata;
-    initialProps?: ICollection;
-    analyzedMetadata?: PropertyExtractor;
+    initialProps?: ICollection | undefined;
+    analyzedMetadata?: PropertyExtractor | undefined;
 }) => Type<any>;

package/dist/client/angular-beta/utils/NgComponentAnalyzer.js

@@ -15,7 +15,10 @@ const getComponentInputsOutputs = (component) => {
     };
     // Adds the I/O present in @Component metadata
     if (componentMetadata && componentMetadata.inputs) {
-        initialValue.inputs.push(...componentMetadata.inputs.map((i) => ({ propName: i, templateName: i })));
+        initialValue.inputs.push(...componentMetadata.inputs.map((i) => ({
+            propName: typeof i === 'string' ? i : i.name,
+            templateName: typeof i === 'string' ? i : i.alias,
+        })));
     }
     if (componentMetadata && componentMetadata.outputs) {
         initialValue.outputs.push(...componentMetadata.outputs.map((i) => ({ propName: i, templateName: i })));
@@ -30,7 +33,7 @@ const getComponentInputsOutputs = (component) => {
         if (value instanceof core_1.Input) {
             const inputToAdd = {
                 propName: propertyName,
-                templateName: value.bindingPropertyName ?? propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
             };
             const previousInputsFiltered = previousValue.inputs.filter((i) => i.templateName !== propertyName);
             return {
@@ -41,7 +44,7 @@ const getComponentInputsOutputs = (component) => {
         if (value instanceof core_1.Output) {
             const outputToAdd = {
                 propName: propertyName,
-                templateName: value.bindingPropertyName ?? propertyName,
+                templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
             };
             const previousOutputsFiltered = previousValue.outputs.filter((i) => i.templateName !== propertyName);
             return {

package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.js

@@ -368,11 +368,7 @@ function sortByPropName(array) {
 function resolveComponentFactory(component) {
     testing_1.TestBed.configureTestingModule({
         declarations: [component],
-    }).overrideModule(testing_2.BrowserDynamicTestingModule, {
-        set: {
-            entryComponents: [component],
-        },
-    });
+    }).overrideModule(testing_2.BrowserDynamicTestingModule, {});
     const componentFactoryResolver = testing_1.TestBed.inject(core_1.ComponentFactoryResolver);
     return componentFactoryResolver.resolveComponentFactory(component);
 }

package/dist/client/decorators.d.ts

@@ -11,4 +11,4 @@ export declare function applicationConfig<TArgs = any>(
  * Set of config options available during the application bootstrap operation.
  */
 config: ApplicationConfig): DecoratorFunction<AngularRenderer, TArgs>;
-export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)) => DecoratorFunction<AngularRenderer, TArgs>;
+export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection) | undefined) => DecoratorFunction<AngularRenderer, TArgs>;

package/dist/client/docs/compodoc.d.ts

@@ -5,8 +5,8 @@ export declare const setCompodocJson: (compodocJson: CompodocJson) => void;
 export declare const getCompodocJson: () => CompodocJson;
 export declare const checkValidComponentOrDirective: (component: Component | Directive) => void;
 export declare const checkValidCompodocJson: (compodocJson: CompodocJson) => void;
-export declare const findComponentByName: (name: string, compodocJson: CompodocJson) => Class | Injectable | Pipe | Directive;
+export declare const findComponentByName: (name: string, compodocJson: CompodocJson) => Class | Injectable | Pipe | Directive | undefined;
 export declare const extractType: (property: Property, defaultValue: any) => SBType;
 export declare const extractArgTypesFromData: (componentData: Class | Directive | Injectable | Pipe) => ArgTypes<import("@storybook/types").Args>;
-export declare const extractArgTypes: (component: Component | Directive) => ArgTypes<import("@storybook/types").Args>;
-export declare const extractComponentDescription: (component: Component | Directive) => string;
+export declare const extractArgTypes: (component: Component | Directive) => ArgTypes<import("@storybook/types").Args> | null | undefined;
+export declare const extractComponentDescription: (component: Component | Directive) => string | null | undefined;

package/dist/client/index.js

@@ -26,4 +26,5 @@ Object.defineProperty(exports, "moduleMetadata", { enumerable: true, get: functi
 Object.defineProperty(exports, "componentWrapperDecorator", { enumerable: true, get: function () { return decorators_1.componentWrapperDecorator; } });
 Object.defineProperty(exports, "applicationConfig", { enumerable: true, get: function () { return decorators_1.applicationConfig; } });
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined')
+    module?.hot?.decline();

package/dist/client/public-api.js

@@ -18,12 +18,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.raw = exports.forceReRender = exports.configure = exports.storiesOf = void 0;
-const core_client_1 = require("@storybook/core-client");
+const preview_api_1 = require("@storybook/preview-api");
 const render_1 = require("./render");
 const decorateStory_1 = __importDefault(require("./decorateStory"));
 __exportStar(require("./public-types"), exports);
 const RENDERER = 'angular';
-const api = (0, core_client_1.start)(render_1.renderToCanvas, { decorateStory: decorateStory_1.default, render: render_1.render });
+const api = (0, preview_api_1.start)(render_1.renderToCanvas, { decorateStory: decorateStory_1.default, render: render_1.render });
 const storiesOf = (kind, m) => {
     return api.clientApi.storiesOf(kind, m).addParameters({
         renderer: RENDERER,

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

@@ -1,3 +1,4 @@
+"use strict";
 // Private angular devkit stuff
 const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
 const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs');

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

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.runNgcc = void 0;
+const core_1 = require("@angular/core");
 const path = __importStar(require("path"));
 /**
  * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
@@ -51,7 +52,8 @@ function loadEsmModule(modulePath) {
 const runNgcc = async () => {
     let ngcc;
     try {
-        ngcc = await Promise.resolve().then(() => __importStar(require('@angular/compiler-cli/ngcc')));
+        // eslint-disable-next-line global-require
+        ngcc = require('@angular/compiler-cli/ngcc');
     }
     catch (error) {
         ngcc = await loadEsmModule('@angular/compiler-cli/ngcc');
@@ -69,26 +71,25 @@ exports.runNgcc = runNgcc;
 const webpack = async (webpackConfig, options) => {
     const framework = await options.presets.apply('framework');
     const angularOptions = (typeof framework === 'object' ? framework.options : {});
+    const isAngular16OrNewer = parseInt(core_1.VERSION.major, 10) >= 16;
     // Default to true, if undefined
     if (angularOptions.enableIvy === false) {
         return webpackConfig;
     }
-    if (angularOptions.enableNgcc !== false) {
+    let extraMainFields = [];
+    if (angularOptions.enableNgcc !== false && !isAngular16OrNewer) {
+        // TODO: Drop if Angular 14 and 15 are not supported anymore
         (0, exports.runNgcc)();
+        extraMainFields = ['es2015_ivy_ngcc', 'module_ivy_ngcc', 'main_ivy_ngcc'];
+    }
+    if (!isAngular16OrNewer) {
+        extraMainFields.push('es2015');
     }
     return {
         ...webpackConfig,
         resolve: {
             ...webpackConfig.resolve,
-            mainFields: [
-                'es2015_ivy_ngcc',
-                'module_ivy_ngcc',
-                'main_ivy_ngcc',
-                'es2015',
-                'browser',
-                'module',
-                'main',
-            ],
+            mainFields: [...extraMainFields, 'browser', 'module', 'main'],
         },
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.1.0-alpha.1",
+  "version": "7.1.0-alpha.11",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.1.0-alpha.1",
-    "@storybook/cli": "7.1.0-alpha.1",
-    "@storybook/client-logger": "7.1.0-alpha.1",
-    "@storybook/core-client": "7.1.0-alpha.1",
-    "@storybook/core-common": "7.1.0-alpha.1",
-    "@storybook/core-events": "7.1.0-alpha.1",
-    "@storybook/core-server": "7.1.0-alpha.1",
-    "@storybook/core-webpack": "7.1.0-alpha.1",
-    "@storybook/docs-tools": "7.1.0-alpha.1",
+    "@storybook/builder-webpack5": "7.1.0-alpha.11",
+    "@storybook/cli": "7.1.0-alpha.11",
+    "@storybook/client-logger": "7.1.0-alpha.11",
+    "@storybook/core-common": "7.1.0-alpha.11",
+    "@storybook/core-events": "7.1.0-alpha.11",
+    "@storybook/core-server": "7.1.0-alpha.11",
+    "@storybook/core-webpack": "7.1.0-alpha.11",
+    "@storybook/docs-tools": "7.1.0-alpha.11",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.1",
-    "@storybook/node-logger": "7.1.0-alpha.1",
-    "@storybook/preview-api": "7.1.0-alpha.1",
-    "@storybook/types": "7.1.0-alpha.1",
+    "@storybook/manager-api": "7.1.0-alpha.11",
+    "@storybook/node-logger": "7.1.0-alpha.11",
+    "@storybook/preview-api": "7.1.0-alpha.11",
+    "@storybook/telemetry": "7.1.0-alpha.11",
+    "@storybook/types": "7.1.0-alpha.11",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -65,18 +65,18 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1500.4",
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular-devkit/core": "^15.1.1",
-    "@angular/animations": "^15.1.1",
-    "@angular/cli": "^15.1.1",
-    "@angular/common": "^15.1.1",
-    "@angular/compiler": "^15.1.1",
-    "@angular/compiler-cli": "^15.1.1",
-    "@angular/core": "^15.1.1",
-    "@angular/forms": "^15.1.1",
-    "@angular/platform-browser": "^15.1.1",
-    "@angular/platform-browser-dynamic": "^15.1.1",
+    "@angular-devkit/architect": "^0.1600.0-rc.3",
+    "@angular-devkit/build-angular": "^16.0.0-rc.3",
+    "@angular-devkit/core": "^16.0.0-rc.3",
+    "@angular/animations": "^16.0.0-rc.3",
+    "@angular/cli": "^16.0.0-rc.3",
+    "@angular/common": "^16.0.0-rc.3",
+    "@angular/compiler": "^16.0.0-rc.3",
+    "@angular/compiler-cli": "^16.0.0-rc.3",
+    "@angular/core": "^16.0.0-rc.3",
+    "@angular/forms": "^16.0.0-rc.3",
+    "@angular/platform-browser": "^16.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "^16.0.0-rc.3",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -87,20 +87,20 @@
     "tmp": "^0.2.1",
     "typescript": "~4.9.3",
     "webpack": "5",
-    "zone.js": "^0.12.0"
+    "zone.js": "^0.13.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 16.0.0",
-    "@angular/cli": ">=14.1.0 < 16.0.0",
-    "@angular/common": ">=14.1.0 < 16.0.0",
-    "@angular/compiler": ">=14.1.0 < 16.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 16.0.0",
-    "@angular/core": ">=14.1.0 < 16.0.0",
-    "@angular/forms": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 16.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0",
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1700.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 17.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 17.0.0",
+    "@angular/cli": ">=14.1.0 < 17.0.0",
+    "@angular/common": ">=14.1.0 < 17.0.0",
+    "@angular/compiler": ">=14.1.0 < 17.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 17.0.0",
+    "@angular/core": ">=14.1.0 < 17.0.0",
+    "@angular/forms": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 17.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0",
     "@babel/core": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "48a1df25493b1cc26a405096e723301f4bb04b4e"
+  "gitHead": "0797ab602bc569ff71c343a2b1aaba7e49232d95"
 }