feat(react): add strict option to react application generator (#5248)

docs/angular/api-react/generators/application.md

@@ -142,6 +142,14 @@ Type: `boolean`
 
 Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).
 
+### strict
+
+Default: `false`
+
+Type: `boolean`
+
+Creates an application with stricter type checking and build optimization options.
+
 ### style
 
 Alias(es): s

docs/node/api-react/generators/application.md

@@ -142,6 +142,14 @@ Type: `boolean`
 
 Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).
 
+### strict
+
+Default: `false`
+
+Type: `boolean`
+
+Creates an application with stricter type checking and build optimization options.
+
 ### style
 
 Alias(es): s

docs/react/api-react/generators/application.md

@@ -142,6 +142,14 @@ Type: `boolean`
 
 Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).
 
+### strict
+
+Default: `false`
+
+Type: `boolean`
+
+Creates an application with stricter type checking and build optimization options.
+
 ### style
 
 Alias(es): s

packages/react/src/generators/application/application.spec.ts

@@ -20,6 +20,7 @@ describe('app', () => {
     name: 'myApp',
     linter: Linter.EsLint,
     style: 'css',
+    strict: false,
   };
 
   beforeEach(() => {
@@ -75,6 +76,14 @@ describe('app', () => {
           path: './tsconfig.spec.json',
         },
       ]);
+      expect(tsconfig.compilerOptions.strict).not.toBeDefined();
+      expect(
+        tsconfig.compilerOptions.forceConsistentCasingInFileNames
+      ).not.toBeDefined();
+      expect(tsconfig.compilerOptions.noImplicitReturns).not.toBeDefined();
+      expect(
+        tsconfig.compilerOptions.noFallthroughCasesInSwitch
+      ).not.toBeDefined();
 
       const tsconfigApp = JSON.parse(
         stripJsonComments(
@@ -669,4 +678,40 @@ describe('app', () => {
       expect(appTree.exists('/apps/my-app/src/main.js')).toBe(true);
     });
   });
+
+  describe('--strict', () => {
+    it('should update tsconfig.json', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        strict: true,
+      });
+      const tsconfigJson = readJson(appTree, '/apps/my-app/tsconfig.json');
+
+      expect(tsconfigJson.compilerOptions.strict).toBeTruthy();
+      expect(
+        tsconfigJson.compilerOptions.forceConsistentCasingInFileNames
+      ).toBeTruthy();
+      expect(tsconfigJson.compilerOptions.noImplicitReturns).toBeTruthy();
+      expect(
+        tsconfigJson.compilerOptions.noFallthroughCasesInSwitch
+      ).toBeTruthy();
+    });
+
+    it('should update budgets in workspace.json', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        strict: true,
+      });
+      const workspaceJson = getProjects(appTree);
+      const targetConfig = workspaceJson.get('my-app').targets;
+
+      expect(targetConfig.build.configurations.production.budgets).toEqual([
+        {
+          type: 'initial',
+          maximumWarning: '500kb',
+          maximumError: '1mb',
+        },
+      ]);
+    });
+  });
 });

packages/react/src/generators/application/lib/add-project.ts

@@ -87,13 +87,21 @@ function createBuildTarget(options: NormalizedSchema): TargetConfiguration {
         namedChunks: false,
         extractLicenses: true,
         vendorChunk: false,
-        budgets: [
+        budgets: options.strict
-          {
+          ? [
-            type: 'initial',
+              {
-            maximumWarning: '2mb',
+                type: 'initial',
-            maximumError: '5mb',
+                maximumWarning: '500kb',
-          },
+                maximumError: '1mb',
-        ],
+              },
+            ]
+          : [
+              {
+                type: 'initial',
+                maximumWarning: '2mb',
+                maximumError: '5mb',
+              },
+            ],
       },
     },
   };

packages/react/src/generators/application/lib/create-application-files.ts

@@ -1,7 +1,35 @@
 import { NormalizedSchema } from '../schema';
-import { names, offsetFromRoot, Tree, toJS, generateFiles } from '@nrwl/devkit';
+import {
+  names,
+  offsetFromRoot,
+  Tree,
+  toJS,
+  generateFiles,
+  joinPathFragments,
+  updateJson,
+} from '@nrwl/devkit';
 import { join } from 'path';
 
+function updateTsConfig(host: Tree, options: NormalizedSchema) {
+  updateJson(
+    host,
+    joinPathFragments(options.appProjectRoot, 'tsconfig.json'),
+    (json) => {
+      if (options.strict) {
+        json.compilerOptions = {
+          ...json.compilerOptions,
+          forceConsistentCasingInFileNames: true,
+          strict: true,
+          noImplicitReturns: true,
+          noFallthroughCasesInSwitch: true,
+        };
+      }
+
+      return json;
+    }
+  );
+}
+
 export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   let styleSolutionSpecificAppFiles: string;
   if (options.styledModule && options.style !== 'styled-jsx') {
@@ -45,4 +73,6 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   if (options.js) {
     toJS(host);
   }
+
+  updateTsConfig(host, options);
 }

packages/react/src/generators/application/schema.d.ts

@@ -17,6 +17,7 @@ export interface Schema {
   skipWorkspaceJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
+  strict?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

packages/react/src/generators/application/schema.json

@@ -135,6 +135,11 @@
       "type": "boolean",
       "description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss",
       "default": false
+    },
+    "strict": {
+      "type": "boolean",
+      "description": "Creates an application with stricter type checking and build optimization options.",
+      "default": false
     }
   },
   "required": []