feat(linter): replace createReactEslintJson with extendReactEslintJson (#13431)

e2e/react-native/src/react-native.test.ts

@@ -122,7 +122,7 @@ describe('react native', () => {
     expect(() => {
       runCLI(`build ${libName}`);
       checkFilesExist(`dist/libs/${libName}/index.js`);
-      checkFilesExist(`dist/libs/${libName}/index.d.ts`);
+      checkFilesExist(`dist/libs/${libName}/src/index.d.ts`);
     }).not.toThrow();
   });
 

packages/detox/src/generators/application/lib/add-linting.ts

@@ -6,7 +6,7 @@ import {
   Tree,
   updateJson,
 } from '@nrwl/devkit';
-import { createReactEslintJson, extraEslintDependencies } from '@nrwl/react';
+import { extendReactEslintJson, extraEslintDependencies } from '@nrwl/react';
 import { NormalizedSchema } from './normalize-options';
 
 export async function addLinting(host: Tree, options: NormalizedSchema) {
@@ -24,15 +24,10 @@ export async function addLinting(host: Tree, options: NormalizedSchema) {
     skipFormat: true,
   });
 
-  const reactEslintJson = createReactEslintJson(
-    options.e2eProjectRoot,
-    options.setParserOptionsProject
-  );
-
   updateJson(
     host,
     joinPathFragments(options.e2eProjectRoot, '.eslintrc.json'),
-    () => reactEslintJson
+    extendReactEslintJson
   );
 
   const installTask = addDependenciesToPackageJson(

packages/expo/src/utils/add-linting.ts

@@ -6,7 +6,7 @@ import {
   Tree,
   updateJson,
 } from '@nrwl/devkit';
-import { createReactEslintJson, extraEslintDependencies } from '@nrwl/react';
+import { extendReactEslintJson, extraEslintDependencies } from '@nrwl/react';
 import type { Linter as ESLintLinter } from 'eslint';
 
 export async function addLinting(
@@ -29,16 +29,12 @@ export async function addLinting(
     skipFormat: true,
   });
 
-  const reactEslintJson = createReactEslintJson(
-    appProjectRoot,
-    setParserOptionsProject
-  );
-
   updateJson(
     host,
     joinPathFragments(appProjectRoot, '.eslintrc.json'),
     (json: ESLintLinter.Config) => {
-      json = reactEslintJson;
+      json = extendReactEslintJson(json);
+
       json.ignorePatterns = ['!**/*', '.expo', 'node_modules', 'web-build'];
 
       // Find the override that handles both TS and JS files.

packages/next/src/generators/application/lib/add-linting.ts

@@ -6,7 +6,7 @@ import {
   Tree,
   updateJson,
 } from '@nrwl/devkit';
-import { createReactEslintJson, extraEslintDependencies } from '@nrwl/react';
+import { extendReactEslintJson, extraEslintDependencies } from '@nrwl/react';
 import { NormalizedSchema } from './normalize-options';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 
@@ -26,28 +26,24 @@ export async function addLinting(
   });
 
   if (options.linter === Linter.EsLint) {
-    const reactEslintJson = createReactEslintJson(
-      options.appProjectRoot,
-      options.setParserOptionsProject
-    );
     updateJson(
       host,
       joinPathFragments(options.appProjectRoot, '.eslintrc.json'),
-      () => {
+      (json) => {
+        json = extendReactEslintJson(json);
+
         // Turn off @next/next/no-html-link-for-pages since there is an issue with nextjs throwing linting errors
         // TODO(nicholas): remove after Vercel updates nextjs linter to only lint ["*.ts", "*.tsx", "*.js", "*.jsx"]
 
-        reactEslintJson.ignorePatterns = [
-          ...reactEslintJson.ignorePatterns,
-          '.next/**/*',
-        ];
+        json.ignorePatterns = [...json.ignorePatterns, '.next/**/*'];
 
-        reactEslintJson.rules = {
+        json.rules = {
           '@next/next/no-html-link-for-pages': 'off',
-          ...reactEslintJson.rules,
+          ...json.rules,
         };
+
         // Find the override that handles both TS and JS files.
-        const commonOverride = reactEslintJson.overrides?.find((o) =>
+        const commonOverride = json.overrides?.find((o) =>
           ['*.ts', '*.tsx', '*.js', '*.jsx'].every((ext) =>
             o.files.includes(ext)
           )
@@ -70,23 +66,25 @@ export async function addLinting(
             };
           }
         }
-        reactEslintJson.extends ??= [];
-        if (typeof reactEslintJson.extends === 'string') {
-          reactEslintJson.extends = [reactEslintJson.extends];
+
+        json.extends ??= [];
+        if (typeof json.extends === 'string') {
+          json.extends = [json.extends];
         }
         // add next.js configuration
-        reactEslintJson.extends.unshift(...['next', 'next/core-web-vitals']);
+        json.extends.unshift(...['next', 'next/core-web-vitals']);
         // remove nx/react plugin, as it conflicts with the next.js one
-        reactEslintJson.extends = reactEslintJson.extends.filter(
+        json.extends = json.extends.filter(
           (name) => name !== 'plugin:@nrwl/nx/react'
         );
 
-        reactEslintJson.extends.unshift('plugin:@nrwl/nx/react-typescript');
-        if (!reactEslintJson.env) {
-          reactEslintJson.env = {};
+        json.extends.unshift('plugin:@nrwl/nx/react-typescript');
+        if (!json.env) {
+          json.env = {};
         }
-        reactEslintJson.env.jest = true;
-        return reactEslintJson;
+        json.env.jest = true;
+
+        return json;
       }
     );
   }

packages/react-native/src/utils/add-linting.ts

@@ -6,7 +6,7 @@ import {
   Tree,
   updateJson,
 } from '@nrwl/devkit';
-import { createReactEslintJson, extraEslintDependencies } from '@nrwl/react';
+import { extendReactEslintJson, extraEslintDependencies } from '@nrwl/react';
 import type { Linter as ESLintLinter } from 'eslint';
 
 interface NormalizedSchema {
@@ -30,16 +30,12 @@ export async function addLinting(host: Tree, options: NormalizedSchema) {
     skipFormat: true,
   });
 
-  const reactEslintJson = createReactEslintJson(
-    options.projectRoot,
-    options.setParserOptionsProject
-  );
-
   updateJson(
     host,
     joinPathFragments(options.projectRoot, '.eslintrc.json'),
     (json: ESLintLinter.Config) => {
-      json = reactEslintJson;
+      json = extendReactEslintJson(json);
+
       json.ignorePatterns = ['!**/*', 'public', '.cache', 'node_modules'];
 
       // Find the override that handles both TS and JS files.

packages/react/index.ts

@@ -1,6 +1,7 @@
 export {
   extraEslintDependencies,
   createReactEslintJson,
+  extendReactEslintJson,
 } from './src/utils/lint';
 export { CSS_IN_JS_DEPENDENCIES } from './src/utils/styled';
 export { assertValidStyle } from './src/utils/assertion';

packages/react/src/generators/library/library.ts

@@ -34,7 +34,7 @@ import {
   findComponentImportPath,
 } from '../../utils/ast-utils';
 import {
-  createReactEslintJson,
+  extendReactEslintJson,
   extraEslintDependencies,
 } from '../../utils/lint';
 import {
@@ -195,15 +195,10 @@ async function addLinting(host: Tree, options: NormalizedSchema) {
       skipPackageJson: options.skipPackageJson,
     });
 
-    const reactEslintJson = createReactEslintJson(
-      options.projectRoot,
-      options.setParserOptionsProject
-    );
-
     updateJson(
       host,
       joinPathFragments(options.projectRoot, '.eslintrc.json'),
-      () => reactEslintJson
+      extendReactEslintJson
     );
 
     let installTask = () => {};

packages/react/src/utils/lint.ts

@@ -26,6 +26,9 @@ export const extendReactEslintJson = (json: Linter.Config) => {
   };
 };
 
+/**
+ * @deprecated Use {@link extendReactEslintJson} instead.
+ */
 export const createReactEslintJson = (
   projectRoot: string,
   setParserOptionsProject: boolean