Close #605: Disable type check for test, start, build commands in CI

.changeset/cyan-moose-judge.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Disable typechecking for modular start, test, build commands in CI environments

.changeset/polite-lizards-thank.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': patch
+---
+
+Added `modular typecheck` command to programatically type check the project

packages/modular-scripts/react-scripts/config/webpack.config.js

@@ -25,8 +25,8 @@ const ModuleNotFoundPlugin = require('../../react-dev-utils/ModuleNotFoundPlugin
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const typescriptFormatter = require('../../react-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
 const postcssNormalize = require('postcss-normalize');
+const isCI = require('is-ci');
 
 const appPackageJson = require(paths.appPackageJson);
 
@@ -634,8 +634,9 @@ module.exports = function (webpackEnv) {
           // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
           maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
         }),
-      // TypeScript type checking
+      // TypeScript type checking for non CI envs
       useTypeScript &&
+        !isCI &&
         new ForkTsCheckerWebpackPlugin({
           typescript: resolve.sync('typescript', {
             basedir: paths.appNodeModules,

packages/modular-scripts/react-scripts/scripts/start.js

@@ -28,6 +28,8 @@ const {
 } = require('../../react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('../../react-dev-utils/openBrowser');
 const semver = require('semver');
+const isCI = require('is-ci');
+
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
@@ -82,7 +84,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
 
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const useTypeScript = !isCI && fs.existsSync(paths.appTsConfig);
     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(
       protocol,
@@ -97,6 +99,7 @@ checkBrowsers(paths.appPath, isInteractive)
         devServer.sockWrite(devServer.sockets, 'errors', errors),
     };
     // Create a webpack compiler that is configured with custom messages.
+    // Only run typecheck if not in CI env
     const compiler = createCompiler({
       appName,
       config,

packages/modular-scripts/src/cli.ts

@@ -216,6 +216,22 @@ program
     await port(relativePath);
   });
 
+interface TypecheckOptions {
+  silent: boolean;
+}
+
+program
+  .command('typecheck')
+  .option(
+    '--silent',
+    'silences the error messages gathered during the type check',
+  )
+  .description('Typechecks the entire project')
+  .action(async (options: TypecheckOptions) => {
+    const { typecheck } = await import('./typecheck');
+    await typecheck(options.silent);
+  });
+
 void startupCheck()
   .then(() => {
     return program.parseAsync(process.argv);

packages/modular-scripts/src/config/jest/index.ts

@@ -1,6 +1,7 @@
 import * as fs from 'fs-extra';
 import path from 'path';
 import chalk from 'chalk';
+import isCi from 'is-ci';
 import globby from 'globby';
 import type { Config } from '@jest/types';
 import { defaults } from 'jest-config';
@@ -195,5 +196,16 @@ export function createJestConfig(
       moduleNameMapper: mergedMapper,
     });
   }
+
+  // don't typecheck tests in CI
+  if (isCi) {
+    jestConfig.globals = {
+      'ts-jest': {
+        diagnostics: false,
+        isolatedModules: true,
+      },
+    };
+  }
+
   return jestConfig;
 }

packages/modular-scripts/src/typecheck.ts

@@ -0,0 +1,65 @@
+import isCI from 'is-ci';
+import path from 'path';
+import ts from 'typescript';
+import chalk from 'chalk';
+import getPackageMetadata from './buildPackage/getPackageMetadata';
+import { reportTSDiagnostics } from './buildPackage/reportTSDiagnostics';
+import * as logger from './utils/logger';
+
+export async function typecheck(silent: boolean): Promise<void> {
+  const { typescriptConfig } = await getPackageMetadata();
+
+  const { _compilerOptions, ...tsConfig } = typescriptConfig;
+
+  // Parse all config except for compilerOptions
+  const configParseResult = ts.parseJsonConfigFileContent(
+    tsConfig,
+    ts.sys,
+    path.dirname('tsconfig.json'),
+  );
+
+  if (configParseResult.errors.length > 0) {
+    reportTSDiagnostics(':root', configParseResult.errors);
+    throw new Error('Could not parse Typescript configuration');
+  }
+
+  const program = ts.createProgram(
+    configParseResult.fileNames,
+    configParseResult.options,
+  );
+
+  // Pulled from typescript's getCanonicalFileName logic
+  // eslint-disable-next-line  no-useless-escape
+  const fileNameLowerCaseRegExp = /[^\u0130\u0131\u00DFa-z0-9\\/:\-_\. ]+/g;
+
+  function toFileNameLowerCase(x: string) {
+    return fileNameLowerCaseRegExp.test(x)
+      ? x.replace(fileNameLowerCaseRegExp, x.toLowerCase())
+      : x;
+  }
+
+  const diagnostics = ts.getPreEmitDiagnostics(program) as ts.Diagnostic[];
+
+  const diagnosticHost = {
+    getCurrentDirectory: (): string => ts.sys.getCurrentDirectory(),
+    getNewLine: (): string => ts.sys.newLine,
+    getCanonicalFileName: (file: string): string =>
+      ts.sys.useCaseSensitiveFileNames ? file : toFileNameLowerCase(file),
+  };
+
+  if (diagnostics.length) {
+    if (silent) {
+      throw new Error('\u0078 Typecheck did not pass');
+    }
+
+    if (isCI) {
+      throw new Error(ts.formatDiagnostics(diagnostics, diagnosticHost));
+    }
+
+    throw new Error(
+      ts.formatDiagnosticsWithColorAndContext(diagnostics, diagnosticHost),
+    );
+  }
+
+  logger.log(chalk.green('\u2713 Typecheck passed'));
+}