@nx/web 17.2.0-beta.0 → 17.2.0-beta.10

package/package.json

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

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

@@ -78,14 +78,14 @@ function createFileWatcher(project, changeHandler) {
         watchProjects: project ? [project] : 'all',
         includeGlobalWorkspaceFiles: true,
         includeDependentProjects: true,
-    }, async (error, { changedFiles }) => {
+    }, async (error, val) => {
         if (error === 'closed') {
             throw new Error('Watch error: Daemon closed the connection');
         }
         else if (error) {
             throw new Error(`Watch error: ${error?.message ?? 'Unknown'}`);
         }
-        else if (changedFiles.length > 0) {
+        else if (val?.changedFiles.length > 0) {
             changeHandler();
         }
     });

package/src/executors/file-server/schema.d.ts

@@ -1,7 +1,7 @@
 export interface Schema {
-  host: string;
-  port: number;
-  ssl: boolean;
+  host?: string;
+  port?: number;
+  ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
   proxyUrl?: string;

package/src/generators/application/application.js

@@ -9,16 +9,42 @@ const path_1 = require("path");
 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");
 function createApplicationFiles(tree, options) {
-    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, options.bundler === 'vite' ? './files/app-vite' : './files/app-webpack'), options.appProjectRoot, {
-        ...options,
-        ...(0, devkit_1.names)(options.name),
-        tmpl: '',
-        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
-        rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
-    });
-    if (options.unitTestRunner === 'none') {
-        tree.delete((0, path_1.join)(options.appProjectRoot, './src/app/app.element.spec.ts'));
+    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: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+        });
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-webpack'), options.appProjectRoot, {
+            ...options,
+            ...(0, devkit_1.names)(options.name),
+            tmpl: '',
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+            rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+            webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)
+                ? {
+                    target: 'web',
+                    outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+                        ? options.appProjectRoot
+                        : options.projectName),
+                    tsConfig: './tsconfig.app.json',
+                    main: './src/main.ts',
+                    assets: ['./src/favicon.ico', './src/assets'],
+                    index: './src/index.html',
+                    baseHref: '/',
+                    styles: [`./src/styles.${options.style}`],
+                }
+                : null,
+        });
+        if (options.unitTestRunner === 'none') {
+            tree.delete((0, path_1.join)(options.appProjectRoot, './src/app/app.element.spec.ts'));
+        }
     }
 }
 async function setupBundler(tree, options) {
@@ -31,6 +57,7 @@ async function setupBundler(tree, options) {
     if (options.bundler === 'webpack') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_2.nxVersion);
         await configurationGenerator(tree, {
+            target: 'web',
             project: options.projectName,
             main,
             tsConfig,
@@ -40,35 +67,37 @@ async function setupBundler(tree, options) {
             skipFormat: true,
         });
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
-        const prodConfig = project.targets.build.configurations.production;
-        const buildOptions = project.targets.build.options;
-        buildOptions.assets = assets;
-        buildOptions.index = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html');
-        buildOptions.baseHref = '/';
-        buildOptions.styles = [
-            (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
-        ];
-        // We can delete that, because this projest is an application
-        // and applications have a .babelrc file in their root dir.
-        // So Nx will find it and use it
-        delete buildOptions.babelUpwardRootMode;
-        buildOptions.scripts = [];
-        prodConfig.fileReplacements = [
-            {
-                replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.ts`),
-                with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.prod.ts`),
-            },
-        ];
-        prodConfig.optimization = true;
-        prodConfig.outputHashing = 'all';
-        prodConfig.sourceMap = false;
-        prodConfig.namedChunks = false;
-        prodConfig.extractLicenses = true;
-        prodConfig.vendorChunk = false;
-        (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
+        if (project.targets.build) {
+            const prodConfig = project.targets.build.configurations.production;
+            const buildOptions = project.targets.build.options;
+            buildOptions.assets = assets;
+            buildOptions.index = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html');
+            buildOptions.baseHref = '/';
+            buildOptions.styles = [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+            ];
+            // We can delete that, because this projest is an application
+            // and applications have a .babelrc file in their root dir.
+            // So Nx will find it and use it
+            delete buildOptions.babelUpwardRootMode;
+            buildOptions.scripts = [];
+            prodConfig.fileReplacements = [
+                {
+                    replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.ts`),
+                    with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.prod.ts`),
+                },
+            ];
+            prodConfig.optimization = true;
+            prodConfig.outputHashing = 'all';
+            prodConfig.sourceMap = false;
+            prodConfig.namedChunks = false;
+            prodConfig.extractLicenses = true;
+            prodConfig.vendorChunk = false;
+            (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
+        }
+        // TODO(jack): Flush this out... no bundler should be possible for web but the experience isn't holistic due to missing features (e.g. writing index.html).
     }
     else if (options.bundler === 'none') {
-        // TODO(jack): Flush this out... no bundler should be possible for web but the experience isn't holistic due to missing features (e.g. writing index.html).
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
         project.targets.build = {
             executor: `@nx/js:${options.compiler}`,
@@ -77,7 +106,6 @@ async function setupBundler(tree, options) {
                 main,
                 outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
                 tsConfig,
-                assets,
             },
         };
         (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
@@ -95,9 +123,6 @@ async function addProject(tree, options) {
         tags: options.parsedTags,
         targets,
     }, options.standaloneConfig);
-    if (options.bundler !== 'vite') {
-        await setupBundler(tree, options);
-    }
 }
 function setDefaults(tree, options) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -126,8 +151,11 @@ async function applicationGeneratorInternal(host, schema) {
         skipFormat: true,
     });
     tasks.push(webTask);
-    createApplicationFiles(host, options);
     await addProject(host, options);
+    if (options.bundler !== 'vite') {
+        await setupBundler(host, options);
+    }
+    createApplicationFiles(host, options);
     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.
@@ -181,7 +209,6 @@ async function applicationGeneratorInternal(host, schema) {
                 (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             ],
             unitTestRunner: options.unitTestRunner,
-            eslintFilePatterns: [`${options.appProjectRoot}/**/*.ts`],
             skipFormat: true,
             setParserOptionsProject: options.setParserOptionsProject,
         });
@@ -201,6 +228,7 @@ async function applicationGeneratorInternal(host, schema) {
             ...options,
             project: options.e2eProjectName,
             devServerTarget: `${options.projectName}:serve`,
+            baseUrl: 'http://localhost:4200',
             directory: 'src',
             skipFormat: true,
         });

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

@@ -1,8 +1,38 @@
+<% if (webpackPluginOptions) { %>
+const { NxWebpackPlugin } = require('@nx/webpack');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      tsConfig: '<%= webpackPluginOptions.tsConfig %>',
+      main: '<%= webpackPluginOptions.main %>',
+      index: '<%= webpackPluginOptions.index %>',
+      baseHref: '<%= webpackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(webpackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    })
+  ],
+};
+<% } else { %>
 const { composePlugins, withNx, withWeb } = require('@nx/webpack');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(withNx(), withWeb(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. `config.plugins.push(new MyPlugin())`
-  return config;
-});
+module.exports = composePlugins(
+  withNx(),
+  withWeb(),
+  (config) => {
+    // Update the webpack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<% } %>

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

@@ -13,7 +13,7 @@ async function addDroppedDependencies(tree) {
     for (const [_, projectConfiguration] of projects) {
         for (const [_, targetConfiguration] of Object.entries(projectConfiguration.targets ?? {})) {
             for (const droppedDependency of droppedDependencies) {
-                if (targetConfiguration.executor?.startsWith(droppedDependency + ':')) {
+                if (targetConfiguration?.['executor']?.startsWith(droppedDependency + ':')) {
                     devDependencies[droppedDependency] = devkit_1.NX_VERSION;
                 }
             }
@@ -22,7 +22,7 @@ async function addDroppedDependencies(tree) {
     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 + ':')) {
+            if (targetConfiguration?.['executor']?.startsWith(droppedDependency + ':')) {
                 devDependencies[droppedDependency] = devkit_1.NX_VERSION;
             }
         }

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

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

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

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

package/src/utils/wait-for-port-open.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForPortOpen = void 0;
+const devkit_1 = require("@nx/devkit");
 const net = require("net");
 function waitForPortOpen(port, options = {}) {
-    const allowedErrorCodes = ['ECONNREFUSED', 'ECONNRESET'];
+    const host = options.host ?? '127.0.0.1';
+    const allowedErrorCodes = ['ECONNREFUSED', 'ECONNRESET', 'ETIMEDOUT'];
     return new Promise((resolve, reject) => {
         const checkPort = (retries = options.retries ?? 120) => {
             const client = new net.Socket();
@@ -20,6 +22,9 @@ function waitForPortOpen(port, options = {}) {
             });
             client.once('error', (err) => {
                 if (retries === 0 || !allowedErrorCodes.includes(err['code'])) {
+                    if (process.env['NX_VERBOSE_LOGGING'] === 'true') {
+                        devkit_1.logger.info(`Error connecting on ${host}:${port}: ${err['code'] || err}`);
+                    }
                     cleanupClient();
                     reject(err);
                 }
@@ -29,7 +34,10 @@ function waitForPortOpen(port, options = {}) {
             });
             // Node will use IPv6 if it is available, but this can cause issues if the server is only listening on IPv4.
             // Hard-coding to look on 127.0.0.1 to avoid using the IPv6 loopback address "::1".
-            client.connect({ port, host: options.host ?? '127.0.0.1' });
+            if (process.env['NX_VERBOSE_LOGGING'] === 'true') {
+                devkit_1.logger.info(`Connecting on ${host}:${port}`);
+            }
+            client.connect({ port, host });
         };
         checkPort();
     });

package/src/generators/application/files/app-webpack/src/environments/environment.prod.ts__tmpl__

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/src/generators/application/files/app-webpack/src/environments/environment.ts__tmpl__

@@ -1,6 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// When building for production, this file is replaced with `environment.prod.ts`.
-
-export const environment = {
-  production: false
-};