@nx/web 0.0.0-pr-22179-271588f

package/src/generators/application/application.js

@@ -0,0 +1,353 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applicationGeneratorInternal = exports.applicationGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+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");
+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 log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+function createApplicationFiles(tree, options) {
+    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)
+                ? {
+                    compiler: options.compiler,
+                    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) {
+    const main = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/main.ts');
+    const tsConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json');
+    const assets = [
+        (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
+        (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/assets'),
+    ];
+    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,
+            compiler: options.compiler ?? 'babel',
+            devServer: true,
+            webpackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js'),
+            skipFormat: true,
+            addPlugin: options.addPlugin,
+        });
+        const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+        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') {
+        const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+        (0, add_build_target_defaults_1.addBuildTargetDefaults)(tree, `@nx/js:${options.compiler}`);
+        project.targets.build = {
+            executor: `@nx/js:${options.compiler}`,
+            outputs: ['{options.outputPath}'],
+            options: {
+                main,
+                outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
+                tsConfig,
+            },
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
+    }
+    else {
+        throw new Error('Unsupported bundler type');
+    }
+}
+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);
+}
+function setDefaults(tree, options) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.generators = nxJson.generators || {};
+    nxJson.generators['@nx/web:application'] = {
+        style: options.style,
+        linter: options.linter,
+        unitTestRunner: options.unitTestRunner,
+        e2eTestRunner: options.e2eTestRunner,
+        ...nxJson.generators['@nx/web:application'],
+    };
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+async function applicationGenerator(host, schema) {
+    return await applicationGeneratorInternal(host, {
+        addPlugin: false,
+        projectNameAndRootFormat: 'derived',
+        ...schema,
+    });
+}
+exports.applicationGenerator = applicationGenerator;
+async function applicationGeneratorInternal(host, schema) {
+    const options = await normalizeOptions(host, schema);
+    const tasks = [];
+    const jsInitTask = await (0, js_1.initGenerator)(host, {
+        js: false,
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
+    const webTask = await (0, init_1.webInitGenerator)(host, {
+        ...options,
+        skipFormat: true,
+    });
+    tasks.push(webTask);
+    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.
+        // See: https://vitejs.dev/guide/env-and-mode.html
+        if (host.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'))) {
+            host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'));
+        }
+        const viteTask = await viteConfigurationGenerator(host, {
+            uiFramework: 'none',
+            project: options.projectName,
+            newProject: true,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+            skipFormat: true,
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(viteTask);
+        createOrEditViteConfig(host, {
+            project: options.projectName,
+            includeLib: false,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+        }, false);
+    }
+    if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
+        const { vitestGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_2.nxVersion);
+        const vitestTask = await vitestGenerator(host, {
+            uiFramework: 'none',
+            project: options.projectName,
+            coverageProvider: 'v8',
+            inSourceTests: options.inSourceTests,
+            skipFormat: true,
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(vitestTask);
+        createOrEditViteConfig(host, {
+            project: options.projectName,
+            includeLib: false,
+            includeVitest: true,
+            inSourceTests: options.inSourceTests,
+        }, true);
+    }
+    if ((options.bundler === 'vite' || options.unitTestRunner === 'vitest') &&
+        options.inSourceTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app.element.spec.ts`));
+    }
+    if (options.linter === 'eslint') {
+        const { lintProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/eslint', versions_2.nxVersion);
+        const lintTask = await lintProjectGenerator(host, {
+            linter: options.linter,
+            project: options.projectName,
+            tsConfigPaths: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            ],
+            unitTestRunner: options.unitTestRunner,
+            skipFormat: true,
+            setParserOptionsProject: options.setParserOptionsProject,
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(lintTask);
+    }
+    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],
+        });
+        const cypressTask = await configurationGenerator(host, {
+            ...options,
+            project: options.e2eProjectName,
+            devServerTarget: `${options.projectName}:serve`,
+            baseUrl: 'http://localhost:4200',
+            directory: 'src',
+            skipFormat: true,
+        });
+        tasks.push(cypressTask);
+    }
+    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: {},
+            implicitDependencies: [options.projectName],
+        });
+        const playwrightTask = await playwrightConfigGenerator(host, {
+            project: options.e2eProjectName,
+            skipFormat: true,
+            skipPackageJson: false,
+            directory: 'src',
+            js: false,
+            linter: options.linter,
+            setParserOptionsProject: options.setParserOptionsProject,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
+            webServerAddress: 'http://localhost:4200',
+            addPlugin: options.addPlugin,
+        });
+        tasks.push(playwrightTask);
+    }
+    if (options.unitTestRunner === 'jest') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_2.nxVersion);
+        const jestTask = await configurationGenerator(host, {
+            project: options.projectName,
+            skipSerializers: true,
+            setupFile: 'web-components',
+            compiler: options.compiler,
+            skipFormat: true,
+            addPlugin: options.addPlugin,
+        });
+        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);
+    tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, { '@types/node': versions_2.typesNodeVersion }));
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+    tasks.push(() => {
+        (0, log_show_project_command_1.logShowProjectCommand)(options.projectName);
+    });
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.applicationGeneratorInternal = applicationGeneratorInternal;
+async function normalizeOptions(host, options) {
+    const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (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 nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPluginDefault;
+    const e2eProjectName = `${appProjectName}-e2e`;
+    const e2eProjectRoot = `${appProjectRoot}-e2e`;
+    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';
+    return {
+        ...options,
+        prefix: options.prefix ?? npmScope ?? 'app',
+        name: (0, devkit_1.names)(options.name).fileName,
+        compiler: options.compiler ?? 'babel',
+        bundler: options.bundler ?? 'webpack',
+        projectName: appProjectName,
+        appProjectRoot,
+        e2eProjectRoot,
+        e2eProjectName,
+        parsedTags,
+    };
+}
+exports.default = applicationGenerator;

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

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

package/src/generators/application/files/app-vite/index.html__tmpl__

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %></title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.<%= style %>" />
+  </head>
+  <body>
+    <<%= prefix %>-root></<%= prefix %>-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>