refactor: 💡 CR fixes

packages/cli/package.json

@@ -37,11 +37,13 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@gatsbyjs/webpack-hot-middleware": "^2.25.2",
+    "@ima/dev-utils": "^17.10.0",
     "@ima/error-overlay": "^17.10.0",
     "@ima/hmr-client": "^17.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@swc/core": "^1.2.155",
     "@types/webpack": "^5.28.0",
+    "@types/yargs": "^17.0.9",
     "babel-loader": "^8.2.3",
     "better-opn": "^3.0.2",
     "bundle-stats-webpack-plugin": "^3.2.9",
@@ -86,8 +88,7 @@
     "@types/nodemon": "^1.19.1",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-dev-middleware": "^5.3.0",
-    "@types/webpack-hot-middleware": "^2.25.6",
-    "@types/yargs": "^17.0.9"
+    "@types/webpack-hot-middleware": "^2.25.6"
   },
   "peerDependencies": {
     "@ima/server": "*"

packages/cli/src/commands/build.ts

@@ -53,11 +53,6 @@ export const describe = 'Build an application for production';
 export const handler = handlerFactory(build);
 export const builder: CommandBuilder = {
   ...sharedArgsFactory(CMD),
-  clean: {
-    desc: 'Clean build folder before building the application',
-    type: 'boolean',
-    default: true,
-  },
   profile: {
     desc: 'Turn on profiling support in production',
     type: 'boolean',

packages/cli/src/commands/dev.ts

@@ -150,11 +150,6 @@ export const describe = 'Run application in development watch mode';
 export const handler = handlerFactory(dev);
 export const builder: CommandBuilder = {
   ...sharedArgsFactory(CMD),
-  clean: {
-    desc: 'Clean build folder before building the application',
-    type: 'boolean',
-    default: false,
-  },
   open: {
     desc: 'Opens browser window after server has been started',
     type: 'boolean',

packages/cli/src/dev-server/internalSourceMiddleware.ts

@@ -19,21 +19,21 @@ function internalSourceMiddleware(rootDir: string) {
     // Resolve absolute
     fileName = path.resolve(fileName);
 
-    // Don't allow outside of project dir
+    // Don't allow access outside of project dir
     if (!fileName.startsWith(rootDir)) {
       return res.status(500).end();
     }
 
     if (!fs.existsSync(fileName)) {
-      return res.status(500).end();
+      return res.status(404).end();
     }
 
     try {
       const fileSource = await fs.promises.readFile(fileName, 'utf8');
 
       return res.json({
         source: fileSource,
-        rootDir,
+        rootDir, // Used to print relative urls in error-overlay
       });
     } catch (error) {
       return res.status(500).end();

packages/cli/src/dev-server/openEditorMiddleware.ts

@@ -23,9 +23,9 @@ function getEditor() {
 }
 
 /**
- * Launch editor with given file on given line and column
- * if supported by the editor. If there are no editor env variables
- * set, it prints and instructions to setup this functionality.
+ * Open code editor at given file, line and column, if supported.
+ * If there are no editor env variables defined, it prints an
+ * instructions with stepts to setup this functionality.
  */
 function launchEditor(fileName: string, line: number, column: number): void {
   const editor = getEditor();

packages/cli/src/lib/cli.ts

@@ -30,7 +30,7 @@ function handlerFactory(handlerFn: HandlerFn) {
 
 /**
  * Resolves additional cliArgs that can be provided with custom cli plugins
- * defined in the optional ima.config.js.
+ * defined in the ima.config.js.
  *
  * @param {ImaCliCommand} Current command for which args are loaded.
  * @returns {CommandBuilder} Yargs commands object.
@@ -60,7 +60,7 @@ function resolveCliPluginArgs(command: ImaCliCommand): CommandBuilder {
 
 /**
  * Initializes shared args with their default values based
- * current CLI command.
+ * on the current CLI command.
  *
  * @param {ImaCliCommand} command Current CLI command identifier.
  * @returns {CommandBuilder} Object with shared args.

packages/cli/src/lib/compiler.ts

@@ -11,19 +11,20 @@ import {
 import { logger } from './logger';
 
 /**
- * Handles webpack compile errors.
+ * Cli Error handler.
  *
  * @param {WebpackError | unknown} err
  * @returns {void}
  */
-function handleError(err: WebpackError | unknown): void {
-  if (err instanceof Error) {
-    err?.stack && logger.error(err.stack);
-  } else if (err instanceof WebpackError) {
-    err?.stack && logger.error(err.stack);
-    err?.details && logger.error(err.details);
+function handleError(error: WebpackError | unknown): void {
+  if (error instanceof Error || error instanceof WebpackError) {
+    logger.error(
+      `${chalk.underline(error.name)}: ${error.message}\n\n${chalk.gray(
+        error.stack
+      )}`
+    );
   } else {
-    logger.write(chalk.red('Unexpected error occurred, closing compiler...'));
+    logger.error('Unexpected error occurred, closing the compiler...');
   }
 }
 
@@ -55,7 +56,7 @@ async function runCompiler(
   return new Promise((resolve, reject) => {
     compiler.run((error, stats) =>
       closeCompiler(compiler).then(async () => {
-        // Reject with compiler when there are any errors
+        // Reject when there are any errors
         if (error || stats?.hasErrors()) {
           if (stats) {
             await formatWebpackErrors(stats, args);
@@ -82,7 +83,7 @@ async function runCompiler(
 }
 
 /**
- * Runs webpack compiler with given configuration.
+ * Runs webpack watch compiler with given configuration.
  *
  * @param {MultiCompiler} compiler Webpack compiler instance
  * @param {ImaCliArgs} args Cli and build args.
@@ -113,7 +114,7 @@ async function watchCompiler(
         logger.info('Continuing with the compilation...');
       }
 
-      // Reject with compiler when there are any errors
+      // Reject when there are any compiler errors
       if (error) {
         return reject(error);
       }