packages/cli: add flag for toggling type checking as a part of plugin and app serve

packages/cli/src/commands/app/serve.ts

@@ -15,9 +15,13 @@
  */
 
 import { startDevServer } from '../../lib/bundle';
+import { Command } from 'commander';
 
-export default async () => {
-  await startDevServer({ entry: 'src/index' });
+export default async (cmd: Command) => {
+  await startDevServer({
+    entry: 'src/index',
+    checksEnabled: cmd.check,
+  });
 
   // Wait for interrupt signal
   await new Promise(() => {});

packages/cli/src/commands/plugin/serve.ts

@@ -15,9 +15,13 @@
  */
 
 import { startDevServer } from '../../lib/bundle';
+import { Command } from 'commander';
 
-export default async () => {
-  await startDevServer({ entry: 'dev/index' });
+export default async (cmd: Command) => {
+  await startDevServer({
+    entry: 'dev/index',
+    checksEnabled: cmd.check,
+  });
 
   // Wait for interrupt signal
   await new Promise(() => {});

packages/cli/src/index.ts

@@ -35,6 +35,7 @@ const main = (argv: string[]) => {
   program
     .command('app:serve')
     .description('Serve an app for local development')
+    .option('--check', 'Enable type checking and linting')
     .action(actionHandler(() => require('./commands/app/serve')));
 
   program
@@ -60,6 +61,7 @@ const main = (argv: string[]) => {
   program
     .command('plugin:serve')
     .description('Serves the dev/ folder of a plugin')
+    .option('--check', 'Enable type checking and linting')
     .action(actionHandler(() => require('./commands/plugin/serve')));
 
   program
@@ -155,7 +157,7 @@ function actionHandler<T extends readonly any[]>(
   };
 }
 
-process.on('unhandledRejection', (rejection) => {
+process.on('unhandledRejection', rejection => {
   if (rejection instanceof Error) {
     exitWithError(rejection);
   } else {

packages/cli/src/lib/bundle/config.ts

@@ -18,7 +18,7 @@ import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';
-import { resolveBundlingPaths } from './paths';
+import { BundlingPaths } from './paths';
 import { loaders } from './loaders';
 import { optimization } from './optimization';
 import { BundlingOptions } from './types';
@@ -28,8 +28,34 @@ import { BundlingOptions } from './types';
 // import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
 // import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 
-export function createConfig(options: BundlingOptions): webpack.Configuration {
-  const paths = resolveBundlingPaths(options);
+export function createConfig(
+  paths: BundlingPaths,
+  options: BundlingOptions,
+): webpack.Configuration {
+  const { checksEnabled } = options;
+
+  const plugins = [
+    new HtmlWebpackPlugin({
+      template: paths.targetHtml,
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ];
+
+  if (checksEnabled) {
+    plugins.push(
+      new ForkTsCheckerWebpackPlugin({
+        tsconfig: paths.targetTsConfig,
+        eslint: true,
+        eslintOptions: {
+          parserOptions: {
+            project: paths.targetTsConfig,
+            tsconfigRootDir: paths.targetPath,
+          },
+        },
+        reportFiles: ['**', '!**/__tests__/**', '!**/?(*.)(spec|test).*'],
+      }),
+    );
+  }
 
   return {
     mode: 'development',
@@ -59,23 +85,7 @@ export function createConfig(options: BundlingOptions): webpack.Configuration {
       filename: 'bundle.js',
     },
     optimization: optimization(),
-    plugins: [
-      new HtmlWebpackPlugin({
-        template: paths.targetHtml,
-      }),
-      new ForkTsCheckerWebpackPlugin({
-        tsconfig: paths.targetTsConfig,
-        eslint: true,
-        eslintOptions: {
-          parserOptions: {
-            project: paths.targetTsConfig,
-            tsconfigRootDir: paths.targetPath,
-          },
-        },
-        reportFiles: ['**', '!**/__tests__/**', '!**/?(*.)(spec|test).*'],
-      }),
-      new webpack.HotModuleReplacementPlugin(),
-    ],
+    plugins,
     node: {
       module: 'empty',
       dgram: 'empty',

packages/cli/src/lib/bundle/index.ts

@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-export * from './server';
+export { bundle } from './bundle';
+export { startDevServer } from './server';

packages/cli/src/lib/bundle/paths.ts

@@ -43,6 +43,7 @@ export function resolveBundlingPaths(options: BundlingPathsOptions) {
   return {
     targetHtml,
     targetPath: paths.resolveTarget('.'),
+    targetDist: paths.resolveTarget('dist'),
     targetAssets: paths.resolveTarget('assets'),
     targetSrc: paths.resolveTarget('src'),
     targetDev: paths.resolveTarget('dev'),

packages/cli/src/lib/bundle/server.ts

@@ -21,6 +21,7 @@ import openBrowser from 'react-dev-utils/openBrowser';
 import { choosePort, prepareUrls } from 'react-dev-utils/WebpackDevServerUtils';
 import { createConfig } from './config';
 import { BundlingOptions } from './types';
+import { resolveBundlingPaths } from './paths';
 
 export async function startDevServer(options: BundlingOptions) {
   const host = process.env.HOST ?? '0.0.0.0';
@@ -34,7 +35,8 @@ export async function startDevServer(options: BundlingOptions) {
   const protocol = yn(process.env.HTTPS, { default: false }) ? 'https' : 'http';
   const urls = prepareUrls(protocol, host, port);
 
-  const config = createConfig(options);
+  const paths = resolveBundlingPaths(options);
+  const config = createConfig(paths, options);
   const compiler = webpack(config);
 
   const server = new WebpackDevServer(compiler, {

packages/cli/src/lib/bundle/types.ts

@@ -16,4 +16,6 @@
 
 import { BundlingPathsOptions } from './paths';
 
-export type BundlingOptions = BundlingPathsOptions & {};
+export type BundlingOptions = BundlingPathsOptions & {
+  checksEnabled: boolean;
+};