@nx/web 16.8.0-beta.1 → 16.8.0-beta.2

package/generators.json

@@ -10,7 +10,7 @@
       "hidden": true
     },
     "application": {
-      "factory": "./src/generators/application/application#applicationGenerator",
+      "factory": "./src/generators/application/application#applicationGeneratorInternal",
       "schema": "./src/generators/application/schema.json",
       "aliases": ["app"],
       "x-type": "application",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/web",
-  "version": "16.8.0-beta.1",
+  "version": "16.8.0-beta.2",
   "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": {
@@ -30,9 +30,9 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/web": "16.8.0-beta.1",
-    "@nx/devkit": "16.8.0-beta.1",
-    "@nx/js": "16.8.0-beta.1",
+    "@nrwl/web": "16.8.0-beta.2",
+    "@nx/devkit": "16.8.0-beta.2",
+    "@nx/js": "16.8.0-beta.2",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
     "detect-port": "^1.5.1",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "231a998e004c13e559c171ba6c164a9127886153"
+  "gitHead": "9bcc04742f9e1516d8c1ddbfb1907770c347876f"
 }

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

@@ -1,5 +1,6 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function applicationGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function applicationGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default applicationGenerator;
 export declare const applicationSchematic: (generatorOptions: Schema) => (tree: any, context: any) => Promise<any>;

package/src/generators/application/application.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applicationSchematic = exports.applicationGenerator = void 0;
+exports.applicationSchematic = exports.applicationGeneratorInternal = exports.applicationGenerator = void 0;
 const tslib_1 = require("tslib");
-const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
-const versions_1 = require("@nx/js/src/utils/versions");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const js_1 = require("@nx/js");
+const versions_1 = require("@nx/js/src/utils/versions");
+const path_1 = require("path");
 const versions_2 = require("../../utils/versions");
 const init_1 = require("../init/init");
 function createApplicationFiles(tree, options) {
@@ -105,7 +106,13 @@ function setDefaults(tree, options) {
 }
 function applicationGenerator(host, schema) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const options = normalizeOptions(host, schema);
+        return yield applicationGeneratorInternal(host, Object.assign({ projectNameAndRootFormat: 'derived' }, schema));
+    });
+}
+exports.applicationGenerator = applicationGenerator;
+function applicationGeneratorInternal(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const options = yield normalizeOptions(host, schema);
         const tasks = [];
         const webTask = yield (0, init_1.webInitGenerator)(host, Object.assign(Object.assign({}, options), { skipFormat: true }));
         tasks.push(webTask);
@@ -160,7 +167,9 @@ function applicationGenerator(host, schema) {
         }
         if (options.e2eTestRunner === 'cypress') {
             const { cypressProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_2.nxVersion);
-            const cypressTask = yield cypressProjectGenerator(host, Object.assign(Object.assign({}, options), { name: `${options.name}-e2e`, directory: options.directory, project: options.projectName, skipFormat: true }));
+            const cypressTask = yield cypressProjectGenerator(host, Object.assign(Object.assign({}, options), { name: options.e2eProjectName, directory: options.e2eProjectRoot, 
+                // the name and root are already normalized, instruct the generator to use them as is
+                projectNameAndRootFormat: 'as-provided', project: options.projectName, skipFormat: true }));
             tasks.push(cypressTask);
         }
         else if (options.e2eTestRunner === 'playwright') {
@@ -197,9 +206,22 @@ function applicationGenerator(host, schema) {
             tasks.push(jestTask);
         }
         if (options.compiler === 'swc') {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, '.swcrc'), {
+                jsc: {
+                    parser: {
+                        syntax: 'typescript',
+                    },
+                    target: 'es2016',
+                },
+            });
             const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@swc/core': versions_1.swcCoreVersion, 'swc-loader': versions_2.swcLoaderVersion });
             tasks.push(installTask);
         }
+        else {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, '.babelrc'), {
+                presets: ['@nx/js/babel'],
+            });
+        }
         setDefaults(host, options);
         if (!schema.skipFormat) {
             yield (0, devkit_1.formatFiles)(host);
@@ -207,33 +229,36 @@ function applicationGenerator(host, schema) {
         return (0, devkit_1.runTasksInSerial)(...tasks);
     });
 }
-exports.applicationGenerator = applicationGenerator;
+exports.applicationGeneratorInternal = applicationGeneratorInternal;
 function normalizeOptions(host, options) {
     var _a, _b, _c, _d;
-    const { layoutDirectory, projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    const appDirectory = projectDirectory
-        ? `${(0, devkit_1.names)(projectDirectory).fileName}/${(0, devkit_1.names)(options.name).fileName}`
-        : (0, devkit_1.names)(options.name).fileName;
-    const { appsDir: defaultAppsDir, npmScope } = (0, devkit_1.getWorkspaceLayout)(host);
-    const appsDir = layoutDirectory !== null && layoutDirectory !== void 0 ? layoutDirectory : defaultAppsDir;
-    const appProjectName = appDirectory.replace(new RegExp('/', 'g'), '-');
-    const e2eProjectName = `${appProjectName}-e2e`;
-    const appProjectRoot = (0, devkit_1.joinPathFragments)(appsDir, appDirectory);
-    const e2eProjectRoot = (0, devkit_1.joinPathFragments)(appsDir, `${appDirectory}-e2e`);
-    const parsedTags = options.tags
-        ? options.tags.split(',').map((s) => s.trim())
-        : [];
-    if (options.bundler === 'vite' && !options.unitTestRunner) {
-        options.unitTestRunner = 'vitest';
-    }
-    options.style = options.style || 'css';
-    options.linter = options.linter || 'eslint';
-    options.unitTestRunner = options.unitTestRunner || 'jest';
-    options.e2eTestRunner = options.e2eTestRunner || 'cypress';
-    return Object.assign(Object.assign({}, options), { prefix: (_b = (_a = options.prefix) !== null && _a !== void 0 ? _a : npmScope) !== null && _b !== void 0 ? _b : 'app', name: (0, devkit_1.names)(options.name).fileName, compiler: (_c = options.compiler) !== null && _c !== void 0 ? _c : 'babel', bundler: (_d = options.bundler) !== null && _d !== void 0 ? _d : 'webpack', projectName: appProjectName, appProjectRoot,
-        e2eProjectRoot,
-        e2eProjectName,
-        parsedTags });
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = yield (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+            name: options.name,
+            projectType: 'application',
+            directory: options.directory,
+            projectNameAndRootFormat: options.projectNameAndRootFormat,
+            callingGenerator: '@nx/web:application',
+        });
+        options.projectNameAndRootFormat = projectNameAndRootFormat;
+        const e2eProjectName = `${appProjectName}-e2e`;
+        const e2eProjectRoot = `${appProjectRoot}-e2e`;
+        const { npmScope } = (0, devkit_1.getWorkspaceLayout)(host);
+        const parsedTags = options.tags
+            ? options.tags.split(',').map((s) => s.trim())
+            : [];
+        if (options.bundler === 'vite' && !options.unitTestRunner) {
+            options.unitTestRunner = 'vitest';
+        }
+        options.style = options.style || 'css';
+        options.linter = options.linter || 'eslint';
+        options.unitTestRunner = options.unitTestRunner || 'jest';
+        options.e2eTestRunner = options.e2eTestRunner || 'cypress';
+        return Object.assign(Object.assign({}, options), { prefix: (_b = (_a = options.prefix) !== null && _a !== void 0 ? _a : npmScope) !== null && _b !== void 0 ? _b : 'app', name: (0, devkit_1.names)(options.name).fileName, compiler: (_c = options.compiler) !== null && _c !== void 0 ? _c : 'babel', bundler: (_d = options.bundler) !== null && _d !== void 0 ? _d : 'webpack', projectName: appProjectName, appProjectRoot,
+            e2eProjectRoot,
+            e2eProjectName,
+            parsedTags });
+    });
 }
 exports.default = applicationGenerator;
 exports.applicationSchematic = (0, devkit_1.convertNxGenerator)(applicationGenerator);

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

@@ -1,3 +1,4 @@
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter } from '@nx/linter';
 
 export interface Schema {
@@ -8,6 +9,7 @@ export interface Schema {
   compiler?: 'babel' | 'swc';
   skipFormat?: boolean;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   tags?: string;
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   inSourceTests?: boolean;

package/src/generators/application/schema.json

@@ -14,12 +14,17 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use for the application?",
-      "pattern": "^[a-zA-Z].*$"
+      "pattern": "^[a-zA-Z][^:]*$"
     },
     "directory": {
       "description": "The directory of the new application.",
       "type": "string"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",

package/src/generators/application/files/app-webpack/.babelrc__tmpl__

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "@nx/js/babel"
-  ]
-}