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

feat(js): do not generate root babel.config.json for babel projects (#17289)

Browse Source
This commit is contained in:
Jack Hsu 2023-06-06 15:45:33 -04:00 committed by GitHub
parent 5c7db06508
commit 08339ee49f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 476 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/generated/packages/express/generators/application.json
View File

@ -50,10 +50,16 @@
"type": "string",
"description": "Frontend project that needs to access this application. This sets up proxy configuration."
},
"swcJest": {
"type": "boolean",
"description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
"default": false
},
"babelJest": {
"type": "boolean",
"description": "Use `babel` instead `ts-jest`.",
"default": false
"default": false,
"x-deprecated": "Use --swcJest instead for faster compilation"
},
"pascalCaseFiles": {
"type": "boolean",

10
docs/generated/packages/node/generators/application.json
View File

@ -54,10 +54,16 @@
"description": "Frontend project that needs to access this application. This sets up proxy configuration.",
"x-priority": "important"
},
"swcJest": {
"type": "boolean",
"description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
"default": false
},
"babelJest": {
"type": "boolean",
"description": "Use `babel` instead of `ts-jest`.",
"default": false
"description": "Use `babel` instead `ts-jest`.",
"default": false,
"x-deprecated": "Use --swcJest instead for faster compilation"
},
"pascalCaseFiles": {
"type": "boolean",

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

@ -92,8 +92,8 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
"skipNxJson": {
"description": "Skip updating `nx.json` with default options based on values provided to this app.",
"type": "boolean",
"default": false,
"x-priority": "internal"

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

@ -73,7 +73,7 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"skipNxJson": {
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
"type": "boolean",
"default": false,

5
docs/generated/packages/react/generators/init.json
View File

@ -31,11 +31,6 @@
"type": "boolean",
"default": false
},
"skipBabelConfig": {
"description": "Do not generate a root babel.config.json (if babel is not needed).",
"type": "boolean",
"default": false
},
"skipHelperLibs": {
"description": "Do not install tslib.",
"type": "boolean",

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

@ -78,7 +78,7 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"skipNxJson": {
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
"type": "boolean",
"default": false,

4
docs/generated/packages/web/generators/application.json
View File

@ -43,8 +43,8 @@
"compiler": {
"type": "string",
"description": "The compiler to use",
"enum": ["babel", "swc"],
"default": "babel",
"enum": ["swc", "babel"],
"default": "swc",
"x-priority": "important"
},
"bundler": {

5
docs/generated/packages/web/generators/init.json
View File

@ -37,11 +37,6 @@
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipBabelConfig": {
"description": "Do not generate a root babel.config.json (if babel is not needed).",
"type": "boolean",
"default": false
}
},
"required": [],

2
docs/generated/packages/webpack/generators/webpack-project.json
View File

@ -21,7 +21,7 @@
"type": "string",
"enum": ["babel", "swc", "tsc"],
"description": "The compiler to use to build source.",
"default": "babel"
"default": "swc"
},
"main": {
"type": "string",

63
e2e/web/src/web.test.ts
View File

@ -7,7 +7,6 @@ import {
killPorts,
newProject,
readFile,
removeFile,
rmDist,
runCLI,
runCLIAsync,
@ -100,10 +99,10 @@ describe('Web Components Applications', () => {
checkFilesExist(`dist/libs/${libName}/_should_keep.txt`);
}, 120000);
it('should emit decorator metadata when it is enabled in tsconfig', async () => {
it('should emit decorator metadata when --compiler=babel and it is enabled in tsconfig', async () => {
const appName = uniq('app');
runCLI(
`generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
`generate @nx/web:app ${appName} --bundler=webpack --compiler=babel --no-interactive`
);
updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
@ -155,6 +154,48 @@ describe('Web Components Applications', () => {
);
}, 120000);
it('should emit decorator metadata when using --compiler=swc', async () => {
const appName = uniq('app');
runCLI(
`generate @nx/web:app ${appName} --bundler=webpack --compiler=swc --no-interactive`
);
updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
const newContent = `${content}
function enumerable(value: boolean) {
return function (
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
descriptor.enumerable = value;
};
}
function sealed(target: any) {
return target;
}
@sealed
class Foo {
@enumerable(false) bar() {}
}
`;
return newContent;
});
updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
const newContent = `${content}
// bust babel and nx cache
`;
return newContent;
});
runCLI(`build ${appName} --outputHashing none`);
expect(readFile(`dist/apps/${appName}/main.js`)).toMatch(
/Foo=__decorate\(\[sealed\],Foo\)/
);
}, 120000);
it('should support custom webpackConfig option', async () => {
const appName = uniq('app');
runCLI(
@ -257,7 +298,7 @@ describe('CLI - Environment Variables', () => {
`;
runCLI(
`generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
`generate @nx/web:app ${appName} --bundler=webpack --no-interactive --compiler=babel`
);
const content = readFile(main);
@ -282,7 +323,7 @@ describe('CLI - Environment Variables', () => {
const newCode2 = `const envVars = [process.env.NODE_ENV, process.env.NX_BUILD, process.env.NX_API, process.env.NX_WS_BASE, process.env.NX_WS_ENV_LOCAL, process.env.NX_WS_LOCAL_ENV, process.env.NX_APP_BASE, process.env.NX_APP_ENV_LOCAL, process.env.NX_APP_LOCAL_ENV, process.env.NX_SHARED_ENV];`;
runCLI(
`generate @nx/web:app ${appName2} --bundler=webpack --no-interactive`
`generate @nx/web:app ${appName2} --bundler=webpack --no-interactive --compiler=babel`
);
const content2 = readFile(main2);
@ -401,16 +442,16 @@ describe('index.html interpolation', () => {
const srcPath = `apps/${appName}/src`;
const indexPath = `${srcPath}/index.html`;
const indexContent = `<!DOCTYPE html>
<html lang="en">
<html lang='en'>
<head>
<meta charset="utf-8" />
<meta charset='utf-8' />
<title>BestReactApp</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<base href='/' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' type='image/x-icon' href='favicon.ico' />
</head>
<body>
<div id="root"></div>
<div id='root'></div>
<div>Nx Variable: %NX_VARIABLE%</div>
<div>Some other variable: %SOME_OTHER_VARIABLE%</div>
<div>Deploy Url: %DEPLOY_URL%</div>

2
packages/express/src/generators/application/schema.d.ts vendored
View File

@ -10,6 +10,8 @@ export interface Schema {
tags?: string;
linter: Linter;
frontendProject?: string;
swcJest?: boolean;
/** @deprecated use `swcJest` instead */
babelJest?: boolean;
js: boolean;
pascalCaseFiles: boolean;

8
packages/express/src/generators/application/schema.json
View File

@ -50,10 +50,16 @@
"type": "string",
"description": "Frontend project that needs to access this application. This sets up proxy configuration."
},
"swcJest": {
"type": "boolean",
"description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
"default": false
},
"babelJest": {
"type": "boolean",
"description": "Use `babel` instead `ts-jest`.",
"default": false
"default": false,
"x-deprecated": "Use --swcJest instead for faster compilation"
},
"pascalCaseFiles": {
"type": "boolean",

7
packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap
View File

@ -8,7 +8,12 @@ export default {
transform: {
'^.+\\\\.[tj]sx?$': [
'@swc/jest',
{ jsc: { transform: { react: { runtime: 'automatic' } } } },
{
jsc: {
parser: { syntax: 'typescript', tsx: true },
transform: { react: { runtime: 'automatic' } },
},
},
],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],

9
packages/jest/src/generators/jest-project/jest-project.spec.ts
View File

@ -60,15 +60,6 @@ describe('jestProject', () => {
expect(tree.read('libs/lib1/jest.config.ts', 'utf-8')).toMatchSnapshot();
});
it('should generate files w/babel-jest', async () => {
await jestProjectGenerator(tree, {
...defaultOptions,
project: 'lib1',
babelJest: true,
} as JestProjectSchema);
expect(tree.exists('babel.config.json')).toBeTruthy();
});
it('should alter project configuration', async () => {
await jestProjectGenerator(tree, {
...defaultOptions,

11
packages/jest/src/generators/jest-project/lib/create-files.ts
View File

@ -21,7 +21,7 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
transformer = '@swc/jest';
if (options.supportTsx) {
transformerOptions =
"{ jsc: { transform: { react: { runtime: 'automatic' } } } }";
"{ jsc: { parser: { syntax: 'typescript', tsx: true }, transform: { react: { runtime: 'automatic' } } } }";
}
} else {
transformer = 'ts-jest';
@ -48,15 +48,6 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
tree.delete(join(projectConfig.root, './src/test-setup.ts'));
}
if (options.babelJest && !tree.exists('babel.config.json')) {
tree.write(
'babel.config.json',
JSON.stringify({
babelrcRoots: ['*'],
})
);
}
if (options.js) {
tree.rename(
join(projectConfig.root, 'jest.config.ts'),

12
packages/js/src/generators/library/library.ts
View File

@ -91,10 +91,6 @@ export async function projectGenerator(
});
tasks.push(viteTask);
}
if (options.bundler === 'rollup') {
ensureBabelRootConfigExists(tree);
}
if (options.linter !== 'none') {
const lintCallback = await addLint(tree, options);
tasks.push(lintCallback);
@ -583,14 +579,6 @@ function getBuildExecutor(bundler: Bundler) {
}
}
function ensureBabelRootConfigExists(tree: Tree) {
if (tree.exists('babel.config.json')) return;
writeJson(tree, 'babel.config.json', {
babelrcRoots: ['*'],
});
}
function getOutputPath(options: NormalizedSchema, destinationDir?: string) {
const parts = ['dist'];
if (destinationDir) {

3
packages/js/src/utils/add-babel-inputs.ts
View File

@ -1,5 +1,4 @@
import {
formatFiles,
joinPathFragments,
readNxJson,
Tree,
@ -7,6 +6,8 @@ import {
writeJson,
} from '@nx/devkit';
/** @deprecated Do not use this function as the root babel.config.json file is no longer needed */
// TODO(jack): Remove This in Nx 17 once we don't need to support Nx 15 anymore. Currently this function is used in v15 migrations.
export function addBabelInputs(tree: Tree) {
const nxJson = readNxJson(tree);
let globalBabelFile = ['babel.config.js', 'babel.config.json'].find((file) =>

1
packages/next/src/generators/init/init.ts
View File

@ -65,7 +65,6 @@ export async function nextInitGenerator(host: Tree, schema: InitSchema) {
const reactTask = await reactInitGenerator(host, {
...schema,
skipFormat: true,
skipBabelConfig: true,
});
tasks.push(reactTask);

61
packages/next/src/generators/library/library.spec.ts
View File

@ -13,67 +13,6 @@ describe('next library', () => {
let mockedInstalledCypressVersion: jest.Mock<
ReturnType<typeof installedCypressVersion>
> = installedCypressVersion as never;
it('should use "@nx/next/babel" preset in babelrc', async () => {
const baseOptions: Schema = {
name: '',
linter: Linter.EsLint,
skipFormat: false,
skipTsConfig: false,
unitTestRunner: 'jest',
style: 'css',
component: true,
};
const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
await libraryGenerator(appTree, {
...baseOptions,
name: 'myLib',
});
await libraryGenerator(appTree, {
...baseOptions,
name: 'myLib2',
style: '@emotion/styled',
});
await libraryGenerator(appTree, {
...baseOptions,
name: 'myLib-styled-jsx',
style: 'styled-jsx',
});
await libraryGenerator(appTree, {
...baseOptions,
name: 'myLib3',
directory: 'myDir',
});
expect(readJson(appTree, 'libs/my-lib/.babelrc')).toEqual({
presets: ['@nx/next/babel'],
plugins: [],
});
expect(readJson(appTree, 'libs/my-lib2/.babelrc')).toEqual({
presets: [
[
'@nx/next/babel',
{
'preset-react': {
runtime: 'automatic',
importSource: '@emotion/react',
},
},
],
],
plugins: ['@emotion/babel-plugin'],
});
expect(readJson(appTree, 'libs/my-lib-styled-jsx/.babelrc')).toEqual({
presets: ['@nx/next/babel'],
plugins: [],
});
expect(readJson(appTree, 'libs/my-dir/my-lib3/.babelrc')).toEqual({
presets: ['@nx/next/babel'],
plugins: [],
});
});
it('should use @nx/next images.d.ts file', async () => {
const baseOptions: Schema = {
name: '',

30
packages/next/src/generators/library/library.ts
View File

@ -71,36 +71,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
);
addTsConfigPath(host, `${options.importPath}/server`, [serverEntryPath]);
updateJson(
host,
joinPathFragments(options.projectRoot, '.babelrc'),
(json) => {
if (options.style === '@emotion/styled') {
json.presets = [
[
'@nx/next/babel',
{
'preset-react': {
runtime: 'automatic',
importSource: '@emotion/react',
},
},
],
];
} else if (options.style === 'styled-jsx') {
// next.js doesn't require the `styled-jsx/babel' plugin as it is already
// built-into the `next/babel` preset
json.presets = ['@nx/next/babel'];
json.plugins = (json.plugins || []).filter(
(x) => x !== 'styled-jsx/babel'
);
} else {
json.presets = ['@nx/next/babel'];
}
return json;
}
);
updateJson(
host,
joinPathFragments(options.projectRoot, 'tsconfig.json'),

29
packages/node/src/generators/application/application.spec.ts
View File

@ -343,7 +343,33 @@ describe('app', () => {
});
});
describe('--babelJest', () => {
describe('--swcJest', () => {
it('should use @swc/jest for jest', async () => {
await applicationGenerator(tree, {
name: 'myNodeApp',
tags: 'one,two',
swcJest: true,
} as Schema);
expect(tree.read(`my-node-app/jest.config.ts`, 'utf-8'))
.toMatchInlineSnapshot(`
"/* eslint-disable */
export default {
displayName: 'my-node-app',
preset: '../jest.preset.js',
testEnvironment: 'node',
transform: {
'^.+\\\\.[tj]s$': '@swc/jest',
},
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../coverage/my-node-app',
};
"
`);
});
});
describe('--babelJest (deprecated)', () => {
it('should use babel for jest', async () => {
await applicationGenerator(tree, {
name: 'myNodeApp',
@ -368,6 +394,7 @@ describe('app', () => {
`);
});
});
describe('--js flag', () => {
it('should generate js files instead of ts files', async () => {
await applicationGenerator(tree, {

2
packages/node/src/generators/application/application.ts
View File

@ -398,7 +398,7 @@ export async function applicationGenerator(tree: Tree, schema: Schema) {
skipSerializers: true,
supportTsx: options.js,
testEnvironment: 'node',
compiler: 'tsc',
compiler: options.swcJest ? 'swc' : 'tsc',
skipFormat: true,
});
tasks.push(jestTask);

2
packages/node/src/generators/application/schema.d.ts vendored
View File

@ -10,6 +10,8 @@ export interface Schema {
linter?: Linter;
tags?: string;
frontendProject?: string;
swcJest?: boolean;
/** @deprecated use `swcJest` instead */
babelJest?: boolean;
js?: boolean;
pascalCaseFiles?: boolean;

10
packages/node/src/generators/application/schema.json
View File

@ -54,10 +54,16 @@
"description": "Frontend project that needs to access this application. This sets up proxy configuration.",
"x-priority": "important"
},
"swcJest": {
"type": "boolean",
"description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
"default": false
},
"babelJest": {
"type": "boolean",
"description": "Use `babel` instead of `ts-jest`.",
"default": false
"description": "Use `babel` instead `ts-jest`.",
"default": false,
"x-deprecated": "Use --swcJest instead for faster compilation"
},
"pascalCaseFiles": {
"type": "boolean",

43
packages/react-native/src/generators/init/init.spec.ts
View File

@ -35,47 +35,4 @@ describe('init', () => {
expect(content).toMatch(/# React Native/);
expect(content).toMatch(/# Nested node_modules/);
});
describe('babel config', () => {
it('should create babel config if not present', async () => {
updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
json.namedInputs = {
sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
};
return json;
});
await reactNativeInitGenerator(tree, {
unitTestRunner: 'none',
e2eTestRunner: 'none',
});
expect(tree.exists('babel.config.json')).toBe(true);
const sharedGloabls = readJson<NxJsonConfiguration>(tree, 'nx.json')
.namedInputs.sharedGlobals;
expect(sharedGloabls).toContain('{workspaceRoot}/exiting-file.json');
expect(sharedGloabls).toContain('{workspaceRoot}/babel.config.json');
});
it('should not overwrite existing babel config', async () => {
tree.write('babel.config.json', '{ "preset": ["preset-awesome"] }');
await reactNativeInitGenerator(tree, {
unitTestRunner: 'none',
e2eTestRunner: 'none',
});
const existing = readJson(tree, 'babel.config.json');
expect(existing).toEqual({ preset: ['preset-awesome'] });
});
it('should not overwrite existing babel config (.js)', async () => {
tree.write('/babel.config.js', 'module.exports = () => {};');
await reactNativeInitGenerator(tree, {
unitTestRunner: 'none',
e2eTestRunner: 'none',
});
expect(tree.exists('babel.config.json')).toBe(false);
});
});
});

2
packages/react-native/src/generators/init/init.ts
View File

@ -10,7 +10,6 @@ import {
} from '@nx/devkit';
import { Schema } from './schema';
import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
import { jestInitGenerator } from '@nx/jest';
import { detoxInitGenerator } from '@nx/detox';
import { babelPresetReactVersion } from '@nx/react/src/utils/versions';
@ -41,7 +40,6 @@ import { addGitIgnoreEntry } from './lib/add-git-ignore-entry';
export async function reactNativeInitGenerator(host: Tree, schema: Schema) {
addGitIgnoreEntry(host);
await addBabelInputs(host);
const tasks: GeneratorCallback[] = [];
tasks.push(

104
packages/react/plugins/storybook/index.ts
View File

@ -1,4 +1,10 @@
import { ExecutorContext, logger, workspaceRoot } from '@nx/devkit';
import {
createProjectGraphAsync,
ExecutorContext,
logger,
ProjectGraphProjectNode,
workspaceRoot,
} from '@nx/devkit';
import { composePluginsSync } from '@nx/webpack/src/utils/config';
import { NormalizedWebpackExecutorOptions } from '@nx/webpack/src/executors/webpack/schema';
import { join } from 'path';
@ -10,6 +16,7 @@ import {
} from 'webpack';
import { mergePlugins } from './merge-plugins';
import { withReact } from '../with-react';
import { existsSync } from 'fs';
// This is shamelessly taken from CRA and modified for NX use
// https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
@ -58,6 +65,90 @@ export const core = (prev, options) => ({
disableWebpackDefaults: true,
});
interface NxProjectData {
workspaceRoot: string;
projectRoot: string;
sourceRoot: string;
projectNode?: ProjectGraphProjectNode;
}
const getProjectData = async (
storybookOptions: any
): Promise<NxProjectData> => {
const fallbackData = {
workspaceRoot: storybookOptions.configDir,
projectRoot: '',
sourceRoot: '',
};
// Edge-case: not running from Nx
if (!process.env.NX_WORKSPACE_ROOT) return fallbackData;
const projectGraph = await createProjectGraphAsync();
const projectNode = projectGraph.nodes[process.env.NX_TASK_TARGET_PROJECT];
return projectNode
? {
workspaceRoot: process.env.NX_WORKSPACE_ROOT,
projectRoot: projectNode.data.root,
sourceRoot: projectNode.data.sourceRoot,
projectNode,
}
: // Edge-case: missing project node
fallbackData;
};
const fixBabelConfigurationIfNeeded = (
webpackConfig: Configuration,
projectData: NxProjectData
): void => {
if (!projectData.projectNode) return;
const isUsingBabelUpwardRootMode = Object.keys(
projectData.projectNode.data.targets
).find((k) => {
const targetConfig = projectData.projectNode.data.targets[k];
return (
(targetConfig.executor === '@nx/webpack:webpack' ||
targetConfig.executor === '@nrwl/webpack:webpack') &&
targetConfig.options?.babelUpwardRootMode
);
});
if (isUsingBabelUpwardRootMode) return;
let babelrcPath: string;
for (const ext of ['', '.json', '.js', '.cjs', '.mjs', '.cts']) {
const candidate = join(
projectData.workspaceRoot,
projectData.projectRoot,
`.babelrc${ext}`
);
if (existsSync(candidate)) {
babelrcPath = candidate;
break;
}
}
// Unexpected setup, skip.
if (!babelrcPath) return;
let babelRuleItem;
for (const rule of webpackConfig.module.rules) {
if (typeof rule === 'string') continue;
if (!Array.isArray(rule.use)) continue;
for (const item of rule.use) {
if (typeof item !== 'string' && item['loader'].includes('babel-loader')) {
babelRuleItem = item;
break;
}
}
}
if (babelRuleItem) {
babelRuleItem.options.configFile = babelrcPath;
}
};
export const webpack = async (
storybookWebpackConfig: Configuration = {},
options: any
@ -78,12 +169,15 @@ export const webpack = async (
const { withNx, withWeb } = require('@nx/webpack');
const tsconfigPath = join(options.configDir, 'tsconfig.json');
const projectData = await getProjectData(options);
fixBabelConfigurationIfNeeded(storybookWebpackConfig, projectData);
const builderOptions: NormalizedWebpackExecutorOptions = {
...options,
root: options.configDir,
// These are blank because root is the absolute path to .storybook folder
projectRoot: '',
sourceRoot: '',
root: projectData.workspaceRoot,
projectRoot: projectData.projectRoot,
sourceRoot: projectData.sourceRoot,
fileReplacements: [],
sourceMap: true,
styles: options.styles ?? [],

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

@ -849,12 +849,12 @@ describe('app', () => {
).toBeUndefined();
});
describe('--skipWorkspaceJson', () => {
describe('--skipNxJson', () => {
it('should update workspace with defaults when --skipprojectsConfigurations=false', async () => {
await applicationGenerator(appTree, {
...schema,
style: 'styled-components',
skipWorkspaceJson: false,
skipNxJson: false,
});
const nxJson = readNxJson(appTree);

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

@ -39,6 +39,7 @@ import { installCommonDependencies } from './lib/install-common-dependencies';
import { extractTsConfigBase } from '../../utils/create-ts-config';
import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
import * as chalk from 'chalk';
import { showPossibleWarnings } from './lib/show-possible-warnings';
async function addLinting(host: Tree, options: NormalizedSchema) {
const tasks: GeneratorCallback[] = [];
@ -73,12 +74,7 @@ async function addLinting(host: Tree, options: NormalizedSchema) {
const installTask = await addDependenciesToPackageJson(
host,
extraEslintDependencies.dependencies,
{
...extraEslintDependencies.devDependencies,
...(options.compiler === 'swc'
? { 'swc-loader': swcLoaderVersion }
: {}),
}
extraEslintDependencies.devDependencies
);
const addSwcTask = addSwcDependencies(host);
tasks.push(installTask, addSwcTask);
@ -94,11 +90,11 @@ export async function applicationGenerator(
const tasks = [];
const options = normalizeOptions(host, schema);
showPossibleWarnings(host, options);
const initTask = await reactInitGenerator(host, {
...options,
skipFormat: true,
skipBabelConfig: options.bundler === 'vite',
skipHelperLibs: options.bundler === 'vite',
});

25
packages/react/src/generators/application/lib/install-common-dependencies.ts
View File

@ -1,8 +1,10 @@
import { addDependenciesToPackageJson, Tree } from '@nx/devkit';
import {
babelPresetReactVersion,
lessVersion,
sassVersion,
stylusVersion,
swcLoaderVersion,
} from '../../../utils/versions';
import { NormalizedSchema } from '../schema';
@ -10,26 +12,33 @@ export function installCommonDependencies(
host: Tree,
options: NormalizedSchema
) {
let devDependencies = null;
const devDependencies: Record<string, string> = {};
// Vite requires style preprocessors to be installed manually.
// `@nx/webpack` installs them automatically for now.
// TODO(jack): Once we clean up webpack we can remove this check
if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
switch (options.style) {
case 'scss':
devDependencies = { sass: sassVersion };
devDependencies['sass'] = sassVersion;
break;
case 'less':
devDependencies = { less: lessVersion };
devDependencies['less'] = lessVersion;
break;
case 'styl': // @TODO(17): deprecated, going to be removed in Nx 17
devDependencies = { stylus: stylusVersion };
devDependencies['stylus'] = stylusVersion;
break;
}
}
return devDependencies
? addDependenciesToPackageJson(host, {}, devDependencies)
: function noop() {};
if (options.bundler === 'webpack') {
if (options.compiler === 'swc') {
devDependencies['swc-loader'] = swcLoaderVersion;
} else if (options.compiler === 'babel') {
// babel-loader is currently included in @nx/webpack
// TODO(jack): Install babel-loader and other babel packages only as needed
devDependencies['@babel/preset-react'] = babelPresetReactVersion;
}
}
return addDependenciesToPackageJson(host, {}, devDependencies);
}

2
packages/react/src/generators/application/lib/set-defaults.ts
View File

@ -2,7 +2,7 @@ import { readNxJson, Tree, updateNxJson } from '@nx/devkit';
import { NormalizedSchema } from '../schema';
export function setDefaults(host: Tree, options: NormalizedSchema) {
if (options.skipWorkspaceJson) {
if (options.skipNxJson) {
return;
}

16
packages/react/src/generators/application/lib/show-possible-warnings.ts Normal file
View File

@ -0,0 +1,16 @@
import * as chalk from 'chalk';
import { logger, Tree } from '@nx/devkit';
import { NormalizedSchema, Schema } from '../schema';
export function showPossibleWarnings(
tree: Tree,
options: NormalizedSchema<Schema>
) {
if (options.style === 'styled-jsx' && options.compiler === 'swc') {
logger.warn(
`styled-jsx may not work with SWC. Try using ${chalk.bold(
'nx g @nx/react:app --compiler=babel'
)} instead.`
);
}
}

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

@ -14,7 +14,7 @@ export interface Schema {
pascalCaseFiles?: boolean;
classComponent?: boolean;
routing?: boolean;
skipWorkspaceJson?: boolean;
skipNxJson?: boolean;
js?: boolean;
globalCss?: boolean;
strict?: boolean;

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

@ -98,8 +98,8 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
"skipNxJson": {
"description": "Skip updating `nx.json` with default options based on values provided to this app.",
"type": "boolean",
"default": false,
"x-priority": "internal"

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

@ -15,7 +15,7 @@ export interface Schema {
remotes?: string[];
setParserOptionsProject?: boolean;
skipFormat?: boolean;
skipWorkspaceJson?: boolean;
skipNxJson?: boolean;
ssr?: boolean;
strict?: boolean;
style: SupportedStyles;

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

@ -79,7 +79,7 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"skipNxJson": {
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
"type": "boolean",
"default": false,

5
packages/react/src/generators/init/init.spec.ts
View File

@ -30,9 +30,4 @@ describe('init', () => {
await reactInitGenerator(tree, { ...schema, unitTestRunner: 'none' });
expect(tree.exists('jest.config.js')).toEqual(false);
});
it('should not add babel.config.json if skipBabelConfig is true', async () => {
await reactInitGenerator(tree, { ...schema, skipBabelConfig: true });
expect(tree.exists('babel.config.json')).toEqual(false);
});
});

35
packages/react/src/generators/init/init.ts
View File

@ -8,7 +8,6 @@ import {
runTasksInSerial,
Tree,
updateNxJson,
writeJson,
} from '@nx/devkit';
import { initGenerator as jsInitGenerator } from '@nx/js';
@ -65,25 +64,6 @@ function updateDependencies(host: Tree, schema: InitSchema) {
});
}
function initRootBabelConfig(tree: Tree, schema: InitSchema) {
if (tree.exists('/babel.config.json') || tree.exists('/babel.config.js')) {
return;
}
if (!schema.skipBabelConfig) {
writeJson(tree, '/babel.config.json', {
babelrcRoots: ['*'], // Make sure .babelrc files other than root can be loaded in a monorepo
});
}
const nxJson = readNxJson(tree);
if (nxJson.namedInputs?.sharedGlobals) {
nxJson.namedInputs.sharedGlobals.push('{workspaceRoot}/babel.config.json');
}
updateNxJson(tree, nxJson);
}
export async function reactInitGenerator(host: Tree, schema: InitSchema) {
const tasks: GeneratorCallback[] = [];
@ -106,21 +86,6 @@ export async function reactInitGenerator(host: Tree, schema: InitSchema) {
tasks.push(cypressTask);
}
if (!schema.skipPackageJson && !schema.skipBabelConfig) {
const installBabelTask = addDependenciesToPackageJson(
host,
{},
{
'@babel/preset-react': babelPresetReactVersion,
}
);
tasks.push(installBabelTask);
}
if (!schema.skipBabelConfig) {
initRootBabelConfig(host, schema);
}
if (!schema.skipPackageJson) {
const installTask = updateDependencies(host, schema);
tasks.push(installTask);

1
packages/react/src/generators/init/schema.d.ts vendored
View File

@ -1,7 +1,6 @@
export interface InitSchema {
unitTestRunner?: 'jest' | 'vitest' | 'none';
e2eTestRunner?: 'cypress' | 'none';
skipBabelConfig?: boolean;
skipFormat?: boolean;
skipPackageJson?: boolean;
skipHelperLibs?: boolean;

5
packages/react/src/generators/init/schema.json
View File

@ -28,11 +28,6 @@
"type": "boolean",
"default": false
},
"skipBabelConfig": {
"description": "Do not generate a root babel.config.json (if babel is not needed).",
"type": "boolean",
"default": false
},
"skipHelperLibs": {
"description": "Do not install tslib.",
"type": "boolean",

16
packages/react/src/generators/library/files/common/.babelrc__tmpl__
View File

@ -1,16 +0,0 @@
{
"presets": [
[
"@nx/react/babel", {
"runtime": "automatic",
"useBuiltIns": "usage"
<% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react"<% } %>
}
]
],
"plugins": [
<% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
<% if (style === 'styled-jsx') { %>"styled-jsx/babel"<% } %>
<% if (style === '@emotion/styled') { %>"@emotion/babel-plugin"<% } %>
]
}

30
packages/react/src/generators/library/lib/create-files.ts
View File

@ -5,6 +5,7 @@ import {
names,
offsetFromRoot,
toJS,
writeJson,
} from '@nx/devkit';
import { getRelativePathToRootTsConfig } from '@nx/js';
@ -38,10 +39,33 @@ export function createFiles(host: Tree, options: NormalizedSchema) {
options.projectRoot,
substitutions
);
if (host.exists(joinPathFragments(options.projectRoot, '.babelrc'))) {
host.delete(joinPathFragments(options.projectRoot, '.babelrc'));
}
if (options.compiler === 'babel') {
writeJson(host, joinPathFragments(options.projectRoot, '.babelrc'), {
presets: [
[
'@nx/react/babel',
{
runtime: 'automatic',
useBuiltIns: 'usage',
importSource:
options.style === '@emotion/styled'
? '@emotion/react'
: undefined,
},
],
],
plugins: [
options.style === 'styled-components'
? ['styled-components', { pure: true, ssr: true }]
: undefined,
options.style === 'styled-jsx' ? 'styled-jsx/babel' : undefined,
options.style === '@emotion/styled'
? '@emotion/babel-plugin'
: undefined,
].filter(Boolean),
});
}
if (!options.publishable && !options.buildable) {

9
packages/react/src/generators/library/lib/install-common-dependencies.ts
View File

@ -6,6 +6,7 @@ import {
} from '@nx/devkit';
import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
import {
babelPresetReactVersion,
lessVersion,
reactDomVersion,
reactVersion,
@ -50,6 +51,14 @@ export function installCommonDependencies(
if (options.compiler === 'swc') {
tasks.push(addSwcDependencies(host));
} else if (options.compiler === 'babel') {
tasks.push(
addDependenciesToPackageJson(
host,
{},
{ '@babel/preset-react': babelPresetReactVersion }
)
);
}
return runTasksInSerial(...tasks);

17
packages/react/src/generators/library/library.spec.ts
View File

@ -47,7 +47,6 @@ describe('lib', () => {
});
});
describe('not nested', () => {
it('should update project configuration', async () => {
await libraryGenerator(tree, defaultSchema);
const project = readProjectConfiguration(tree, 'my-lib');
@ -69,10 +68,7 @@ describe('lib', () => {
unitTestRunner: 'vitest',
});
const tsconfigApp = readJson(tree, 'libs/my-lib/tsconfig.lib.json');
expect(tsconfigApp.compilerOptions.types).toEqual([
'node',
'vite/client',
]);
expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']);
const tsconfigSpec = readJson(tree, 'libs/my-lib/tsconfig.spec.json');
expect(tsconfigSpec.compilerOptions.types).toEqual([
'vitest/globals',
@ -239,6 +235,17 @@ describe('lib', () => {
"['babel-jest', { presets: ['@nx/react/babel'] }]"
);
});
it('should add @babel/preset-react when using babel compiler', async () => {
await libraryGenerator(tree, {
...defaultSchema,
compiler: 'babel',
directory: 'myDir',
tags: 'one',
});
const packageJson = readJson(tree, 'package.json');
expect(packageJson.devDependencies['@babel/preset-react']).toBeDefined();
});
describe('nested', () => {

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

@ -43,7 +43,6 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
...options,
e2eTestRunner: 'none',
skipFormat: true,
skipBabelConfig: options.bundler === 'vite' || options.compiler === 'swc',
skipHelperLibs: options.bundler === 'vite',
});
tasks.push(initTask);

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

@ -17,7 +17,7 @@ export interface Schema {
routing?: boolean;
setParserOptionsProject?: boolean;
skipFormat: boolean;
skipWorkspaceJson?: boolean;
skipNxJson?: boolean;
ssr?: boolean;
strict?: boolean;
style: SupportedStyles;

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

@ -84,7 +84,7 @@
"default": false,
"x-priority": "internal"
},
"skipWorkspaceJson": {
"skipNxJson": {
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
"type": "boolean",
"default": false,

17
packages/rollup/src/generators/init/init.spec.ts
View File

@ -11,23 +11,6 @@ describe('rollupInitGenerator', () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
});
it('should support babel', async () => {
updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
json.namedInputs = {
sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
};
return json;
});
await rollupInitGenerator(tree, { compiler: 'babel' });
expect(tree.exists('babel.config.json'));
const sharedGlobals = readJson<NxJsonConfiguration>(tree, 'nx.json')
.namedInputs.sharedGlobals;
expect(sharedGlobals).toContain('{workspaceRoot}/exiting-file.json');
expect(sharedGlobals).toContain('{workspaceRoot}/babel.config.json');
});
it('should support swc', async () => {
await rollupInitGenerator(tree, { compiler: 'swc' });

4
packages/rollup/src/generators/init/init.ts
View File

@ -17,10 +17,6 @@ import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
export async function rollupInitGenerator(tree: Tree, schema: Schema) {
let task: GeneratorCallback;
if (schema.compiler === 'babel') {
addBabelInputs(tree);
}
if (schema.compiler === 'swc') {
task = addDependenciesToPackageJson(
tree,

2
packages/web/src/generators/application/application.ts
View File

@ -184,8 +184,6 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
const webTask = await webInitGenerator(host, {
...options,
skipFormat: true,
// Vite does not use babel by default
skipBabelConfig: options.bundler === 'vite',
});
tasks.push(webTask);

4
packages/web/src/generators/application/schema.json
View File

@ -46,8 +46,8 @@
"compiler": {
"type": "string",
"description": "The compiler to use",
"enum": ["babel", "swc"],
"default": "babel",
"enum": ["swc", "babel"],
"default": "swc",
"x-priority": "important"
},
"bundler": {

3
packages/web/src/generators/init/init.ts
View File

@ -8,8 +8,6 @@ import {
runTasksInSerial,
Tree,
} from '@nx/devkit';
import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
import { initGenerator as jsInitGenerator } from '@nx/js';
import {
nxVersion,
@ -65,7 +63,6 @@ export async function webInitGenerator(tree: Tree, schema: Schema) {
const installTask = updateDependencies(tree, schema);
tasks.push(installTask);
}
addBabelInputs(tree);
if (!schema.skipFormat) {
await formatFiles(tree);

1
packages/web/src/generators/init/schema.d.ts vendored
View File

@ -4,5 +4,4 @@ export interface Schema {
e2eTestRunner?: 'cypress' | 'none';
skipFormat?: boolean;
skipPackageJson?: boolean;
skipBabelConfig?: boolean;
}

5
packages/web/src/generators/init/schema.json
View File

@ -34,11 +34,6 @@
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipBabelConfig": {
"description": "Do not generate a root babel.config.json (if babel is not needed).",
"type": "boolean",
"default": false
}
},
"required": []

12
packages/webpack/src/executors/webpack/schema.d.ts vendored
View File

@ -70,28 +70,16 @@ export interface WebpackExecutorOptions {
webpackConfig?: string;
babelConfig?: string;
babelUpwardRootMode?: boolean;
// TODO(jack): Also deprecate these in schema.json once we have migration from executor options to webpack.config.js file.
/** @deprecated Moved to withWeb options from `@nx/webpack` */
baseHref?: string;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
/** @deprecated Moved to withWeb options from `@nx/webpack` */
deployUrl?: string;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
extractCss?: boolean;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
generateIndexHtml?: boolean;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
index?: string;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
postcssConfig?: string;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
scripts?: Array<ExtraEntryPointClass | string>;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
stylePreprocessorOptions?: any;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
styles?: Array<ExtraEntryPointClass | string>;
/** @deprecated Moved to withWeb options from `@nx/webpack` */
subresourceIntegrity?: boolean;
}

17
packages/webpack/src/generators/init/init.spec.ts
View File

@ -10,23 +10,6 @@ describe('webpackInitGenerator', () => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
});
it('should support babel', async () => {
updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
json.namedInputs = {
sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
};
return json;
});
await webpackInitGenerator(tree, { compiler: 'babel' });
expect(tree.exists('babel.config.json'));
const sharedGlobals = readJson<NxJsonConfiguration>(tree, 'nx.json')
.namedInputs.sharedGlobals;
expect(sharedGlobals).toContain('{workspaceRoot}/exiting-file.json');
expect(sharedGlobals).toContain('{workspaceRoot}/babel.config.json');
});
it('should support swc', async () => {
await webpackInitGenerator(tree, { compiler: 'swc' });

3
packages/webpack/src/generators/init/init.ts
View File

@ -22,9 +22,6 @@ import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
export async function webpackInitGenerator(tree: Tree, schema: Schema) {
const tasks: GeneratorCallback[] = [];
if (schema.compiler === 'babel') {
addBabelInputs(tree);
}
const devDependencies = {
'@nx/webpack': nxVersion,
};

2
packages/webpack/src/generators/webpack-project/schema.json
View File

@ -21,7 +21,7 @@
"type": "string",
"enum": ["babel", "swc", "tsc"],
"description": "The compiler to use to build source.",
"default": "babel"
"default": "swc"
},
"main": {
"type": "string",

12
packages/webpack/src/generators/webpack-project/webpack-project.ts
View File

@ -1,10 +1,11 @@
import type { ProjectConfiguration, Tree } from '@nx/devkit';
import type { Tree } from '@nx/devkit';
import {
convertNxGenerator,
formatFiles,
joinPathFragments,
readProjectConfiguration,
updateProjectConfiguration,
writeJson,
} from '@nx/devkit';
import { webpackInitGenerator } from '../init/init';
@ -58,7 +59,7 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
const buildOptions: WebpackExecutorOptions = {
target: options.target,
outputPath: joinPathFragments('dist', project.root),
compiler: options.compiler ?? 'babel',
compiler: options.compiler ?? 'swc',
main: options.main ?? joinPathFragments(project.root, 'src/main.ts'),
tsConfig:
options.tsConfig ?? joinPathFragments(project.root, 'tsconfig.app.json'),
@ -71,8 +72,11 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
if (options.babelConfig) {
buildOptions.babelConfig = options.babelConfig;
} else {
buildOptions.babelUpwardRootMode = true;
} else if (options.compiler === 'babel') {
// If no babel config file is provided then write a default one, otherwise build will fail.
writeJson(tree, joinPathFragments(project.root, '.babelrc'), {
presets: ['@nx/js/babel'],
});
}
if (options.target === 'web') {