@storybook/angular 6.4.0-beta.3 → 6.4.0-beta.30

package/dist/ts3.4/client/preview/angular-beta/RendererFactory.d.ts

@@ -3,7 +3,7 @@ declare type RenderType = 'canvas' | 'docs';
 export declare class RendererFactory {
     private lastRenderType;
     private rendererMap;
-    getRendererInstance(storyId: string, targetDOMNode: HTMLElement): Promise<AbstractRenderer>;
+    getRendererInstance(storyId: string, targetDOMNode: HTMLElement): Promise<AbstractRenderer | null>;
     private buildRenderer;
 }
 export declare const getRenderType: (targetDOMNode: HTMLElement) => RenderType;

package/dist/ts3.4/client/preview/config.d.ts

@@ -1,4 +1,6 @@
+import './globals';
 export { render, renderToDOM } from './render';
+export { decorateStory } from './decorateStory';
 export declare const parameters: {
     framework: string;
 };

package/dist/ts3.4/client/preview/decorateStory.d.ts

@@ -1,3 +1,4 @@
 import { DecoratorFunction, LegacyStoryFn } from '@storybook/csf';
 import { AngularFramework } from './types-6-0';
 export default function decorateStory(mainStoryFn: LegacyStoryFn<AngularFramework>, decorators: DecoratorFunction<AngularFramework>[]): LegacyStoryFn<AngularFramework>;
+export { decorateStory };

package/dist/ts3.4/client/preview/decorators.d.ts

@@ -2,5 +2,5 @@ import { Type } from '@angular/core';
 import { DecoratorFunction, StoryContext } from '@storybook/csf';
 import { ICollection, NgModuleMetadata } from './types';
 import { AngularFramework } from './types-6-0';
-export declare const moduleMetadata: (metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularFramework>;
-export declare const componentWrapperDecorator: (element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularFramework>) => ICollection)) => DecoratorFunction<AngularFramework>;
+export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularFramework, TArgs>;
+export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularFramework, TArgs>) => ICollection)) => DecoratorFunction<AngularFramework, TArgs>;

package/dist/ts3.4/server/angular-devkit-build-webpack.d.ts

@@ -27,4 +27,4 @@ export declare type AngularCliWebpackConfig = {
  * Uses angular cli to extract webpack configuration.
  * The `AngularCliWebpackConfig` type lists the parts used by storybook
  */
-export declare function extractAngularCliWebpackConfig(dirToSearch: string, project: workspaces.ProjectDefinition, target: workspaces.TargetDefinition): Promise<AngularCliWebpackConfig>;
+export declare function extractAngularCliWebpackConfig(dirToSearch: string, project: workspaces.ProjectDefinition, target: workspaces.TargetDefinition, confName?: string): Promise<AngularCliWebpackConfig>;

package/dist/ts3.4/server/preset.d.ts

@@ -0,0 +1,3 @@
+import { StorybookConfig } from '@storybook/core-common';
+export declare const config: StorybookConfig['config'];
+export declare const addons: StorybookConfig['addons'];

package/dist/ts3.9/client/preview/angular-beta/RendererFactory.d.ts

@@ -3,7 +3,7 @@ declare type RenderType = 'canvas' | 'docs';
 export declare class RendererFactory {
     private lastRenderType;
     private rendererMap;
-    getRendererInstance(storyId: string, targetDOMNode: HTMLElement): Promise<AbstractRenderer>;
+    getRendererInstance(storyId: string, targetDOMNode: HTMLElement): Promise<AbstractRenderer | null>;
     private buildRenderer;
 }
 export declare const getRenderType: (targetDOMNode: HTMLElement) => RenderType;

package/dist/ts3.9/client/preview/angular-beta/RendererFactory.js

@@ -50,6 +50,12 @@ var RendererFactory = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        // do nothing if the target node is null
+                        // fix a problem when the docs asks 2 times the same component at the same time
+                        // the 1st targetDOMNode of the 1st requested rendering becomes null 🤷‍♂️
+                        if (targetDOMNode === null) {
+                            return [2 /*return*/, null];
+                        }
                         renderType = exports.getRenderType(targetDOMNode);
                         if (!(this.lastRenderType && this.lastRenderType !== renderType)) return [3 /*break*/, 2];
                         return [4 /*yield*/, AbstractRenderer_1.AbstractRenderer.resetPlatformBrowserDynamic()];

package/dist/ts3.9/client/preview/angular-beta/utils/NgComponentAnalyzer.js

@@ -45,7 +45,8 @@ exports.getComponentInputsOutputs = function (component) {
     // Filters properties that have the same name as the one present in the @Component property
     return Object.entries(componentPropsMetadata).reduce(function (previousValue, _a) {
         var _b, _c;
-        var propertyName = _a[0], value = _a[1][0];
+        var propertyName = _a[0], values = _a[1];
+        var value = values.find(function (v) { return v instanceof core_1.Input || v instanceof core_1.Output; });
         if (value instanceof core_1.Input) {
             var inputToAdd = {
                 propName: propertyName,

package/dist/ts3.9/client/preview/config.d.ts

@@ -1,4 +1,6 @@
+import './globals';
 export { render, renderToDOM } from './render';
+export { decorateStory } from './decorateStory';
 export declare const parameters: {
     framework: string;
 };

package/dist/ts3.9/client/preview/config.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parameters = void 0;
+require("./globals");
 var render_1 = require("./render");
 Object.defineProperty(exports, "render", { enumerable: true, get: function () { return render_1.render; } });
 Object.defineProperty(exports, "renderToDOM", { enumerable: true, get: function () { return render_1.renderToDOM; } });
+var decorateStory_1 = require("./decorateStory");
+Object.defineProperty(exports, "decorateStory", { enumerable: true, get: function () { return decorateStory_1.decorateStory; } });
 exports.parameters = { framework: 'angular' };

package/dist/ts3.9/client/preview/decorateStory.d.ts

@@ -1,3 +1,4 @@
 import { DecoratorFunction, LegacyStoryFn } from '@storybook/csf';
 import { AngularFramework } from './types-6-0';
 export default function decorateStory(mainStoryFn: LegacyStoryFn<AngularFramework>, decorators: DecoratorFunction<AngularFramework>[]): LegacyStoryFn<AngularFramework>;
+export { decorateStory };

package/dist/ts3.9/client/preview/decorateStory.js

@@ -18,6 +18,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
     return r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.decorateStory = void 0;
 var store_1 = require("@storybook/store");
 var ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 function decorateStory(mainStoryFn, decorators) {
@@ -30,6 +31,7 @@ function decorateStory(mainStoryFn, decorators) {
     return returnDecorators;
 }
 exports.default = decorateStory;
+exports.decorateStory = decorateStory;
 var prepareMain = function (story, context) {
     var _a;
     var template = story.template;

package/dist/ts3.9/client/preview/decorators.d.ts

@@ -2,5 +2,5 @@ import { Type } from '@angular/core';
 import { DecoratorFunction, StoryContext } from '@storybook/csf';
 import { ICollection, NgModuleMetadata } from './types';
 import { AngularFramework } from './types-6-0';
-export declare const moduleMetadata: (metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularFramework>;
-export declare const componentWrapperDecorator: (element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularFramework>) => ICollection)) => DecoratorFunction<AngularFramework>;
+export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularFramework, TArgs>;
+export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularFramework, TArgs>) => ICollection)) => DecoratorFunction<AngularFramework, TArgs>;

package/dist/ts3.9/client/preview/decorators.js

@@ -21,6 +21,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
 var ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 var NgComponentAnalyzer_1 = require("./angular-beta/utils/NgComponentAnalyzer");
+// We use `any` here as the default type rather than `Args` because we need something that is
+// castable to any component-specific args type when the user is being careful.
 exports.moduleMetadata = function (metadata) { return function (storyFn) {
     var story = storyFn();
     var storyMetadata = story.moduleMetadata || {};

package/dist/ts3.9/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json

@@ -12,6 +12,33 @@
                 }
             }
         },
+        "no-confs-project": {
+            "root": "",
+            "architect": {
+                "target-build": {
+                    "options": {
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": []
+                    }
+                }
+            }
+        },
+        "no-target-conf-project": {
+            "root": "",
+            "architect": {
+                "target-build": {
+                    "options": {
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": []
+                    },
+                    "configurations": {
+                        "other-conf": {
+                            "styles": ["src/styles.css"]
+                        }
+                    }
+                }
+            }
+        },
         "target-project": {
             "root": "",
             "architect": {
@@ -19,6 +46,11 @@
                     "options": {
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": []
+                    },
+                    "configurations": {
+                        "target-conf": {
+                            "styles": ["src/styles.css"]
+                        }
                     }
                 }
             }

package/dist/ts3.9/server/angular-devkit-build-webpack.d.ts

@@ -27,4 +27,4 @@ export declare type AngularCliWebpackConfig = {
  * Uses angular cli to extract webpack configuration.
  * The `AngularCliWebpackConfig` type lists the parts used by storybook
  */
-export declare function extractAngularCliWebpackConfig(dirToSearch: string, project: workspaces.ProjectDefinition, target: workspaces.TargetDefinition): Promise<AngularCliWebpackConfig>;
+export declare function extractAngularCliWebpackConfig(dirToSearch: string, project: workspaces.ProjectDefinition, target: workspaces.TargetDefinition, confName?: string): Promise<AngularCliWebpackConfig>;

package/dist/ts3.9/server/angular-devkit-build-webpack.js

@@ -122,12 +122,22 @@ var importAngularCliReadTsconfigUtil = function () {
     }
     throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"');
 };
-var buildWebpackConfigOptions = function (dirToSearch, project, target) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, projectBuildOptions, requiredOptions, workspaceRootNormalized, projectRootNormalized, sourceRootNormalized, tsConfigPath, tsConfig, ts, scriptTarget, buildOptions;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+var buildWebpackConfigOptions = function (dirToSearch, project, target, confName) { return __awaiter(void 0, void 0, void 0, function () {
+    var conf, projectBuildOptions, requiredOptions, workspaceRootNormalized, projectRootNormalized, sourceRootNormalized, tsConfigPath, tsConfig, ts, scriptTarget, buildOptions;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
             case 0:
-                _a = target.options, projectBuildOptions = _a === void 0 ? {} : _a;
+                conf = {};
+                if (confName) {
+                    if (!target.configurations) {
+                        throw new Error('Missing "configurations" section in project target');
+                    }
+                    if (!target.configurations[confName]) {
+                        throw new Error("Missing required configuration in project target. Check \"" + confName + "\"");
+                    }
+                    conf = target.configurations[confName];
+                }
+                projectBuildOptions = __assign(__assign({}, target.options), conf);
                 requiredOptions = ['tsConfig'];
                 if (!requiredOptions.every(function (key) { return !!projectBuildOptions[key]; })) {
                     throw new Error("Missing required options in project target. Check \"" + requiredOptions.join(', ') + "\"");
@@ -141,7 +151,7 @@ var buildWebpackConfigOptions = function (dirToSearch, project, target) { return
                 tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
                 return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('typescript')); })];
             case 1:
-                ts = _b.sent();
+                ts = _a.sent();
                 scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
                 buildOptions = __assign(__assign({ 
                     // Default options
@@ -166,7 +176,7 @@ var buildWebpackConfigOptions = function (dirToSearch, project, target) { return
  * Uses angular cli to extract webpack configuration.
  * The `AngularCliWebpackConfig` type lists the parts used by storybook
  */
-function extractAngularCliWebpackConfig(dirToSearch, project, target) {
+function extractAngularCliWebpackConfig(dirToSearch, project, target, confName) {
     var _a;
     return __awaiter(this, void 0, void 0, function () {
         var _b, getCommonConfig, getStylesConfig, webpackConfigOptions, cliCommonConfig, cliStyleConfig;
@@ -174,7 +184,7 @@ function extractAngularCliWebpackConfig(dirToSearch, project, target) {
             switch (_c.label) {
                 case 0:
                     _b = importAngularCliWebpackConfigGenerator(), getCommonConfig = _b.getCommonConfig, getStylesConfig = _b.getStylesConfig;
-                    return [4 /*yield*/, buildWebpackConfigOptions(dirToSearch, project, target)];
+                    return [4 /*yield*/, buildWebpackConfigOptions(dirToSearch, project, target, confName)];
                 case 1:
                     webpackConfigOptions = _c.sent();
                     cliCommonConfig = getCommonConfig(webpackConfigOptions);

package/dist/ts3.9/server/framework-preset-angular-cli.js

@@ -67,7 +67,7 @@ var module_is_available_1 = require("./utils/module-is-available");
 var filter_out_styling_rules_1 = require("./utils/filter-out-styling-rules");
 function webpackFinal(baseConfig, options) {
     return __awaiter(this, void 0, void 0, function () {
-        var dirToSearch, workspaceConfig, error_1, project, target, browserTarget, fondProject, angularCliWebpackConfig, error_2;
+        var dirToSearch, workspaceConfig, error_1, project, target, confName, browserTarget, fondProject, angularCliWebpackConfig, error_2;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -103,7 +103,8 @@ function webpackFinal(baseConfig, options) {
                             fondProject = angular_read_workspace_1.findAngularProjectTarget(workspaceConfig, browserTarget.project, browserTarget.target);
                             project = fondProject.project;
                             target = fondProject.target;
-                            node_logger_1.logger.info("=> Using angular project \"" + browserTarget.project + ":" + browserTarget.target + "\" for configuring Storybook");
+                            confName = browserTarget.configuration;
+                            node_logger_1.logger.info("=> Using angular project \"" + browserTarget.project + ":" + browserTarget.target + (confName ? ":" + confName : '') + "\" for configuring Storybook");
                         }
                         // Start storybook when only tsConfig is provided.
                         if (options.angularBrowserTarget === null && options.tsConfig) {
@@ -120,7 +121,7 @@ function webpackFinal(baseConfig, options) {
                     _a.label = 5;
                 case 5:
                     _a.trys.push([5, 7, , 8]);
-                    return [4 /*yield*/, angular_devkit_build_webpack_1.extractAngularCliWebpackConfig(dirToSearch, project, target)];
+                    return [4 /*yield*/, angular_devkit_build_webpack_1.extractAngularCliWebpackConfig(dirToSearch, project, target, confName)];
                 case 6:
                     angularCliWebpackConfig = _a.sent();
                     node_logger_1.logger.info("=> Using angular-cli webpack config");

package/dist/ts3.9/server/options.js

@@ -4,9 +4,5 @@ var read_pkg_up_1 = require("read-pkg-up");
 exports.default = {
     packageJson: read_pkg_up_1.sync({ cwd: __dirname }).packageJson,
     framework: 'angular',
-    frameworkPresets: [
-        require.resolve('./framework-preset-angular'),
-        require.resolve('./framework-preset-angular-cli'),
-        require.resolve('./framework-preset-angular-ivy'),
-    ],
+    frameworkPresets: [require.resolve('./preset')],
 };

package/dist/ts3.9/server/preset.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/core-common';
+export declare const config: StorybookConfig['config'];
+export declare const addons: StorybookConfig['addons'];

package/dist/ts3.9/server/preset.js

@@ -0,0 +1,21 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addons = exports.config = void 0;
+exports.config = function (entries) {
+    if (entries === void 0) { entries = []; }
+    return __spreadArrays(entries, [
+        require.resolve('../client/preview/config'),
+    ]);
+};
+exports.addons = [
+    require.resolve('./framework-preset-angular'),
+    require.resolve('./framework-preset-angular-cli'),
+    require.resolve('./framework-preset-angular-ivy'),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "6.4.0-beta.3",
+  "version": "6.4.0-beta.30",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.3",
-    "@storybook/api": "6.4.0-beta.3",
-    "@storybook/core": "6.4.0-beta.3",
-    "@storybook/core-common": "6.4.0-beta.3",
-    "@storybook/core-events": "6.4.0-beta.3",
-    "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/node-logger": "6.4.0-beta.3",
-    "@storybook/store": "6.4.0-beta.3",
+    "@storybook/addons": "6.4.0-beta.30",
+    "@storybook/api": "6.4.0-beta.30",
+    "@storybook/core": "6.4.0-beta.30",
+    "@storybook/core-common": "6.4.0-beta.30",
+    "@storybook/core-events": "6.4.0-beta.30",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/node-logger": "6.4.0-beta.30",
+    "@storybook/store": "6.4.0-beta.30",
     "@types/webpack-env": "^1.16.0",
     "autoprefixer": "^9.8.6",
     "core-js": "^3.8.2",
@@ -131,5 +131,5 @@
     "access": "public"
   },
   "builders": "dist/ts3.9/builders/builders.json",
-  "gitHead": "0fc9200599c97a5797c5af886792200cd29e2046"
+  "gitHead": "061df7c81746e8aa9afd4c6648f090aeff10b85f"
 }

package/preset.js

@@ -1,7 +1 @@
-function config(entry = []) {
-  return [...entry, require.resolve('./dist/esm/client/preview/config')];
-}
-
-module.exports = {
-  config,
-};
+module.exports = require('./dist/ts3.9/server/preset');

package/types-7-0.d.ts

@@ -0,0 +1 @@
+export * from './dist/ts3.9/client/preview/types-7-0.d';