@storybook/angular 6.5.9 → 7.0.0-alpha.2

package/dist/{ts3.9 → types}/client/preview/angular-beta/utils/NgComponentAnalyzer.js

@@ -6,9 +6,9 @@ const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
 /**
  * Returns component Inputs / Outputs by browsing these properties and decorator
  */
-exports.getComponentInputsOutputs = (component) => {
-    const componentMetadata = exports.getComponentDecoratorMetadata(component);
-    const componentPropsMetadata = exports.getComponentPropsDecoratorMetadata(component);
+const getComponentInputsOutputs = (component) => {
+    const componentMetadata = (0, exports.getComponentDecoratorMetadata)(component);
+    const componentPropsMetadata = (0, exports.getComponentPropsDecoratorMetadata)(component);
     const initialValue = {
         inputs: [],
         outputs: [],
@@ -26,42 +26,50 @@ exports.getComponentInputsOutputs = (component) => {
     // Browses component properties to extract I/O
     // Filters properties that have the same name as the one present in the @Component property
     return Object.entries(componentPropsMetadata).reduce((previousValue, [propertyName, values]) => {
-        var _a, _b;
         const value = values.find((v) => v instanceof core_1.Input || v instanceof core_1.Output);
         if (value instanceof core_1.Input) {
             const inputToAdd = {
                 propName: propertyName,
-                templateName: (_a = value.bindingPropertyName) !== null && _a !== void 0 ? _a : propertyName,
+                templateName: value.bindingPropertyName ?? propertyName,
             };
             const previousInputsFiltered = previousValue.inputs.filter((i) => i.templateName !== propertyName);
-            return Object.assign(Object.assign({}, previousValue), { inputs: [...previousInputsFiltered, inputToAdd] });
+            return {
+                ...previousValue,
+                inputs: [...previousInputsFiltered, inputToAdd],
+            };
         }
         if (value instanceof core_1.Output) {
             const outputToAdd = {
                 propName: propertyName,
-                templateName: (_b = value.bindingPropertyName) !== null && _b !== void 0 ? _b : propertyName,
+                templateName: value.bindingPropertyName ?? propertyName,
             };
             const previousOutputsFiltered = previousValue.outputs.filter((i) => i.templateName !== propertyName);
-            return Object.assign(Object.assign({}, previousValue), { outputs: [...previousOutputsFiltered, outputToAdd] });
+            return {
+                ...previousValue,
+                outputs: [...previousOutputsFiltered, outputToAdd],
+            };
         }
         return previousValue;
     }, initialValue);
 };
-exports.isDeclarable = (component) => {
+exports.getComponentInputsOutputs = getComponentInputsOutputs;
+const isDeclarable = (component) => {
     if (!component) {
         return false;
     }
     const decorators = reflectionCapabilities.annotations(component);
     return !!(decorators || []).find((d) => d instanceof core_1.Directive || d instanceof core_1.Pipe || d instanceof core_1.Component);
 };
-exports.isComponent = (component) => {
+exports.isDeclarable = isDeclarable;
+const isComponent = (component) => {
     if (!component) {
         return false;
     }
     const decorators = reflectionCapabilities.annotations(component);
     return (decorators || []).some((d) => d instanceof core_1.Component);
 };
-exports.isStandaloneComponent = (component) => {
+exports.isComponent = isComponent;
+const isStandaloneComponent = (component) => {
     if (!component) {
         return false;
     }
@@ -70,17 +78,20 @@ exports.isStandaloneComponent = (component) => {
     // Angular deps are updated to v14.x.x.
     return (decorators || []).some((d) => d instanceof core_1.Component && d.standalone);
 };
+exports.isStandaloneComponent = isStandaloneComponent;
 /**
  * Returns all component decorator properties
  * is used to get all `@Input` and `@Output` Decorator
  */
-exports.getComponentPropsDecoratorMetadata = (component) => {
+const getComponentPropsDecoratorMetadata = (component) => {
     return reflectionCapabilities.propMetadata(component);
 };
+exports.getComponentPropsDecoratorMetadata = getComponentPropsDecoratorMetadata;
 /**
  * Returns component decorator `@Component`
  */
-exports.getComponentDecoratorMetadata = (component) => {
+const getComponentDecoratorMetadata = (component) => {
     const decorators = reflectionCapabilities.annotations(component);
     return decorators.reverse().find((d) => d instanceof core_1.Component);
 };
+exports.getComponentDecoratorMetadata = getComponentDecoratorMetadata;

package/dist/{ts3.9 → types}/client/preview/angular-beta/utils/NgModulesAnalyzer.js

@@ -8,7 +8,7 @@ const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
  *
  * Checks recursively if the component has already been declared in all import Module
  */
-exports.isComponentAlreadyDeclaredInModules = (componentToFind, moduleDeclarations, moduleImports) => {
+const isComponentAlreadyDeclaredInModules = (componentToFind, moduleDeclarations, moduleImports) => {
     if (moduleDeclarations &&
         moduleDeclarations.some((declaration) => declaration === componentToFind)) {
         // Found component in declarations array
@@ -23,9 +23,10 @@ exports.isComponentAlreadyDeclaredInModules = (componentToFind, moduleDeclaratio
             // Not an NgModule
             return false;
         }
-        return exports.isComponentAlreadyDeclaredInModules(componentToFind, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
+        return (0, exports.isComponentAlreadyDeclaredInModules)(componentToFind, extractedNgModuleMetadata.declarations, extractedNgModuleMetadata.imports);
     });
 };
+exports.isComponentAlreadyDeclaredInModules = isComponentAlreadyDeclaredInModules;
 const extractNgModuleMetadata = (importItem) => {
     const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
     const decorators = reflectionCapabilities.annotations(target);

package/dist/{ts3.9 → types}/client/preview/config.js

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

package/dist/{ts3.9 → types}/client/preview/decorateStory.js

@@ -6,7 +6,10 @@ const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplate
 function decorateStory(mainStoryFn, decorators) {
     const returnDecorators = [cleanArgsDecorator, ...decorators].reduce((previousStoryFn, decorator) => (context) => {
         const decoratedStory = decorator((update) => {
-            return previousStoryFn(Object.assign(Object.assign({}, context), store_1.sanitizeStoryContextUpdate(update)));
+            return previousStoryFn({
+                ...context,
+                ...(0, store_1.sanitizeStoryContextUpdate)(update),
+            });
         }, context);
         return decoratedStory;
     }, (context) => prepareMain(mainStoryFn(context), context));
@@ -15,14 +18,16 @@ function decorateStory(mainStoryFn, decorators) {
 exports.default = decorateStory;
 exports.decorateStory = decorateStory;
 const prepareMain = (story, context) => {
-    var _a;
     let { template } = story;
-    const component = (_a = story.component) !== null && _a !== void 0 ? _a : context.component;
+    const component = story.component ?? context.component;
     const userDefinedTemplate = !hasNoTemplate(template);
     if (!userDefinedTemplate && component) {
-        template = ComputesTemplateFromComponent_1.computesTemplateFromComponent(component, story.props, '');
+        template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, story.props, '');
     }
-    return Object.assign(Object.assign({}, story), (template ? { template, userDefinedTemplate } : {}));
+    return {
+        ...story,
+        ...(template ? { template, userDefinedTemplate } : {}),
+    };
 };
 function hasNoTemplate(template) {
     return template === null || template === undefined;
@@ -36,7 +41,7 @@ const cleanArgsDecorator = (storyFn, context) => {
         const argType = context.argTypes[key];
         // Only keeps args with a control or an action in argTypes
         if (argType.action || argType.control) {
-            return Object.assign(Object.assign({}, obj), { [key]: arg });
+            return { ...obj, [key]: arg };
         }
         return obj;
     }, {});

package/dist/{ts3.9 → types}/client/preview/decorators.js

@@ -5,11 +5,13 @@ const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplate
 const 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 = (metadata) => (storyFn) => {
+const moduleMetadata = (metadata) => (storyFn) => {
     const story = storyFn();
     const storyMetadata = story.moduleMetadata || {};
     metadata = metadata || {};
-    return Object.assign(Object.assign({}, story), { moduleMetadata: {
+    return {
+        ...story,
+        moduleMetadata: {
             declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
             entryComponents: [
                 ...(metadata.entryComponents || []),
@@ -18,17 +20,27 @@ exports.moduleMetadata = (metadata) => (storyFn) => {
             imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
             schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
             providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],
-        } });
+        },
+    };
 };
-exports.componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
+exports.moduleMetadata = moduleMetadata;
+const componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
     const story = storyFn();
     const currentProps = typeof props === 'function' ? props(storyContext) : props;
-    const template = NgComponentAnalyzer_1.isComponent(element)
-        ? ComputesTemplateFromComponent_1.computesTemplateFromComponent(element, currentProps !== null && currentProps !== void 0 ? currentProps : {}, story.template)
+    const template = (0, NgComponentAnalyzer_1.isComponent)(element)
+        ? (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element, currentProps ?? {}, story.template)
         : element(story.template);
-    return Object.assign(Object.assign(Object.assign({}, story), { template }), (currentProps || story.props
-        ? {
-            props: Object.assign(Object.assign({}, currentProps), story.props),
-        }
-        : {}));
+    return {
+        ...story,
+        template,
+        ...(currentProps || story.props
+            ? {
+                props: {
+                    ...currentProps,
+                    ...story.props,
+                },
+            }
+            : {}),
+    };
 };
+exports.componentWrapperDecorator = componentWrapperDecorator;

package/dist/{ts3.9 → types}/client/preview/index.js

@@ -4,18 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.raw = exports.getStorybook = exports.forceReRender = exports.setAddon = exports.clearDecorators = exports.addParameters = exports.addDecorator = exports.configure = exports.storiesOf = void 0;
-const core_1 = require("@storybook/core");
+const core_client_1 = require("@storybook/core-client");
 require("./globals");
 const render_1 = require("./render");
 const decorateStory_1 = __importDefault(require("./decorateStory"));
 const framework = 'angular';
-const api = core_1.start(render_1.renderToDOM, { decorateStory: decorateStory_1.default, render: render_1.render });
-exports.storiesOf = (kind, m) => {
+const api = (0, core_client_1.start)(render_1.renderToDOM, { decorateStory: decorateStory_1.default, render: render_1.render });
+const storiesOf = (kind, m) => {
     return api.clientApi.storiesOf(kind, m).addParameters({
         framework,
     });
 };
-exports.configure = (...args) => api.configure(framework, ...args);
+exports.storiesOf = storiesOf;
+const configure = (...args) => api.configure(framework, ...args);
+exports.configure = configure;
 exports.addDecorator = api.clientApi
     .addDecorator;
 exports.addParameters = api.clientApi

package/dist/types/client/preview/render.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToDOM = exports.render = exports.rendererFactory = void 0;
+const helpers_1 = require("./angular/helpers");
+const RendererFactory_1 = require("./angular-beta/RendererFactory");
+exports.rendererFactory = new RendererFactory_1.RendererFactory();
+const render = (props) => ({ props });
+exports.render = render;
+async function renderToDOM({ storyFn, showMain, forceRemount, storyContext: { parameters, component }, id, }, element) {
+    showMain();
+    if (parameters.angularLegacyRendering) {
+        (0, helpers_1.renderNgApp)(storyFn, !forceRemount);
+        return;
+    }
+    const renderer = await exports.rendererFactory.getRendererInstance(id, element);
+    await renderer.render({
+        storyFnAngular: storyFn(),
+        component,
+        parameters,
+        forced: !forceRemount,
+        targetDOMNode: element,
+    });
+}
+exports.renderToDOM = renderToDOM;

package/dist/{ts3.4/public_api.d.ts → types/index.d.ts}

@@ -1 +1,2 @@
-export * from './client';
+export * from './client';
+export * from './types';

package/dist/{ts3.9/public_api.js → types/index.js}

@@ -1,16 +1,21 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./client"), exports);
+__exportStar(require("./types"), exports);
 /*
  * ATTENTION:
  * - moduleMetadata

package/dist/types/preset.d.ts

@@ -0,0 +1,13 @@
+import { StorybookConfig } from './types';
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
+export declare const addons: StorybookConfig['addons'];
+export declare const core: (config: StorybookConfig['core']) => Promise<{
+    builder: string;
+    disableWebpackDefaults?: boolean;
+    channelOptions?: Partial<import("telejson").Options>;
+    disableProjectJson?: boolean;
+    disableTelemetry?: boolean;
+    enableCrashReports?: boolean;
+    crossOriginIsolated?: boolean;
+}>;
+export declare const typescript: (config: StorybookConfig['typescript']) => Promise<StorybookConfig['typescript']>;

package/dist/types/preset.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typescript = exports.core = exports.addons = exports.previewAnnotations = void 0;
+const path_1 = __importDefault(require("path"));
+const previewAnnotations = (entries = []) => [
+    ...entries,
+    require.resolve('./client/preview/config'),
+];
+exports.previewAnnotations = previewAnnotations;
+exports.addons = [
+    require.resolve('./server/framework-preset-angular'),
+    require.resolve('./server/framework-preset-angular-cli'),
+    require.resolve('./server/framework-preset-angular-ivy'),
+    require.resolve('./server/framework-preset-angular-docs'),
+];
+const core = async (config) => {
+    return {
+        ...config,
+        builder: path_1.default.dirname(require.resolve(path_1.default.join('@storybook/builder-webpack5', 'package.json'))),
+    };
+};
+exports.core = core;
+const typescript = async (config) => {
+    return {
+        ...config,
+        skipBabel: true,
+    };
+};
+exports.typescript = typescript;

package/dist/{ts3.9 → types}/renderer.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStorybookModuleMetadata = exports.AbstractRenderer = exports.rendererFactory = exports.computesTemplateSourceFromComponent = void 0;
 var ComputesTemplateFromComponent_1 = require("./client/preview/angular-beta/ComputesTemplateFromComponent");
 Object.defineProperty(exports, "computesTemplateSourceFromComponent", { enumerable: true, get: function () { return ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent; } });
 var render_1 = require("./client/preview/render");

package/dist/types/server/angular-cli-webpack-12.2.x.js

@@ -0,0 +1,66 @@
+// Private angular devkit stuff
+const { generateI18nBrowserWebpackConfigFromContext, } = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
+const { getCommonConfig, getStylesConfig, getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
+/**
+ * Extract webpack config from angular-cli 12.2.x
+ * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
+ * FIXME: Try another way with TypeScript on future storybook version (7 maybe 🤞)
+ *
+ * @param {*} baseConfig Previous webpack config from storybook
+ * @param {*} options { builderOptions, builderContext }
+ */
+exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
+    /**
+     * Get angular-cli Webpack config
+     */
+    const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext({
+        // Default options
+        index: 'noop-index',
+        main: 'noop-main',
+        outputPath: 'noop-out',
+        // Options provided by user
+        ...builderOptions,
+        // Fixed options
+        optimization: false,
+        namedChunks: false,
+        progress: false,
+        buildOptimizer: false,
+        aot: false,
+    }, builderContext, (wco) => [getCommonConfig(wco), getStylesConfig(wco), getTypeScriptConfig(wco)]);
+    /**
+     * Merge baseConfig Webpack with angular-cli Webpack
+     */
+    const entry = [
+        ...baseConfig.entry,
+        ...(cliConfig.entry.styles ?? []),
+        ...(cliConfig.entry.polyfills ?? []),
+    ];
+    // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
+    // because @angular-devkit/build-angular created rules have include/exclude for global style files.
+    const rulesExcludingStyles = filterOutStylingRules(baseConfig);
+    const module = {
+        ...baseConfig.module,
+        rules: [...cliConfig.module.rules, ...rulesExcludingStyles],
+    };
+    const plugins = [...(cliConfig.plugins ?? []), ...baseConfig.plugins];
+    const resolve = {
+        ...baseConfig.resolve,
+        modules: Array.from(new Set([...baseConfig.resolve.modules, ...cliConfig.resolve.modules])),
+        plugins: [
+            new TsconfigPathsPlugin({
+                configFile: builderOptions.tsConfig,
+                mainFields: ['browser', 'module', 'main'],
+            }),
+        ],
+    };
+    return {
+        ...baseConfig,
+        entry,
+        module,
+        plugins,
+        resolve,
+        resolveLoader: cliConfig.resolveLoader,
+    };
+};