@nx/web 21.0.0-beta.1 → 21.0.0-beta.11

package/migrations.json

@@ -1,14 +1,4 @@
 {
   "generators": {},
-  "packageJsonUpdates": {
-    "17.3.0": {
-      "version": "17.3.0-beta.3",
-      "packages": {
-        "@types/node": {
-          "version": "18.16.9",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    }
-  }
+  "packageJsonUpdates": {}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/web",
-  "version": "21.0.0-beta.1",
+  "version": "21.0.0-beta.11",
   "private": false,
   "description": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Playwright, Cypress, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -35,8 +35,8 @@
     "http-server": "^14.1.0",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.0.0-beta.1",
-    "@nx/js": "21.0.0-beta.1"
+    "@nx/devkit": "21.0.0-beta.11",
+    "@nx/js": "21.0.0-beta.11"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/file-server/schema.json

@@ -1,5 +1,6 @@
 {
   "version": 2,
+  "continuous": true,
   "outputCapture": "direct-nodejs",
   "title": "File Server",
   "description": "Serve a web application from a folder. This executor is a wrapper around the [http-server](https://www.npmjs.com/package/http-server) package.",

package/src/generators/application/application.js

@@ -14,15 +14,12 @@ const has_webpack_plugin_1 = require("../../utils/has-webpack-plugin");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const static_serve_configuration_1 = require("../static-serve/static-serve-configuration");
-const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 function createApplicationFiles(tree, options) {
     const rootTsConfigPath = (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot);
     if (options.bundler === 'vite') {
         (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-vite'), options.appProjectRoot, {
             ...options,
-            ...(0, devkit_1.names)(options.name),
             tmpl: '',
             offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
             rootTsConfigPath,
@@ -32,7 +29,6 @@ function createApplicationFiles(tree, options) {
         const rootOffset = (0, devkit_1.offsetFromRoot)(options.appProjectRoot);
         (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-webpack'), options.appProjectRoot, {
             ...options,
-            ...(0, devkit_1.names)(options.name),
             tmpl: '',
             offsetFromRoot: rootOffset,
             rootTsConfigPath,
@@ -153,17 +149,19 @@ async function setupBundler(tree, options) {
     }
 }
 async function addProject(tree, options) {
-    if (options.isUsingTsSolutionConfig) {
-        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: (0, get_import_path_1.getImportPath)(tree, options.name),
-            version: '0.0.1',
-            private: true,
-            nx: options.parsedTags?.length
-                ? {
-                    tags: options.parsedTags,
-                }
-                : undefined,
-        });
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        private: true,
+    };
+    if (!options.useProjectJson) {
+        if (options.projectName !== options.importPath) {
+            packageJson.nx = { name: options.projectName };
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
     }
     else {
         (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
@@ -174,6 +172,9 @@ async function addProject(tree, options) {
             targets: {},
         });
     }
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
+    }
 }
 function setDefaults(tree, options) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -196,7 +197,7 @@ async function applicationGenerator(host, schema) {
 async function applicationGeneratorInternal(host, schema) {
     const options = await normalizeOptions(host, schema);
     if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
     }
     const tasks = [];
     const jsInitTask = await (0, js_1.initGenerator)(host, {
@@ -215,6 +216,21 @@ async function applicationGeneratorInternal(host, schema) {
         await setupBundler(host, options);
     }
     createApplicationFiles(host, options);
+    if (options.linter === 'eslint') {
+        const { lintProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/eslint', versions_2.nxVersion);
+        const lintTask = await lintProjectGenerator(host, {
+            linter: options.linter,
+            project: options.projectName,
+            tsConfigPaths: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            ],
+            unitTestRunner: options.unitTestRunner,
+            skipFormat: true,
+            setParserOptionsProject: options.setParserOptionsProject,
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(lintTask);
+    }
     if (options.bundler === 'vite') {
         const { viteConfigurationGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_2.nxVersion);
         // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
@@ -262,21 +278,6 @@ async function applicationGeneratorInternal(host, schema) {
         options.inSourceTests) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app.element.spec.ts`));
     }
-    if (options.linter === 'eslint') {
-        const { lintProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/eslint', versions_2.nxVersion);
-        const lintTask = await lintProjectGenerator(host, {
-            linter: options.linter,
-            project: options.projectName,
-            tsConfigPaths: [
-                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
-            ],
-            unitTestRunner: options.unitTestRunner,
-            skipFormat: true,
-            setParserOptionsProject: options.setParserOptionsProject,
-            addPlugin: options.addPlugin,
-        });
-        tasks.push(lintTask);
-    }
     const nxJson = (0, devkit_1.readNxJson)(host);
     let hasPlugin;
     let buildPlugin;
@@ -310,17 +311,15 @@ async function applicationGeneratorInternal(host, schema) {
     }
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_2.nxVersion);
-        if (options.isUsingTsSolutionConfig) {
-            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                name: options.e2eProjectName,
-                version: '0.0.1',
-                private: true,
-                nx: {
-                    projectType: 'application',
-                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                    implicitDependencies: [options.projectName],
-                },
-            });
+        const packageJson = {
+            name: options.e2eProjectName,
+            version: '0.0.1',
+            private: true,
+        };
+        if (!options.useProjectJson) {
+            packageJson.nx = {
+                implicitDependencies: [options.projectName],
+            };
         }
         else {
             (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -332,6 +331,9 @@ async function applicationGeneratorInternal(host, schema) {
                 implicitDependencies: [options.projectName],
             });
         }
+        if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+        }
         const cypressTask = await configurationGenerator(host, {
             ...options,
             project: options.e2eProjectName,
@@ -339,45 +341,26 @@ async function applicationGeneratorInternal(host, schema) {
             baseUrl: e2eWebServerInfo.e2eWebServerAddress,
             directory: 'src',
             skipFormat: true,
-            webServerCommands: hasPlugin
-                ? {
-                    default: e2eWebServerInfo.e2eWebServerCommand,
-                    production: e2eWebServerInfo.e2eCiWebServerCommand,
-                }
-                : undefined,
-            ciWebServerCommand: hasPlugin
-                ? e2eWebServerInfo.e2eCiWebServerCommand
-                : undefined,
+            webServerCommands: {
+                default: e2eWebServerInfo.e2eWebServerCommand,
+                production: e2eWebServerInfo.e2eCiWebServerCommand,
+            },
+            ciWebServerCommand: e2eWebServerInfo.e2eCiWebServerCommand,
             ciBaseUrl: e2eWebServerInfo.e2eCiBaseUrl,
         });
-        if (options.addPlugin ||
-            (0, devkit_1.readNxJson)(host).plugins?.find((p) => typeof p === 'string'
-                ? p === '@nx/cypress/plugin'
-                : p.plugin === '@nx/cypress/plugin')) {
-            let buildTarget = '^build';
-            if (hasPlugin) {
-                const matchingPlugin = await (0, find_plugin_for_config_file_1.findPluginForConfigFile)(host, buildPlugin, (0, devkit_1.joinPathFragments)(options.appProjectRoot, buildConfigFile));
-                if (matchingPlugin && typeof matchingPlugin !== 'string') {
-                    buildTarget = `^${matchingPlugin.options?.buildTargetName ?? 'build'}`;
-                }
-            }
-            await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(host, '@nx/cypress/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `cypress.config.ts`));
-        }
         tasks.push(cypressTask);
     }
     else if (options.e2eTestRunner === 'playwright') {
         const { configurationGenerator: playwrightConfigGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_2.nxVersion);
-        if (options.isUsingTsSolutionConfig) {
-            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                name: options.e2eProjectName,
-                version: '0.0.1',
-                private: true,
-                nx: {
-                    projectType: 'application',
-                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                    implicitDependencies: [options.projectName],
-                },
-            });
+        const packageJson = {
+            name: options.e2eProjectName,
+            version: '0.0.1',
+            private: true,
+        };
+        if (!options.useProjectJson) {
+            packageJson.nx = {
+                implicitDependencies: [options.projectName],
+            };
         }
         else {
             (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -389,6 +372,9 @@ async function applicationGeneratorInternal(host, schema) {
                 implicitDependencies: [options.projectName],
             });
         }
+        if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+        }
         const playwrightTask = await playwrightConfigGenerator(host, {
             project: options.e2eProjectName,
             skipFormat: true,
@@ -401,19 +387,6 @@ async function applicationGeneratorInternal(host, schema) {
             webServerAddress: e2eWebServerInfo.e2eCiBaseUrl,
             addPlugin: options.addPlugin,
         });
-        if (options.addPlugin ||
-            (0, devkit_1.readNxJson)(host).plugins?.find((p) => typeof p === 'string'
-                ? p === '@nx/playwright/plugin'
-                : p.plugin === '@nx/playwright/plugin')) {
-            let buildTarget = '^build';
-            if (hasPlugin) {
-                const matchingPlugin = await (0, find_plugin_for_config_file_1.findPluginForConfigFile)(host, buildPlugin, (0, devkit_1.joinPathFragments)(options.appProjectRoot, buildConfigFile));
-                if (matchingPlugin && typeof matchingPlugin !== 'string') {
-                    buildTarget = `^${matchingPlugin.options?.buildTargetName ?? 'build'}`;
-                }
-            }
-            await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(host, '@nx/playwright/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `playwright.config.ts`));
-        }
         tasks.push(playwrightTask);
     }
     if (options.unitTestRunner === 'jest') {
@@ -462,8 +435,8 @@ async function applicationGeneratorInternal(host, schema) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -472,9 +445,10 @@ async function normalizeOptions(host, options) {
     const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPluginDefault;
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isUsingTsSolutionConfig || options.name ? projectName : importPath;
     const e2eProjectName = `${appProjectName}-e2e`;
     const e2eProjectRoot = `${appProjectRoot}-e2e`;
-    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
     const npmScope = (0, get_npm_scope_1.getNpmScope)(host);
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
@@ -486,18 +460,18 @@ async function normalizeOptions(host, options) {
     return {
         ...options,
         prefix: options.prefix ?? npmScope ?? 'app',
-        name: (0, devkit_1.names)(options.name).fileName,
         compiler: options.compiler ?? 'babel',
         bundler: options.bundler ?? 'webpack',
-        projectName: isUsingTsSolutionConfig
-            ? (0, get_import_path_1.getImportPath)(host, appProjectName)
-            : appProjectName,
+        projectName: appProjectName,
+        importPath,
         strict: options.strict ?? true,
         appProjectRoot,
         e2eProjectRoot,
         e2eProjectName,
         parsedTags,
+        names: (0, devkit_1.names)(projectName),
         isUsingTsSolutionConfig,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
 }
 exports.default = applicationGenerator;

package/src/generators/application/files/app-vite/index.html__tmpl__

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title><%= className %></title>
+    <title><%= names.className %></title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />

package/src/generators/application/files/app-webpack/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title><%= className %></title>
+    <title><%= names.className %></title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />

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

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

package/src/generators/application/schema.json

@@ -104,6 +104,10 @@
       "type": "boolean",
       "description": "Creates an application with strict mode and strict type checking.",
       "default": true
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],