@nx/next 18.0.0-beta.1 → 18.0.0-beta.2

package/generators.json

@@ -4,7 +4,7 @@
   "extends": ["@nx/react"],
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init#nextInitGenerator",
+      "factory": "./src/generators/init/init#nextInitGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
       "description": "Initialize the `@nrwl/next` plugin.",
       "hidden": true
@@ -39,7 +39,7 @@
       "description": "Set up a custom server."
     },
     "cypress-component-configuration": {
-      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration",
+      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigurationInternal",
       "schema": "./src/generators/cypress-component-configuration/schema.json",
       "description": "cypress-component-configuration generator"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.0.0-beta.1",
+  "version": "18.0.0-beta.2",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -34,7 +34,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.0.0-beta.1",
+    "@nx/devkit": "18.0.0-beta.2",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -45,12 +45,12 @@
     "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "18.0.0-beta.1",
-    "@nx/eslint": "18.0.0-beta.1",
-    "@nx/react": "18.0.0-beta.1",
-    "@nx/web": "18.0.0-beta.1",
-    "@nx/workspace": "18.0.0-beta.1",
-    "@nrwl/next": "18.0.0-beta.1"
+    "@nx/js": "18.0.0-beta.2",
+    "@nx/eslint": "18.0.0-beta.2",
+    "@nx/react": "18.0.0-beta.2",
+    "@nx/web": "18.0.0-beta.2",
+    "@nx/workspace": "18.0.0-beta.2",
+    "@nrwl/next": "18.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing.d.ts

@@ -1,12 +1,2 @@
 import { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
-export declare function nxComponentTestingPreset(pathToConfig: string, options?: NxComponentTestingOptions): {
-    specPattern: string;
-    devServer: {
-        webpackConfig: import("webpack").Configuration;
-        framework: "react";
-        bundler: "webpack";
-    };
-    videosFolder: string;
-    screenshotsFolder: string;
-    chromeWebSecurity: boolean;
-};
+export declare function nxComponentTestingPreset(pathToConfig: string, options?: NxComponentTestingOptions): any;

package/plugins/component-testing.js

@@ -8,17 +8,25 @@ const react_1 = require("@nx/react");
 const webpack_1 = require("@nx/webpack");
 const path_1 = require("path");
 function nxComponentTestingPreset(pathToConfig, options) {
+    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+        // this is only used by plugins, so we don't need the component testing
+        // options, cast to any to avoid type errors
+        return (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig);
+    }
     const graph = (0, devkit_1.readCachedProjectGraph)();
     const { targets: ctTargets, name: ctProjectName } = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
     const ctTargetName = options?.ctTargetName || 'component-test';
     const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
     const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
-    const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
-        project: ctProjectName,
-        target: ctTargetName,
-        configuration: ctConfigurationName,
-    }, ctExecutorContext);
-    const buildTarget = ctExecutorOptions.devServerTarget;
+    let buildTarget = options?.buildTarget;
+    if (!buildTarget) {
+        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
+            project: ctProjectName,
+            target: ctTargetName,
+            configuration: ctConfigurationName,
+        }, ctExecutorContext);
+        buildTarget = ctExecutorOptions.devServerTarget;
+    }
     let buildAssets = [];
     let buildFileReplacements = [];
     let buildOuputPath = `dist/${ctProjectName}/.next`;
@@ -31,6 +39,13 @@ function nxComponentTestingPreset(pathToConfig, options) {
             projectGraph: graph,
         });
         const buildProjectConfig = graph.nodes[parsedBuildTarget.project]?.data;
+        if (buildProjectConfig?.targets?.[parsedBuildTarget.target]?.executor !==
+            '@nx/next:build') {
+            throw new Error(`The '${parsedBuildTarget.target}' target of the '${[
+                parsedBuildTarget.project,
+            ]}' project is not using the '@nx/next:build' executor. ` +
+                `Please make sure to use '@nx/next:build' executor in that target to use Cypress Component Testing.`);
+        }
         const buildExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, buildProjectConfig.targets, parsedBuildTarget.project, parsedBuildTarget.target, parsedBuildTarget.configuration);
         const buildExecutorOptions = (0, devkit_1.readTargetOptions)({
             project: parsedBuildTarget.project,
@@ -70,7 +85,7 @@ Able to find CT project, ${!!ctProjectConfig}.`);
         context: ctExecutorContext,
     });
     return {
-        ...(0, cypress_preset_1.nxBaseCypressPreset)(__filename),
+        ...(0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig),
         specPattern: '**/*.cy.{js,jsx,ts,tsx}',
         devServer: {
             ...{ framework: 'react', bundler: 'webpack' },

package/src/generators/application/application.js

@@ -21,6 +21,7 @@ const versions_2 = require("../../utils/versions");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });

package/src/generators/application/lib/add-e2e.js

@@ -47,6 +47,7 @@ async function addE2e(host, options) {
             setParserOptionsProject: options.setParserOptionsProject,
             webServerAddress: `http://127.0.0.1:${hasPlugin ? '3000' : '4200'}`,
             webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${hasPlugin ? 'start' : 'serve'} ${options.projectName}`,
+            addPlugin: options.addPlugin,
         });
     }
     return () => { };

package/src/generators/application/lib/add-linting.js

@@ -18,6 +18,7 @@ async function addLinting(host, options) {
         skipFormat: true,
         rootProject: options.rootProject,
         setParserOptionsProject: options.setParserOptionsProject,
+        addPlugin: options.addPlugin,
     }));
     if (options.linter === eslint_1.Linter.EsLint && (0, eslint_file_1.isEslintConfigSupported)(host)) {
         (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, [

package/src/generators/application/lib/create-application-files.helpers.js

@@ -364,6 +364,25 @@ function createAppJsx(name) {
               nx g @nx/next:component ui/src/lib/button
             </pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project ${name} --web</pre>
+          </details>
           <details>
             <summary>
               <svg

package/src/generators/application/lib/normalize-options.js

@@ -16,6 +16,7 @@ async function normalizeOptions(host, options) {
     });
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const name = (0, devkit_1.names)(options.name).fileName;

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

@@ -20,4 +20,5 @@ export interface Schema {
   appDir?: boolean;
   src?: boolean;
   rootProject?: boolean;
+  addPlugin?: boolean;
 }

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

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { CypressComponentConfigurationGeneratorSchema } from './schema';
 export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigurationGeneratorSchema): Promise<GeneratorCallback>;
+export declare function cypressComponentConfigurationInternal(tree: Tree, options: CypressComponentConfigurationGeneratorSchema): Promise<GeneratorCallback>;
 export default cypressComponentConfiguration;

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

@@ -1,36 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cypressComponentConfiguration = void 0;
+exports.cypressComponentConfigurationInternal = exports.cypressComponentConfiguration = void 0;
 const devkit_1 = require("@nx/devkit");
 const ct_utils_1 = require("@nx/react/src/utils/ct-utils");
 const versions_1 = require("../../utils/versions");
 const react_1 = require("@nx/react");
 const path_1 = require("path");
-async function cypressComponentConfiguration(tree, options) {
+function cypressComponentConfiguration(tree, options) {
+    return cypressComponentConfigurationInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.cypressComponentConfiguration = cypressComponentConfiguration;
+async function cypressComponentConfigurationInternal(tree, options) {
     const tasks = [];
     const { componentConfigurationGenerator: baseCyCtConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
     tasks.push(await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
         jsx: true,
+        addPlugin: options.addPlugin,
     }));
     const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
-    tasks.push(await webpackInitGenerator(tree, { skipFormat: true }));
+    tasks.push(await webpackInitGenerator(tree, {
+        skipFormat: true,
+        addPlugin: options.addPlugin,
+    }));
     const { ensureDependencies } = await Promise.resolve().then(() => require('@nx/webpack/src/utils/ensure-dependencies'));
     tasks.push(ensureDependencies(tree, { compiler: 'swc', uiFramework: 'react' }));
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    projectConfig.targets['component-test'].options = {
-        ...projectConfig.targets['component-test'].options,
-        skipServe: true,
-    };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    if (projectConfig.targets?.['component-test']?.executor ===
+        '@nx/cypress:cypress') {
+        projectConfig.targets['component-test'].options = {
+            ...projectConfig.targets['component-test'].options,
+            skipServe: true,
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    }
     await addFiles(tree, projectConfig, options);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.cypressComponentConfiguration = cypressComponentConfiguration;
+exports.cypressComponentConfigurationInternal = cypressComponentConfigurationInternal;
 async function addFiles(tree, projectConfig, opts) {
     const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
     const ctFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');

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

@@ -2,4 +2,5 @@ export interface CypressComponentConfigurationGeneratorSchema {
   project: string;
   generateTests: boolean;
   skipFormat?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/init/init.d.ts

@@ -1,4 +1,5 @@
 import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import type { InitSchema } from './schema';
-export declare function nextInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export declare function nextInitGenerator(tree: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export declare function nextInitGeneratorInternal(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
 export default nextInitGenerator;

package/src/generators/init/init.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.nextInitGenerator = void 0;
+exports.nextInitGeneratorInternal = exports.nextInitGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
 const versions_1 = require("@nx/react/src/utils/versions");
@@ -19,8 +19,13 @@ function updateDependencies(host, schema) {
     }, undefined, schema.keepExistingVersions));
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-async function nextInitGenerator(host, schema) {
-    if (process.env.NX_PCV3 === 'true') {
+function nextInitGenerator(tree, schema) {
+    return nextInitGeneratorInternal(tree, { addPlugin: false, ...schema });
+}
+exports.nextInitGenerator = nextInitGenerator;
+async function nextInitGeneratorInternal(host, schema) {
+    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    if (schema.addPlugin) {
         (0, add_plugin_1.addPlugin)(host);
     }
     (0, add_gitignore_entry_1.addGitIgnoreEntry)(host);
@@ -34,5 +39,5 @@ async function nextInitGenerator(host, schema) {
     }
     return installTask;
 }
-exports.nextInitGenerator = nextInitGenerator;
+exports.nextInitGeneratorInternal = nextInitGeneratorInternal;
 exports.default = nextInitGenerator;

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

@@ -3,4 +3,5 @@ export interface InitSchema {
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
   updatePackageScripts?: boolean;
+  addPlugin?: boolean;
 }

package/src/generators/library/lib/normalize-options.js

@@ -12,6 +12,7 @@ async function normalizeOptions(host, options) {
         callingGenerator: '@nx/next:library',
     });
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     return {
         ...options,
         importPath,

package/src/generators/library/library.js

@@ -10,6 +10,7 @@ const normalize_options_1 = require("./lib/normalize-options");
 const versions_2 = require("../../utils/versions");
 async function libraryGenerator(host, rawOptions) {
     return await libraryGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...rawOptions,
     });

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

@@ -24,4 +24,5 @@ export interface Schema {
   strict?: boolean;
   setParserOptionsProject?: boolean;
   skipPackageJson?: boolean;
+  addPlugin?: boolean;
 }