@nx/web 20.3.0 → 20.4.0-beta.0

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2025 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/web",
-  "version": "20.3.0",
+  "version": "20.4.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,8 +35,8 @@
     "http-server": "^14.1.0",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.3.0",
-    "@nx/js": "20.3.0"
+    "@nx/devkit": "20.4.0-beta.0",
+    "@nx/js": "20.4.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -74,7 +74,14 @@
       "description": "Path where the build artifacts are located. If not provided then it will be infered from the buildTarget executor options as outputPath"
     },
     "cors": {
-      "type": "boolean",
+      "oneOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "string"
+        }
+      ],
       "description": "Enable CORS",
       "default": true
     },

package/src/generators/application/application.js

@@ -16,14 +16,16 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 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: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+            rootTsConfigPath,
         });
     }
     else {
@@ -32,7 +34,7 @@ function createApplicationFiles(tree, options) {
             ...(0, devkit_1.names)(options.name),
             tmpl: '',
             offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
-            rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+            rootTsConfigPath,
             webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)
                 ? {
                     compiler: options.compiler,
@@ -53,15 +55,29 @@ 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,
-            },
-        };
-    });
+    if (options.isUsingTsSolutionConfig) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'), () => ({
+            extends: rootTsConfigPath,
+            files: [],
+            include: [],
+            references: [
+                {
+                    path: './tsconfig.app.json',
+                },
+            ],
+        }));
+    }
+    else {
+        (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');
@@ -117,6 +133,7 @@ async function setupBundler(tree, options) {
     else if (options.bundler === 'none') {
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
         (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, `@nx/js:${options.compiler}`);
+        project.targets ??= {};
         project.targets.build = {
             executor: `@nx/js:${options.compiler}`,
             outputs: ['{options.outputPath}'],
@@ -133,14 +150,28 @@ async function setupBundler(tree, options) {
     }
 }
 async function addProject(tree, options) {
-    const targets = {};
-    (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
-        projectType: 'application',
-        root: options.appProjectRoot,
-        sourceRoot: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src'),
-        tags: options.parsedTags,
-        targets,
-    }, options.standaloneConfig);
+    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: {
+                name: options.name,
+                projectType: 'application',
+                sourceRoot: `${options.appProjectRoot}/src`,
+                tags: options.parsedTags?.length ? options.parsedTags : undefined,
+            },
+        });
+    }
+    else {
+        (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
+            projectType: 'application',
+            root: options.appProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src'),
+            tags: options.parsedTags,
+            targets: {},
+        });
+    }
 }
 function setDefaults(tree, options) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -161,7 +192,6 @@ async function applicationGenerator(host, schema) {
     });
 }
 async function applicationGeneratorInternal(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'web', 'application');
     const options = await normalizeOptions(host, schema);
     const tasks = [];
     const jsInitTask = await (0, js_1.initGenerator)(host, {
@@ -274,14 +304,28 @@ async function applicationGeneratorInternal(host, schema) {
     }
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_2.nxVersion);
-        (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
-            root: options.e2eProjectRoot,
-            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-            projectType: 'application',
-            targets: {},
-            tags: [],
-            implicitDependencies: [options.projectName],
-        });
+        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],
+                },
+            });
+        }
+        else {
+            (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
+                root: options.e2eProjectRoot,
+                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                projectType: 'application',
+                targets: {},
+                tags: [],
+                implicitDependencies: [options.projectName],
+            });
+        }
         const cypressTask = await configurationGenerator(host, {
             ...options,
             project: options.e2eProjectName,
@@ -317,14 +361,28 @@ async function applicationGeneratorInternal(host, schema) {
     }
     else if (options.e2eTestRunner === 'playwright') {
         const { configurationGenerator: playwrightConfigGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_2.nxVersion);
-        (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
-            root: options.e2eProjectRoot,
-            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-            projectType: 'application',
-            targets: {},
-            tags: [],
-            implicitDependencies: [options.projectName],
-        });
+        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],
+                },
+            });
+        }
+        else {
+            (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
+                root: options.e2eProjectRoot,
+                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                projectType: 'application',
+                targets: {},
+                tags: [],
+                implicitDependencies: [options.projectName],
+            });
+        }
         const playwrightTask = await playwrightConfigGenerator(host, {
             project: options.e2eProjectName,
             skipFormat: true,
@@ -383,7 +441,16 @@ async function applicationGeneratorInternal(host, schema) {
     }
     setDefaults(host, options);
     tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, { '@types/node': versions_2.typesNodeVersion }));
-    if (!schema.skipFormat) {
+    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.appProjectRoot, 'tsconfig.app.json', {
+        module: 'esnext',
+        moduleResolution: 'bundler',
+    }, options.linter === 'eslint'
+        ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
+        : undefined);
+    if (options.isUsingTsSolutionConfig) {
+        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
+    }
+    if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
     tasks.push(() => {
@@ -404,6 +471,7 @@ async function normalizeOptions(host, options) {
     options.addPlugin ??= addPluginDefault;
     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())
@@ -424,6 +492,7 @@ async function normalizeOptions(host, options) {
         e2eProjectRoot,
         e2eProjectName,
         parsedTags,
+        isUsingTsSolutionConfig,
     };
 }
 exports.default = applicationGenerator;

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

@@ -13,7 +13,6 @@ export interface Schema {
   inSourceTests?: boolean;
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   linter?: Linter | LinterType;
-  standaloneConfig?: boolean;
   setParserOptionsProject?: boolean;
   strict?: boolean;
   addPlugin?: boolean;

package/src/generators/application/schema.json

@@ -54,8 +54,8 @@
     "bundler": {
       "type": "string",
       "description": "The bundler to use.",
-      "enum": ["webpack", "none", "vite"],
-      "default": "webpack",
+      "enum": ["vite", "webpack", "none"],
+      "default": "vite",
       "x-prompt": "Which bundler do you want to use?",
       "x-priority": "important"
     },
@@ -63,7 +63,8 @@
       "description": "The tool to use for running lint checks.",
       "type": "string",
       "enum": ["eslint", "none"],
-      "default": "eslint"
+      "default": "none",
+      "x-prompt": "Which linter would you like to use?"
     },
     "skipFormat": {
       "description": "Skip formatting files",
@@ -74,8 +75,9 @@
     "unitTestRunner": {
       "type": "string",
       "enum": ["vitest", "jest", "none"],
-      "default": "vitest",
-      "description": "Test runner to use for unit tests. Default value is 'jest' when using 'webpack' or 'none' as the bundler and 'vitest' when using 'vite' as the bundler"
+      "default": "none",
+      "description": "Test runner to use for unit tests. Default value is 'jest' when using 'webpack' or 'none' as the bundler and 'vitest' when using 'vite' as the bundler",
+      "x-prompt": "What unit test runner should be used?"
     },
     "inSourceTests": {
       "type": "boolean",
@@ -102,12 +104,6 @@
       "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",
-      "default": true,
-      "x-deprecated": "Nx only supports standaloneConfig"
     }
   },
   "required": ["directory"],

package/src/generators/init/init.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webInitGenerator = webInitGenerator;
 const devkit_1 = require("@nx/devkit");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../utils/versions");
 function updateDependencies(tree, schema) {
     const tasks = [];
@@ -11,7 +10,6 @@ function updateDependencies(tree, schema) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 async function webInitGenerator(tree, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'web', 'init');
     let installTask = () => { };
     if (!schema.skipPackageJson) {
         installTask = updateDependencies(tree, schema);