fix(js): remove deprecated babel transform

packages/js/.eslintrc.json

@@ -45,7 +45,6 @@
               // require.resolve is used for these packages
               "source-map-support",
               "@babel/core",
-              "@babel/plugin-proposal-class-properties",
               "@babel/plugin-proposal-decorators",
               "@babel/plugin-transform-runtime",
               "@babel/preset-env",

packages/js/babel.ts

@@ -1,4 +1,5 @@
 import { dirname } from 'path';
+import { logger } from '@nx/devkit';
 
 /*
  * Babel preset to provide TypeScript support and module/nomodule for Nx.
@@ -10,6 +11,9 @@ export interface NxWebBabelPresetOptions {
     decoratorsBeforeExport?: boolean;
     legacy?: boolean;
   };
+  loose?: boolean;
+  /** @deprecated Use `loose` option instead of `classProperties.loose`
+   */
   classProperties?: {
     loose?: boolean;
   };
@@ -30,9 +34,15 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
     (caller) => caller?.emitDecoratorMetadata ?? true
   );
 
-  // Determine settings  for `@babel/plugin-proposal-class-properties`,
+  // Determine settings  for `@babel//babel-plugin-transform-class-properties`,
   // so that we can sync the `loose` option with `@babel/preset-env`.
-  const classProperties = options.classProperties ?? { loose: true };
+  // TODO(v18): Remove classProperties since it's no longer needed, now that the class props transform is in preset-env.
+  const loose = options.classProperties?.loose ?? options.loose ?? true;
+  if (options.classProperties) {
+    logger.warn(
+      `Use =\`loose\` option instead of \`classProperties.loose\`. The \`classProperties\` option will be removed in Nx 18`
+    );
+  }
 
   return {
     presets: [
@@ -55,7 +65,7 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
               // 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,
+              loose,
             },
       ],
       [
@@ -89,10 +99,6 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
         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

packages/js/package.json

@@ -31,7 +31,6 @@
   "executors": "./executors.json",
   "dependencies": {
     "@babel/core": "^7.22.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@babel/plugin-transform-runtime": "^7.22.9",
     "@babel/preset-env": "^7.22.9",

packages/react/babel.ts

@@ -11,6 +11,9 @@ interface NxReactBabelOptions {
     decoratorsBeforeExport?: boolean;
     legacy?: boolean;
   };
+  loose?: boolean;
+  /** @deprecated Use `loose` option instead of `classProperties.loose`
+   */
   classProperties?: {
     loose?: boolean;
   };