diff --git a/docs/shared/migration/overview.md b/docs/shared/migration/overview.md index f950468b76..201d5a613f 100644 --- a/docs/shared/migration/overview.md +++ b/docs/shared/migration/overview.md @@ -20,7 +20,7 @@ Select `empty` when prompted: ```bash ? What to create in the new workspace (Use arrow keys) -❯ empty [an empty workspace] +❯ empty [an empty workspace with a layout that works best for building apps] ``` ## Exploring your workspace diff --git a/e2e/workspace/src/create-nx-workspace.test.ts b/e2e/workspace/src/create-nx-workspace.test.ts index 264c5109b2..1f7eab1b8f 100644 --- a/e2e/workspace/src/create-nx-workspace.test.ts +++ b/e2e/workspace/src/create-nx-workspace.test.ts @@ -43,10 +43,10 @@ describe('create-nx-workspace', () => { expectNoAngularDevkit(); }); - it('should be able to create an oss workspace', () => { - const wsName = uniq('oss'); + it('should be able to create an npm workspace', () => { + const wsName = uniq('npm'); runCreateWorkspace(wsName, { - preset: 'oss', + preset: 'npm', packageManager, }); diff --git a/e2e/workspace/src/custom-layout.test.ts b/e2e/workspace/src/custom-layout.test.ts index f0585f4a39..0a4b16f668 100644 --- a/e2e/workspace/src/custom-layout.test.ts +++ b/e2e/workspace/src/custom-layout.test.ts @@ -17,7 +17,7 @@ describe('custom workspace layout', () => { it('should work', async () => { const proj = uniq('custom-layout-proj'); const packageManager = getSelectedPackageManager(); - runCreateWorkspace(proj, { preset: 'oss', packageManager }); + runCreateWorkspace(proj, { preset: 'npm', packageManager }); packageInstall('@nrwl/react @nrwl/angular @nrwl/express'); const nxJson = readJson('nx.json'); diff --git a/nx-dev/nx-dev/pages/node.tsx b/nx-dev/nx-dev/pages/node.tsx index 15a6a35b18..ebe23fbb7d 100644 --- a/nx-dev/nx-dev/pages/node.tsx +++ b/nx-dev/nx-dev/pages/node.tsx @@ -34,7 +34,7 @@ export function Node() { title: 'Open Source Tool', content: [ 'Create a workspace that puts emphasis on packages rather than', - 'libs and apps by using the "oss" preset with "create-nx-workspace".\n\n', + 'libs and apps by using the "npm" preset with "create-nx-workspace".\n\n', 'Use TypeScript to build out projects that can scale infinitely.', ].join(' '), }, diff --git a/packages/create-nx-workspace/bin/create-nx-workspace.ts b/packages/create-nx-workspace/bin/create-nx-workspace.ts index 5520a2efa4..28f285e23d 100644 --- a/packages/create-nx-workspace/bin/create-nx-workspace.ts +++ b/packages/create-nx-workspace/bin/create-nx-workspace.ts @@ -19,7 +19,7 @@ import { export enum Preset { Empty = 'empty', - OSS = 'oss', + NPM = 'npm', WebComponents = 'web-components', Angular = 'angular', AngularWithNest = 'angular-nest', @@ -37,6 +37,11 @@ const presetOptions: { name: Preset; message: string }[] = [ message: 'empty [an empty workspace with a layout that works best for building apps]', }, + { + name: Preset.NPM, + message: + 'npm [an empty workspace set up to publish npm packages (similar to and compatible with yarn workspaces)]', + }, { name: Preset.React, message: 'react [a workspace with a single React application]', @@ -79,11 +84,6 @@ const presetOptions: { name: Preset; message: string }[] = [ message: 'angular-nest [a workspace with a full stack application (Angular + Nest)]', }, - { - name: Preset.OSS, - message: - 'oss [an empty workspace with a layout that works best for open-source projects]', - }, ]; const tsVersion = 'TYPESCRIPT_VERSION'; @@ -280,7 +280,7 @@ function determinePreset(parsedArgs: any): Promise { } function determineAppName(preset: Preset, parsedArgs: any): Promise { - if (preset === Preset.Empty || preset === Preset.OSS) { + if (preset === Preset.Empty || preset === Preset.NPM) { return Promise.resolve(''); } @@ -337,7 +337,7 @@ function determineCli( function determineStyle(preset: Preset, parsedArgs: any) { if ( preset === Preset.Empty || - preset === Preset.OSS || + preset === Preset.NPM || preset === Preset.Nest || preset === Preset.Express ) { diff --git a/packages/web/README.md b/packages/web/README.md index c38de9b7b0..4eb8f6531c 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -10,10 +10,11 @@ {{getting-started}} -```angular [a workspace with a single Angular application] -? Workspace name (e.g., org name) happyorg ? What to create in the new workspace -web components [a workspace with a single app built using web components] ? -Application name myapp ? Default stylesheet format CSS +``` +? Workspace name (e.g., org name) happyorg +? What to create in the new workspace web components [a workspace with a single app built using web components] +? Application name myapp +? Default stylesheet format CSS ``` If it's your first Nx project, the command will recommend you to install the `nx` package globally, so you can invoke `nx` directly without going through yarn or npm. diff --git a/packages/workspace/src/generators/new/new.spec.ts b/packages/workspace/src/generators/new/new.spec.ts index 0662622f67..a73b6c2e2e 100644 --- a/packages/workspace/src/generators/new/new.spec.ts +++ b/packages/workspace/src/generators/new/new.spec.ts @@ -1,7 +1,8 @@ import { createTree } from '@nrwl/devkit/testing'; import { readJson, Tree, writeJson, PackageManager } from '@nrwl/devkit'; -import { newGenerator, Preset, Schema } from './new'; +import { newGenerator, Schema } from './new'; import { Linter } from '../../utils/lint'; +import { Preset } from '../utils/presets'; const defaultOptions: Omit = { cli: 'nx', diff --git a/packages/workspace/src/generators/new/new.ts b/packages/workspace/src/generators/new/new.ts index 9172fa6404..4b16250a70 100644 --- a/packages/workspace/src/generators/new/new.ts +++ b/packages/workspace/src/generators/new/new.ts @@ -18,20 +18,7 @@ import { spawn, SpawnOptions } from 'child_process'; import { workspaceGenerator } from '../workspace/workspace'; import { nxVersion } from '../../utils/versions'; - -export enum Preset { - Empty = 'empty', - OSS = 'oss', - WebComponents = 'web-components', - Angular = 'angular', - AngularWithNest = 'angular-nest', - React = 'react', - ReactWithExpress = 'react-express', - NextJs = 'next', - Gatsby = 'gatsby', - Nest = 'nest', - Express = 'express', -} +import { Preset } from '../utils/presets'; export interface Schema { cli: 'nx' | 'angular'; @@ -155,8 +142,8 @@ async function initializeGitRepo( export async function newGenerator(host: Tree, options: Schema) { if ( options.skipInstall && - options.preset !== 'empty' && - options.preset !== 'oss' + options.preset !== Preset.Empty && + options.preset !== Preset.NPM ) { throw new Error(`Cannot select a preset when skipInstall is set to true.`); } @@ -220,7 +207,7 @@ const presetDependencies: Omit< Preset, { dependencies: Record; dev: Record } >, - Preset.Empty | Preset.OSS + Preset.Empty | Preset.NPM > = { [Preset.WebComponents]: { dependencies: {}, dev: { '@nrwl/web': nxVersion } }, [Preset.Angular]: { dependencies: { '@nrwl/angular': nxVersion }, dev: {} }, @@ -268,7 +255,7 @@ const presetDependencies: Omit< }; function addPresetDependencies(host: Tree, options: Schema) { - if (options.preset === Preset.Empty || options.preset === Preset.OSS) { + if (options.preset === Preset.Empty || options.preset === Preset.NPM) { return; } const { dependencies, dev } = presetDependencies[options.preset]; @@ -292,7 +279,7 @@ function normalizeOptions(options: Schema): Schema { function setDefaultLinter(host: Tree, options: Schema) { const { linter, preset } = options; // Don't do anything if someone doesn't pick angular - if (preset !== 'angular' && preset !== 'angular-nest') { + if (preset !== Preset.Angular && preset !== Preset.AngularWithNest) { return; } diff --git a/packages/workspace/src/generators/preset/preset.spec.ts b/packages/workspace/src/generators/preset/preset.spec.ts index c9aeb74564..ba35db5dc5 100644 --- a/packages/workspace/src/generators/preset/preset.spec.ts +++ b/packages/workspace/src/generators/preset/preset.spec.ts @@ -3,6 +3,7 @@ import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; import { overrideCollectionResolutionForTesting } from '@nrwl/devkit/ngcli-adapter'; import { presetGenerator } from './preset'; import * as path from 'path'; +import { Preset } from '../utils/presets'; describe('preset', () => { let tree: Tree; @@ -40,10 +41,10 @@ describe('preset', () => { overrideCollectionResolutionForTesting(null); }); - it('should create files (preset = angular)', async () => { + it(`should create files (preset = ${Preset.Angular})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'angular', + preset: Preset.Angular, cli: 'nx', style: 'css', linter: 'eslint', @@ -58,10 +59,10 @@ describe('preset', () => { ).toBe('@nrwl/angular'); }); - it('should create files (preset = web-components)', async () => { + it(`should create files (preset = ${Preset.WebComponents})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'web-components', + preset: Preset.WebComponents, cli: 'nx', standaloneConfig: false, }); @@ -71,10 +72,10 @@ describe('preset', () => { ); }); - it('should create files (preset = react)', async () => { + it(`should create files (preset = ${Preset.React})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'react', + preset: Preset.React, style: 'css', linter: 'eslint', cli: 'nx', @@ -86,10 +87,10 @@ describe('preset', () => { ); }); - it('should create files (preset = next)', async () => { + it(`should create files (preset = ${Preset.NextJs})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'next', + preset: Preset.NextJs, style: 'css', linter: 'eslint', cli: 'nx', @@ -101,10 +102,10 @@ describe('preset', () => { ); }); - it('should create files (preset = angular-nest)', async () => { + it(`should create files (preset = ${Preset.AngularWithNest})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'angular-nest', + preset: Preset.AngularWithNest, style: 'css', linter: 'eslint', cli: 'nx', @@ -118,10 +119,10 @@ describe('preset', () => { ); }); - it('should create files (preset = react-express)', async () => { + it(`should create files (preset = ${Preset.ReactWithExpress})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'react-express', + preset: Preset.ReactWithExpress, style: 'css', linter: 'eslint', cli: 'nx', @@ -137,10 +138,10 @@ describe('preset', () => { expect(tree.exists('/libs/api-interfaces/.eslintrc.json')).toBe(true); }); - it('should create files (preset = express)', async () => { + it(`should create files (preset = ${Preset.Express})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'express', + preset: Preset.Express, linter: 'eslint', cli: 'nx', standaloneConfig: false, @@ -150,10 +151,10 @@ describe('preset', () => { expect(tree.exists('apps/proj/.eslintrc.json')).toBe(true); }); - it('should create files (preset = gatsby)', async () => { + it(`should create files (preset = ${Preset.Gatsby})`, async () => { await presetGenerator(tree, { name: 'proj', - preset: 'gatsby', + preset: Preset.Gatsby, style: 'css', linter: 'eslint', cli: 'nx', diff --git a/packages/workspace/src/generators/preset/preset.ts b/packages/workspace/src/generators/preset/preset.ts index 1a20957bf6..6e6cdc5f14 100644 --- a/packages/workspace/src/generators/preset/preset.ts +++ b/packages/workspace/src/generators/preset/preset.ts @@ -14,6 +14,7 @@ import { libraryGenerator } from '../library/library'; import { insertImport } from '../utils/insert-import'; import { insertStatement } from '../utils/insert-statement'; +import { Preset } from '../utils/presets'; export async function presetGenerator(tree: Tree, options: Schema) { options = normalizeOptions(options); @@ -28,11 +29,11 @@ export const presetSchematic = convertNxGenerator(presetGenerator); export default presetGenerator; async function createPreset(tree: Tree, options: Schema) { - if (options.preset === 'empty') { + if (options.preset === Preset.Empty) { return; - } else if (options.preset === 'oss') { + } else if (options.preset === Preset.NPM) { return; - } else if (options.preset === 'angular') { + } else if (options.preset === Preset.Angular) { const { applicationGenerator: angularApplicationGenerator, } = require('@nrwl' + '/angular/src/generators/application/application'); @@ -44,7 +45,7 @@ async function createPreset(tree: Tree, options: Schema) { standaloneConfig: options.standaloneConfig, }); setDefaultCollection(tree, '@nrwl/angular'); - } else if (options.preset === 'react') { + } else if (options.preset === Preset.React) { const { applicationGenerator: reactApplicationGenerator, } = require('@nrwl' + '/react'); @@ -56,7 +57,7 @@ async function createPreset(tree: Tree, options: Schema) { standaloneConfig: options.standaloneConfig, }); setDefaultCollection(tree, '@nrwl/react'); - } else if (options.preset === 'next') { + } else if (options.preset === Preset.NextJs) { const { applicationGenerator: nextApplicationGenerator } = require('@nrwl' + '/next'); @@ -67,7 +68,7 @@ async function createPreset(tree: Tree, options: Schema) { standaloneConfig: options.standaloneConfig, }); setDefaultCollection(tree, '@nrwl/next'); - } else if (options.preset === 'web-components') { + } else if (options.preset === Preset.WebComponents) { const { applicationGenerator: webApplicationGenerator } = require('@nrwl' + '/web'); @@ -90,7 +91,7 @@ async function createPreset(tree: Tree, options: Schema) { ['@ungap/custom-elements'] ); setDefaultCollection(tree, '@nrwl/web'); - } else if (options.preset === 'angular-nest') { + } else if (options.preset === Preset.AngularWithNest) { const { applicationGenerator: angularApplicationGenerator, } = require('@nrwl' + '/angular/src/generators/application/application'); @@ -118,7 +119,7 @@ async function createPreset(tree: Tree, options: Schema) { }); setDefaultCollection(tree, '@nrwl/angular'); connectAngularAndNest(tree, options); - } else if (options.preset === 'react-express') { + } else if (options.preset === Preset.ReactWithExpress) { const { applicationGenerator: expressApplicationGenerator, } = require('@nrwl' + '/express'); @@ -146,7 +147,7 @@ async function createPreset(tree: Tree, options: Schema) { }); setDefaultCollection(tree, '@nrwl/react'); connectReactAndExpress(tree, options); - } else if (options.preset === 'nest') { + } else if (options.preset === Preset.Nest) { const { applicationGenerator: nestApplicationGenerator } = require('@nrwl' + '/nest'); @@ -155,7 +156,7 @@ async function createPreset(tree: Tree, options: Schema) { linter: options.linter, }); setDefaultCollection(tree, '@nrwl/nest'); - } else if (options.preset === 'express') { + } else if (options.preset === Preset.Express) { const { applicationGenerator: expressApplicationGenerator, } = require('@nrwl' + '/express'); @@ -165,7 +166,7 @@ async function createPreset(tree: Tree, options: Schema) { standaloneConfig: options.standaloneConfig, }); setDefaultCollection(tree, '@nrwl/express'); - } else if (options.preset === 'gatsby') { + } else if (options.preset === Preset.Gatsby) { const { applicationGenerator: gatsbyApplicationGenerator, } = require('@nrwl' + '/gatsby'); diff --git a/packages/workspace/src/generators/preset/schema.d.ts b/packages/workspace/src/generators/preset/schema.d.ts index eee31e03bb..ae230828f5 100644 --- a/packages/workspace/src/generators/preset/schema.d.ts +++ b/packages/workspace/src/generators/preset/schema.d.ts @@ -1,20 +1,11 @@ +import { Preset } from '../utils/presets'; + export interface Schema { name: string; npmScope?: string; style?: string; cli: string; linter?: string; - preset: - | 'empty' - | 'oss' - | 'angular' - | 'react' - | 'next' - | 'gatsby' - | 'web-components' - | 'angular-nest' - | 'react-express' - | 'nest' - | 'express'; + preset: Preset; standaloneConfig?: boolean; } diff --git a/packages/workspace/src/generators/utils/presets.ts b/packages/workspace/src/generators/utils/presets.ts new file mode 100644 index 0000000000..aec4e9060e --- /dev/null +++ b/packages/workspace/src/generators/utils/presets.ts @@ -0,0 +1,13 @@ +export enum Preset { + Empty = 'empty', + NPM = 'npm', + WebComponents = 'web-components', + Angular = 'angular', + AngularWithNest = 'angular-nest', + React = 'react', + ReactWithExpress = 'react-express', + NextJs = 'next', + Gatsby = 'gatsby', + Nest = 'nest', + Express = 'express', +} diff --git a/packages/workspace/src/generators/workspace/workspace.spec.ts b/packages/workspace/src/generators/workspace/workspace.spec.ts index b973c00f09..d0ce395cb0 100644 --- a/packages/workspace/src/generators/workspace/workspace.spec.ts +++ b/packages/workspace/src/generators/workspace/workspace.spec.ts @@ -2,6 +2,7 @@ import { readJson } from '@nrwl/devkit'; import type { Tree, NxJsonConfiguration } from '@nrwl/devkit'; import { workspaceGenerator } from './workspace'; import { createTree } from '@nrwl/devkit/testing'; +import { Preset } from '../utils/presets'; describe('@nrwl/workspace:workspace', () => { let tree: Tree; @@ -15,7 +16,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); expect(tree.exists('/proj/nx.json')).toBe(true); @@ -29,7 +30,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'master', }); const nxJson = readJson(tree, '/proj/nx.json'); @@ -70,7 +71,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); expect(tree.read('proj/.prettierrc', 'utf-8')).toMatchSnapshot(); @@ -81,7 +82,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); const recommendations = readJson<{ recommendations: string[] }>( @@ -97,7 +98,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'angular', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); const recommendations = readJson<{ recommendations: string[] }>( @@ -113,7 +114,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'angular', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); expect(tree.exists('/proj/decorate-angular-cli.js')).toBe(true); @@ -128,7 +129,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'empty', + preset: Preset.Empty, defaultBase: 'main', }); expect(tree.exists('/proj/decorate-angular-cli.js')).toBe(false); @@ -141,7 +142,7 @@ describe('@nrwl/workspace:workspace', () => { name: 'proj', directory: 'proj', cli: 'nx', - preset: 'oss', + preset: Preset.NPM, defaultBase: 'main', }); expect(tree.exists('/proj/packages/.gitkeep')).toBe(true); diff --git a/packages/workspace/src/generators/workspace/workspace.ts b/packages/workspace/src/generators/workspace/workspace.ts index 8859591ea0..f0acf7e954 100644 --- a/packages/workspace/src/generators/workspace/workspace.ts +++ b/packages/workspace/src/generators/workspace/workspace.ts @@ -17,6 +17,7 @@ import { import { readFileSync } from 'fs'; import { join, join as pathJoin } from 'path'; import { reformattedWorkspaceJsonOrNull } from '@nrwl/tao/src/shared/workspace'; +import { Preset } from '../utils/presets'; export const DEFAULT_NRWL_PRETTIER_CONFIG = { singleQuote: true, @@ -31,7 +32,7 @@ function decorateAngularClI(host: Tree, options: Schema) { function setPresetProperty(tree: Tree, options: Schema) { updateJson(tree, join(options.directory, 'nx.json'), (json) => { - if (options.preset === 'oss') { + if (options.preset === Preset.NPM) { addPropertyWithStableKeys( json, 'extends', @@ -46,7 +47,7 @@ function setPresetProperty(tree: Tree, options: Schema) { } function createAppsAndLibsFolders(host: Tree, options: Schema) { - if (options.preset === 'oss') { + if (options.preset === Preset.NPM) { host.write(join(options.directory, 'packages/.gitkeep'), ''); } else { host.write(join(options.directory, 'apps/.gitkeep'), ''); diff --git a/scripts/readme-fragments/getting-started.md b/scripts/readme-fragments/getting-started.md index c02c100808..b5a07943e0 100644 --- a/scripts/readme-fragments/getting-started.md +++ b/scripts/readme-fragments/getting-started.md @@ -25,15 +25,16 @@ The `create-nx-workspace` command will ask you to select a preset, which will co ``` ? What to create in the new workspace (Use arrow keys) ❯ empty [an empty workspace with a layout that works best for building apps] - oss [an empty workspace with a layout that works best for open-source projects] + npm [an empty workspace set up to publish npm packages (similar to and compatible with yarn workspaces)] react [a workspace with a single React application] - next.js [a workspace with a single Next.js application] angular [a workspace with a single Angular application] - express [a workspace with a single Express application] + next.js [a workspace with a single Next.js application] + gatsby [a workspace with a single Gatsby application] nest [a workspace with a single Nest application] + express [a workspace with a single Express application] + web components [a workspace with a single app built using web components] react-express [a workspace with a full stack application (React + Express)] angular-nest [a workspace with a full stack application (Angular + Nest)] - web components [a workspace with a single app built using web components] ``` Select the preset that works best for you.