@nx/angular 16.6.0-beta.4 → 16.6.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "16.6.0-beta.4",
+  "version": "16.6.0-beta.5",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -66,28 +66,26 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/angular": "16.6.0-beta.4",
-    "@nx/cypress": "16.6.0-beta.4",
-    "@nx/devkit": "16.6.0-beta.4",
-    "@nx/jest": "16.6.0-beta.4",
-    "@nx/js": "16.6.0-beta.4",
-    "@nx/linter": "16.6.0-beta.4",
-    "@nx/webpack": "16.6.0-beta.4",
-    "@nx/workspace": "16.6.0-beta.4",
+    "@nrwl/angular": "16.6.0-beta.5",
+    "@nx/cypress": "16.6.0-beta.5",
+    "@nx/devkit": "16.6.0-beta.5",
+    "@nx/jest": "16.6.0-beta.5",
+    "@nx/js": "16.6.0-beta.5",
+    "@nx/linter": "16.6.0-beta.5",
+    "@nx/webpack": "16.6.0-beta.5",
+    "@nx/workspace": "16.6.0-beta.5",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@typescript-eslint/type-utils": "^5.36.1",
     "chalk": "^4.1.0",
-    "chokidar": "^3.5.1",
     "enquirer": "^2.3.6",
     "find-cache-dir": "^3.3.2",
-    "http-server": "^14.1.0",
     "ignore": "^5.0.4",
     "magic-string": "~0.26.2",
     "minimatch": "3.0.5",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
-    "webpack-merge": "5.7.3"
+    "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 14.0.0 < 17.0.0",
@@ -109,5 +107,5 @@
   "module": "fesm2022/nx-angular.mjs",
   "typings": "index.d.ts",
   "sideEffects": false,
-  "gitHead": "b1a9ae7ce76697019b26ec9a172005840cca8da6"
+  "gitHead": "aab868aa0c30949832fe2c4b9cb109c204442e39"
 }

package/src/builders/webpack-browser/webpack-browser.impl.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const webpack_nx_build_coordination_plugin_1 = require("@nx/webpack/src/plugins/webpack-nx-build-coordination-plugin");
 const fs_1 = require("fs");
-const file_utils_1 = require("nx/src/project-graph/file-utils");
+const configuration_1 = require("nx/src/config/configuration");
 const operators_1 = require("nx/src/project-graph/operators");
 const utils_1 = require("nx/src/tasks-runner/utils");
 const rxjs_1 = require("rxjs");
@@ -15,7 +15,7 @@ const webpack_1 = require("../utilities/webpack");
 const validate_options_1 = require("./validate-options");
 function shouldSkipInitialTargetRun(projectGraph, project, target) {
     var _a;
-    const nxJson = (0, file_utils_1.readNxJson)();
+    const nxJson = (0, configuration_1.readNxJson)();
     const defaultDependencyConfigs = Object.entries((_a = nxJson.targetDefaults) !== null && _a !== void 0 ? _a : {}).reduce((acc, [targetName, dependencyConfig]) => {
         acc[targetName] = dependencyConfig.dependsOn;
         return acc;

package/src/executors/delegate-build/delegate-build.impl.js

@@ -6,7 +6,7 @@ const devkit_1 = require("@nx/devkit");
 const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 function delegateBuildExecutor(options, context) {
     return tslib_1.__asyncGenerator(this, arguments, function* delegateBuildExecutor_1() {
-        const { target, dependencies } = (0, buildable_libs_utils_1.calculateProjectDependencies)(context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
+        const { target, dependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
         options.tsConfig = (0, buildable_libs_utils_1.createTmpTsConfig)((0, devkit_1.joinPathFragments)(context.root, options.tsConfig), context.root, target.data.root, dependencies);
         if (!(0, buildable_libs_utils_1.checkDependentProjectsHaveBeenBuilt)(context.root, context.projectName, context.targetName, dependencies)) {
             return yield tslib_1.__await({ success: false });

package/src/executors/package/package.impl.js

@@ -39,7 +39,7 @@ function initializeNgPackagr(options, context, projectDependencies) {
 function createLibraryExecutor(initializeNgPackagr) {
     return function (options, context) {
         return tslib_1.__asyncGenerator(this, arguments, function* () {
-            const { target, dependencies, topLevelDependencies } = (0, buildable_libs_utils_1.calculateProjectDependencies)(context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
+            const { target, dependencies, topLevelDependencies } = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, context.targetName, context.configurationName);
             if (!(0, buildable_libs_utils_1.checkDependentProjectsHaveBeenBuilt)(context.root, context.projectName, context.targetName, dependencies)) {
                 return yield tslib_1.__await(Promise.resolve({ success: false }));
             }

package/src/generators/component-story/component-story.js

@@ -17,6 +17,8 @@ function componentStoryGenerator(tree, options) {
         (0, devkit_1.generateFiles)(tree, templatesDir, destinationDir, {
             componentFileName: componentFileName,
             componentName: componentName,
+            componentNameSimple: componentFileName.replace('.component', ''),
+            interactionTests: options.interactionTests,
             props: props.filter((p) => typeof p.defaultValue !== 'undefined'),
             tmpl: '',
         });

package/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__

@@ -1,16 +1,31 @@
-import { Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { <%=componentName%> } from './<%=componentFileName%>';
+<% if ( interactionTests ) { %>
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+<% } %>
 
-export default {
-  title: '<%=componentName%>',
-  component: <%=componentName%>
-} as Meta<<%=componentName%>>;
+const meta: Meta<<%= componentName %>> = {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',
+};
+export default meta;
+type Story = StoryObj<<%=componentName%>>;
 
-export const Primary = {
-  render: (args: <%=componentName%>) => ({
-    props: args,
-  }),
+export const Primary: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
   },
-};
+};
+
+<% if ( interactionTests ) { %>
+export const Heading: Story = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/<%=componentNameSimple%> works!/gi)).toBeTruthy();
+  },
+};
+<% } %>

package/src/generators/component-story/schema.d.ts

@@ -1,5 +1,6 @@
 export interface ComponentStoryGeneratorOptions {
   projectPath: string;
+  interactionTests?: boolean;
   componentName: string;
   componentPath: string;
   componentFileName: string;

package/src/generators/component-story/schema.json

@@ -29,6 +29,13 @@
       "examples": ["awesome.component"],
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "default": true
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/stories/schema.d.ts

@@ -1,7 +1,8 @@
 export interface StoriesGeneratorOptions {
   name: string;
-  cypressProject?: string;
-  generateCypressSpecs?: boolean;
+  interactionTests?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];
+  cypressProject?: string;
+  generateCypressSpecs?: boolean;
 }

package/src/generators/stories/schema.json

@@ -18,11 +18,16 @@
       "x-dropdown": "projects",
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "default": true
+    },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Specifies whether to automatically generate `*.spec.ts` files in the Cypress e2e app generated by the `cypress-configure` generator.",
-      "x-prompt": "Do you want to generate Cypress specs as well?",
-      "x-priority": "important"
+      "description": "Specifies whether to automatically generate `*.spec.ts` files in the Cypress e2e app generated by the `cypress-configure` generator."
     },
     "cypressProject": {
       "type": "string",

package/src/generators/stories/stories.d.ts

@@ -1,4 +1,4 @@
-import { Tree } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import type { StoriesGeneratorOptions } from './schema';
-export declare function angularStoriesGenerator(tree: Tree, options: StoriesGeneratorOptions): Promise<void>;
+export declare function angularStoriesGenerator(tree: Tree, options: StoriesGeneratorOptions): Promise<GeneratorCallback>;
 export default angularStoriesGenerator;

package/src/generators/stories/stories.js

@@ -10,8 +10,9 @@ const entry_point_1 = require("../utils/storybook-ast/entry-point");
 const get_e2e_project_1 = require("./lib/get-e2e-project");
 const module_info_1 = require("../utils/storybook-ast/module-info");
 const minimatch = require("minimatch");
+const versions_1 = require("../../utils/versions");
 function angularStoriesGenerator(tree, options) {
-    var _a;
+    var _a, _b;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const e2eProjectName = (_a = options.cypressProject) !== null && _a !== void 0 ? _a : `${options.name}-e2e`;
         const e2eProject = (0, get_e2e_project_1.getE2EProject)(tree, e2eProjectName);
@@ -40,6 +41,7 @@ function angularStoriesGenerator(tree, options) {
                 componentName: info.name,
                 componentPath: info.path,
                 componentFileName: info.componentFileName,
+                interactionTests: (_b = options.interactionTests) !== null && _b !== void 0 ? _b : true,
                 skipFormat: true,
             });
             if (options.generateCypressSpecs && e2eProject) {
@@ -55,9 +57,17 @@ function angularStoriesGenerator(tree, options) {
                 });
             }
         }
+        const tasks = [];
+        if (options.interactionTests) {
+            const { interactionTestsDependencies, addInteractionsInAddons } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
+            const projectConfiguration = (0, devkit_1.readProjectConfiguration)(tree, options.name);
+            addInteractionsInAddons(tree, projectConfiguration);
+            tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, interactionTestsDependencies()));
+        }
         if (!options.skipFormat) {
             yield (0, devkit_1.formatFiles)(tree);
         }
+        return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
 exports.angularStoriesGenerator = angularStoriesGenerator;

package/src/generators/storybook-configuration/lib/generate-stories.js

@@ -14,6 +14,7 @@ function generateStories(tree, options) {
             generateCypressSpecs: options.configureCypress && options.generateCypressSpecs,
             cypressProject: e2eProjectName,
             ignorePaths: options.ignorePaths,
+            interactionTests: options.interactionTests,
             skipFormat: true,
         });
     });

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,15 +1,15 @@
 import type { Linter } from '@nx/linter';
 
 export interface StorybookConfigurationOptions {
-  configureCypress: boolean;
   configureStaticServe?: boolean;
-  generateCypressSpecs: boolean;
   generateStories: boolean;
   linter: Linter;
   name: string;
-  cypressDirectory?: string;
   tsConfiguration?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];
   interactionTests?: boolean;
+  configureCypress?: boolean;
+  generateCypressSpecs?: boolean;
+  cypressDirectory?: string;
 }

package/src/generators/storybook-configuration/schema.json

@@ -28,8 +28,7 @@
     },
     "configureCypress": {
       "type": "boolean",
-      "description": "Specifies whether to configure Cypress or not.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "Specifies whether to configure Cypress or not."
     },
     "generateStories": {
       "type": "boolean",
@@ -40,8 +39,7 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Specifies whether to automatically generate test files in the generated Cypress e2e app.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "Specifies whether to automatically generate test files in the generated Cypress e2e app."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -52,8 +50,7 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
-      "x-deprecated": "Please use Storybook interaction tests instead."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
     },
     "linter": {
       "description": "The tool to use for running lint checks.",

package/src/generators/storybook-configuration/storybook-configuration.js

@@ -7,13 +7,15 @@ const assert_compatible_storybook_version_1 = require("./lib/assert-compatible-s
 const generate_stories_1 = require("./lib/generate-stories");
 const generate_storybook_configuration_1 = require("./lib/generate-storybook-configuration");
 const validate_options_1 = require("./lib/validate-options");
+// TODO(v18): remove Cypress
 function storybookConfigurationGenerator(tree, options) {
+    var _a, _b, _c;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         (0, assert_compatible_storybook_version_1.assertCompatibleStorybookVersion)();
         (0, validate_options_1.validateOptions)(options);
-        const storybookGeneratorInstallTask = yield (0, generate_storybook_configuration_1.generateStorybookConfiguration)(tree, options);
+        const storybookGeneratorInstallTask = yield (0, generate_storybook_configuration_1.generateStorybookConfiguration)(tree, Object.assign(Object.assign({}, options), { interactionTests: (_a = options.interactionTests) !== null && _a !== void 0 ? _a : true, tsConfiguration: (_b = options.tsConfiguration) !== null && _b !== void 0 ? _b : true }));
         if (options.generateStories) {
-            yield (0, generate_stories_1.generateStories)(tree, Object.assign(Object.assign({}, options), { skipFormat: true }));
+            yield (0, generate_stories_1.generateStories)(tree, Object.assign(Object.assign({}, options), { interactionTests: (_c = options.interactionTests) !== null && _c !== void 0 ? _c : true, skipFormat: true }));
         }
         if (!options.skipFormat) {
             yield (0, devkit_1.formatFiles)(tree);

package/src/generators/utils/storybook-ast/storybook-inputs.d.ts

@@ -1,12 +1,12 @@
 import type { Tree } from '@nx/devkit';
 import type { PropertyDeclaration } from 'typescript';
-export type KnobType = 'text' | 'boolean' | 'number' | 'select';
+export type ArgType = 'text' | 'boolean' | 'number' | 'select';
 export interface InputDescriptor {
     name: string;
-    type: KnobType;
+    type: ArgType;
     defaultValue?: string;
 }
 export declare function getInputPropertyDeclarations(tree: Tree, path: string): PropertyDeclaration[];
 export declare function getComponentProps(tree: Tree, componentPath: string, getArgsDefaultValueFn?: (property: PropertyDeclaration) => string | undefined, useDecoratorName?: boolean): InputDescriptor[];
-export declare function getKnobType(property: PropertyDeclaration): KnobType;
+export declare function getArgType(property: PropertyDeclaration): ArgType;
 export declare function getArgsDefaultValue(property: PropertyDeclaration): string;

package/src/generators/utils/storybook-ast/storybook-inputs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArgsDefaultValue = exports.getKnobType = exports.getComponentProps = exports.getInputPropertyDeclarations = void 0;
+exports.getArgsDefaultValue = exports.getArgType = exports.getComponentProps = exports.getInputPropertyDeclarations = void 0;
 const js_1 = require("@nx/js");
 const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
@@ -27,7 +27,7 @@ function getComponentProps(tree, componentPath, getArgsDefaultValueFn = getArgsD
                 ? decoratorContent[0].getText().slice(1, -1)
                 : node.name.getText()
             : node.name.getText();
-        const type = getKnobType(node);
+        const type = getArgType(node);
         const defaultValue = getArgsDefaultValueFn(node);
         return {
             name,
@@ -38,31 +38,31 @@ function getComponentProps(tree, componentPath, getArgsDefaultValueFn = getArgsD
     return props;
 }
 exports.getComponentProps = getComponentProps;
-function getKnobType(property) {
+function getArgType(property) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     if (property.type) {
         const typeName = property.type.getText();
-        const typeNameToKnobType = {
+        const typeNameToArgType = {
             string: 'text',
             number: 'number',
             boolean: 'boolean',
         };
-        return typeNameToKnobType[typeName] || 'text';
+        return typeNameToArgType[typeName] || 'text';
     }
     if (property.initializer) {
-        const initializerKindToKnobType = {
+        const initializerKindToArgType = {
             [tsModule.SyntaxKind.StringLiteral]: 'text',
             [tsModule.SyntaxKind.NumericLiteral]: 'number',
             [tsModule.SyntaxKind.TrueKeyword]: 'boolean',
             [tsModule.SyntaxKind.FalseKeyword]: 'boolean',
         };
-        return initializerKindToKnobType[property.initializer.kind] || 'text';
+        return initializerKindToArgType[property.initializer.kind] || 'text';
     }
     return 'text';
 }
-exports.getKnobType = getKnobType;
+exports.getArgType = getArgType;
 function getArgsDefaultValue(property) {
     const typeNameToDefault = {
         string: "''",