From e776a20c55365247372b07c7fb2cfe44c0e34aa8 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Mon, 29 May 2023 14:01:15 -0400 Subject: [PATCH] feat(web): update Next.js, Web, and Node generators to not use Babel by default --- .../express/generators/application.json | 8 ++- .../packages/node/generators/application.json | 10 ++- .../react/generators/application.json | 8 +-- .../packages/react/generators/host.json | 4 +- .../packages/react/generators/library.json | 4 +- .../packages/react/generators/remote.json | 4 +- .../packages/web/generators/application.json | 4 +- e2e/web/src/web.test.ts | 63 +++++++++++++++---- .../src/generators/application/schema.d.ts | 2 + .../src/generators/application/schema.json | 8 ++- .../__snapshots__/jest-project.spec.ts.snap | 7 ++- .../jest-project/lib/create-files.ts | 2 +- .../src/generators/library/library.spec.ts | 61 ------------------ .../next/src/generators/library/library.ts | 30 --------- .../application/application.spec.ts | 29 ++++++++- .../src/generators/application/application.ts | 2 +- .../src/generators/application/schema.d.ts | 2 + .../src/generators/application/schema.json | 10 ++- .../application/application.spec.ts | 4 +- .../src/generators/application/application.ts | 2 + .../application/lib/set-defaults.ts | 2 +- .../application/lib/show-possible-warnings.ts | 16 +++++ .../src/generators/application/schema.d.ts | 2 +- .../src/generators/application/schema.json | 8 +-- .../react/src/generators/host/schema.d.ts | 2 +- .../react/src/generators/host/schema.json | 4 +- .../library/files/common/.babelrc__tmpl__ | 16 ----- .../generators/library/lib/create-files.ts | 30 ++++++++- .../react/src/generators/library/schema.json | 4 +- .../react/src/generators/remote/schema.d.ts | 2 +- .../react/src/generators/remote/schema.json | 4 +- .../src/generators/application/schema.json | 4 +- 32 files changed, 197 insertions(+), 161 deletions(-) create mode 100644 packages/react/src/generators/application/lib/show-possible-warnings.ts delete mode 100644 packages/react/src/generators/library/files/common/.babelrc__tmpl__ diff --git a/docs/generated/packages/express/generators/application.json b/docs/generated/packages/express/generators/application.json index 10336208f37f7f..f35f168da503c2 100644 --- a/docs/generated/packages/express/generators/application.json +++ b/docs/generated/packages/express/generators/application.json @@ -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", diff --git a/docs/generated/packages/node/generators/application.json b/docs/generated/packages/node/generators/application.json index a2bbe09416a603..a8e6fae87bfa6e 100644 --- a/docs/generated/packages/node/generators/application.json +++ b/docs/generated/packages/node/generators/application.json @@ -54,11 +54,17 @@ "description": "Frontend project that needs to access this application. This sets up proxy configuration.", "x-priority": "important" }, - "babelJest": { + "swcJest": { "type": "boolean", - "description": "Use `babel` instead of `ts-jest`.", + "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.", "default": false }, + "babelJest": { + "type": "boolean", + "description": "Use `babel` instead `ts-jest`.", + "default": false, + "x-deprecated": "Use --swcJest instead for faster compilation" + }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case file names.", diff --git a/docs/generated/packages/react/generators/application.json b/docs/generated/packages/react/generators/application.json index 90006ff44d5d86..2986337f25c6ac 100644 --- a/docs/generated/packages/react/generators/application.json +++ b/docs/generated/packages/react/generators/application.json @@ -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" @@ -155,8 +155,8 @@ "compiler": { "type": "string", "description": "The compiler to use.", - "enum": ["babel", "swc"], - "default": "babel" + "enum": ["swc", "babel"], + "default": "swc" }, "skipPackageJson": { "description": "Do not add dependencies to `package.json`.", diff --git a/docs/generated/packages/react/generators/host.json b/docs/generated/packages/react/generators/host.json index 3e6ef743992e19..cb93c5396f2f5a 100644 --- a/docs/generated/packages/react/generators/host.json +++ b/docs/generated/packages/react/generators/host.json @@ -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, @@ -132,7 +132,7 @@ "type": "string", "description": "The compiler to use", "enum": ["babel", "swc"], - "default": "babel" + "default": "swc" }, "remotes": { "type": "array", diff --git a/docs/generated/packages/react/generators/library.json b/docs/generated/packages/react/generators/library.json index 21f89bdf1616f9..133017244e4030 100644 --- a/docs/generated/packages/react/generators/library.json +++ b/docs/generated/packages/react/generators/library.json @@ -169,8 +169,8 @@ }, "compiler": { "type": "string", - "enum": ["babel", "swc"], - "default": "babel", + "enum": ["swc", "babel"], + "default": "swc", "description": "Which compiler to use. Only applies to `bundler: 'rollup'`." }, "skipPackageJson": { diff --git a/docs/generated/packages/react/generators/remote.json b/docs/generated/packages/react/generators/remote.json index cd99a9e0f414a4..e38cc906afa3d7 100644 --- a/docs/generated/packages/react/generators/remote.json +++ b/docs/generated/packages/react/generators/remote.json @@ -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, @@ -137,7 +137,7 @@ "type": "string", "description": "The compiler to use.", "enum": ["babel", "swc"], - "default": "babel" + "default": "swc" }, "host": { "type": "string", diff --git a/docs/generated/packages/web/generators/application.json b/docs/generated/packages/web/generators/application.json index d44bd521eaee4e..74f90cd73df607 100644 --- a/docs/generated/packages/web/generators/application.json +++ b/docs/generated/packages/web/generators/application.json @@ -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": { diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts index 90cd40195b0625..a82f3b247b1954 100644 --- a/e2e/web/src/web.test.ts +++ b/e2e/web/src/web.test.ts @@ -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 = ` - + - + BestReactApp - - - + + + -
+
Nx Variable: %NX_VARIABLE%
Some other variable: %SOME_OTHER_VARIABLE%
Deploy Url: %DEPLOY_URL%
diff --git a/packages/express/src/generators/application/schema.d.ts b/packages/express/src/generators/application/schema.d.ts index 1ec7eff6ee7ab0..e7c0468afcc3b2 100644 --- a/packages/express/src/generators/application/schema.d.ts +++ b/packages/express/src/generators/application/schema.d.ts @@ -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; diff --git a/packages/express/src/generators/application/schema.json b/packages/express/src/generators/application/schema.json index db3c743ce5f18b..349d2e3ff3a040 100644 --- a/packages/express/src/generators/application/schema.json +++ b/packages/express/src/generators/application/schema.json @@ -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", diff --git a/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap b/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap index d82db950869ed8..baf985127967cd 100644 --- a/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap +++ b/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap @@ -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'], diff --git a/packages/jest/src/generators/jest-project/lib/create-files.ts b/packages/jest/src/generators/jest-project/lib/create-files.ts index 6188e440b04048..094230de4952dc 100644 --- a/packages/jest/src/generators/jest-project/lib/create-files.ts +++ b/packages/jest/src/generators/jest-project/lib/create-files.ts @@ -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'; diff --git a/packages/next/src/generators/library/library.spec.ts b/packages/next/src/generators/library/library.spec.ts index 5417ebf7642fcf..768892043f0290 100644 --- a/packages/next/src/generators/library/library.spec.ts +++ b/packages/next/src/generators/library/library.spec.ts @@ -13,67 +13,6 @@ describe('next library', () => { let mockedInstalledCypressVersion: jest.Mock< ReturnType > = 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: '', diff --git a/packages/next/src/generators/library/library.ts b/packages/next/src/generators/library/library.ts index b1d6cf2c32b743..cfda6a23a2a926 100644 --- a/packages/next/src/generators/library/library.ts +++ b/packages/next/src/generators/library/library.ts @@ -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'), diff --git a/packages/node/src/generators/application/application.spec.ts b/packages/node/src/generators/application/application.spec.ts index d3af66f1d6ed3e..4a1a0cc481312f 100644 --- a/packages/node/src/generators/application/application.spec.ts +++ b/packages/node/src/generators/application/application.spec.ts @@ -343,7 +343,33 @@ describe('app', () => { }); }); - describe('--babelJest', () => { + describe('--swcJjest', () => { + 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, { diff --git a/packages/node/src/generators/application/application.ts b/packages/node/src/generators/application/application.ts index 1c6b350b32bfdb..2dd541d4821ff6 100644 --- a/packages/node/src/generators/application/application.ts +++ b/packages/node/src/generators/application/application.ts @@ -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); diff --git a/packages/node/src/generators/application/schema.d.ts b/packages/node/src/generators/application/schema.d.ts index aec0248728ffc3..70f30e83a5be61 100644 --- a/packages/node/src/generators/application/schema.d.ts +++ b/packages/node/src/generators/application/schema.d.ts @@ -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; diff --git a/packages/node/src/generators/application/schema.json b/packages/node/src/generators/application/schema.json index 92b9f480109267..a1118404bfafc0 100644 --- a/packages/node/src/generators/application/schema.json +++ b/packages/node/src/generators/application/schema.json @@ -54,11 +54,17 @@ "description": "Frontend project that needs to access this application. This sets up proxy configuration.", "x-priority": "important" }, - "babelJest": { + "swcJest": { "type": "boolean", - "description": "Use `babel` instead of `ts-jest`.", + "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.", "default": false }, + "babelJest": { + "type": "boolean", + "description": "Use `babel` instead `ts-jest`.", + "default": false, + "x-deprecated": "Use --swcJest instead for faster compilation" + }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case file names.", diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts index 04eae30f6480de..d51711c0a48ea3 100644 --- a/packages/react/src/generators/application/application.spec.ts +++ b/packages/react/src/generators/application/application.spec.ts @@ -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); diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts index fa6e7814dbd206..ad20856989f313 100644 --- a/packages/react/src/generators/application/application.ts +++ b/packages/react/src/generators/application/application.ts @@ -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[] = []; @@ -94,6 +95,7 @@ export async function applicationGenerator( const tasks = []; const options = normalizeOptions(host, schema); + showPossibleWarnings(host, options); const initTask = await reactInitGenerator(host, { ...options, diff --git a/packages/react/src/generators/application/lib/set-defaults.ts b/packages/react/src/generators/application/lib/set-defaults.ts index cad40197967570..0406985f151e77 100644 --- a/packages/react/src/generators/application/lib/set-defaults.ts +++ b/packages/react/src/generators/application/lib/set-defaults.ts @@ -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; } diff --git a/packages/react/src/generators/application/lib/show-possible-warnings.ts b/packages/react/src/generators/application/lib/show-possible-warnings.ts new file mode 100644 index 00000000000000..cba69ccc2e6218 --- /dev/null +++ b/packages/react/src/generators/application/lib/show-possible-warnings.ts @@ -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 +) { + 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.` + ); + } +} diff --git a/packages/react/src/generators/application/schema.d.ts b/packages/react/src/generators/application/schema.d.ts index ab83ef80b1ca71..7b8ae279ddbac1 100644 --- a/packages/react/src/generators/application/schema.d.ts +++ b/packages/react/src/generators/application/schema.d.ts @@ -14,7 +14,7 @@ export interface Schema { pascalCaseFiles?: boolean; classComponent?: boolean; routing?: boolean; - skipWorkspaceJson?: boolean; + skipNxJson?: boolean; js?: boolean; globalCss?: boolean; strict?: boolean; diff --git a/packages/react/src/generators/application/schema.json b/packages/react/src/generators/application/schema.json index 5eb0249f8015dc..6344fc2d4e28af 100644 --- a/packages/react/src/generators/application/schema.json +++ b/packages/react/src/generators/application/schema.json @@ -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" @@ -161,8 +161,8 @@ "compiler": { "type": "string", "description": "The compiler to use.", - "enum": ["babel", "swc"], - "default": "babel" + "enum": ["swc", "babel"], + "default": "swc" }, "skipPackageJson": { "description": "Do not add dependencies to `package.json`.", diff --git a/packages/react/src/generators/host/schema.d.ts b/packages/react/src/generators/host/schema.d.ts index e8c63c6e83c032..3a524244ef30a7 100644 --- a/packages/react/src/generators/host/schema.d.ts +++ b/packages/react/src/generators/host/schema.d.ts @@ -15,7 +15,7 @@ export interface Schema { remotes?: string[]; setParserOptionsProject?: boolean; skipFormat?: boolean; - skipWorkspaceJson?: boolean; + skipNxJson?: boolean; ssr?: boolean; strict?: boolean; style: SupportedStyles; diff --git a/packages/react/src/generators/host/schema.json b/packages/react/src/generators/host/schema.json index 628dcc09201646..c85a6687027516 100644 --- a/packages/react/src/generators/host/schema.json +++ b/packages/react/src/generators/host/schema.json @@ -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, @@ -138,7 +138,7 @@ "type": "string", "description": "The compiler to use", "enum": ["babel", "swc"], - "default": "babel" + "default": "swc" }, "remotes": { "type": "array", diff --git a/packages/react/src/generators/library/files/common/.babelrc__tmpl__ b/packages/react/src/generators/library/files/common/.babelrc__tmpl__ deleted file mode 100644 index b4962b709b3c56..00000000000000 --- a/packages/react/src/generators/library/files/common/.babelrc__tmpl__ +++ /dev/null @@ -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"<% } %> - ] -} diff --git a/packages/react/src/generators/library/lib/create-files.ts b/packages/react/src/generators/library/lib/create-files.ts index 55579e7379bcc8..77d187f23b77ee 100644 --- a/packages/react/src/generators/library/lib/create-files.ts +++ b/packages/react/src/generators/library/lib/create-files.ts @@ -5,6 +5,7 @@ import { names, offsetFromRoot, toJS, + writeJson, } from '@nx/devkit'; import { getRelativePathToRootTsConfig } from '@nx/js'; @@ -37,10 +38,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) { diff --git a/packages/react/src/generators/library/schema.json b/packages/react/src/generators/library/schema.json index b8cea3a24e0603..9fe9070a0acd9e 100644 --- a/packages/react/src/generators/library/schema.json +++ b/packages/react/src/generators/library/schema.json @@ -172,8 +172,8 @@ }, "compiler": { "type": "string", - "enum": ["babel", "swc"], - "default": "babel", + "enum": ["swc", "babel"], + "default": "swc", "description": "Which compiler to use. Only applies to `bundler: 'rollup'`." }, "skipPackageJson": { diff --git a/packages/react/src/generators/remote/schema.d.ts b/packages/react/src/generators/remote/schema.d.ts index 2fa825a4e5791d..424385aa051bbf 100644 --- a/packages/react/src/generators/remote/schema.d.ts +++ b/packages/react/src/generators/remote/schema.d.ts @@ -17,7 +17,7 @@ export interface Schema { routing?: boolean; setParserOptionsProject?: boolean; skipFormat: boolean; - skipWorkspaceJson?: boolean; + skipNxJson?: boolean; ssr?: boolean; strict?: boolean; style: SupportedStyles; diff --git a/packages/react/src/generators/remote/schema.json b/packages/react/src/generators/remote/schema.json index 7e8b9acb9b4fae..943331189b4e2a 100644 --- a/packages/react/src/generators/remote/schema.json +++ b/packages/react/src/generators/remote/schema.json @@ -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, @@ -143,7 +143,7 @@ "type": "string", "description": "The compiler to use.", "enum": ["babel", "swc"], - "default": "babel" + "default": "swc" }, "host": { "type": "string", diff --git a/packages/web/src/generators/application/schema.json b/packages/web/src/generators/application/schema.json index 5ce0957d30e931..18045d87215da0 100644 --- a/packages/web/src/generators/application/schema.json +++ b/packages/web/src/generators/application/schema.json @@ -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": {