@nx/angular 20.0.0-beta.1 → 20.0.0-canary.20240925-6182d20

package/generators.d.ts

@@ -1,6 +1,5 @@
 export * from './src/generators/add-linting/add-linting';
 export * from './src/generators/application/application';
-export * from './src/generators/component-cypress-spec/component-cypress-spec';
 export * from './src/generators/component-story/component-story';
 export * from './src/generators/component/component';
 export * from './src/generators/directive/directive';

package/generators.js

@@ -4,7 +4,6 @@ exports.cypressComponentConfiguration = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./src/generators/add-linting/add-linting"), exports);
 tslib_1.__exportStar(require("./src/generators/application/application"), exports);
-tslib_1.__exportStar(require("./src/generators/component-cypress-spec/component-cypress-spec"), exports);
 tslib_1.__exportStar(require("./src/generators/component-story/component-story"), exports);
 tslib_1.__exportStar(require("./src/generators/component/component"), exports);
 tslib_1.__exportStar(require("./src/generators/directive/directive"), exports);

package/generators.json

@@ -22,12 +22,6 @@
       "aliases": ["c"],
       "description": "Generate an Angular Component."
     },
-    "component-cypress-spec": {
-      "factory": "./src/generators/component-cypress-spec/component-cypress-spec",
-      "schema": "./src/generators/component-cypress-spec/schema.json",
-      "description": "Creates a Cypress spec for a UI component that has a story.",
-      "hidden": true
-    },
     "component-story": {
       "factory": "./src/generators/component-story/component-story",
       "schema": "./src/generators/component-story/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "20.0.0-beta.1",
+  "version": "20.0.0-canary.20240925-6182d20",
   "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, Playwright 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- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -80,14 +80,14 @@
     "webpack-merge": "^5.8.0",
     "webpack": "^5.88.0",
     "@module-federation/enhanced": "~0.6.0",
-    "@nx/devkit": "20.0.0-beta.1",
-    "@nx/js": "20.0.0-beta.1",
-    "@nx/eslint": "20.0.0-beta.1",
-    "@nx/webpack": "20.0.0-beta.1",
-    "@nx/web": "20.0.0-beta.1",
-    "@nx/workspace": "20.0.0-beta.1",
+    "@nx/devkit": "20.0.0-canary.20240925-6182d20",
+    "@nx/js": "20.0.0-canary.20240925-6182d20",
+    "@nx/eslint": "20.0.0-canary.20240925-6182d20",
+    "@nx/webpack": "20.0.0-canary.20240925-6182d20",
+    "@nx/web": "20.0.0-canary.20240925-6182d20",
+    "@nx/workspace": "20.0.0-canary.20240925-6182d20",
     "piscina": "^4.4.0",
-    "@nrwl/angular": "20.0.0-beta.1"
+    "@nrwl/angular": "20.0.0-canary.20240925-6182d20"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 16.0.0 < 19.0.0",

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

@@ -3,6 +3,4 @@ export interface StoriesGeneratorOptions {
   interactionTests?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];
-  cypressProject?: string;
-  generateCypressSpecs?: boolean;
 }

package/src/generators/stories/schema.json

@@ -25,16 +25,6 @@
       "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-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
-    "cypressProject": {
-      "type": "string",
-      "description": "The Cypress project to generate the stories under. This is inferred from `name` by default.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/stories/stories.js

@@ -3,26 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.angularStoriesGenerator = angularStoriesGenerator;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
-const component_cypress_spec_1 = tslib_1.__importDefault(require("../component-cypress-spec/component-cypress-spec"));
 const component_story_1 = tslib_1.__importDefault(require("../component-story/component-story"));
 const component_info_1 = require("../utils/storybook-ast/component-info");
 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_1 = require("minimatch");
 const versions_1 = require("../../utils/versions");
 async function angularStoriesGenerator(tree, options) {
-    const e2eProjectName = options.cypressProject ?? `${options.name}-e2e`;
-    const e2eProject = (0, get_e2e_project_1.getE2EProject)(tree, e2eProjectName);
     const entryPoints = (0, entry_point_1.getProjectEntryPoints)(tree, options.name);
     const componentsInfo = [];
     for (const entryPoint of entryPoints) {
         const moduleFilePaths = (0, module_info_1.getModuleFilePaths)(tree, entryPoint);
         componentsInfo.push(...(0, component_info_1.getComponentsInfo)(tree, entryPoint, moduleFilePaths, options.name), ...(0, component_info_1.getStandaloneComponentsInfo)(tree, entryPoint));
     }
-    if (options.generateCypressSpecs && !e2eProject) {
-        devkit_1.logger.info(`There was no e2e project "${e2eProjectName}" found, so cypress specs will not be generated. Pass "--cypressProject" to specify a different e2e project name.`);
-    }
     const componentInfos = componentsInfo.filter((f) => !options.ignorePaths?.some((pattern) => {
         const shouldIgnorePath = (0, minimatch_1.minimatch)((0, devkit_1.joinPathFragments)(f.moduleFolderPath, f.path, `${f.componentFileName}.ts`), pattern);
         return shouldIgnorePath;
@@ -39,18 +32,6 @@ async function angularStoriesGenerator(tree, options) {
             interactionTests: options.interactionTests ?? true,
             skipFormat: true,
         });
-        if (options.generateCypressSpecs && e2eProject) {
-            await (0, component_cypress_spec_1.default)(tree, {
-                projectName: options.name,
-                projectPath: info.moduleFolderPath,
-                cypressProject: options.cypressProject,
-                componentName: info.name,
-                componentPath: info.path,
-                componentFileName: info.componentFileName,
-                specDirectory: (0, devkit_1.joinPathFragments)(info.entryPointName, info.path),
-                skipFormat: true,
-            });
-        }
     }
     const tasks = [];
     if (options.interactionTests) {

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

@@ -2,17 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateStories = generateStories;
 const devkit_1 = require("@nx/devkit");
-const versions_1 = require("../../../utils/versions");
 const stories_1 = require("../../stories/stories");
 async function generateStories(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const { getE2eProjectName } = require('@nx/cypress/src/utils/project-name');
-    const e2eProjectName = getE2eProjectName(options.project, project.root, options.cypressDirectory);
     await (0, stories_1.angularStoriesGenerator)(tree, {
         name: options.project,
-        generateCypressSpecs: options.configureCypress && options.generateCypressSpecs,
-        cypressProject: e2eProjectName,
         ignorePaths: options.ignorePaths,
         interactionTests: options.interactionTests,
         skipFormat: true,

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

@@ -8,9 +8,7 @@ async function generateStorybookConfiguration(tree, options) {
     return await configurationGenerator(tree, {
         project: options.project,
         uiFramework: '@storybook/angular',
-        configureCypress: options.configureCypress,
         linter: options.linter,
-        cypressDirectory: options.cypressDirectory,
         tsConfiguration: options.tsConfiguration,
         interactionTests: options.interactionTests,
         configureStaticServe: options.configureStaticServe,

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

@@ -9,7 +9,4 @@ export interface StorybookConfigurationOptions {
   skipFormat?: boolean;
   ignorePaths?: string[];
   interactionTests?: boolean;
-  configureCypress?: boolean;
-  generateCypressSpecs?: boolean;
-  cypressDirectory?: string;
 }

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

@@ -26,11 +26,6 @@
       "x-priority": "important",
       "default": true
     },
-    "configureCypress": {
-      "type": "boolean",
-      "description": "Specifies whether to configure Cypress or not.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "generateStories": {
       "type": "boolean",
       "description": "Specifies whether to automatically generate `*.stories.ts` files for components declared in this project or not.",
@@ -38,11 +33,6 @@
       "default": true,
       "x-priority": "important"
     },
-    "generateCypressSpecs": {
-      "type": "boolean",
-      "description": "Specifies whether to automatically generate test files in the generated Cypress e2e app.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "configureStaticServe": {
       "type": "boolean",
       "description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.",
@@ -50,11 +40,6 @@
       "default": true,
       "x-priority": "important"
     },
-    "cypressDirectory": {
-      "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",

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

@@ -6,11 +6,8 @@ const update_app_editor_tsconfig_excluded_files_1 = require("../utils/update-app
 const assert_compatible_storybook_version_1 = require("./lib/assert-compatible-storybook-version");
 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(katerina): Nx 19 -> remove Cypress
 async function storybookConfigurationGenerator(tree, options) {
     (0, assert_compatible_storybook_version_1.assertCompatibleStorybookVersion)();
-    (0, validate_options_1.validateOptions)(options);
     const storybookGeneratorInstallTask = await (0, generate_storybook_configuration_1.generateStorybookConfiguration)(tree, {
         ...options,
         interactionTests: options.interactionTests ?? true, // default is true

package/src/generators/component-cypress-spec/component-cypress-spec.d.ts

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

package/src/generators/component-cypress-spec/component-cypress-spec.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentCypressSpecGenerator = componentCypressSpecGenerator;
-const devkit_1 = require("@nx/devkit");
-const storybook_inputs_1 = require("../utils/storybook-ast/storybook-inputs");
-const get_args_default_value_1 = require("./lib/get-args-default-value");
-const get_component_selector_1 = require("./lib/get-component-selector");
-async function componentCypressSpecGenerator(tree, options) {
-    const { cypressProject, projectName, projectPath, componentPath, componentFileName, componentName, specDirectory, } = options;
-    const e2eProjectName = cypressProject || `${projectName}-e2e`;
-    const { sourceRoot, root } = (0, devkit_1.readProjectConfiguration)(tree, e2eProjectName);
-    const isCypressV10 = tree.exists((0, devkit_1.joinPathFragments)(root, 'cypress.config.ts'));
-    const e2eLibIntegrationFolderPath = (0, devkit_1.joinPathFragments)(sourceRoot, isCypressV10 ? 'e2e' : 'integration');
-    const templatesDir = (0, devkit_1.joinPathFragments)(__dirname, 'files');
-    const destinationDir = (0, devkit_1.joinPathFragments)(e2eLibIntegrationFolderPath, specDirectory ?? componentPath);
-    const storyFile = (0, devkit_1.joinPathFragments)(destinationDir, `${componentFileName}.${isCypressV10 ? 'cy' : 'spec'}.ts`);
-    if (tree.exists(storyFile)) {
-        return;
-    }
-    const fullComponentPath = (0, devkit_1.joinPathFragments)(projectPath, componentPath, `${componentFileName}.ts`);
-    const props = (0, storybook_inputs_1.getComponentProps)(tree, fullComponentPath, get_args_default_value_1.getArgsDefaultValue);
-    const componentSelector = (0, get_component_selector_1.getComponentSelector)(tree, fullComponentPath);
-    (0, devkit_1.generateFiles)(tree, templatesDir, destinationDir, {
-        projectName,
-        componentFileName,
-        componentName,
-        componentSelector,
-        props,
-        fileExt: isCypressV10 ? 'cy.ts' : 'spec.ts',
-    });
-    if (!options.skipFormat) {
-        await (0, devkit_1.formatFiles)(tree);
-    }
-}
-exports.default = componentCypressSpecGenerator;

package/src/generators/component-cypress-spec/files/__componentFileName__.__fileExt__

@@ -1,17 +0,0 @@
-describe('<%=projectName%>', () => {
-  beforeEach(() =>
-    cy.visit(
-      '/iframe.html?id=<%= componentName.toLowerCase() %>--primary<% if ( props && props.length > 0 ) { %>&args=<% } %><%
-      for(let prop of props) {
-        %><%=prop.name%><%
-        if(prop.defaultValue !== undefined && (prop.defaultValue || prop.defaultValue === false)) {
-          %>:<%=prop.defaultValue%><%
-        } %>;<%
-      }%>'
-    )
-  );
-
-  it('should render the component', () => {
-    cy.get('<%=componentSelector%>').should('exist');
-  });
-});

package/src/generators/component-cypress-spec/lib/get-args-default-value.d.ts

@@ -1,2 +0,0 @@
-import type { PropertyDeclaration } from 'typescript';
-export declare function getArgsDefaultValue(property: PropertyDeclaration): string | undefined;

package/src/generators/component-cypress-spec/lib/get-args-default-value.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArgsDefaultValue = getArgsDefaultValue;
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-let tsModule;
-function getArgsDefaultValue(property) {
-    if (!property.initializer) {
-        return undefined;
-    }
-    if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
-    }
-    switch (property.initializer.kind) {
-        case tsModule.SyntaxKind.StringLiteral:
-            const returnString = property.initializer.getText().slice(1, -1);
-            return returnString.replace(/\s/g, '+');
-        case tsModule.SyntaxKind.NumericLiteral:
-        case tsModule.SyntaxKind.TrueKeyword:
-        case tsModule.SyntaxKind.FalseKeyword:
-            return property.initializer.getText();
-        default:
-            return undefined;
-    }
-}

package/src/generators/component-cypress-spec/lib/get-component-selector.d.ts

@@ -1,2 +0,0 @@
-import type { Tree } from '@nx/devkit';
-export declare function getComponentSelector(tree: Tree, path: string): string;

package/src/generators/component-cypress-spec/lib/get-component-selector.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentSelector = getComponentSelector;
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const js_1 = require("@nx/js");
-const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
-let tsModule;
-function getComponentSelector(tree, path) {
-    if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
-    }
-    const file = (0, ast_utils_1.getTsSourceFile)(tree, path);
-    const componentDecorators = (0, ast_utils_1.getDecoratorMetadata)(file, 'Component', '@angular/core');
-    if (componentDecorators.length === 0) {
-        throw new Error(`No @Component decorator in ${path}.`);
-    }
-    const componentDecorator = componentDecorators[0];
-    const selectorNode = ((0, js_1.findNodes)(componentDecorator, tsModule.SyntaxKind.PropertyAssignment).find((node) => node.name.getText() === 'selector'));
-    if (!selectorNode) {
-        throw new Error(`No selector defined for the component in ${path}.`);
-    }
-    return selectorNode.initializer.getText().slice(1, -1);
-}

package/src/generators/component-cypress-spec/schema.d.ts

@@ -1,10 +0,0 @@
-export interface ComponentCypressSpecGeneratorOptions {
-  projectName: string;
-  projectPath: string;
-  componentName: string;
-  componentPath: string;
-  componentFileName: string;
-  cypressProject?: string;
-  specDirectory?: string;
-  skipFormat?: boolean;
-}

package/src/generators/component-cypress-spec/schema.json

@@ -1,66 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "$id": "NxAngularComponentCypressSpecGenerator",
-  "type": "object",
-  "cli": "nx",
-  "description": "Creates a Storybook Cypress spec for a UI component that has a story.",
-  "x-deprecated": "Use interactionTests instead. This option will be removed in v20.",
-  "properties": {
-    "projectName": {
-      "type": "string",
-      "description": "The name of the project.",
-      "$default": {
-        "$source": "projectName"
-      },
-      "examples": ["ui-samples"],
-      "x-priority": "important"
-    },
-    "projectPath": {
-      "type": "string",
-      "description": "Path to the project.",
-      "examples": ["libs/ui-samples"],
-      "x-priority": "important"
-    },
-    "componentName": {
-      "type": "string",
-      "description": "Class name of the component.",
-      "examples": ["AwesomeComponent"],
-      "x-priority": "important"
-    },
-    "componentPath": {
-      "type": "string",
-      "description": "Relative path to the component file from the project root.",
-      "examples": ["awesome"],
-      "x-priority": "important"
-    },
-    "componentFileName": {
-      "type": "string",
-      "description": "Component file name without the `.ts` extension.",
-      "examples": ["awesome.component"],
-      "x-priority": "important"
-    },
-    "cypressProject": {
-      "type": "string",
-      "description": "The Cypress project to generate the stories under. By default, inferred from `projectName`."
-    },
-    "specDirectory": {
-      "type": "string",
-      "description": "Directory where to place the generated spec file. By default matches the value of the `componentPath` option."
-    },
-    "skipFormat": {
-      "description": "Skip formatting files.",
-      "type": "boolean",
-      "default": false,
-      "x-priority": "internal"
-    }
-  },
-  "additionalProperties": false,
-  "required": [
-    "projectName",
-    "projectPath",
-    "componentName",
-    "componentPath",
-    "componentFileName"
-  ],
-  "examplesFile": "../../../docs/component-cypress-spec-examples.md"
-}

package/src/generators/stories/lib/get-e2e-project.d.ts

@@ -1,2 +0,0 @@
-import type { ProjectConfiguration, Tree } from '@nx/devkit';
-export declare function getE2EProject(tree: Tree, e2eProjectName: string): ProjectConfiguration;

package/src/generators/stories/lib/get-e2e-project.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getE2EProject = getE2EProject;
-const devkit_1 = require("@nx/devkit");
-function getE2EProject(tree, e2eProjectName) {
-    let e2eProject;
-    try {
-        e2eProject = (0, devkit_1.readProjectConfiguration)(tree, e2eProjectName);
-    }
-    catch {
-        e2eProject = undefined;
-    }
-    return e2eProject;
-}

package/src/generators/storybook-configuration/lib/validate-options.d.ts

@@ -1,2 +0,0 @@
-import type { StorybookConfigurationOptions } from '../schema';
-export declare function validateOptions(options: StorybookConfigurationOptions): void;

package/src/generators/storybook-configuration/lib/validate-options.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOptions = validateOptions;
-function validateOptions(options) {
-    if (options.generateCypressSpecs && !options.generateStories) {
-        throw new Error('Cannot set generateCypressSpecs to true when generateStories is set to false.');
-    }
-}