@nx/web 0.0.0-pr-22179-271588f → 0.0.0-pr-26482-ebe2dba

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -24,7 +24,7 @@
 
 Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
-This package is a [Web plugin for Nx](https://nx.dev/packages/web).
+This package is a [Web plugin for Nx](https://nx.dev/nx-api/web).
 
 ## Getting Started
 

package/migrations.json

@@ -1,29 +1,5 @@
 {
   "generators": {
-    "add-babel-inputs": {
-      "cli": "nx",
-      "version": "15.0.0-beta.0",
-      "description": "Adds babel.config.json to the hash of all tasks",
-      "factory": "./src/migrations/update-15-0-0/add-babel-inputs"
-    },
-    "update-rollup-executor": {
-      "cli": "nx",
-      "version": "15.0.0-beta.1",
-      "description": "Update usages of rollup executors to @nrwl/rollup",
-      "factory": "./src/migrations/update-15-0-0/update-rollup-executor"
-    },
-    "update-babel-preset": {
-      "cli": "nx",
-      "version": "15.5.4-beta.0",
-      "description": "Update `@nrwl/web/babel` preset to `@nrwl/js/babel` for projects that have a .babelrc file.",
-      "factory": "./src/migrations/update-15-5-4/update-babel-preset"
-    },
-    "add-dropped-dependencies": {
-      "cli": "nx",
-      "version": "15.9.1",
-      "description": "Add @nrwl/linter, @nrwl/cypress, @nrwl/jest, @nrwl/rollup if they are used",
-      "factory": "./src/migrations/update-15-9-1/add-dropped-dependencies"
-    },
     "update-16-0-0-add-nx-packages": {
       "cli": "nx",
       "version": "16.0.0-beta.1",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nx/web",
-  "version": "0.0.0-pr-22179-271588f",
+  "version": "0.0.0-pr-26482-ebe2dba",
   "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, Cypress, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.",
+  "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": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",
@@ -13,9 +13,10 @@
     "Web",
     "Jest",
     "Cypress",
-    "CLI"
+    "CLI",
+    "Front-end"
   ],
-  "main": "./index.js",
+  "main": "./index",
   "typings": "./index.d.ts",
   "author": "Victor Savkin",
   "license": "MIT",
@@ -34,9 +35,9 @@
     "detect-port": "^1.5.1",
     "http-server": "^14.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-22179-271588f",
-    "@nx/js": "0.0.0-pr-22179-271588f",
-    "@nrwl/web": "0.0.0-pr-22179-271588f"
+    "@nx/devkit": "0.0.0-pr-26482-ebe2dba",
+    "@nx/js": "0.0.0-pr-26482-ebe2dba",
+    "@nrwl/web": "0.0.0-pr-26482-ebe2dba"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/file-server/file-server.impl.js

@@ -13,32 +13,32 @@ const utils_1 = require("nx/src/tasks-runner/utils");
 // platform specific command name
 const pmCmd = (0, os_1.platform)() === 'win32' ? `npx.cmd` : 'npx';
 function getHttpServerArgs(options) {
+    const { buildTarget, parallel, host, proxyUrl, ssl, sslCert, sslKey, proxyOptions, watch, spa, cacheSeconds, ...rest } = options;
     const args = [`-c${options.cacheSeconds}`];
-    if (options.cors) {
-        args.push(`--cors`);
+    for (const [key, value] of Object.entries(rest)) {
+        if (typeof value === 'boolean' && value) {
+            args.push(`--${key}`);
+        }
+        else if (typeof value === 'string') {
+            args.push(`--${key}=${value}`);
+        }
     }
-    if (options.host) {
-        args.push(`-a=${options.host}`);
+    if (host) {
+        args.push(`-a=${host}`);
     }
-    if (options.ssl) {
+    if (ssl) {
         args.push(`-S`);
     }
-    if (options.sslCert) {
-        args.push(`-C=${options.sslCert}`);
-    }
-    if (options.sslKey) {
-        args.push(`-K=${options.sslKey}`);
+    if (sslCert) {
+        args.push(`-C=${sslCert}`);
     }
-    if (options.proxyUrl) {
-        args.push(`-P=${options.proxyUrl}`);
+    if (sslKey) {
+        args.push(`-K=${sslKey}`);
     }
-    if (options.gzip) {
-        args.push('-g');
+    if (proxyUrl) {
+        args.push(`-P=${proxyUrl}`);
     }
-    if (options.brotli) {
-        args.push('-b');
-    }
-    if (options.proxyOptions) {
+    if (proxyOptions) {
         Object.keys(options.proxyOptions).forEach((key) => {
             args.push(`--proxy-options.${key}=${options.proxyOptions[key]}`);
         });
@@ -132,6 +132,8 @@ async function* fileServerExecutor(options, context) {
                     const args = getBuildTargetCommand(options, context);
                     (0, child_process_1.execFileSync)(pmCmd, args, {
                         stdio: [0, 1, 2],
+                        shell: true,
+                        windowsHide: true,
                     });
                 }
                 catch {
@@ -150,12 +152,16 @@ async function* fileServerExecutor(options, context) {
         // perform initial run
         run();
     }
+    const port = await detectPort(options.port || 8080);
     const outputPath = getBuildTargetOutputPath(options, context);
     if (options.spa) {
         const src = (0, path_1.join)(outputPath, 'index.html');
         const dst = (0, path_1.join)(outputPath, '404.html');
         // See: https://github.com/http-party/http-server#magic-files
         (0, fs_1.copyFileSync)(src, dst);
+        // We also need to ensure the proxyUrl is set, otherwise the browser will continue to throw a 404 error
+        // This can cause unexpected behaviors and failures especially in automated test suites
+        options.proxyUrl ??= `http${options.ssl ? 's' : ''}://localhost:${port}?`;
     }
     const args = getHttpServerArgs(options);
     const { path: pathToHttpServerPkgJson, packageJson } = (0, package_json_1.readModulePackageJson)('http-server', module.paths);
@@ -163,7 +169,6 @@ async function* fileServerExecutor(options, context) {
     const pathToHttpServer = (0, path_1.resolve)(pathToHttpServerPkgJson.replace('package.json', ''), pathToHttpServerBin);
     // detect port as close to when used to prevent port being used by another process
     // when running in  parallel
-    const port = await detectPort(options.port || 8080);
     args.push(`-p=${port}`);
     const serve = (0, child_process_1.fork)(pathToHttpServer, [outputPath, ...args], {
         stdio: 'pipe',

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

@@ -2,7 +2,7 @@
   "version": 2,
   "outputCapture": "direct-nodejs",
   "title": "File Server",
-  "description": "Serve a web application from a folder.",
+  "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.",
   "type": "object",
   "cli": "nx",
   "properties": {
@@ -44,7 +44,7 @@
     },
     "proxyUrl": {
       "type": "string",
-      "description": "URL to proxy unhandled requests to."
+      "description": "URL to proxy unhandled requests to. _Note: If the 'spa' flag is set to true, manually setting this value will override the catch-all redirect functionality from http-server which may lead to unexpected behavior._"
     },
     "proxyOptions": {
       "type": "object",
@@ -94,5 +94,6 @@
       "default": -1
     }
   },
-  "additionalProperties": false
+  "additionalProperties": true,
+  "examplesFile": "../../../docs/file-server-examples.md"
 }

package/src/generators/application/application.js

@@ -49,6 +49,15 @@ function createApplicationFiles(tree, options) {
             tree.delete((0, path_1.join)(options.appProjectRoot, './src/app/app.element.spec.ts'));
         }
     }
+    (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'), (json) => {
+        return {
+            ...json,
+            compilerOptions: {
+                ...(json.compilerOptions || {}),
+                strict: options.strict,
+            },
+        };
+    });
 }
 async function setupBundler(tree, options) {
     const main = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/main.ts');
@@ -241,8 +250,8 @@ async function applicationGeneratorInternal(host, schema) {
         const cypressTask = await configurationGenerator(host, {
             ...options,
             project: options.e2eProjectName,
-            devServerTarget: `${options.projectName}:serve`,
-            baseUrl: 'http://localhost:4200',
+            devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+            baseUrl: options.e2eWebServerAddress,
             directory: 'src',
             skipFormat: true,
         });
@@ -255,6 +264,7 @@ async function applicationGeneratorInternal(host, schema) {
             sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
             projectType: 'application',
             targets: {},
+            tags: [],
             implicitDependencies: [options.projectName],
         });
         const playwrightTask = await playwrightConfigGenerator(host, {
@@ -265,8 +275,8 @@ async function applicationGeneratorInternal(host, schema) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-            webServerAddress: 'http://localhost:4200',
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+            webServerAddress: options.e2eWebServerAddress,
             addPlugin: options.addPlugin,
         });
         tasks.push(playwrightTask);
@@ -324,19 +334,43 @@ async function normalizeOptions(host, options) {
     const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPluginDefault;
+    let e2eWebServerTarget = 'serve';
+    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;
+                }
+                else if (options.bundler === 'webpack' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/webpack/plugin' &&
+                    plugin.options.serveTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .serveTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        nxJson.targetDefaults?.[e2eWebServerTarget].options?.port) {
+        e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options?.port;
+    }
     const e2eProjectName = `${appProjectName}-e2e`;
     const e2eProjectRoot = `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const npmScope = (0, get_npm_scope_1.getNpmScope)(host);
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
-    if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
-        options.unitTestRunner = 'vitest';
-    }
     options.style = options.style || 'css';
     options.linter = options.linter || 'eslint';
     options.unitTestRunner = options.unitTestRunner || 'jest';
-    options.e2eTestRunner = options.e2eTestRunner || 'cypress';
+    options.e2eTestRunner = options.e2eTestRunner || 'playwright';
     return {
         ...options,
         prefix: options.prefix ?? npmScope ?? 'app',
@@ -344,9 +378,13 @@ async function normalizeOptions(host, options) {
         compiler: options.compiler ?? 'babel',
         bundler: options.bundler ?? 'webpack',
         projectName: appProjectName,
+        strict: options.strict ?? true,
         appProjectRoot,
         e2eProjectRoot,
         e2eProjectName,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
         parsedTags,
     };
 }

package/src/generators/application/files/app-webpack/webpack.config.js__tmpl__

@@ -1,5 +1,5 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -10,7 +10,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: '<%= webpackPluginOptions.tsConfig %>',
       compiler: '<%= webpackPluginOptions.compiler %>',
       main: '<%= webpackPluginOptions.main %>',

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

@@ -17,5 +17,6 @@ export interface Schema {
   linter?: Linter;
   standaloneConfig?: boolean;
   setParserOptionsProject?: boolean;
+  strict?: boolean;
   addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -87,10 +87,10 @@
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": ["cypress", "playwright", "none"],
+      "enum": ["playwright", "cypress", "none"],
       "x-prompt": "Which E2E test runner would you like to use?",
       "description": "Test runner to use for end to end (e2e) tests",
-      "default": "cypress"
+      "default": "playwright"
     },
     "tags": {
       "type": "string",
@@ -101,6 +101,11 @@
       "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
       "default": false
     },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with strict mode and strict type checking.",
+      "default": true
+    },
     "standaloneConfig": {
       "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside workspace.json",
       "type": "boolean",

package/src/generators/static-serve/schema.json

@@ -18,6 +18,11 @@
       "type": "string",
       "description": "Name of the serve target to add. Defaults to 'serve-static'.",
       "default": "serve-static"
+    },
+    "spa": {
+      "type": "boolean",
+      "description": "Whether to set the 'spa' flag on the generated target.",
+      "default": true
     }
   },
   "required": ["buildTarget"]

package/src/generators/static-serve/static-serve-configuration.d.ts

@@ -1,8 +1,9 @@
-import { Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 interface WebStaticServeSchema {
     buildTarget: string;
     outputPath?: string;
     targetName?: string;
+    spa?: boolean;
 }
-export declare function webStaticServeGenerator(tree: Tree, options: WebStaticServeSchema): void;
+export declare function webStaticServeGenerator(tree: Tree, options: WebStaticServeSchema): Promise<void>;
 export default webStaticServeGenerator;

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

@@ -2,17 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webStaticServeGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-function webStaticServeGenerator(tree, options) {
-    const opts = normalizeOptions(tree, options);
+async function webStaticServeGenerator(tree, options) {
+    const opts = await normalizeOptions(tree, options);
     addStaticConfig(tree, opts);
 }
 exports.webStaticServeGenerator = webStaticServeGenerator;
-function normalizeOptions(tree, options) {
-    const target = (0, devkit_1.parseTargetString)(options.buildTarget);
+async function normalizeOptions(tree, options) {
+    let projectGraph;
+    try {
+        projectGraph = (0, devkit_1.readCachedProjectGraph)();
+    }
+    catch (e) {
+        projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    }
+    const target = (0, devkit_1.parseTargetString)(options.buildTarget, projectGraph);
     const opts = {
         ...options,
         targetName: options.targetName || 'serve-static',
         projectName: target.project,
+        spa: options.spa ?? true,
     };
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, target.project);
     const buildTargetConfig = projectConfig?.targets?.[target.target];
@@ -27,7 +35,7 @@ Optionally, you can provide a different name with the --target-name option other
     }
     // NOTE: @nx/web:file-server only looks for the outputPath option
     if (!buildTargetConfig.options?.outputPath && !opts.outputPath) {
-        // attempt to find the suiteable path from the outputs
+        // attempt to find the suitable path from the outputs
         let maybeOutputValue;
         for (const o of buildTargetConfig?.outputs || []) {
             const isInterpolatedOutput = o.trim().startsWith('{options.');
@@ -65,6 +73,7 @@ function addStaticConfig(tree, opts) {
         options: {
             buildTarget: opts.buildTarget,
             staticFilePath: opts.outputPath,
+            spa: opts.spa,
         },
     };
     projectConfig.targets[opts.targetName] = staticServeOptions;

package/src/migrations/update-15-0-0/add-babel-inputs.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function (tree: Tree): Promise<void>;

package/src/migrations/update-15-0-0/add-babel-inputs.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-const add_babel_inputs_1 = require("@nx/js/src/utils/add-babel-inputs");
-async function default_1(tree) {
-    (0, add_babel_inputs_1.addBabelInputs)(tree);
-    await (0, devkit_1.formatFiles)(tree);
-}
-exports.default = default_1;

package/src/migrations/update-15-0-0/update-rollup-executor.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function update(host: Tree): Promise<void>;

package/src/migrations/update-15-0-0/update-rollup-executor.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-async function update(host) {
-    const projects = (0, devkit_1.getProjects)(host);
-    for (const [name, config] of projects.entries()) {
-        let updated = false;
-        if (config?.targets?.build?.executor === '@nrwl/web:rollup') {
-            config.targets.build.executor = '@nrwl/rollup:rollup';
-            updated = true;
-        }
-        if (config?.targets?.build?.options?.formats?.includes('umd')) {
-            config.targets.build.options.formats =
-                config.targets.build.options.formats.reduce((acc, x) => {
-                    const format = x === 'umd' ? 'cjs' : x;
-                    if (format === 'cjs') {
-                        if (!acc.includes('cjs'))
-                            acc.push(format);
-                    }
-                    else {
-                        acc.push(format);
-                    }
-                    return acc;
-                }, []);
-            updated = true;
-        }
-        if (updated) {
-            (0, devkit_1.updateProjectConfiguration)(host, name, config);
-        }
-    }
-    await (0, devkit_1.formatFiles)(host);
-}
-exports.default = update;

package/src/migrations/update-15-5-4/update-babel-preset.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-15-5-4/update-babel-preset.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-const versions_1 = require("../../utils/versions");
-/* Updates @nrwl/web/babel to @nrwl/js/babel because web package is no longer necessary to use webpack/rollup + babel. */
-async function update(tree) {
-    // Add `@nrwl/js` in case it was missing before.
-    (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
-        '@nrwl/js': versions_1.nxVersion,
-    });
-    const projects = (0, devkit_1.getProjects)(tree);
-    projects.forEach((config, name) => {
-        const babelrcPath = (0, devkit_1.joinPathFragments)(config.root, '.babelrc');
-        if (!tree.exists(babelrcPath))
-            return;
-        const babelrc = (0, devkit_1.readJson)(tree, babelrcPath);
-        const idx = babelrc?.presets?.findIndex((p) => typeof p === 'string'
-            ? p === '@nrwl/web/babel'
-            : p[0] === '@nrwl/web/babel');
-        if (idx === -1)
-            return;
-        const preset = babelrc.presets[idx];
-        if (typeof preset === 'string') {
-            babelrc.presets.splice(idx, 1, '@nrwl/js/babel');
-        }
-        else if (Array.isArray(preset)) {
-            babelrc.presets.splice(idx, 1, ['@nrwl/js/babel', preset[1]]);
-        }
-        (0, devkit_1.writeJson)(tree, babelrcPath, babelrc);
-    });
-}
-exports.default = update;

package/src/migrations/update-15-9-1/add-dropped-dependencies.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function addDroppedDependencies(tree: Tree): Promise<void>;

package/src/migrations/update-15-9-1/add-dropped-dependencies.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-async function addDroppedDependencies(tree) {
-    const devDependencies = {};
-    const droppedDependencies = [
-        '@nrwl/linter',
-        '@nrwl/cypress',
-        '@nrwl/jest',
-        '@nrwl/rollup',
-    ];
-    const projects = (0, devkit_1.getProjects)(tree);
-    for (const [_, projectConfiguration] of projects) {
-        for (const [_, targetConfiguration] of Object.entries(projectConfiguration.targets ?? {})) {
-            for (const droppedDependency of droppedDependencies) {
-                if (targetConfiguration?.['executor']?.startsWith(droppedDependency + ':')) {
-                    devDependencies[droppedDependency] = devkit_1.NX_VERSION;
-                }
-            }
-        }
-    }
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    for (const [_, targetConfiguration] of Object.entries(nxJson?.targetDefaults ?? {})) {
-        for (const droppedDependency of droppedDependencies) {
-            if (targetConfiguration?.['executor']?.startsWith(droppedDependency + ':')) {
-                devDependencies[droppedDependency] = devkit_1.NX_VERSION;
-            }
-        }
-    }
-    if (Object.keys(devDependencies).length > 0) {
-        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
-    }
-    await (0, devkit_1.formatFiles)(tree);
-}
-exports.default = addDroppedDependencies;