@storybook/angular 7.0.0-beta.2 → 7.0.0-beta.21

package/dist/builders/build-storybook/schema.json

@@ -53,7 +53,7 @@
             }
         },
         "webpackStatsJson": {
-            "type": "boolean",
+            "type": ["boolean", "string"],
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },

package/dist/builders/utils/run-compodoc.js

@@ -28,6 +28,7 @@ const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
+const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
 // path.relative is necessary to workaround a compodoc issue with
 // absolute paths on windows machines
 const toRelativePath = (pathToTsConfig) => {
@@ -40,8 +41,7 @@ const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
             'compodoc',
             // Default options
             ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-            '-d',
-            `${context.workspaceRoot}`,
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot}`]),
             ...compodocArgs,
         ];
         try {

package/dist/builders/utils/run-compodoc.spec.js

@@ -56,4 +56,46 @@ describe('runCompodoc', () => {
             shell: true,
         });
     });
+    it('should run compodoc with default output folder.', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with --output compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['--output', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with -d compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-d', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
 });

package/dist/client/angular/helpers.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderNgApp = void 0;
-const global_1 = __importDefault(require("global"));
+const global_1 = require("@storybook/global");
 const core_1 = require("@angular/core");
 const forms_1 = require("@angular/forms");
 const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
@@ -12,7 +9,7 @@ const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
 const app_component_1 = require("./app.component");
 const app_token_1 = require("./app.token");
-const { document } = global_1.default;
+const { document } = global_1.global;
 let platform = null;
 let promises = [];
 let storyData = new rxjs_1.ReplaySubject(1);

package/dist/client/docs/compodoc.js

@@ -1,20 +1,18 @@
 "use strict";
-/* eslint-disable no-underscore-dangle */
-/* global window */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractComponentDescription = exports.extractArgTypes = exports.extractArgTypesFromData = exports.extractType = exports.findComponentByName = exports.checkValidCompodocJson = exports.checkValidComponentOrDirective = exports.getCompodocJson = exports.setCompodocJson = exports.isMethod = void 0;
+/* eslint-disable no-underscore-dangle */
+const global_1 = require("@storybook/global");
 const client_logger_1 = require("@storybook/client-logger");
 const isMethod = (methodOrProp) => {
     return methodOrProp.args !== undefined;
 };
 exports.isMethod = isMethod;
 const setCompodocJson = (compodocJson) => {
-    // @ts-expect-error (Converted from ts-ignore)
-    window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+    global_1.global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
 exports.setCompodocJson = setCompodocJson;
-// @ts-expect-error (Converted from ts-ignore)
-const getCompodocJson = () => window.__STORYBOOK_COMPODOC_JSON__;
+const getCompodocJson = () => global_1.global.__STORYBOOK_COMPODOC_JSON__;
 exports.getCompodocJson = getCompodocJson;
 const checkValidComponentOrDirective = (component) => {
     if (!component.name) {
@@ -167,7 +165,7 @@ const extractDefaultValueFromComments = (property, value) => {
     let commentValue = value;
     property.jsdoctags.forEach((tag) => {
         if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) {
-            const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html');
+            const dom = new global_1.global.DOMParser().parseFromString(tag.comment, 'text/html');
             commentValue = dom.body.textContent;
         }
     });

package/dist/client/docs/config.js

@@ -6,8 +6,7 @@ const compodoc_1 = require("./compodoc");
 const sourceDecorator_1 = require("./sourceDecorator");
 exports.parameters = {
     docs: {
-        // probably set this to true by default once it's battle-tested
-        inlineStories: false,
+        inlineStories: true,
         extractArgTypes: compodoc_1.extractArgTypes,
         extractComponentDescription: compodoc_1.extractComponentDescription,
         source: {

package/dist/client/globals.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const global_1 = __importDefault(require("global"));
+const global_1 = require("@storybook/global");
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -63,5 +60,4 @@ require("zone.js/dist/zone"); // Included with Angular CLI.
  * Need to import at least one locale-data with intl.
  */
 // import 'intl/locale-data/jsonp/en';
-const { window: globalWindow } = global_1.default;
-globalWindow.STORYBOOK_ENV = 'angular';
+global_1.global.STORYBOOK_ENV = 'angular';

package/dist/index.mjs

@@ -0,0 +1,13 @@
+export * from './client/index';
+export * from './types';
+/*
+ * ATTENTION:
+ * - moduleMetadata
+ * - NgModuleMetadata
+ * - ICollection
+ *
+ * These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc
+ * It was imported out of dist before which was not the proper way of exporting public API
+ *
+ * This can be fixed by migrating app/angular to typescript
+ */

package/dist/preset.mjs

@@ -0,0 +1,26 @@
+import path from 'path';
+export const addons = [
+    require.resolve('./server/framework-preset-angular-cli'),
+    require.resolve('./server/framework-preset-angular-ivy'),
+    require.resolve('./server/framework-preset-angular-docs'),
+];
+export const previewAnnotations = (entries = []) => [
+    ...entries,
+    require.resolve('./client/config'),
+];
+export const core = async (config, options) => {
+    const framework = await options.presets.apply('framework');
+    return {
+        ...config,
+        builder: {
+            name: path.dirname(require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))),
+            options: typeof framework === 'string' ? {} : framework.options.builder || {},
+        },
+    };
+};
+export const typescript = async (config) => {
+    return {
+        ...config,
+        skipBabel: true,
+    };
+};

package/dist/renderer.mjs

@@ -0,0 +1,4 @@
+export { computesTemplateSourceFromComponent } from './client/angular-beta/ComputesTemplateFromComponent';
+export { rendererFactory } from './client/render';
+export { AbstractRenderer } from './client/angular-beta/AbstractRenderer';
+export { getStorybookModuleMetadata } from './client/angular-beta/StorybookModule';

package/dist/server/plugins/storybook-normalize-angular-entry-plugin.js

@@ -25,19 +25,21 @@ class StorybookNormalizeAngularEntryPlugin {
         this.options = options;
     }
     apply(compiler) {
-        const webpackOptions = compiler.options;
-        const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
-        webpackOptions.entry = async () => {
-            const entryResult = await entry;
-            if (entryResult.main && entryResult.styles) {
-                return {
-                    main: {
-                        import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
-                    },
-                };
-            }
-            return entry;
-        };
+        compiler.hooks.environment.tap(PLUGIN_NAME, () => {
+            const webpackOptions = compiler.options;
+            const entry = typeof webpackOptions.entry === 'function' ? webpackOptions.entry() : webpackOptions.entry;
+            webpackOptions.entry = async () => {
+                const entryResult = await entry;
+                if (entryResult.main && entryResult.styles) {
+                    return {
+                        main: {
+                            import: Array.from(new Set([...entryResult.main.import, ...entryResult.styles.import])),
+                        },
+                    };
+                }
+                return entry;
+            };
+        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
             this.compilation = compilation;
         });

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.21",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -21,31 +21,34 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "template/**/*",
     "README.md",
     "*.js",
+    "*.mjs",
     "*.d.ts"
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc",
-    "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
+    "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-beta.2",
-    "@storybook/client-logger": "7.0.0-beta.2",
-    "@storybook/core-client": "7.0.0-beta.2",
-    "@storybook/core-common": "7.0.0-beta.2",
-    "@storybook/core-events": "7.0.0-beta.2",
-    "@storybook/core-server": "7.0.0-beta.2",
-    "@storybook/core-webpack": "7.0.0-beta.2",
-    "@storybook/docs-tools": "7.0.0-beta.2",
-    "@storybook/manager-api": "7.0.0-beta.2",
-    "@storybook/node-logger": "7.0.0-beta.2",
-    "@storybook/preview-api": "7.0.0-beta.2",
-    "@storybook/types": "7.0.0-beta.2",
+    "@storybook/builder-webpack5": "7.0.0-beta.21",
+    "@storybook/client-logger": "7.0.0-beta.21",
+    "@storybook/core-client": "7.0.0-beta.21",
+    "@storybook/core-common": "7.0.0-beta.21",
+    "@storybook/core-events": "7.0.0-beta.21",
+    "@storybook/core-server": "7.0.0-beta.21",
+    "@storybook/core-webpack": "7.0.0-beta.21",
+    "@storybook/docs-tools": "7.0.0-beta.21",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "7.0.0-beta.21",
+    "@storybook/node-logger": "7.0.0-beta.21",
+    "@storybook/preview-api": "7.0.0-beta.21",
+    "@storybook/types": "7.0.0-beta.21",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -53,7 +56,6 @@
     "@types/webpack-env": "^1.18.0",
     "core-js": "^3.8.2",
     "find-up": "^5.0.0",
-    "global": "^4.4.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
     "telejson": "^7.0.3",
@@ -116,11 +118,14 @@
     }
   },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=16.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "builders": "dist/builders/builders.json",
-  "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185"
+  "bundler": {
+    "tsConfig": "tsconfig.build.json"
+  },
+  "gitHead": "fb45d854842e10fa119a65c628333e3a5d495e77"
 }

package/template/cli/Button.stories.ts

@@ -5,7 +5,7 @@ import Button from './button.component';
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args: Button) => ({
     props: {
       backgroundColor: null,

package/template/cli/Header.stories.ts

@@ -8,8 +8,8 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({

package/template/components/index.js

@@ -1,8 +1,8 @@
-import globalThis from 'global';
+import { global } from '@storybook/global';
 
 import Button from './button.component';
 import Html from './html.component';
 import Pre from './pre.component';
 import Form from './form.component';
 
-globalThis.Components = { Button, Html, Pre, Form };
+global.Components = { Button, Html, Pre, Form };

package/template/stories/angular-mdx.stories.mdx

@@ -1,4 +1,4 @@
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { moduleMetadata } from '@storybook/angular';
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 

package/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts

@@ -59,7 +59,7 @@ WithCustomNgComponentOutletWrapper.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithCustomNgComponentOutletWrapper.args = { name: 'Dixie Normous', color: 'green' };
+WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' };
 WithCustomNgComponentOutletWrapper.decorators = [
   moduleMetadata({
     declarations: [NgComponentOutletWrapperComponent],

package/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts

@@ -59,7 +59,7 @@ WithComponentFactoryResolver.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithComponentFactoryResolver.args = { name: 'Dixie Normous', color: 'chartreuse' };
+WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' };
 WithComponentFactoryResolver.decorators = [
   moduleMetadata({
     declarations: [ComponentFactoryWrapperComponent],

package/template/stories/basics/component-without-selector/without-selector.stories.ts

@@ -27,4 +27,4 @@ WithInjectionTokenAndArgs.argTypes = {
   name: { control: 'text' },
   color: { control: 'color' },
 };
-WithInjectionTokenAndArgs.args = { name: 'Dixie Normous', color: 'red' };
+WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' };