create-nx-workspace 17.0.3 → 17.0.4

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

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -17,7 +22,7 @@
 
 # `> npx create-nx-workspace`
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+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.
 
 {{getting-started}}
 
@@ -63,5 +68,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/bin/create-nx-workspace.d.ts

@@ -14,10 +14,11 @@ interface ReactArguments extends BaseArguments {
     stack: 'react';
     workspaceType: 'standalone' | 'integrated';
     appName: string;
-    framework: 'none' | 'next';
+    framework: 'none' | 'next' | 'remix';
     style: string;
     bundler: 'webpack' | 'vite' | 'rspack';
     nextAppDir: boolean;
+    nextSrcDir: boolean;
     e2eTestRunner: 'none' | 'cypress' | 'playwright';
 }
 interface AngularArguments extends BaseArguments {
@@ -28,11 +29,15 @@ interface AngularArguments extends BaseArguments {
     routing: boolean;
     standaloneApi: boolean;
     e2eTestRunner: 'none' | 'cypress' | 'playwright';
+    bundler: 'webpack' | 'esbuild';
+    ssr: boolean;
+    prefix: string;
 }
 interface VueArguments extends BaseArguments {
     stack: 'vue';
     workspaceType: 'standalone' | 'integrated';
     appName: string;
+    framework: 'none' | 'nuxt';
     style: string;
     e2eTestRunner: 'none' | 'cypress' | 'playwright';
 }

package/bin/create-nx-workspace.js

@@ -57,10 +57,12 @@ exports.commandsObject = yargs
     .option('standaloneApi', {
     describe: chalk.dim `Use Standalone Components if generating an Angular app`,
     type: 'boolean',
+    default: true,
 })
     .option('routing', {
     describe: chalk.dim `Add a routing setup for an Angular app`,
     type: 'boolean',
+    default: true,
 })
     .option('bundler', {
     describe: chalk.dim `Bundler to be used to build the app`,
@@ -77,12 +79,24 @@ exports.commandsObject = yargs
     .option('nextAppDir', {
     describe: chalk.dim `Enable the App Router for Next.js`,
     type: 'boolean',
+})
+    .option('nextSrcDir', {
+    describe: chalk.dim `Generate a 'src/' directory for Next.js`,
+    type: 'boolean',
 })
     .option('e2eTestRunner', {
     describe: chalk.dim `Test runner to use for end to end (E2E) tests.`,
     choices: ['cypress', 'playwright', 'none'],
     type: 'string',
-}), yargs_options_1.withNxCloud, yargs_options_1.withCI, yargs_options_1.withAllPrompts, yargs_options_1.withPackageManager, yargs_options_1.withGitOptions), async function handler(argv) {
+})
+    .option('ssr', {
+    describe: chalk.dim `Enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) for the Angular application`,
+    type: 'boolean',
+})
+    .option('prefix', {
+    describe: chalk.dim `Prefix to use for Angular component and directive selectors.`,
+    type: 'string',
+}), yargs_options_1.withNxCloud, yargs_options_1.withAllPrompts, yargs_options_1.withPackageManager, yargs_options_1.withGitOptions), async function handler(argv) {
     await main(argv).catch((error) => {
         const { version } = require('../package.json');
         output_1.output.error({
@@ -93,7 +107,7 @@ exports.commandsObject = yargs
 }, [
     normalizeArgsMiddleware,
     normalizeAndWarnOnDeprecatedPreset({
-        // TODO(v18): Remove Empty and Core presets
+        // TODO(v19): Remove Empty and Core presets
         [preset_1.Preset.Core]: preset_1.Preset.NPM,
         [preset_1.Preset.Empty]: preset_1.Preset.Apps,
     }),
@@ -104,18 +118,17 @@ exports.commandsObject = yargs
 async function main(parsedArgs) {
     output_1.output.log({
         title: `Creating your v${nx_version_1.nxVersion} workspace.`,
-        bodyLines: [
-            'To make sure the command works reliably in all environments, and that the preset is applied correctly,',
-            `Nx will run "${parsedArgs.packageManager} install" several times. Please wait.`,
-        ],
     });
     const workspaceInfo = await (0, create_workspace_1.createWorkspace)(parsedArgs.preset, parsedArgs);
     (0, show_nx_warning_1.showNxWarning)(parsedArgs.name);
     await (0, ab_testing_1.recordStat)({
         nxVersion: nx_version_1.nxVersion,
         command: 'create-nx-workspace',
-        useCloud: parsedArgs.nxCloud,
-        meta: ab_testing_1.messages.codeOfSelectedPromptMessage('nxCloudCreation'),
+        useCloud: parsedArgs.nxCloud !== 'skip',
+        meta: [
+            ab_testing_1.messages.codeOfSelectedPromptMessage('setupCI'),
+            ab_testing_1.messages.codeOfSelectedPromptMessage('setupNxCloud'),
+        ],
     });
     if (parsedArgs.nxCloud && workspaceInfo.nxCloudInfo) {
         (0, nx_cloud_1.printNxCloudSuccessMessage)(workspaceInfo.nxCloudInfo);
@@ -157,8 +170,6 @@ async function normalizeArgsMiddleware(argv) {
     });
     try {
         let thirdPartyPreset;
-        // Node options
-        let docker;
         try {
             thirdPartyPreset = await (0, get_third_party_preset_1.getThirdPartyPreset)(argv.preset);
         }
@@ -184,12 +195,10 @@ async function normalizeArgsMiddleware(argv) {
         const packageManager = await (0, prompts_1.determinePackageManager)(argv);
         const defaultBase = await (0, prompts_1.determineDefaultBase)(argv);
         const nxCloud = await (0, prompts_1.determineNxCloud)(argv);
-        const ci = await (0, prompts_1.determineCI)(argv, nxCloud);
         Object.assign(argv, {
             nxCloud,
             packageManager,
             defaultBase,
-            ci,
         });
     }
     catch (e) {
@@ -238,9 +247,14 @@ async function determineStack(parsedArgs) {
             case preset_1.Preset.ReactMonorepo:
             case preset_1.Preset.NextJs:
             case preset_1.Preset.NextJsStandalone:
+            case preset_1.Preset.RemixStandalone:
+            case preset_1.Preset.RemixMonorepo:
                 return 'react';
+            case preset_1.Preset.Vue:
             case preset_1.Preset.VueStandalone:
             case preset_1.Preset.VueMonorepo:
+            case preset_1.Preset.Nuxt:
+            case preset_1.Preset.NuxtStandalone:
                 return 'vue';
             case preset_1.Preset.Nest:
             case preset_1.Preset.NodeStandalone:
@@ -274,7 +288,7 @@ async function determineStack(parsedArgs) {
                 },
                 {
                     name: `vue`,
-                    message: `Vue:           Configures a Vue application with modern tooling.`,
+                    message: `Vue:           Configures a Vue application with your framework of choice.`,
                 },
                 {
                     name: `angular`,
@@ -344,7 +358,7 @@ async function determineNoneOptions(parsedArgs) {
                         name: 'No',
                     },
                 ],
-                initial: 'Yes',
+                initial: 0,
             },
         ]);
         js = reply.ts === 'No';
@@ -358,10 +372,12 @@ async function determineReactOptions(parsedArgs) {
     let bundler = undefined;
     let e2eTestRunner = undefined;
     let nextAppDir = false;
+    let nextSrcDir = false;
     if (parsedArgs.preset && parsedArgs.preset !== preset_1.Preset.React) {
         preset = parsedArgs.preset;
         if (preset === preset_1.Preset.ReactStandalone ||
-            preset === preset_1.Preset.NextJsStandalone) {
+            preset === preset_1.Preset.NextJsStandalone ||
+            preset === preset_1.Preset.RemixStandalone) {
             appName = parsedArgs.appName ?? parsedArgs.name;
         }
         else {
@@ -389,6 +405,14 @@ async function determineReactOptions(parsedArgs) {
                 preset = preset_1.Preset.NextJs;
             }
         }
+        else if (framework === 'remix') {
+            if (workspaceType === 'standalone') {
+                preset = preset_1.Preset.RemixStandalone;
+            }
+            else {
+                preset = preset_1.Preset.RemixMonorepo;
+            }
+        }
         else if (framework === 'react-native') {
             preset = preset_1.Preset.ReactNative;
         }
@@ -410,6 +434,11 @@ async function determineReactOptions(parsedArgs) {
     }
     else if (preset === preset_1.Preset.NextJs || preset === preset_1.Preset.NextJsStandalone) {
         nextAppDir = await determineNextAppDir(parsedArgs);
+        nextSrcDir = await determineNextSrcDir(parsedArgs);
+        e2eTestRunner = await determineE2eTestRunner(parsedArgs);
+    }
+    else if (preset === preset_1.Preset.RemixMonorepo ||
+        preset === preset_1.Preset.RemixStandalone) {
         e2eTestRunner = await determineE2eTestRunner(parsedArgs);
     }
     if (parsedArgs.style) {
@@ -423,7 +452,7 @@ async function determineReactOptions(parsedArgs) {
             {
                 name: 'style',
                 message: `Default stylesheet format`,
-                initial: 'css',
+                initial: 0,
                 type: 'autocomplete',
                 choices: [
                     {
@@ -432,11 +461,15 @@ async function determineReactOptions(parsedArgs) {
                     },
                     {
                         name: 'scss',
-                        message: 'SASS(.scss)       [ http://sass-lang.com   ]',
+                        message: 'SASS(.scss)       [ https://sass-lang.com   ]',
                     },
                     {
                         name: 'less',
-                        message: 'LESS              [ http://lesscss.org     ]',
+                        message: 'LESS              [ https://lesscss.org     ]',
+                    },
+                    {
+                        name: 'tailwind',
+                        message: 'tailwind          [ https://tailwindcss.com     ]',
                     },
                     {
                         name: 'styled-components',
@@ -455,30 +488,55 @@ async function determineReactOptions(parsedArgs) {
         ]);
         style = reply.style;
     }
-    return { preset, style, appName, bundler, nextAppDir, e2eTestRunner };
+    return {
+        preset,
+        style,
+        appName,
+        bundler,
+        nextAppDir,
+        nextSrcDir,
+        e2eTestRunner,
+    };
 }
 async function determineVueOptions(parsedArgs) {
     let preset;
     let style = undefined;
     let appName;
     let e2eTestRunner = undefined;
-    if (parsedArgs.preset) {
+    if (parsedArgs.preset && parsedArgs.preset !== preset_1.Preset.Vue) {
         preset = parsedArgs.preset;
+        if (preset === preset_1.Preset.VueStandalone || preset === preset_1.Preset.NuxtStandalone) {
+            appName = parsedArgs.appName ?? parsedArgs.name;
+        }
+        else {
+            appName = await determineAppName(parsedArgs);
+        }
     }
     else {
+        const framework = await determineVueFramework(parsedArgs);
         const workspaceType = await determineStandaloneOrMonorepo();
         if (workspaceType === 'standalone') {
-            preset = preset_1.Preset.VueStandalone;
+            appName = parsedArgs.appName ?? parsedArgs.name;
         }
         else {
-            preset = preset_1.Preset.VueMonorepo;
+            appName = await determineAppName(parsedArgs);
+        }
+        if (framework === 'nuxt') {
+            if (workspaceType === 'standalone') {
+                preset = preset_1.Preset.NuxtStandalone;
+            }
+            else {
+                preset = preset_1.Preset.Nuxt;
+            }
+        }
+        else {
+            if (workspaceType === 'standalone') {
+                preset = preset_1.Preset.VueStandalone;
+            }
+            else {
+                preset = preset_1.Preset.VueMonorepo;
+            }
         }
-    }
-    if (preset === preset_1.Preset.VueStandalone) {
-        appName = parsedArgs.appName ?? parsedArgs.name;
-    }
-    else {
-        appName = await determineAppName(parsedArgs);
     }
     e2eTestRunner = await determineE2eTestRunner(parsedArgs);
     if (parsedArgs.style) {
@@ -489,7 +547,7 @@ async function determineVueOptions(parsedArgs) {
             {
                 name: 'style',
                 message: `Default stylesheet format`,
-                initial: 'css',
+                initial: 0,
                 type: 'autocomplete',
                 choices: [
                     {
@@ -498,11 +556,11 @@ async function determineVueOptions(parsedArgs) {
                     },
                     {
                         name: 'scss',
-                        message: 'SASS(.scss)       [ http://sass-lang.com   ]',
+                        message: 'SASS(.scss)       [ https://sass-lang.com   ]',
                     },
                     {
                         name: 'less',
-                        message: 'LESS              [ http://lesscss.org     ]',
+                        message: 'LESS              [ https://lesscss.org     ]',
                     },
                     {
                         name: 'none',
@@ -519,9 +577,26 @@ async function determineAngularOptions(parsedArgs) {
     let preset;
     let style;
     let appName;
-    let standaloneApi;
     let e2eTestRunner = undefined;
-    let routing;
+    let bundler = undefined;
+    let ssr = undefined;
+    const standaloneApi = parsedArgs.standaloneApi;
+    const routing = parsedArgs.routing;
+    const prefix = parsedArgs.prefix;
+    if (prefix) {
+        // https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/utility/validation.ts#L11-L14
+        const htmlSelectorRegex = /^[a-zA-Z][.0-9a-zA-Z]*((:?-[0-9]+)*|(:?-[a-zA-Z][.0-9a-zA-Z]*(:?-[0-9]+)*)*)$/;
+        // validate whether component/directive selectors will be valid with the provided prefix
+        if (!htmlSelectorRegex.test(`${prefix}-placeholder`)) {
+            output_1.output.error({
+                title: `Failed to create a workspace.`,
+                bodyLines: [
+                    `The provided "${prefix}" prefix is invalid. It must be a valid HTML selector.`,
+                ],
+            });
+            process.exit(1);
+        }
+    }
     if (parsedArgs.preset && parsedArgs.preset !== preset_1.Preset.Angular) {
         preset = parsedArgs.preset;
         if (preset === preset_1.Preset.AngularStandalone) {
@@ -542,80 +617,85 @@ async function determineAngularOptions(parsedArgs) {
             appName = await determineAppName(parsedArgs);
         }
     }
-    if (parsedArgs.style) {
-        style = parsedArgs.style;
+    if (parsedArgs.bundler) {
+        bundler = parsedArgs.bundler;
     }
     else {
         const reply = await enquirer.prompt([
             {
-                name: 'style',
-                message: `Default stylesheet format`,
-                initial: 'css',
+                name: 'bundler',
+                message: `Which bundler would you like to use?`,
                 type: 'autocomplete',
                 choices: [
                     {
-                        name: 'css',
-                        message: 'CSS',
-                    },
-                    {
-                        name: 'scss',
-                        message: 'SASS(.scss)       [ http://sass-lang.com   ]',
+                        name: 'esbuild',
+                        message: 'esbuild [ https://esbuild.github.io/ ]',
                     },
                     {
-                        name: 'less',
-                        message: 'LESS              [ http://lesscss.org     ]',
+                        name: 'webpack',
+                        message: 'Webpack [ https://webpack.js.org/ ]',
                     },
                 ],
+                initial: 0,
             },
         ]);
-        style = reply.style;
+        bundler = reply.bundler;
     }
-    e2eTestRunner = await determineE2eTestRunner(parsedArgs);
-    if (parsedArgs.standaloneApi !== undefined) {
-        standaloneApi = parsedArgs.standaloneApi;
+    if (parsedArgs.style) {
+        style = parsedArgs.style;
     }
     else {
         const reply = await enquirer.prompt([
             {
-                name: 'standaloneApi',
-                message: 'Would you like to use Standalone Components in your application?',
+                name: 'style',
+                message: `Default stylesheet format`,
+                initial: 0,
                 type: 'autocomplete',
                 choices: [
                     {
-                        name: 'No',
+                        name: 'css',
+                        message: 'CSS',
                     },
                     {
-                        name: 'Yes',
+                        name: 'scss',
+                        message: 'SASS(.scss)       [ https://sass-lang.com   ]',
+                    },
+                    {
+                        name: 'less',
+                        message: 'LESS              [ https://lesscss.org     ]',
                     },
                 ],
-                initial: 'No',
             },
         ]);
-        standaloneApi = reply.standaloneApi === 'Yes';
+        style = reply.style;
     }
-    if (parsedArgs.routing !== undefined) {
-        routing = parsedArgs.routing;
+    if (parsedArgs.ssr !== undefined) {
+        ssr = parsedArgs.ssr;
     }
     else {
         const reply = await enquirer.prompt([
             {
-                name: 'routing',
-                message: 'Would you like to add routing?',
+                name: 'ssr',
+                message: 'Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?',
                 type: 'autocomplete',
-                choices: [
-                    {
-                        name: 'Yes',
-                    },
-                    {
-                        name: 'No',
-                    },
-                ],
-                initial: 'Yes',
+                choices: [{ name: 'Yes' }, { name: 'No' }],
+                initial: 1,
             },
         ]);
-        routing = reply.routing === 'Yes';
+        ssr = reply.ssr === 'Yes';
     }
-    return { preset, style, appName, standaloneApi, routing, e2eTestRunner };
+    e2eTestRunner = await determineE2eTestRunner(parsedArgs);
+    return {
+        preset,
+        style,
+        appName,
+        standaloneApi,
+        routing,
+        e2eTestRunner,
+        bundler,
+        ssr,
+        prefix,
+    };
 }
 async function determineNodeOptions(parsedArgs) {
     let preset;
@@ -669,7 +749,7 @@ async function determineNodeOptions(parsedArgs) {
                         name: 'No',
                     },
                 ],
-                initial: 'No',
+                initial: 1,
             },
         ]);
         docker = reply.docker === 'Yes';
@@ -687,7 +767,7 @@ async function determinePackageBasedOrIntegratedOrStandalone() {
             type: 'autocomplete',
             name: 'workspaceType',
             message: `Package-based monorepo, integrated monorepo, or standalone project?`,
-            initial: 'package-based',
+            initial: 0,
             choices: [
                 {
                     name: 'package-based',
@@ -718,7 +798,7 @@ async function determineStandaloneOrMonorepo() {
             type: 'autocomplete',
             name: 'workspaceType',
             message: `Integrated monorepo, or standalone project?`,
-            initial: 'standalone',
+            initial: 1,
             choices: [
                 {
                     name: 'integrated',
@@ -772,6 +852,10 @@ async function determineReactFramework(parsedArgs) {
                     name: 'nextjs',
                     message: 'Next.js       [ https://nextjs.org/      ]',
                 },
+                {
+                    name: 'remix',
+                    message: 'Remix         [ https://remix.run/       ]',
+                },
                 {
                     name: 'expo',
                     message: 'Expo          [ https://expo.io/         ]',
@@ -781,7 +865,7 @@ async function determineReactFramework(parsedArgs) {
                     message: 'React Native  [ https://reactnative.dev/ ]',
                 },
             ],
-            initial: 'none',
+            initial: 0,
         },
     ]);
     return reply.framework;
@@ -828,11 +912,56 @@ async function determineNextAppDir(parsedArgs) {
                     name: 'No',
                 },
             ],
-            initial: 'Yes',
+            initial: 0,
         },
     ]);
     return reply.nextAppDir === 'Yes';
 }
+async function determineNextSrcDir(parsedArgs) {
+    if (parsedArgs.nextSrcDir !== undefined)
+        return parsedArgs.nextSrcDir;
+    const reply = await enquirer.prompt([
+        {
+            name: 'nextSrcDir',
+            message: 'Would you like to use the src/ directory?',
+            type: 'autocomplete',
+            choices: [
+                {
+                    name: 'Yes',
+                },
+                {
+                    name: 'No',
+                },
+            ],
+            initial: 0,
+        },
+    ]);
+    return reply.nextSrcDir === 'Yes';
+}
+async function determineVueFramework(parsedArgs) {
+    if (!!parsedArgs.framework)
+        return parsedArgs.framework;
+    const reply = await enquirer.prompt([
+        {
+            name: 'framework',
+            message: 'What framework would you like to use?',
+            type: 'autocomplete',
+            choices: [
+                {
+                    name: 'none',
+                    message: 'None',
+                    hint: '         I only want Vue',
+                },
+                {
+                    name: 'nuxt',
+                    message: 'Nuxt          [ https://nuxt.com/ ]',
+                },
+            ],
+            initial: 0,
+        },
+    ]);
+    return reply.framework;
+}
 async function determineNodeFramework(parsedArgs) {
     if (parsedArgs.framework)
         return parsedArgs.framework;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "create-nx-workspace",
-  "version": "17.0.3",
+  "version": "17.0.4",
   "private": false,
-  "description": "Smart, Fast and Extensible Build System",
+  "description": "Smart Monorepos · Fast CI",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",
@@ -36,7 +36,7 @@
     "tmp": "~0.2.1",
     "tslib": "^2.3.0",
     "yargs": "^17.6.2",
-    "axios": "^1.5.1"
+    "axios": "^1.6.0"
   },
   "publishConfig": {
     "access": "public"

package/src/create-preset.js

@@ -6,7 +6,7 @@ const package_manager_1 = require("./utils/package-manager");
 const child_process_utils_1 = require("./utils/child-process-utils");
 const unparse_1 = require("./utils/unparse");
 async function createPreset(preset, parsedArgs, packageManager, directory) {
-    const { skipGit, ci, commit, nxCloud, ...restArgs } = parsedArgs;
+    const { skipGit, commit, nxCloud, ...restArgs } = parsedArgs;
     let args = (0, unparse_1.unparse)({
         interactive: true,
         ...restArgs,

package/src/create-workspace-options.d.ts

@@ -1,19 +1,14 @@
+import { NxCloud } from './utils/nx/nx-cloud';
 import { PackageManager } from './utils/package-manager';
-import { CI } from './utils/ci/ci-list';
 export interface CreateWorkspaceOptions {
     name: string;
     packageManager: PackageManager;
-    nxCloud: boolean;
+    nxCloud: NxCloud;
     /**
      * @description Enable interactive mode with presets
      * @default true
      */
     interactive?: boolean;
-    /**
-     * @description Generate a CI workflow file
-     * @default ''
-     */
-    ci?: CI;
     /**
      * @description Default base to use for new projects. e.g. main, master
      * @default 'main'