Skip to content

Commit 5e11adb

Browse files
authored
feat(js): move babel preset to @nrwl/js/babel so @nrwl/web is not… (#14478)
1 parent ef3d5de commit 5e11adb

File tree

17 files changed

+266
-132
lines changed

17 files changed

+266
-132
lines changed

e2e/js/src/js-tsc.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe('js e2e', () => {
3838
const babelRc = readJson(`libs/${lib}/.babelrc`);
3939
expect(babelRc.plugins).toBeUndefined();
4040
expect(babelRc.presets).toStrictEqual([
41-
['@nrwl/web/babel', { useBuiltIns: 'usage' }],
41+
['@nrwl/js/babel', { useBuiltIns: 'usage' }],
4242
]);
4343

4444
expect(runCLI(`build ${lib}`)).toContain('Done compiling TypeScript files');

packages/jest/src/generators/init/init.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,8 @@ function updateDependencies(tree: Tree, options: NormalizedSchema) {
160160

161161
if (options.compiler === 'babel' || options.babelJest) {
162162
devDeps['babel-jest'] = babelJestVersion;
163-
// in some cases @nrwl/web will not already be present i.e. node only projects
164-
devDeps['@nrwl/web'] = nxVersion;
163+
// in some cases @nrwl/js will not already be present i.e. node only projects
164+
devDeps['@nrwl/js'] = nxVersion;
165165
} else if (options.compiler === 'swc') {
166166
devDeps['@swc/jest'] = swcJestVersion;
167167
}

packages/js/babel.ts

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { dirname } from 'path';
2+
3+
/*
4+
* Babel preset to provide TypeScript support and module/nomodule for Nx.
5+
*/
6+
7+
export interface NxWebBabelPresetOptions {
8+
useBuiltIns?: boolean | string;
9+
decorators?: {
10+
decoratorsBeforeExport?: boolean;
11+
legacy?: boolean;
12+
};
13+
classProperties?: {
14+
loose?: boolean;
15+
};
16+
}
17+
18+
module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
19+
api.assertVersion(7);
20+
21+
const isModern = api.caller((caller) => caller?.isModern);
22+
23+
// This is set by `@nrwl/web:rollup` executor
24+
const isNxPackage = api.caller((caller) => caller?.isNxPackage);
25+
26+
const emitDecoratorMetadata = api.caller(
27+
(caller) => caller?.emitDecoratorMetadata ?? true
28+
);
29+
30+
// Determine settings for `@babel/plugin-proposal-class-properties`,
31+
// so that we can sync the `loose` option with `@babel/preset-env`.
32+
const classProperties = options.classProperties ?? { loose: true };
33+
34+
return {
35+
presets: [
36+
// Support module/nomodule pattern.
37+
[
38+
require.resolve('@babel/preset-env'),
39+
// For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
40+
// All other options will fail in Jest since Node does not support some ES features
41+
// such as import syntax.
42+
process.env.NODE_ENV === 'test'
43+
? { targets: { node: 'current' }, loose: true }
44+
: {
45+
// Allow importing core-js in entrypoint and use browserlist to select polyfills.
46+
useBuiltIns: options.useBuiltIns ?? 'entry',
47+
corejs: 3,
48+
// Do not transform modules to CJS
49+
modules: false,
50+
targets: isModern ? { esmodules: 'intersect' } : undefined,
51+
bugfixes: true,
52+
// Exclude transforms that make all code slower
53+
exclude: ['transform-typeof-symbol'],
54+
// This must match the setting for `@babel/plugin-proposal-class-properties`
55+
loose: classProperties.loose,
56+
},
57+
],
58+
[
59+
require.resolve('@babel/preset-typescript'),
60+
{
61+
allowDeclareFields: true,
62+
},
63+
],
64+
],
65+
plugins: [
66+
!isNxPackage
67+
? [
68+
require.resolve('@babel/plugin-transform-runtime'),
69+
{
70+
corejs: false,
71+
helpers: true,
72+
regenerator: true,
73+
useESModules: isModern,
74+
absoluteRuntime: dirname(
75+
require.resolve('@babel/runtime/package.json')
76+
),
77+
},
78+
]
79+
: null,
80+
require.resolve('babel-plugin-macros'),
81+
emitDecoratorMetadata
82+
? require.resolve('babel-plugin-transform-typescript-metadata')
83+
: undefined,
84+
// Must use legacy decorators to remain compatible with TypeScript.
85+
[
86+
require.resolve('@babel/plugin-proposal-decorators'),
87+
options.decorators ?? { legacy: true },
88+
],
89+
[
90+
require.resolve('@babel/plugin-proposal-class-properties'),
91+
classProperties,
92+
],
93+
].filter(Boolean),
94+
overrides: [
95+
// Convert `const enum` to `enum`. The former cannot be supported by babel
96+
// but at least we can get it to not error out.
97+
{
98+
test: /\.tsx?$/,
99+
plugins: [
100+
[
101+
require.resolve('babel-plugin-const-enum'),
102+
{
103+
transform: 'removeConst',
104+
},
105+
],
106+
],
107+
},
108+
],
109+
};
110+
};

packages/js/package.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,19 @@
3232
"executors": "./executors.json",
3333
"builders": "./executors.json",
3434
"dependencies": {
35+
"@babel/core": "^7.15.0",
36+
"@babel/plugin-proposal-class-properties": "^7.14.5",
37+
"@babel/plugin-proposal-decorators": "^7.14.5",
38+
"@babel/plugin-transform-runtime": "^7.15.0",
39+
"@babel/preset-env": "^7.15.0",
40+
"@babel/preset-typescript": "^7.15.0",
41+
"@babel/runtime": "^7.14.8",
3542
"@nrwl/devkit": "file:../devkit",
3643
"@nrwl/linter": "file:../linter",
3744
"@nrwl/workspace": "file:../workspace",
45+
"babel-plugin-const-enum": "^1.0.1",
46+
"babel-plugin-macros": "^2.8.0",
47+
"babel-plugin-transform-typescript-metadata": "^0.3.1",
3848
"chalk": "^4.1.0",
3949
"fast-glob": "3.2.7",
4050
"fs-extra": "^11.1.0",

packages/js/src/generators/library/library.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -917,7 +917,7 @@ describe('lib', () => {
917917
Object {
918918
"presets": Array [
919919
Array [
920-
"@nrwl/web/babel",
920+
"@nrwl/js/babel",
921921
Object {
922922
"useBuiltIns": "usage",
923923
},
@@ -950,7 +950,7 @@ describe('lib', () => {
950950
Object {
951951
"presets": Array [
952952
Array [
953-
"@nrwl/web/babel",
953+
"@nrwl/js/babel",
954954
Object {
955955
"useBuiltIns": "usage",
956956
},

packages/js/src/generators/library/library.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ function addBabelRc(tree: Tree, options: NormalizedSchema) {
256256
const filename = '.babelrc';
257257

258258
const babelrc = {
259-
presets: [['@nrwl/web/babel', { useBuiltIns: 'usage' }]],
259+
presets: [['@nrwl/js/babel', { useBuiltIns: 'usage' }]],
260260
};
261261

262262
writeJson(tree, join(options.projectRoot, filename), babelrc);

packages/react/babel.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
import type { NxWebBabelPresetOptions } from '@nrwl/web';
2-
31
/*
42
* Babel preset to provide React support for Nx.
53
*/
64

7-
interface NxReactBabelOptions extends NxWebBabelPresetOptions {
5+
interface NxReactBabelOptions {
86
runtime?: string;
97
importSource?: string;
8+
useBuiltIns?: boolean | string;
9+
decorators?: {
10+
decoratorsBeforeExport?: boolean;
11+
legacy?: boolean;
12+
};
13+
classProperties?: {
14+
loose?: boolean;
15+
};
1016
}
1117

1218
module.exports = function (api: any, options: NxReactBabelOptions) {
@@ -17,7 +23,7 @@ module.exports = function (api: any, options: NxReactBabelOptions) {
1723
*/
1824
const isNextJs = api.caller((caller) => caller?.pagesDir);
1925

20-
const presets: any[] = [['@nrwl/web/babel', options]];
26+
const presets: any[] = [['@nrwl/js/babel', options]];
2127

2228
/**
2329
* Next.js already includes the preset-react, and including it

packages/rollup/src/executors/rollup/rollup.impl.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ export function createRollupOptions(
238238
useSwc && swc(),
239239
useBabel &&
240240
getBabelInputPlugin({
241-
// Let's `@nrwl/web/babel` preset know that we are packaging.
241+
// Lets `@nrwl/js/babel` preset know that we are packaging.
242242
caller: {
243243
// @ts-ignore
244244
// Ignoring type checks for caller since we have custom attributes

packages/web/babel.ts

Lines changed: 6 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,9 @@
1-
import { dirname } from 'path';
1+
const nxJsBabelPreset = require('@nrwl/js/babel');
22

3-
/*
4-
* Babel preset to provide TypeScript support and module/nomodule for Nx.
5-
*/
6-
7-
export interface NxWebBabelPresetOptions {
8-
useBuiltIns?: boolean | string;
9-
decorators?: {
10-
decoratorsBeforeExport?: boolean;
11-
legacy?: boolean;
12-
};
13-
classProperties?: {
14-
loose?: boolean;
15-
};
16-
}
17-
18-
module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
19-
api.assertVersion(7);
20-
21-
const isModern = api.caller((caller) => caller?.isModern);
22-
23-
// This is set by `@nrwl/web:rollup` executor
24-
const isNxPackage = api.caller((caller) => caller?.isNxPackage);
25-
26-
const emitDecoratorMetadata = api.caller(
27-
(caller) => caller?.emitDecoratorMetadata ?? true
3+
/** @deprecated Use `@nrwl/js/babel`. */
4+
module.exports = function (api: any, options: any = {}) {
5+
console.warn(
6+
'`@nrwl/web/babel` has been deprecated. Use `@nrwl/js/babel` instead in your .babelrc files.'
287
);
29-
30-
// Determine settings for `@babel/plugin-proposal-class-properties`,
31-
// so that we can sync the `loose` option with `@babel/preset-env`.
32-
const classProperties = options.classProperties ?? { loose: true };
33-
34-
return {
35-
presets: [
36-
// Support module/nomodule pattern.
37-
[
38-
require.resolve('@babel/preset-env'),
39-
// For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
40-
// All other options will fail in Jest since Node does not support some ES features
41-
// such as import syntax.
42-
process.env.NODE_ENV === 'test'
43-
? { targets: { node: 'current' }, loose: true }
44-
: {
45-
// Allow importing core-js in entrypoint and use browserlist to select polyfills.
46-
useBuiltIns: options.useBuiltIns ?? 'entry',
47-
corejs: 3,
48-
// Do not transform modules to CJS
49-
modules: false,
50-
targets: isModern ? { esmodules: 'intersect' } : undefined,
51-
bugfixes: true,
52-
// Exclude transforms that make all code slower
53-
exclude: ['transform-typeof-symbol'],
54-
// This must match the setting for `@babel/plugin-proposal-class-properties`
55-
loose: classProperties.loose,
56-
},
57-
],
58-
[
59-
require.resolve('@babel/preset-typescript'),
60-
{
61-
allowDeclareFields: true,
62-
},
63-
],
64-
],
65-
plugins: [
66-
!isNxPackage
67-
? [
68-
require.resolve('@babel/plugin-transform-runtime'),
69-
{
70-
corejs: false,
71-
helpers: true,
72-
regenerator: true,
73-
useESModules: isModern,
74-
absoluteRuntime: dirname(
75-
require.resolve('@babel/runtime/package.json')
76-
),
77-
},
78-
]
79-
: null,
80-
require.resolve('babel-plugin-macros'),
81-
emitDecoratorMetadata
82-
? require.resolve('babel-plugin-transform-typescript-metadata')
83-
: undefined,
84-
// Must use legacy decorators to remain compatible with TypeScript.
85-
[
86-
require.resolve('@babel/plugin-proposal-decorators'),
87-
options.decorators ?? { legacy: true },
88-
],
89-
[
90-
require.resolve('@babel/plugin-proposal-class-properties'),
91-
classProperties,
92-
],
93-
].filter(Boolean),
94-
overrides: [
95-
// Convert `const enum` to `enum`. The former cannot be supported by babel
96-
// but at least we can get it to not error out.
97-
{
98-
test: /\.tsx?$/,
99-
plugins: [
100-
[
101-
require.resolve('babel-plugin-const-enum'),
102-
{
103-
transform: 'removeConst',
104-
},
105-
],
106-
],
107-
},
108-
],
109-
};
8+
return nxJsBabelPreset(api, options);
1109
};

packages/web/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
export { webInitGenerator } from './src/generators/init/init';
22
export { applicationGenerator } from './src/generators/application/application';
3-
export type { NxWebBabelPresetOptions } from './babel';

0 commit comments

Comments
 (0)