@storybook/angular 7.0.0-alpha.0 → 7.0.0-alpha.3

package/dist/types/client/docs/config.d.ts

@@ -2,7 +2,6 @@ import { SourceType } from '@storybook/docs-tools';
 export declare const parameters: {
     docs: {
         inlineStories: boolean;
-        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").AngularFramework, import("@storybook/csf").Args>, { id, parameters, component }: import("..").StoryContext) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<undefined>, undefined>;
         extractArgTypes: (component: import("./types").Directive) => import("lib/api/dist/types").ArgTypes;
         extractComponentDescription: (component: import("./types").Directive) => string;
         source: {

package/dist/types/client/docs/config.js

@@ -4,12 +4,10 @@ exports.argTypesEnhancers = exports.decorators = exports.parameters = void 0;
 const docs_tools_1 = require("@storybook/docs-tools");
 const compodoc_1 = require("./compodoc");
 const sourceDecorator_1 = require("./sourceDecorator");
-const prepareForInline_1 = require("./prepareForInline");
 exports.parameters = {
     docs: {
         // probably set this to true by default once it's battle-tested
         inlineStories: false,
-        prepareForInline: prepareForInline_1.prepareForInline,
         extractArgTypes: compodoc_1.extractArgTypes,
         extractComponentDescription: compodoc_1.extractComponentDescription,
         source: {

package/dist/types/client/preview/angular-beta/StorybookModule.js

@@ -44,16 +44,22 @@ const getStorybookModuleMetadata = ({ storyFnAngular, component: annotatedCompon
      * Create a component that wraps generated template and gives it props
      */
     const ComponentToInject = (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, props);
+    const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(component);
     // Look recursively (deep) if the component is not already declared by an import module
     const requiresComponentDeclaration = (0, NgComponentAnalyzer_1.isDeclarable)(component) &&
-        !(0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(component, moduleMetadata.declarations, moduleMetadata.imports);
+        !(0, NgModulesAnalyzer_1.isComponentAlreadyDeclaredInModules)(component, moduleMetadata.declarations, moduleMetadata.imports) &&
+        !isStandalone;
     return {
         declarations: [
             ...(requiresComponentDeclaration ? [component] : []),
             ComponentToInject,
             ...(moduleMetadata.declarations ?? []),
         ],
-        imports: [platform_browser_1.BrowserModule, ...(moduleMetadata.imports ?? [])],
+        imports: [
+            platform_browser_1.BrowserModule,
+            ...(isStandalone ? [component] : []),
+            ...(moduleMetadata.imports ?? []),
+        ],
         providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$), ...(moduleMetadata.providers ?? [])],
         entryComponents: [...(moduleMetadata.entryComponents ?? [])],
         schemas: [...(moduleMetadata.schemas ?? [])],

package/dist/types/client/preview/angular-beta/utils/NgComponentAnalyzer.d.ts

@@ -15,6 +15,7 @@ export declare type ComponentInputsOutputs = {
 export declare const getComponentInputsOutputs: (component: any) => ComponentInputsOutputs;
 export declare const isDeclarable: (component: any) => boolean;
 export declare const isComponent: (component: any) => component is Type<unknown>;
+export declare const isStandaloneComponent: (component: any) => component is Type<unknown>;
 /**
  * Returns all component decorator properties
  * is used to get all `@Input` and `@Output` Decorator

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentDecoratorMetadata = exports.getComponentPropsDecoratorMetadata = exports.isComponent = exports.isDeclarable = exports.getComponentInputsOutputs = void 0;
+exports.getComponentDecoratorMetadata = exports.getComponentPropsDecoratorMetadata = exports.isStandaloneComponent = exports.isComponent = exports.isDeclarable = exports.getComponentInputsOutputs = void 0;
 const core_1 = require("@angular/core");
 const reflectionCapabilities = new core_1.ɵReflectionCapabilities();
 /**
@@ -69,6 +69,16 @@ const isComponent = (component) => {
     return (decorators || []).some((d) => d instanceof core_1.Component);
 };
 exports.isComponent = isComponent;
+const isStandaloneComponent = (component) => {
+    if (!component) {
+        return false;
+    }
+    const decorators = reflectionCapabilities.annotations(component);
+    // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
+    // 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

package/dist/types/preset.d.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/core-common';
+import { StorybookConfig } from './types';
 export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
 export declare const addons: StorybookConfig['addons'];
 export declare const core: (config: StorybookConfig['core']) => Promise<{
@@ -10,3 +10,4 @@ export declare const core: (config: StorybookConfig['core']) => Promise<{
     enableCrashReports?: boolean;
     crossOriginIsolated?: boolean;
 }>;
+export declare const typescript: (config: StorybookConfig['typescript']) => Promise<StorybookConfig['typescript']>;

package/dist/types/preset.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.core = exports.addons = exports.previewAnnotations = void 0;
+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'),
@@ -15,7 +19,14 @@ exports.addons = [
 const core = async (config) => {
     return {
         ...config,
-        builder: require.resolve('@storybook/builder-webpack5'),
+        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/types/server/framework-preset-angular-cli.js

@@ -163,7 +163,7 @@ async function getLegacyDefaultBuildOptions(options) {
             project: (0, angular_read_workspace_1.getDefaultProjectName)(workspaceConfig),
             target: 'build',
         };
-        const { target, project } = (0, angular_read_workspace_1.findAngularProjectTarget)(workspaceConfig, browserTarget.project, browserTarget.target);
+        const { target } = (0, angular_read_workspace_1.findAngularProjectTarget)(workspaceConfig, browserTarget.project, browserTarget.target);
         node_logger_1.logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`);
         return { ...target.options };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.3",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -33,19 +33,19 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.0",
-    "@storybook/api": "7.0.0-alpha.0",
-    "@storybook/builder-webpack5": "7.0.0-alpha.0",
-    "@storybook/client-logger": "7.0.0-alpha.0",
-    "@storybook/core-client": "7.0.0-alpha.0",
-    "@storybook/core-common": "7.0.0-alpha.0",
-    "@storybook/core-events": "7.0.0-alpha.0",
-    "@storybook/core-server": "7.0.0-alpha.0",
+    "@storybook/addons": "7.0.0-alpha.3",
+    "@storybook/api": "7.0.0-alpha.3",
+    "@storybook/builder-webpack5": "7.0.0-alpha.3",
+    "@storybook/client-logger": "7.0.0-alpha.3",
+    "@storybook/core-client": "7.0.0-alpha.3",
+    "@storybook/core-common": "7.0.0-alpha.3",
+    "@storybook/core-events": "7.0.0-alpha.3",
+    "@storybook/core-server": "7.0.0-alpha.3",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.0",
-    "@storybook/node-logger": "7.0.0-alpha.0",
+    "@storybook/docs-tools": "7.0.0-alpha.3",
+    "@storybook/node-logger": "7.0.0-alpha.3",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "7.0.0-alpha.0",
+    "@storybook/store": "7.0.0-alpha.3",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "builders": "dist/types/builders/builders.json",
-  "gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23"
+  "gitHead": "629b056190993bcee6445471b8cb27208eb401a9"
 }

package/dist/types/client/docs/prepareForInline.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { PartialStoryFn } from '@storybook/csf';
-import { AngularFramework, StoryContext } from '..';
-/**
- * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
- */
-export declare const prepareForInline: (storyFn: PartialStoryFn<AngularFramework>, { id, parameters, component }: StoryContext) => React.DetailedReactHTMLElement<React.HTMLAttributes<undefined>, undefined>;

package/dist/types/client/docs/prepareForInline.js

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareForInline = void 0;
-const react_1 = __importDefault(require("react"));
-const p_limit_1 = __importDefault(require("p-limit"));
-const nanoid_1 = require("nanoid");
-const renderer_1 = require("../../renderer");
-const limit = (0, p_limit_1.default)(1);
-/**
- * Uses the angular renderer to generate a story. Uses p-limit to run synchronously
- */
-const prepareForInline = (storyFn, { id, parameters, component }) => {
-    const el = react_1.default.useRef();
-    react_1.default.useEffect(() => {
-        (async () => {
-            limit(async () => {
-                const renderer = await renderer_1.rendererFactory.getRendererInstance(`${id}-${(0, nanoid_1.nanoid)(10)}`.toLowerCase(), el.current);
-                if (renderer) {
-                    await renderer.render({
-                        forced: false,
-                        component,
-                        parameters,
-                        storyFnAngular: storyFn(),
-                        targetDOMNode: el.current,
-                    });
-                }
-            });
-        })();
-    });
-    return react_1.default.createElement('div', {
-        ref: el,
-    });
-};
-exports.prepareForInline = prepareForInline;