@storybook/angular 7.0.0-alpha.1 → 7.0.0-alpha.4

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

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
-// eslint-disable-next-line import/no-extraneous-dependencies
-const standalone_1 = __importDefault(require("@storybook/angular/standalone"));
+const read_pkg_up_1 = require("read-pkg-up");
+const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
 exports.default = (0, architect_1.createBuilder)(commandBuilder);
@@ -21,6 +18,7 @@ function commandBuilder(options, context) {
     }), (0, operators_1.map)(({ tsConfig }) => {
         const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, } = options;
         const standaloneOptions = {
+            packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
             docs,
             loglevel,
@@ -54,5 +52,5 @@ async function setup(options, context) {
     };
 }
 function runInstance(options) {
-    return (0, rxjs_1.from)((0, standalone_1.default)(options)).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
+    return (0, rxjs_1.from)((0, core_server_1.buildStaticStandalone)(options)).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
 }

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

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const find_up_1 = require("find-up");
-// eslint-disable-next-line import/no-extraneous-dependencies
-const standalone_1 = __importDefault(require("@storybook/angular/standalone"));
+const read_pkg_up_1 = require("read-pkg-up");
+const core_server_1 = require("@storybook/core-server");
 const run_compodoc_1 = require("../utils/run-compodoc");
 const build_standalone_errors_handler_1 = require("../utils/build-standalone-errors-handler");
 exports.default = (0, architect_1.createBuilder)(commandBuilder);
@@ -21,6 +18,7 @@ function commandBuilder(options, context) {
     }), (0, operators_1.map)(({ tsConfig }) => {
         const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, } = options;
         const standaloneOptions = {
+            packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
             configDir,
             docs,
@@ -61,6 +59,6 @@ async function setup(options, context) {
 function runInstance(options) {
     return new rxjs_1.Observable((observer) => {
         // This Observable intentionally never complete, leaving the process running ;)
-        (0, standalone_1.default)(options).then(() => observer.next(), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
+        (0, core_server_1.buildDevStandalone)(options).then(() => observer.next(), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
     });
 }

package/dist/types/builders/utils/standalone-options.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderContext } from '@angular-devkit/architect';
+import type { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/core-common';
+export declare type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOptions & {
+    mode?: 'static' | 'dev';
+    angularBrowserTarget?: string | null;
+    angularBuilderOptions?: Record<string, any> & {
+        styles?: any[];
+        stylePreprocessorOptions?: any;
+    };
+    angularBuilderContext?: BuilderContext | null;
+    tsConfig?: string;
+}>;

package/dist/types/builders/utils/standalone-options.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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.1",
+  "version": "7.0.0-alpha.4",
   "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.1",
-    "@storybook/api": "7.0.0-alpha.1",
-    "@storybook/builder-webpack5": "7.0.0-alpha.1",
-    "@storybook/client-logger": "7.0.0-alpha.1",
-    "@storybook/core-client": "7.0.0-alpha.1",
-    "@storybook/core-common": "7.0.0-alpha.1",
-    "@storybook/core-events": "7.0.0-alpha.1",
-    "@storybook/core-server": "7.0.0-alpha.1",
+    "@storybook/addons": "7.0.0-alpha.4",
+    "@storybook/api": "7.0.0-alpha.4",
+    "@storybook/builder-webpack5": "7.0.0-alpha.4",
+    "@storybook/client-logger": "7.0.0-alpha.4",
+    "@storybook/core-client": "7.0.0-alpha.4",
+    "@storybook/core-common": "7.0.0-alpha.4",
+    "@storybook/core-events": "7.0.0-alpha.4",
+    "@storybook/core-server": "7.0.0-alpha.4",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.1",
-    "@storybook/node-logger": "7.0.0-alpha.1",
+    "@storybook/docs-tools": "7.0.0-alpha.4",
+    "@storybook/node-logger": "7.0.0-alpha.4",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "7.0.0-alpha.1",
+    "@storybook/store": "7.0.0-alpha.4",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
     "@types/react-dom": "^16.9.14",
@@ -62,7 +62,6 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "read-pkg-up": "^7.0.1",
-    "regenerator-runtime": "^0.13.7",
     "sass-loader": "^12.6.0",
     "telejson": "^6.0.8",
     "ts-dedent": "^2.0.0",
@@ -128,5 +127,5 @@
     "access": "public"
   },
   "builders": "dist/types/builders/builders.json",
-  "gitHead": "b90b85210f66da59656c2ef58b0910b156256bea"
+  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00"
 }

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;

package/standalone.d.ts

@@ -1,21 +0,0 @@
-import type { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
-import type { BuilderContext } from '@angular-devkit/architect';
-
-export type StandaloneOptions = Partial<
-  CLIOptions &
-    LoadOptions &
-    BuilderOptions & {
-      mode?: 'static' | 'dev';
-      angularBrowserTarget?: string | null;
-      angularBuilderOptions?: Record<string, any> & {
-        styles?: any[];
-        stylePreprocessorOptions?: any;
-      };
-      angularBuilderContext?: BuilderContext | null;
-      tsConfig?: string;
-    }
->;
-
-declare module '@storybook/angular/standalone' {
-  export default function buildStandalone(options: StandaloneOptions): Promise<unknown>;
-}

package/standalone.js

@@ -1,7 +0,0 @@
-const build = require('@storybook/core-server/standalone');
-
-async function buildStandalone(options) {
-  return build(options);
-}
-
-module.exports = buildStandalone;