miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(react): use helper to determine project name and root directory in project generators (#18615)

Browse Source
This commit is contained in:
Leosvel Pérez Espinosa 2023-08-18 18:12:23 +01:00 committed by GitHub
parent 71d2994be9
commit eb9caa1ade
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 346 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/generated/packages/react/generators/application.json
View File

@ -1,6 +1,6 @@
{
"name": "application",
"factory": "./src/generators/application/application#applicationGenerator",
"factory": "./src/generators/application/application#applicationGeneratorInternal",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
@ -28,7 +28,7 @@
"type": "string",
"$default": { "$source": "argv", "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.",
@ -36,6 +36,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",
@ -192,7 +197,7 @@
"aliases": ["app"],
"x-type": "application",
"description": "Create a React application.",
"implementation": "/packages/react/src/generators/application/application#applicationGenerator.ts",
"implementation": "/packages/react/src/generators/application/application#applicationGeneratorInternal.ts",
"hidden": false,
"path": "/packages/react/src/generators/application/schema.json",
"type": "generator"

11
docs/generated/packages/react/generators/host.json
View File

@ -1,6 +1,6 @@
{
"name": "host",
"factory": "./src/generators/host/host#hostGenerator",
"factory": "./src/generators/host/host#hostGeneratorInternal",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "GeneratorReactHost",
@ -14,7 +14,7 @@
"description": "The name of the host application to generate the Module Federation configuration",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use as the host application?",
"pattern": "^[a-zA-Z].*$",
"pattern": "^[a-zA-Z][^:]*$",
"x-priority": "important"
},
"directory": {
@ -23,6 +23,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",
@ -163,7 +168,7 @@
},
"x-type": "application",
"description": "Generate a host react application",
"implementation": "/packages/react/src/generators/host/host#hostGenerator.ts",
"implementation": "/packages/react/src/generators/host/host#hostGeneratorInternal.ts",
"aliases": [],
"hidden": false,
"path": "/packages/react/src/generators/host/schema.json",

11
docs/generated/packages/react/generators/library.json
View File

@ -1,6 +1,6 @@
{
"name": "library",
"factory": "./src/generators/library/library#libraryGenerator",
"factory": "./src/generators/library/library#libraryGeneratorInternal",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
@ -24,7 +24,7 @@
"description": "Library name",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the library?",
"pattern": "^[a-zA-Z].*$",
"pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
"x-priority": "important"
},
"directory": {
@ -33,6 +33,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",
@ -196,7 +201,7 @@
"aliases": ["lib"],
"x-type": "library",
"description": "Create a React library.",
"implementation": "/packages/react/src/generators/library/library#libraryGenerator.ts",
"implementation": "/packages/react/src/generators/library/library#libraryGeneratorInternal.ts",
"hidden": false,
"path": "/packages/react/src/generators/library/schema.json",
"type": "generator"

11
docs/generated/packages/react/generators/remote.json
View File

@ -1,6 +1,6 @@
{
"name": "remote",
"factory": "./src/generators/remote/remote#remoteGenerator",
"factory": "./src/generators/remote/remote#remoteGeneratorInternal",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "GeneratorReactRemote",
@ -14,7 +14,7 @@
"description": "The name of the remote application to generate the Module Federation configuration",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use as the remote application?",
"pattern": "^[a-zA-Z].*$",
"pattern": "^[a-zA-Z][^:]*$",
"x-priority": "important"
},
"directory": {
@ -23,6 +23,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",
@ -162,7 +167,7 @@
},
"x-type": "application",
"description": "Generate a remote react application",
"implementation": "/packages/react/src/generators/remote/remote#remoteGenerator.ts",
"implementation": "/packages/react/src/generators/remote/remote#remoteGeneratorInternal.ts",
"aliases": [],
"hidden": false,
"path": "/packages/react/src/generators/remote/schema.json",

26
e2e/react-core/src/react-module-federation.test.ts
View File

@ -2,7 +2,6 @@ import { stripIndents } from '@nx/devkit';
import {
checkFilesExist,
cleanupProject,
killPort,
newProject,
readProjectConfig,
runCLI,
@ -114,12 +113,29 @@ describe('React Module Federation', () => {
// }
}, 500_000);
it('should should support generating host and remote apps with the new name and root format', async () => {
const shell = uniq('shell');
const remote = uniq('remote');
runCLI(
`generate @nx/react:host ${shell} --project-name-and-root-format=as-provided --no-interactive`
);
runCLI(
`generate @nx/react:remote ${remote} --host=${shell} --project-name-and-root-format=as-provided --no-interactive`
);
// check files are generated without the layout directory ("apps/") and
// using the project name as the directory when no directory is provided
checkFilesExist(`${shell}/module-federation.config.js`);
checkFilesExist(`${remote}/module-federation.config.js`);
// check default generated host is built successfully
const buildOutput = runCLI(`run ${shell}:build:development`);
expect(buildOutput).toContain('Successfully ran target build');
}, 500_000);
async function readPort(appName: string): Promise<number> {
const config = await readProjectConfig(appName);
return config.targets.serve.options.port;
}
});
function killPorts(ports: number[]): Promise<boolean[]> {
return Promise.all(ports.map((p) => killPort(p)));
}

46
e2e/react-core/src/react.test.ts
View File

@ -227,6 +227,52 @@ describe('React Applications', () => {
);
}, 250_000);
it('should support generating projects with the new name and root format', () => {
const appName = uniq('app1');
const libName = uniq('@my-org/lib1');
runCLI(
`generate @nx/react:app ${appName} --bundler=webpack --project-name-and-root-format=as-provided --no-interactive`
);
// check files are generated without the layout directory ("apps/") and
// using the project name as the directory when no directory is provided
checkFilesExist(`${appName}/src/main.tsx`);
// check build works
expect(runCLI(`build ${appName}`)).toContain(
`Successfully ran target build for project ${appName}`
);
// check tests pass
const appTestResult = runCLI(`test ${appName}`);
expect(appTestResult).toContain(
`Successfully ran target test for project ${appName}`
);
// assert scoped project names are not supported when --project-name-and-root-format=derived
expect(() =>
runCLI(
`generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=derived --no-interactive`
)
).toThrow();
runCLI(
`generate @nx/react:lib ${libName} --unit-test-runner=jest --buildable --project-name-and-root-format=as-provided --no-interactive`
);
// check files are generated without the layout directory ("libs/") and
// using the project name as the directory when no directory is provided
checkFilesExist(`${libName}/src/index.ts`);
// check build works
expect(runCLI(`build ${libName}`)).toContain(
`Successfully ran target build for project ${libName}`
);
// check tests pass
const libTestResult = runCLI(`test ${libName}`);
expect(libTestResult).toContain(
`Successfully ran target test for project ${libName}`
);
}, 500_000);
describe('React Applications: --style option', () => {
it.each`
style

84
packages/devkit/src/generators/project-name-and-root-utils.spec.ts
View File

@ -56,6 +56,27 @@ describe('determineProjectNameAndRootOptions', () => {
});
});
it(`should handle window's style paths correctly when format is "as-provided"`, async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: 'libName',
directory: 'shared\\libName',
projectType: 'library',
projectNameAndRootFormat: 'as-provided',
callingGenerator: '',
});
expect(result).toStrictEqual({
projectName: 'lib-name',
names: {
projectSimpleName: 'lib-name',
projectFileName: 'lib-name',
},
importPath: '@proj/lib-name',
projectRoot: 'shared/lib-name',
projectNameAndRootFormat: 'as-provided',
});
});
it('should use a scoped package name as the project name and import path when format is "as-provided"', async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: '@scope/libName',
@ -253,6 +274,27 @@ describe('determineProjectNameAndRootOptions', () => {
expect(result.importPath).toBe('@proj/lib-name');
});
it(`should handle window's style paths correctly when format is "derived"`, async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: 'libName',
directory: 'shared\\sub-dir',
projectType: 'library',
projectNameAndRootFormat: 'derived',
callingGenerator: '',
});
expect(result).toStrictEqual({
projectName: 'shared-sub-dir-lib-name',
names: {
projectSimpleName: 'lib-name',
projectFileName: 'shared-sub-dir-lib-name',
},
importPath: '@proj/shared/sub-dir/lib-name',
projectRoot: 'shared/sub-dir/lib-name',
projectNameAndRootFormat: 'derived',
});
});
it('should prompt for the project name and root format', async () => {
// simulate interactive mode
ensureInteractiveMode();
@ -370,6 +412,27 @@ describe('determineProjectNameAndRootOptions', () => {
});
});
it(`should handle window's style paths correctly when format is "as-provided"`, async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: 'libName',
directory: 'shared\\libName',
projectType: 'library',
projectNameAndRootFormat: 'as-provided',
callingGenerator: '',
});
expect(result).toStrictEqual({
projectName: 'lib-name',
names: {
projectSimpleName: 'lib-name',
projectFileName: 'lib-name',
},
importPath: '@proj/lib-name',
projectRoot: 'shared/lib-name',
projectNameAndRootFormat: 'as-provided',
});
});
it('should use a scoped package name as the project name and import path when format is "as-provided"', async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: '@scope/libName',
@ -514,6 +577,27 @@ describe('determineProjectNameAndRootOptions', () => {
});
});
it(`should handle window's style paths correctly when format is "derived"`, async () => {
const result = await determineProjectNameAndRootOptions(tree, {
name: 'libName',
directory: 'shared\\sub-dir',
projectType: 'library',
projectNameAndRootFormat: 'derived',
callingGenerator: '',
});
expect(result).toStrictEqual({
projectName: 'shared-sub-dir-lib-name',
names: {
projectSimpleName: 'lib-name',
projectFileName: 'shared-sub-dir-lib-name',
},
importPath: '@proj/shared/sub-dir/lib-name',
projectRoot: 'libs/shared/sub-dir/lib-name',
projectNameAndRootFormat: 'derived',
});
});
it('should throw when using a scoped package name as the project name and format is derived', async () => {
await expect(
determineProjectNameAndRootOptions(tree, {

7
packages/devkit/src/generators/project-name-and-root-utils.ts
View File

@ -8,7 +8,8 @@ import {
} from '../utils/get-workspace-layout';
import { names } from '../utils/names';
const { joinPathFragments, readJson, readNxJson, updateNxJson } = requireNx();
const { joinPathFragments, normalizePath, readJson, readNxJson, updateNxJson } =
requireNx();
export type ProjectNameAndRootFormat = 'as-provided' | 'derived';
export type ProjectGenerationOptions = {
@ -169,7 +170,9 @@ function getProjectNameAndRootFormats(
options: ProjectGenerationOptions
): ProjectNameAndRootFormats {
const name = names(options.name).fileName;
const directory = options.directory?.replace(/^\.?\//, '');
const directory = options.directory
? normalizePath(options.directory.replace(/^\.?\//, ''))
: undefined;
const asProvidedProjectName = name;
const asProvidedProjectDirectory = directory

8
packages/react/generators.json
View File

@ -114,7 +114,7 @@
},
"application": {
"factory": "./src/generators/application/application#applicationGenerator",
"factory": "./src/generators/application/application#applicationGeneratorInternal",
"schema": "./src/generators/application/schema.json",
"aliases": ["app"],
"x-type": "application",
@ -122,7 +122,7 @@
},
"library": {
"factory": "./src/generators/library/library#libraryGenerator",
"factory": "./src/generators/library/library#libraryGeneratorInternal",
"schema": "./src/generators/library/schema.json",
"aliases": ["lib"],
"x-type": "library",
@ -179,14 +179,14 @@
},
"host": {
"factory": "./src/generators/host/host#hostGenerator",
"factory": "./src/generators/host/host#hostGeneratorInternal",
"schema": "./src/generators/host/schema.json",
"x-type": "application",
"description": "Generate a host react application"
},
"remote": {
"factory": "./src/generators/remote/remote#remoteGenerator",
"factory": "./src/generators/remote/remote#remoteGeneratorInternal",
"schema": "./src/generators/remote/schema.json",
"x-type": "application",
"description": "Generate a remote react application"

3
packages/react/src/generators/application/application.spec.ts
View File

@ -284,7 +284,8 @@ describe('app', () => {
appTree.exists('apps/my-dir/my-app-e2e/src/example.spec.ts')
).toBeTruthy();
expect(
readProjectConfiguration(appTree, 'my-app-e2e')?.targets?.e2e?.executor
readProjectConfiguration(appTree, 'my-dir-my-app-e2e')?.targets?.e2e
?.executor
).toEqual('@nx/playwright:playwright');
});
});

12
packages/react/src/generators/application/application.ts
View File

@ -85,10 +85,20 @@ async function addLinting(host: Tree, options: NormalizedSchema) {
export async function applicationGenerator(
host: Tree,
schema: Schema
): Promise<GeneratorCallback> {
return await applicationGeneratorInternal(host, {
projectNameAndRootFormat: 'derived',
...schema,
});
}
export async function applicationGeneratorInternal(
host: Tree,
schema: Schema
): Promise<GeneratorCallback> {
const tasks = [];
const options = normalizeOptions(host, schema);
const options = await normalizeOptions(host, schema);
showPossibleWarnings(host, options);
const initTask = await reactInitGenerator(host, {

4
packages/react/src/generators/application/lib/add-e2e.ts
View File

@ -29,7 +29,9 @@ export async function addE2e(
return await cypressProjectGenerator(tree, {
...options,
name: options.e2eProjectName,
directory: options.directory,
directory: options.e2eProjectRoot,
// the name and root are already normalized, instruct the generator to use them as is
projectNameAndRootFormat: 'as-provided',
project: options.projectName,
bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
skipFormat: true,

60
packages/react/src/generators/application/lib/normalize-options.ts
View File

@ -1,13 +1,7 @@
import { NormalizedSchema, Schema } from '../schema';
import { Tree, extractLayoutDirectory, names } from '@nx/devkit';
import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
import { assertValidStyle } from '../../../utils/assertion';
import {
extractLayoutDirectory,
getWorkspaceLayout,
joinPathFragments,
names,
normalizePath,
Tree,
} from '@nx/devkit';
import { NormalizedSchema, Schema } from '../schema';
import { findFreePort } from './find-free-port';
export function normalizeDirectory(options: Schema) {
@ -22,24 +16,40 @@ export function normalizeProjectName(options: Schema) {
return normalizeDirectory(options).replace(new RegExp('/', 'g'), '-');
}
export function normalizeOptions<T extends Schema = Schema>(
export async function normalizeOptions<T extends Schema = Schema>(
host: Tree,
options: Schema
): NormalizedSchema<T> {
const appDirectory = normalizeDirectory(options);
const appProjectName = normalizeProjectName(options);
const e2eProjectName = options.rootProject
? 'e2e'
: `${names(options.name).fileName}-e2e`;
options: Schema,
callingGenerator = '@nx/react:application'
): Promise<NormalizedSchema<T>> {
const {
projectName: appProjectName,
projectRoot: appProjectRoot,
projectNameAndRootFormat,
} = await determineProjectNameAndRootOptions(host, {
name: options.name,
projectType: 'application',
directory: options.directory,
projectNameAndRootFormat: options.projectNameAndRootFormat,
rootProject: options.rootProject,
callingGenerator,
});
options.rootProject = appProjectRoot === '.';
options.projectNameAndRootFormat = projectNameAndRootFormat;
const { layoutDirectory } = extractLayoutDirectory(options.directory);
const appsDir = layoutDirectory ?? getWorkspaceLayout(host).appsDir;
const appProjectRoot = options.rootProject
? '.'
: normalizePath(`${appsDir}/${appDirectory}`);
const e2eProjectRoot = options.rootProject
? 'e2e'
: joinPathFragments(appsDir, `${appDirectory}-e2e`);
let e2eProjectName = 'e2e';
let e2eProjectRoot = 'e2e';
if (!options.rootProject) {
const projectNameAndRoot = await determineProjectNameAndRootOptions(host, {
name: `${options.name}-e2e`,
projectType: 'application',
directory: options.directory,
projectNameAndRootFormat: options.projectNameAndRootFormat,
rootProject: options.rootProject,
callingGenerator,
});
e2eProjectName = projectNameAndRoot.projectName;
e2eProjectRoot = projectNameAndRoot.projectRoot;
}
const parsedTags = options.tags
? options.tags.split(',').map((s) => s.trim())

6
packages/react/src/generators/application/schema.d.ts vendored
View File

@ -1,11 +1,13 @@
import { Linter } from '@nx/linter';
import { SupportedStyles } from '../../../typings/style';
import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
import type { Linter } from '@nx/linter';
import type { SupportedStyles } from '../../../typings/style';
export interface Schema {
name: string;
style: SupportedStyles;
skipFormat?: boolean;
directory?: string;
projectNameAndRootFormat?: ProjectNameAndRootFormat;
tags?: string;
unitTestRunner?: 'jest' | 'vitest' | 'none';
inSourceTests?: boolean;

7
packages/react/src/generators/application/schema.json
View File

@ -28,7 +28,7 @@
"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.",
@ -36,6 +36,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",

13
packages/react/src/generators/host/host.ts
View File

@ -21,8 +21,19 @@ import setupSsrGenerator from '../setup-ssr/setup-ssr';
import { setupSsrForHost } from './lib/setup-ssr-for-host';
export async function hostGenerator(host: Tree, schema: Schema) {
return hostGeneratorInternal(host, {
projectNameAndRootFormat: 'derived',
...schema,
});
}
export async function hostGeneratorInternal(host: Tree, schema: Schema) {
const tasks: GeneratorCallback[] = [];
const options = normalizeOptions<Schema>(host, schema);
const options = await normalizeOptions<Schema>(
host,
schema,
'@nx/react:host'
);
const initTask = await applicationGenerator(host, {
...options,

6
packages/react/src/generators/host/schema.d.ts vendored
View File

@ -1,11 +1,13 @@
import { Linter } from '@nx/linter';
import { SupportedStyles } from '../../../typings';
import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
import type { Linter } from '@nx/linter';
import type { SupportedStyles } from '../../../typings';
export interface Schema {
classComponent?: boolean;
compiler?: 'babel' | 'swc';
devServerPort?: number;
directory?: string;
projectNameAndRootFormat?: ProjectNameAndRootFormat;
e2eTestRunner: 'cypress' | 'none';
globalCss?: boolean;
js?: boolean;

7
packages/react/src/generators/host/schema.json
View File

@ -14,7 +14,7 @@
"index": 0
},
"x-prompt": "What name would you like to use as the host application?",
"pattern": "^[a-zA-Z].*$",
"pattern": "^[a-zA-Z][^:]*$",
"x-priority": "important"
},
"directory": {
@ -23,6 +23,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",

7
packages/react/src/generators/library/lib/add-rollup-build-target.ts
View File

@ -2,7 +2,6 @@ import { Tree } from 'nx/src/generators/tree';
import {
addDependenciesToPackageJson,
ensurePackage,
getWorkspaceLayout,
joinPathFragments,
readProjectConfiguration,
updateProjectConfiguration,
@ -37,7 +36,6 @@ export async function addRollupBuildTarget(
const { targets } = readProjectConfiguration(host, options.name);
const { libsDir } = getWorkspaceLayout(host);
const external: string[] = ['react', 'react-dom'];
if (options.style === '@emotion/styled') {
@ -50,10 +48,7 @@ export async function addRollupBuildTarget(
executor: '@nx/rollup:rollup',
outputs: ['{options.outputPath}'],
options: {
outputPath:
libsDir !== '.'
? `dist/${libsDir}/${options.projectDirectory}`
: `dist/${options.projectDirectory}`,
outputPath: joinPathFragments('dist', options.projectRoot),
tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
project: `${options.projectRoot}/package.json`,
entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),

18
packages/react/src/generators/library/lib/normalize-options.spec.ts
View File

@ -11,7 +11,7 @@ describe('normalizeOptions', () => {
});
it('should set unitTestRunner=jest and bundler=none by default', async () => {
const options = normalizeOptions(tree, {
const options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -27,7 +27,7 @@ describe('normalizeOptions', () => {
});
it('should set buildable to true when bundler is not "none"', async () => {
let options = normalizeOptions(tree, {
let options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -39,7 +39,7 @@ describe('normalizeOptions', () => {
bundler: 'rollup',
});
options = normalizeOptions(tree, {
options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -53,7 +53,7 @@ describe('normalizeOptions', () => {
});
it('should set unitTestRunner=vitest by default when bundler is vite', async () => {
const options = normalizeOptions(tree, {
const options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -70,7 +70,7 @@ describe('normalizeOptions', () => {
});
it('should set maintain unitTestRunner when bundler is vite', async () => {
const options = normalizeOptions(tree, {
const options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -86,8 +86,8 @@ describe('normalizeOptions', () => {
});
});
it('should set bundler to rollup if buildable is true not no bundler is passed', () => {
const options = normalizeOptions(tree, {
it('should set bundler to rollup if buildable is true not no bundler is passed', async () => {
const options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,
@ -102,8 +102,8 @@ describe('normalizeOptions', () => {
});
});
it('should set bundler to rollup if buildable is true and bundler is none ', () => {
const options = normalizeOptions(tree, {
it('should set bundler to rollup if buildable is true and bundler is none ', async () => {
const options = await normalizeOptions(tree, {
name: 'test',
style: 'css',
linter: Linter.None,

53
packages/react/src/generators/library/lib/normalize-options.ts
View File

@ -1,43 +1,34 @@
import {
extractLayoutDirectory,
getProjects,
getWorkspaceLayout,
joinPathFragments,
logger,
names,
normalizePath,
Tree,
} from '@nx/devkit';
import { getImportPath } from '@nx/js/src/utils/get-import-path';
import { getProjects, logger, normalizePath, Tree } from '@nx/devkit';
import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
import { assertValidStyle } from '../../../utils/assertion';
import { NormalizedSchema, Schema } from '../schema';
export function normalizeOptions(
export async function normalizeOptions(
host: Tree,
options: Schema
): NormalizedSchema {
const name = names(options.name).fileName;
const { projectDirectory, layoutDirectory } = extractLayoutDirectory(
options.directory
);
const fullProjectDirectory = projectDirectory
? `${names(projectDirectory).fileName}/${name}`
: name;
): Promise<NormalizedSchema> {
const {
projectName,
names: projectNames,
projectRoot,
importPath,
} = await determineProjectNameAndRootOptions(host, {
name: options.name,
projectType: 'library',
directory: options.directory,
importPath: options.importPath,
projectNameAndRootFormat: options.projectNameAndRootFormat,
callingGenerator: '@nx/react:library',
});
const projectName = fullProjectDirectory.replace(new RegExp('/', 'g'), '-');
const fileName = options.simpleName ? name : projectName;
const { libsDir: defaultLibsDir } = getWorkspaceLayout(host);
const libsDir = layoutDirectory ?? defaultLibsDir;
const projectRoot = joinPathFragments(libsDir, fullProjectDirectory);
const fileName = options.simpleName
? projectNames.projectSimpleName
: projectNames.projectFileName;
const parsedTags = options.tags
? options.tags.split(',').map((s) => s.trim())
: [];
const importPath =
options.importPath || getImportPath(host, fullProjectDirectory);
let bundler = options.bundler ?? 'none';
if (bundler === 'none') {
@ -60,13 +51,11 @@ export function normalizeOptions(
compiler: options.compiler ?? 'babel',
bundler,
fileName,
routePath: `/${name}`,
routePath: `/${projectNames.projectSimpleName}`,
name: projectName,
projectRoot,
projectDirectory: fullProjectDirectory,
parsedTags,
importPath,
libsDir,
} as NormalizedSchema;
// Libraries with a bundler or is publishable must also be buildable.

3
packages/react/src/generators/library/lib/update-app-routes.ts
View File

@ -17,7 +17,6 @@ import { addInitialRoutes } from '../../../utils/ast-utils';
import { maybeJs } from './maybe-js';
import { reactRouterDomVersion } from '../../../utils/versions';
import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
import { getImportPath } from '@nx/js/src/utils/get-import-path';
let tsModule: typeof import('typescript');
@ -82,7 +81,7 @@ export function updateAppRoutes(host: Tree, options: NormalizedSchema) {
addRoute(appComponentPath, componentSource, {
routePath: options.routePath,
componentName: names(options.name).className,
moduleName: getImportPath(host, options.projectDirectory),
moduleName: options.importPath,
})
);
host.write(appComponentPath, changes);

9
packages/react/src/generators/library/library.ts
View File

@ -27,9 +27,16 @@ import { installCommonDependencies } from './lib/install-common-dependencies';
import { setDefaults } from './lib/set-defaults';
export async function libraryGenerator(host: Tree, schema: Schema) {
return await libraryGeneratorInternal(host, {
projectNameAndRootFormat: 'derived',
...schema,
});
}
export async function libraryGeneratorInternal(host: Tree, schema: Schema) {
const tasks: GeneratorCallback[] = [];
const options = normalizeOptions(host, schema);
const options = await normalizeOptions(host, schema);
if (options.publishable === true && !schema.importPath) {
throw new Error(
`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`

6
packages/react/src/generators/library/schema.d.ts vendored
View File

@ -1,5 +1,6 @@
import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
import type { Linter } from '@nx/linter';
import { SupportedStyles } from '../../../typings/style';
import type { SupportedStyles } from '../../../typings/style';
export interface Schema {
appProject?: string;
@ -8,6 +9,7 @@ export interface Schema {
compiler?: 'babel' | 'swc';
component?: boolean;
directory?: string;
projectNameAndRootFormat?: ProjectNameAndRootFormat;
globalCss?: boolean;
importPath?: string;
inSourceTests?: boolean;
@ -35,10 +37,8 @@ export interface NormalizedSchema extends Schema {
fileName: string;
projectRoot: string;
routePath: string;
projectDirectory: string;
parsedTags: string[];
appMain?: string;
appSourceRoot?: string;
libsDir?: string;
unitTestRunner: 'jest' | 'vitest' | 'none';
}

7
packages/react/src/generators/library/schema.json
View File

@ -24,7 +24,7 @@
"index": 0
},
"x-prompt": "What name would you like to use for the library?",
"pattern": "^[a-zA-Z].*$",
"pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
"x-priority": "important"
},
"directory": {
@ -33,6 +33,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",

13
packages/react/src/generators/remote/remote.ts
View File

@ -39,8 +39,19 @@ export function addModuleFederationFiles(
}
export async function remoteGenerator(host: Tree, schema: Schema) {
return await remoteGeneratorInternal(host, {
projectNameAndRootFormat: 'derived',
...schema,
});
}
export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
const tasks: GeneratorCallback[] = [];
const options = normalizeOptions<Schema>(host, schema);
const options = await normalizeOptions<Schema>(
host,
schema,
'@nx/react:remote'
);
const initAppTask = await applicationGenerator(host, {
...options,
// Only webpack works with module federation for now.

7
packages/react/src/generators/remote/schema.d.ts vendored
View File

@ -1,12 +1,13 @@
import { Linter } from '@nx/linter';
import { SupportedStyles } from '../../../typings';
import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
import type { Linter } from '@nx/linter';
import type { SupportedStyles } from '../../../typings';
export interface Schema {
classComponent?: boolean;
compiler?: 'babel' | 'swc';
devServerPort?: number;
directory?: string;
projectNameAndRootFormat?: ProjectNameAndRootFormat;
e2eTestRunner: 'cypress' | 'none';
globalCss?: boolean;
host?: string;

7
packages/react/src/generators/remote/schema.json
View File

@ -14,7 +14,7 @@
"index": 0
},
"x-prompt": "What name would you like to use as the remote application?",
"pattern": "^[a-zA-Z].*$",
"pattern": "^[a-zA-Z][^:]*$",
"x-priority": "important"
},
"directory": {
@ -23,6 +23,11 @@
"alias": "dir",
"x-priority": "important"
},
"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",