feat(js): move babel preset to @nrwl/js/babel so @nrwl/web is not… (#14478)

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

@@ -38,7 +38,7 @@ describe('js e2e', () => {
     const babelRc = readJson(`libs/${lib}/.babelrc`);
     expect(babelRc.plugins).toBeUndefined();
     expect(babelRc.presets).toStrictEqual([
-      ['@nrwl/web/babel', { useBuiltIns: 'usage' }],
+      ['@nrwl/js/babel', { useBuiltIns: 'usage' }],
     ]);
 
     expect(runCLI(`build ${lib}`)).toContain('Done compiling TypeScript files');

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

@@ -160,8 +160,8 @@ function updateDependencies(tree: Tree, options: NormalizedSchema) {
 
   if (options.compiler === 'babel' || options.babelJest) {
     devDeps['babel-jest'] = babelJestVersion;
-    // in some cases @nrwl/web will not already be present i.e. node only projects
+    // in some cases @nrwl/js will not already be present i.e. node only projects
-    devDeps['@nrwl/web'] = nxVersion;
+    devDeps['@nrwl/js'] = nxVersion;
   } else if (options.compiler === 'swc') {
     devDeps['@swc/jest'] = swcJestVersion;
   }

packages/js/babel.ts

@@ -0,0 +1,110 @@
+import { dirname } from 'path';
+
+/*
+ * Babel preset to provide TypeScript support and module/nomodule for Nx.
+ */
+
+export interface NxWebBabelPresetOptions {
+  useBuiltIns?: boolean | string;
+  decorators?: {
+    decoratorsBeforeExport?: boolean;
+    legacy?: boolean;
+  };
+  classProperties?: {
+    loose?: boolean;
+  };
+}
+
+module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
+  api.assertVersion(7);
+
+  const isModern = api.caller((caller) => caller?.isModern);
+
+  // This is set by `@nrwl/web:rollup` executor
+  const isNxPackage = api.caller((caller) => caller?.isNxPackage);
+
+  const emitDecoratorMetadata = api.caller(
+    (caller) => caller?.emitDecoratorMetadata ?? true
+  );
+
+  // Determine settings  for `@babel/plugin-proposal-class-properties`,
+  // so that we can sync the `loose` option with `@babel/preset-env`.
+  const classProperties = options.classProperties ?? { loose: true };
+
+  return {
+    presets: [
+      // Support module/nomodule pattern.
+      [
+        require.resolve('@babel/preset-env'),
+        // For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
+        // All other options will fail in Jest since Node does not support some ES features
+        // such as import syntax.
+        process.env.NODE_ENV === 'test'
+          ? { targets: { node: 'current' }, loose: true }
+          : {
+              // Allow importing core-js in entrypoint and use browserlist to select polyfills.
+              useBuiltIns: options.useBuiltIns ?? 'entry',
+              corejs: 3,
+              // Do not transform modules to CJS
+              modules: false,
+              targets: isModern ? { esmodules: 'intersect' } : undefined,
+              bugfixes: true,
+              // Exclude transforms that make all code slower
+              exclude: ['transform-typeof-symbol'],
+              // This must match the setting for `@babel/plugin-proposal-class-properties`
+              loose: classProperties.loose,
+            },
+      ],
+      [
+        require.resolve('@babel/preset-typescript'),
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+    plugins: [
+      !isNxPackage
+        ? [
+            require.resolve('@babel/plugin-transform-runtime'),
+            {
+              corejs: false,
+              helpers: true,
+              regenerator: true,
+              useESModules: isModern,
+              absoluteRuntime: dirname(
+                require.resolve('@babel/runtime/package.json')
+              ),
+            },
+          ]
+        : null,
+      require.resolve('babel-plugin-macros'),
+      emitDecoratorMetadata
+        ? require.resolve('babel-plugin-transform-typescript-metadata')
+        : undefined,
+      // Must use legacy decorators to remain compatible with TypeScript.
+      [
+        require.resolve('@babel/plugin-proposal-decorators'),
+        options.decorators ?? { legacy: true },
+      ],
+      [
+        require.resolve('@babel/plugin-proposal-class-properties'),
+        classProperties,
+      ],
+    ].filter(Boolean),
+    overrides: [
+      // Convert `const enum` to `enum`. The former cannot be supported by babel
+      // but at least we can get it to not error out.
+      {
+        test: /\.tsx?$/,
+        plugins: [
+          [
+            require.resolve('babel-plugin-const-enum'),
+            {
+              transform: 'removeConst',
+            },
+          ],
+        ],
+      },
+    ],
+  };
+};

packages/js/package.json

@@ -32,9 +32,19 @@
   "executors": "./executors.json",
   "builders": "./executors.json",
   "dependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@babel/runtime": "^7.14.8",
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/linter": "file:../linter",
     "@nrwl/workspace": "file:../workspace",
+    "babel-plugin-const-enum": "^1.0.1",
+    "babel-plugin-macros": "^2.8.0",
+    "babel-plugin-transform-typescript-metadata": "^0.3.1",
     "chalk": "^4.1.0",
     "fast-glob": "3.2.7",
     "fs-extra": "^11.1.0",

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

@@ -917,7 +917,7 @@ describe('lib', () => {
           Object {
             "presets": Array [
               Array [
-                "@nrwl/web/babel",
+                "@nrwl/js/babel",
                 Object {
                   "useBuiltIns": "usage",
                 },
@@ -950,7 +950,7 @@ describe('lib', () => {
           Object {
             "presets": Array [
               Array [
-                "@nrwl/web/babel",
+                "@nrwl/js/babel",
                 Object {
                   "useBuiltIns": "usage",
                 },

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

@@ -256,7 +256,7 @@ function addBabelRc(tree: Tree, options: NormalizedSchema) {
   const filename = '.babelrc';
 
   const babelrc = {
-    presets: [['@nrwl/web/babel', { useBuiltIns: 'usage' }]],
+    presets: [['@nrwl/js/babel', { useBuiltIns: 'usage' }]],
   };
 
   writeJson(tree, join(options.projectRoot, filename), babelrc);

packages/react/babel.ts

@@ -1,12 +1,18 @@
-import type { NxWebBabelPresetOptions } from '@nrwl/web';
-
 /*
  * Babel preset to provide React support for Nx.
  */
 
-interface NxReactBabelOptions extends NxWebBabelPresetOptions {
+interface NxReactBabelOptions {
   runtime?: string;
   importSource?: string;
+  useBuiltIns?: boolean | string;
+  decorators?: {
+    decoratorsBeforeExport?: boolean;
+    legacy?: boolean;
+  };
+  classProperties?: {
+    loose?: boolean;
+  };
 }
 
 module.exports = function (api: any, options: NxReactBabelOptions) {
@@ -17,7 +23,7 @@ module.exports = function (api: any, options: NxReactBabelOptions) {
    */
   const isNextJs = api.caller((caller) => caller?.pagesDir);
 
-  const presets: any[] = [['@nrwl/web/babel', options]];
+  const presets: any[] = [['@nrwl/js/babel', options]];
 
   /**
    * Next.js already includes the preset-react, and including it

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

@@ -238,7 +238,7 @@ export function createRollupOptions(
       useSwc && swc(),
       useBabel &&
         getBabelInputPlugin({
-          // Let's `@nrwl/web/babel` preset know that we are packaging.
+          // Lets `@nrwl/js/babel` preset know that we are packaging.
           caller: {
             // @ts-ignore
             // Ignoring type checks for caller since we have custom attributes

packages/web/babel.ts

@@ -1,110 +1,9 @@
-import { dirname } from 'path';
+const nxJsBabelPreset = require('@nrwl/js/babel');
 
-/*
+/** @deprecated Use `@nrwl/js/babel`. */
- * Babel preset to provide TypeScript support and module/nomodule for Nx.
+module.exports = function (api: any, options: any = {}) {
- */
+  console.warn(
-
+    '`@nrwl/web/babel` has been deprecated. Use `@nrwl/js/babel` instead in your .babelrc files.'
-export interface NxWebBabelPresetOptions {
-  useBuiltIns?: boolean | string;
-  decorators?: {
-    decoratorsBeforeExport?: boolean;
-    legacy?: boolean;
-  };
-  classProperties?: {
-    loose?: boolean;
-  };
-}
-
-module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
-  api.assertVersion(7);
-
-  const isModern = api.caller((caller) => caller?.isModern);
-
-  // This is set by `@nrwl/web:rollup` executor
-  const isNxPackage = api.caller((caller) => caller?.isNxPackage);
-
-  const emitDecoratorMetadata = api.caller(
-    (caller) => caller?.emitDecoratorMetadata ?? true
   );
-
+  return nxJsBabelPreset(api, options);
-  // Determine settings  for `@babel/plugin-proposal-class-properties`,
-  // so that we can sync the `loose` option with `@babel/preset-env`.
-  const classProperties = options.classProperties ?? { loose: true };
-
-  return {
-    presets: [
-      // Support module/nomodule pattern.
-      [
-        require.resolve('@babel/preset-env'),
-        // For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
-        // All other options will fail in Jest since Node does not support some ES features
-        // such as import syntax.
-        process.env.NODE_ENV === 'test'
-          ? { targets: { node: 'current' }, loose: true }
-          : {
-              // Allow importing core-js in entrypoint and use browserlist to select polyfills.
-              useBuiltIns: options.useBuiltIns ?? 'entry',
-              corejs: 3,
-              // Do not transform modules to CJS
-              modules: false,
-              targets: isModern ? { esmodules: 'intersect' } : undefined,
-              bugfixes: true,
-              // Exclude transforms that make all code slower
-              exclude: ['transform-typeof-symbol'],
-              // This must match the setting for `@babel/plugin-proposal-class-properties`
-              loose: classProperties.loose,
-            },
-      ],
-      [
-        require.resolve('@babel/preset-typescript'),
-        {
-          allowDeclareFields: true,
-        },
-      ],
-    ],
-    plugins: [
-      !isNxPackage
-        ? [
-            require.resolve('@babel/plugin-transform-runtime'),
-            {
-              corejs: false,
-              helpers: true,
-              regenerator: true,
-              useESModules: isModern,
-              absoluteRuntime: dirname(
-                require.resolve('@babel/runtime/package.json')
-              ),
-            },
-          ]
-        : null,
-      require.resolve('babel-plugin-macros'),
-      emitDecoratorMetadata
-        ? require.resolve('babel-plugin-transform-typescript-metadata')
-        : undefined,
-      // Must use legacy decorators to remain compatible with TypeScript.
-      [
-        require.resolve('@babel/plugin-proposal-decorators'),
-        options.decorators ?? { legacy: true },
-      ],
-      [
-        require.resolve('@babel/plugin-proposal-class-properties'),
-        classProperties,
-      ],
-    ].filter(Boolean),
-    overrides: [
-      // Convert `const enum` to `enum`. The former cannot be supported by babel
-      // but at least we can get it to not error out.
-      {
-        test: /\.tsx?$/,
-        plugins: [
-          [
-            require.resolve('babel-plugin-const-enum'),
-            {
-              transform: 'removeConst',
-            },
-          ],
-        ],
-      },
-    ],
-  };
 };

packages/web/index.ts

@@ -1,3 +1,2 @@
 export { webInitGenerator } from './src/generators/init/init';
 export { applicationGenerator } from './src/generators/application/application';
-export type { NxWebBabelPresetOptions } from './babel';

packages/web/migrations.json

@@ -47,6 +47,12 @@
       "version": "15.0.0-beta.1",
       "description": "Update usages of rollup executors to @nrwl/rollup",
       "factory": "./src/migrations/update-15-0-0/update-rollup-executor"
+    },
+    "update-babel-preset": {
+      "cli": "nx",
+      "version": "15.5.4-beta.0",
+      "description": "Update `@nrwl/web/babel` preset to `@nrwl/js/babel` for projects that have a .babelrc file.",
+      "factory": "./src/migrations/update-15-5-4/update-babel-preset"
     }
   },
   "packageJsonUpdates": {

packages/web/package.json

@@ -30,13 +30,6 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime": "^7.14.8",
     "@nrwl/cypress": "file:../cypress",
     "@nrwl/devkit": "file:../devkit",
     "@nrwl/jest": "file:../jest",
@@ -44,9 +37,6 @@
     "@nrwl/linter": "file:../linter",
     "@nrwl/rollup": "file:../rollup",
     "@nrwl/workspace": "file:../workspace",
-    "babel-plugin-const-enum": "^1.0.1",
-    "babel-plugin-macros": "^2.8.0",
-    "babel-plugin-transform-typescript-metadata": "^0.3.1",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
     "http-server": "^14.1.0",

packages/web/src/generators/application/files/app-vite/.babelrc__tmpl__

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "@nrwl/web/babel"
+    "@nrwl/js/babel"
   ]
 }

packages/web/src/generators/application/files/app-webpack/.babelrc__tmpl__

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "@nrwl/web/babel"
+    "@nrwl/js/babel"
   ]
 }

packages/web/src/migrations/update-15-5-4/update-babel-preset.spec.ts

@@ -0,0 +1,67 @@
+import {
+  addProjectConfiguration,
+  readJson,
+  Tree,
+  writeJson,
+} from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import update from './update-babel-preset';
+
+describe('update-babel-preset', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should update preset with options', async () => {
+    addProjectConfiguration(tree, 'demo', {
+      root: 'demo',
+    });
+    writeJson(tree, 'demo/.babelrc', {
+      presets: [
+        '@acme/foo',
+        [
+          '@nrwl/web/babel',
+          {
+            useBuiltIns: 'usage',
+          },
+        ],
+        '@acme/bar',
+      ],
+    });
+
+    await update(tree);
+
+    const result = readJson(tree, 'demo/.babelrc');
+    expect(result).toEqual({
+      presets: [
+        '@acme/foo',
+        [
+          '@nrwl/js/babel',
+          {
+            useBuiltIns: 'usage',
+          },
+        ],
+        '@acme/bar',
+      ],
+    });
+  });
+
+  it('should update preset without options', async () => {
+    addProjectConfiguration(tree, 'demo', {
+      root: 'demo',
+    });
+    writeJson(tree, 'demo/.babelrc', {
+      presets: ['@acme/foo', '@nrwl/web/babel', '@acme/bar'],
+    });
+
+    await update(tree);
+
+    const result = readJson(tree, 'demo/.babelrc');
+    expect(result).toEqual({
+      presets: ['@acme/foo', '@nrwl/js/babel', '@acme/bar'],
+    });
+  });
+});

packages/web/src/migrations/update-15-5-4/update-babel-preset.ts

@@ -0,0 +1,47 @@
+import {
+  readJson,
+  writeJson,
+  Tree,
+  addDependenciesToPackageJson,
+  getProjects,
+  joinPathFragments,
+} from '@nrwl/devkit';
+import { nxVersion } from '../../utils/versions';
+
+/* Updates @nrwl/web/babel to @nrwl/js/babel because web package is no longer necessary to use webpack/rollup + babel. */
+export default async function update(tree: Tree) {
+  // Add `@nrwl/js` in case it was missing before.
+  addDependenciesToPackageJson(
+    tree,
+    {},
+    {
+      '@nrwl/js': nxVersion,
+    }
+  );
+
+  const projects = getProjects(tree);
+
+  projects.forEach((config, name) => {
+    const babelrcPath = joinPathFragments(config.root, '.babelrc');
+
+    if (!tree.exists(babelrcPath)) return;
+
+    const babelrc = readJson(tree, babelrcPath);
+    const idx = babelrc?.presets?.findIndex((p) =>
+      typeof p === 'string'
+        ? p === '@nrwl/web/babel'
+        : p[0] === '@nrwl/web/babel'
+    );
+
+    if (idx === -1) return;
+
+    const preset = babelrc.presets[idx];
+    if (typeof preset === 'string') {
+      babelrc.presets.splice(idx, 1, '@nrwl/js/babel');
+    } else if (Array.isArray(preset)) {
+      babelrc.presets.splice(idx, 1, ['@nrwl/js/babel', preset[1]]);
+    }
+
+    writeJson(tree, babelrcPath, babelrc);
+  });
+}

packages/workspace/src/generators/library/files/lib/__dot__babelrc__tmpl__

@@ -1,3 +1,3 @@
 {
-  "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]]
+  "presets": [["@nrwl/js/babel", { "useBuiltIns": "usage" }]]
 }