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

package/generators.json

@@ -54,12 +54,6 @@
       "description": "Create stories/specs for all components declared in an app or library.",
       "hidden": false
     },
-    "component-cypress-spec": {
-      "factory": "./src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator",
-      "schema": "./src/generators/component-cypress-spec/schema.json",
-      "description": "Create a Cypress spec for a UI component that has a story.",
-      "hidden": false
-    },
     "hook": {
       "factory": "./src/generators/hook/hook",
       "schema": "./src/generators/hook/schema.json",

package/index.d.ts

@@ -8,7 +8,6 @@ export { reactDomVersion, reactVersion } from './src/utils/versions';
 export { applicationGenerator } from './src/generators/application/application';
 export { componentGenerator } from './src/generators/component/component';
 export { hookGenerator } from './src/generators/hook/hook';
-export { componentCypressGenerator } from './src/generators/component-cypress-spec/component-cypress-spec';
 export { componentStoryGenerator } from './src/generators/component-story/component-story';
 export { libraryGenerator } from './src/generators/library/library';
 export { reactInitGenerator } from './src/generators/init/init';

package/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = exports.NxReactWebpackPlugin = void 0;
+exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = exports.NxReactWebpackPlugin = void 0;
 const tslib_1 = require("tslib");
 const nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
 // TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
@@ -22,8 +22,6 @@ var component_1 = require("./src/generators/component/component");
 Object.defineProperty(exports, "componentGenerator", { enumerable: true, get: function () { return component_1.componentGenerator; } });
 var hook_1 = require("./src/generators/hook/hook");
 Object.defineProperty(exports, "hookGenerator", { enumerable: true, get: function () { return hook_1.hookGenerator; } });
-var component_cypress_spec_1 = require("./src/generators/component-cypress-spec/component-cypress-spec");
-Object.defineProperty(exports, "componentCypressGenerator", { enumerable: true, get: function () { return component_cypress_spec_1.componentCypressGenerator; } });
 var component_story_1 = require("./src/generators/component-story/component-story");
 Object.defineProperty(exports, "componentStoryGenerator", { enumerable: true, get: function () { return component_story_1.componentStoryGenerator; } });
 var library_1 = require("./src/generators/library/library");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.0.0-beta.1",
+  "version": "20.0.0-canary.20240925-6182d20",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -39,13 +39,13 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.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/web": "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/web": "20.0.0-canary.20240925-6182d20",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0",
-    "@nrwl/react": "20.0.0-beta.1"
+    "@nrwl/react": "20.0.0-canary.20240925-6182d20"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/stories/schema.json

@@ -17,16 +17,6 @@
       "x-prompt": "For which project do you want to generate stories?",
       "x-priority": "important"
     },
-    "generateCypressSpecs": {
-      "type": "boolean",
-      "description": "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 `project` by default.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "interactionTests": {
       "type": "boolean",
       "description": "Set up Storybook interaction tests.",

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

@@ -5,11 +5,9 @@ export interface StorybookStoriesSchema {
     js?: boolean;
     ignorePaths?: string[];
     skipFormat?: boolean;
-    cypressProject?: string;
-    generateCypressSpecs?: boolean;
 }
 export declare function projectRootPath(tree: Tree, config: ProjectConfiguration): Promise<string>;
 export declare function containsComponentDeclaration(tree: Tree, componentPath: string): boolean;
-export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, generateCypressSpecs?: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
+export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, ignorePaths?: string[]): Promise<void>;
 export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<GeneratorCallback>;
 export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -5,7 +5,6 @@ exports.containsComponentDeclaration = containsComponentDeclaration;
 exports.createAllStories = createAllStories;
 exports.storiesGenerator = storiesGenerator;
 const component_story_1 = require("../component-story/component-story");
-const component_cypress_spec_1 = require("../component-cypress-spec/component-cypress-spec");
 const ast_utils_1 = require("../../utils/ast-utils");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
@@ -44,7 +43,7 @@ function containsComponentDeclaration(tree, componentPath) {
     return !!((0, ast_utils_1.getComponentNode)(sourceFile) ||
         (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile)?.length);
 }
-async function createAllStories(tree, projectName, interactionTests, js, projects, projectConfiguration, generateCypressSpecs, cypressProject, ignorePaths) {
+async function createAllStories(tree, projectName, interactionTests, js, projects, projectConfiguration, ignorePaths) {
     const { isTheFileAStory } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
     const { sourceRoot, root } = projectConfiguration;
     let componentPaths = [];
@@ -70,11 +69,6 @@ async function createAllStories(tree, projectName, interactionTests, js, project
             }
         }
     });
-    const e2eProjectName = cypressProject || `${projectName}-e2e`;
-    const e2eProject = projects.get(e2eProjectName);
-    if (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`);
-    }
     await Promise.all(componentPaths.map(async (componentPath) => {
         const relativeCmpDir = componentPath.replace((0, path_1.join)(sourceRoot, '/'), '');
         if (!containsComponentDeclaration(tree, componentPath)) {
@@ -86,22 +80,13 @@ async function createAllStories(tree, projectName, interactionTests, js, project
             skipFormat: true,
             interactionTests,
         });
-        if (generateCypressSpecs && e2eProject) {
-            await (0, component_cypress_spec_1.default)(tree, {
-                project: projectName,
-                componentPath: relativeCmpDir,
-                js,
-                cypressProject,
-                skipFormat: true,
-            });
-        }
     }));
 }
 async function storiesGenerator(host, schema) {
     const projects = (0, devkit_1.getProjects)(host);
     const projectConfiguration = projects.get(schema.project);
     schema.interactionTests = schema.interactionTests ?? true;
-    await createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.generateCypressSpecs, schema.cypressProject, schema.ignorePaths);
+    await createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.ignorePaths);
     const tasks = [];
     if (schema.interactionTests) {
         const { interactionTestsDependencies, addInteractionsInAddons } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);

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

@@ -7,16 +7,10 @@ const stories_1 = require("../stories/stories");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 async function generateStories(host, schema) {
-    // TODO(katerina): Nx 19 -> remove Cypress
-    (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-    const { getE2eProjectName } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/project-name'));
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);
-    const cypressProject = getE2eProjectName(schema.project, projectConfig.root, schema.cypressDirectory);
     await (0, stories_1.default)(host, {
         project: schema.project,
-        generateCypressSpecs: schema.configureCypress && schema.generateCypressSpecs,
         js: schema.js,
-        cypressProject,
         ignorePaths: schema.ignorePaths,
         skipFormat: true,
         interactionTests: schema.interactionTests ?? true,
@@ -48,10 +42,8 @@ async function storybookConfigurationGeneratorInternal(host, schema) {
     }
     const installTask = await configurationGenerator(host, {
         project: schema.project,
-        configureCypress: schema.configureCypress,
         js: schema.js,
         linter: schema.linter,
-        cypressDirectory: schema.cypressDirectory,
         tsConfiguration: schema.tsConfiguration ?? true, // default is true
         interactionTests: schema.interactionTests ?? true, // default is true
         configureStaticServe: schema.configureStaticServe,

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

@@ -9,8 +9,5 @@ export interface StorybookConfigureSchema {
   linter?: Linter | LinterType;
   ignorePaths?: string[];
   configureStaticServe?: boolean;
-  configureCypress?: boolean;
-  generateCypressSpecs?: boolean;
-  cypressDirectory?: string;
   addPlugin?: boolean;
 }

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

@@ -26,11 +26,6 @@
       "alias": ["configureTestRunner"],
       "default": true
     },
-    "configureCypress": {
-      "type": "boolean",
-      "description": "Run the cypress-configure generator.",
-      "x-deprecated": "Use interactionTests instead. This option will be removed in v20."
-    },
     "generateStories": {
       "type": "boolean",
       "description": "Automatically generate `*.stories.ts` files for components declared in this project?",
@@ -38,11 +33,6 @@
       "default": true,
       "x-priority": "important"
     },
-    "generateCypressSpecs": {
-      "type": "boolean",
-      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
-      "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."
-    },
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript story files rather than TypeScript story files.",

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

@@ -1,13 +0,0 @@
-import { Tree } from '@nx/devkit';
-import type * as ts from 'typescript';
-export interface CreateComponentSpecFileSchema {
-    project: string;
-    componentPath: string;
-    js?: boolean;
-    cypressProject?: string;
-    skipFormat?: boolean;
-}
-export declare function componentCypressGenerator(host: Tree, schema: CreateComponentSpecFileSchema): Promise<void>;
-export declare function getArgsDefaultValue(property: ts.SyntaxKind): string;
-export declare function createComponentSpecFile(tree: Tree, { project, componentPath, js, cypressProject }: CreateComponentSpecFileSchema): void;
-export default componentCypressGenerator;

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

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentCypressGenerator = componentCypressGenerator;
-exports.getArgsDefaultValue = getArgsDefaultValue;
-exports.createComponentSpecFile = createComponentSpecFile;
-const devkit_1 = require("@nx/devkit");
-const path_1 = require("path");
-const ast_utils_1 = require("../../utils/ast-utils");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-let tsModule;
-async function componentCypressGenerator(host, schema) {
-    createComponentSpecFile(host, schema);
-    if (!schema.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
-    }
-}
-// TODO: candidate to refactor with the angular component story
-function getArgsDefaultValue(property) {
-    if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
-    }
-    const typeNameToDefault = {
-        [tsModule.SyntaxKind.StringKeyword]: '',
-        [tsModule.SyntaxKind.NumberKeyword]: 0,
-        [tsModule.SyntaxKind.BooleanKeyword]: false,
-    };
-    const resolvedValue = typeNameToDefault[property];
-    if (resolvedValue === undefined) {
-        return '';
-    }
-    else if (typeof resolvedValue === 'string') {
-        return resolvedValue.replace(/\s/g, '+');
-    }
-    else {
-        return resolvedValue;
-    }
-}
-function createComponentSpecFile(tree, { project, componentPath, js, cypressProject }) {
-    if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
-    }
-    const e2eProjectName = cypressProject || `${project}-e2e`;
-    const projects = (0, devkit_1.getProjects)(tree);
-    const e2eProject = projects.get(e2eProjectName);
-    // cypress >= v10 will have a cypress.config.ts < v10 will have a cypress.json
-    const isCypressV10 = tree.exists((0, path_1.join)(e2eProject.root, 'cypress.config.ts'));
-    const e2eLibIntegrationFolderPath = (0, path_1.join)(e2eProject.sourceRoot, isCypressV10 ? 'e2e' : 'integration');
-    const proj = projects.get(project);
-    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot, componentPath);
-    const componentName = componentFilePath
-        .slice(componentFilePath.lastIndexOf('/') + 1)
-        .replace('.tsx', '')
-        .replace('.jsx', '')
-        .replace('.js', '');
-    const contents = tree.read(componentFilePath, 'utf-8');
-    if (contents === null) {
-        throw new Error(`Failed to read ${componentFilePath}`);
-    }
-    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
-    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
-    if (!cmpDeclaration) {
-        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
-        if (componentNodes?.length) {
-            componentNodes.forEach((declaration) => {
-                findPropsAndGenerateFileForCypress(tree, sourceFile, declaration, e2eLibIntegrationFolderPath, componentName, project, js, true);
-            });
-        }
-        else {
-            throw new Error(`Could not find any React component in file ${componentFilePath}`);
-        }
-    }
-    else {
-        findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js);
-    }
-}
-function findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js, fromNodeArray) {
-    const info = (0, ast_utils_1.parseComponentPropsInfo)(sourceFile, cmpDeclaration);
-    let props = [];
-    if (info) {
-        if (!tsModule) {
-            tsModule = (0, ensure_typescript_1.ensureTypescript)();
-        }
-        props = info.props.map((member) => {
-            return {
-                name: member.name.text,
-                defaultValue: tsModule.isBindingElement(member)
-                    ? getArgsDefaultValue(member.kind)
-                    : getArgsDefaultValue(member.type.kind),
-            };
-        });
-    }
-    const isCypressV10 = (0, path_1.basename)(e2eLibIntegrationFolderPath) === 'e2e';
-    const cyFilePrefix = isCypressV10 ? 'cy' : 'spec';
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files'), `${e2eLibIntegrationFolderPath}/${fromNodeArray
-        ? componentName + '--' + cmpDeclaration.name.text
-        : componentName}`, {
-        projectName: project,
-        componentName,
-        componentSelector: cmpDeclaration.name.text,
-        props,
-        fileExt: js ? `${cyFilePrefix}.js` : `${cyFilePrefix}.ts`,
-    });
-}
-exports.default = componentCypressGenerator;

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

@@ -1,13 +0,0 @@
-describe('<%=projectName%>: <%= componentSelector %> component', () => {
-  beforeEach(() => cy.visit('/iframe.html?id=<%= componentSelector.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('h1').should('contain', 'Welcome to <%=componentSelector%>!');
-    });
-});

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

@@ -1,45 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "cli": "nx",
-  "$id": "NxReactComponentCypressSpec",
-  "title": "Create component Cypress spec",
-  "description": "Create a Storybook Cypress spec for a UI component that has a story.",
-  "x-deprecated": "Use interactionTests instead. This option will be removed in v20.",
-  "type": "object",
-  "properties": {
-    "project": {
-      "type": "string",
-      "description": "The project name for which to generate tests.",
-      "examples": ["shared-ui-component"],
-      "$default": {
-        "$source": "projectName",
-        "index": 0
-      },
-      "x-prompt": "What's name of the project for which to generate tests?",
-      "x-priority": "important"
-    },
-    "componentPath": {
-      "type": "string",
-      "description": "Relative path to the component file from the library root?",
-      "examples": ["lib/components"],
-      "x-prompt": "What's path of the component relative to the project's lib root for which to generate a test?",
-      "x-priority": "important"
-    },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
-    },
-    "cypressProject": {
-      "type": "string",
-      "description": "The Cypress project to generate the stories under. By default, inferred from `project`."
-    },
-    "skipFormat": {
-      "description": "Skip formatting files.",
-      "type": "boolean",
-      "default": false,
-      "x-priority": "internal"
-    }
-  },
-  "required": ["project", "componentPath"]
-}