@nx/web 19.5.5 → 19.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/web",
-  "version": "19.5.5",
+  "version": "19.6.0-beta.0",
   "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,9 +35,9 @@
     "detect-port": "^1.5.1",
     "http-server": "^14.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "19.5.5",
-    "@nx/js": "19.5.5",
-    "@nrwl/web": "19.5.5"
+    "@nx/devkit": "19.6.0-beta.0",
+    "@nx/js": "19.6.0-beta.0",
+    "@nrwl/web": "19.6.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/application.js

@@ -11,8 +11,10 @@ const versions_2 = require("../../utils/versions");
 const init_1 = require("../init/init");
 const get_npm_scope_1 = require("@nx/js/src/utils/package-json/get-npm-scope");
 const has_webpack_plugin_1 = require("../../utils/has-webpack-plugin");
-const add_build_target_defaults_1 = require("@nx/devkit/src/generators/add-build-target-defaults");
+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");
 function createApplicationFiles(tree, options) {
     if (options.bundler === 'vite') {
         (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-vite'), options.appProjectRoot, {
@@ -113,7 +115,7 @@ async function setupBundler(tree, options) {
     }
     else if (options.bundler === 'none') {
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
-        (0, add_build_target_defaults_1.addBuildTargetDefaults)(tree, `@nx/js:${options.compiler}`);
+        (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, `@nx/js:${options.compiler}`);
         project.targets.build = {
             executor: `@nx/js:${options.compiler}`,
             outputs: ['{options.outputPath}'],
@@ -237,6 +239,22 @@ async function applicationGeneratorInternal(host, schema) {
         });
         tasks.push(lintTask);
     }
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    let hasPlugin;
+    let buildPlugin;
+    let buildConfigFile;
+    if (options.bundler === 'webpack' || options.bundler === 'vite') {
+        buildPlugin = `@nx/${options.bundler}/plugin`;
+        buildConfigFile =
+            options.bundler === 'webpack' ? 'webpack.config.js' : `vite.config.ts`;
+        hasPlugin = nxJson.plugins?.find((p) => typeof p === 'string' ? p === buildPlugin : p.plugin === buildPlugin);
+    }
+    if (!hasPlugin) {
+        await (0, static_serve_configuration_1.default)(host, {
+            buildTarget: `${options.projectName}:build`,
+            spa: true,
+        });
+    }
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_2.nxVersion);
         (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -254,7 +272,30 @@ async function applicationGeneratorInternal(host, schema) {
             baseUrl: options.e2eWebServerAddress,
             directory: 'src',
             skipFormat: true,
+            webServerCommands: hasPlugin
+                ? {
+                    default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
+                    production: `nx run ${options.projectName}:preview`,
+                }
+                : undefined,
+            ciWebServerCommand: hasPlugin
+                ? `nx run ${options.projectName}:${options.e2eCiWebServerTarget}`
+                : undefined,
+            ciBaseUrl: options.bundler === 'vite' ? options.e2eCiBaseUrl : undefined,
         });
+        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') {
@@ -275,10 +316,23 @@ async function applicationGeneratorInternal(host, schema) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
-            webServerAddress: options.e2eWebServerAddress,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx run ${options.projectName}:${options.e2eCiWebServerTarget}`,
+            webServerAddress: options.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') {
@@ -333,28 +387,35 @@ async function normalizeOptions(host, options) {
     const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPluginDefault;
+    let e2ePort = 4200;
     let e2eWebServerTarget = 'serve';
+    let e2eCiWebServerTarget = options.bundler === 'vite' ? 'preview' : 'serve-static';
     if (options.addPlugin) {
         if (nxJson.plugins) {
             for (const plugin of nxJson.plugins) {
                 if (options.bundler === 'vite' &&
                     typeof plugin === 'object' &&
-                    plugin.plugin === '@nx/vite/plugin' &&
-                    plugin.options.serveTargetName) {
-                    e2eWebServerTarget = plugin.options
-                        .serveTargetName;
+                    plugin.plugin === '@nx/vite/plugin') {
+                    e2eCiWebServerTarget =
+                        plugin.options?.previewTargetName ??
+                            e2eCiWebServerTarget;
+                    e2eWebServerTarget =
+                        plugin.options?.serveTargetName ??
+                            e2eWebServerTarget;
                 }
                 else if (options.bundler === 'webpack' &&
                     typeof plugin === 'object' &&
-                    plugin.plugin === '@nx/webpack/plugin' &&
-                    plugin.options.serveTargetName) {
-                    e2eWebServerTarget = plugin.options
-                        .serveTargetName;
+                    plugin.plugin === '@nx/webpack/plugin') {
+                    e2eCiWebServerTarget =
+                        plugin.options?.serveStaticTargetName ??
+                            e2eCiWebServerTarget;
+                    e2eWebServerTarget =
+                        plugin.options?.serveTargetName ??
+                            e2eWebServerTarget;
                 }
             }
         }
     }
-    let e2ePort = 4200;
     if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
         nxJson.targetDefaults?.[e2eWebServerTarget].options?.port) {
         e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options?.port;
@@ -362,6 +423,9 @@ async function normalizeOptions(host, options) {
     const e2eProjectName = `${appProjectName}-e2e`;
     const e2eProjectRoot = `${appProjectRoot}-e2e`;
     const e2eWebServerAddress = `http://localhost:${e2ePort}`;
+    const e2eCiBaseUrl = options.bundler === 'vite'
+        ? 'http://localhost:4300'
+        : `http://localhost:${e2ePort}`;
     const npmScope = (0, get_npm_scope_1.getNpmScope)(host);
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
@@ -383,6 +447,8 @@ async function normalizeOptions(host, options) {
         e2eProjectName,
         e2eWebServerAddress,
         e2eWebServerTarget,
+        e2eCiWebServerTarget,
+        e2eCiBaseUrl,
         e2ePort,
         parsedTags,
     };

package/src/generators/static-serve/static-serve-configuration.js

@@ -20,6 +20,7 @@ async function normalizeOptions(tree, options) {
         targetName: options.targetName || 'serve-static',
         projectName: target.project,
         spa: options.spa ?? true,
+        parsedBuildTarget: target.target,
     };
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, target.project);
     const buildTargetConfig = projectConfig?.targets?.[target.target];
@@ -69,6 +70,7 @@ function addStaticConfig(tree, opts) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, opts.projectName);
     const staticServeOptions = {
         executor: '@nx/web:file-server',
+        dependsOn: [opts.parsedBuildTarget],
         options: {
             buildTarget: opts.buildTarget,
             staticFilePath: opts.outputPath,

package/src/utils/has-vite-plugin.d.ts

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

package/src/utils/has-vite-plugin.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasVitePlugin = hasVitePlugin;
+const devkit_1 = require("@nx/devkit");
+function hasVitePlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/vite/plugin'
+        : p.plugin === '@nx/vite/plugin');
+}