fix: clean and build without diagnostics

packages/core/admin/_internal/node/build.ts

@@ -1,13 +1,12 @@
+import type { CLIContext } from '@strapi/strapi';
+import EE from '@strapi/strapi/dist/utils/ee';
 import * as tsUtils from '@strapi/typescript-utils';
 import { checkRequiredDependencies } from './core/dependencies';
-import { writeStaticClientFiles } from './staticFiles';
-import { build as buildWebpack } from './webpack/build';
-import { createBuildContext } from './createBuildContext';
-
-import EE from '@strapi/strapi/dist/utils/ee';
 import { getTimer } from './core/timer';
-
-import type { CLIContext } from '@strapi/strapi';
+import { createBuildContext } from './createBuildContext';
+import { writeStaticClientFiles } from './staticFiles';
+import { prettyTime } from './utils';
+import { build as buildWebpack } from './webpack/build';
 
 interface BuildOptions extends CLIContext {
   /**
@@ -56,7 +55,7 @@ const build = async ({ logger, cwd, tsconfig, ignorePrompts, ...options }: Build
     tsUtils.compile(cwd, { configOptions: { ignoreDiagnostics: false } });
 
     const compilingDuration = timer.end('compilingTS');
-    compilingTsSpinner.text = `Compiling TS (${compilingDuration}ms)`;
+    compilingTsSpinner.text = `Compiling TS (${prettyTime(compilingDuration)})`;
     compilingTsSpinner.succeed();
   }
 
@@ -71,7 +70,7 @@ const build = async ({ logger, cwd, tsconfig, ignorePrompts, ...options }: Build
     options,
   });
   const contextDuration = timer.end('createBuildContext');
-  contextSpinner.text = `Building build context (${contextDuration}ms)`;
+  contextSpinner.text = `Building build context (${prettyTime(contextDuration)})`;
   contextSpinner.succeed();
 
   timer.start('buildAdmin');
@@ -85,7 +84,7 @@ const build = async ({ logger, cwd, tsconfig, ignorePrompts, ...options }: Build
     await buildWebpack(ctx);
 
     const buildDuration = timer.end('buildAdmin');
-    buildingSpinner.text = `Building admin panel (${buildDuration}ms)`;
+    buildingSpinner.text = `Building admin panel (${prettyTime(buildDuration)})`;
     buildingSpinner.succeed();
   } catch (err) {
     buildingSpinner.fail();

packages/core/admin/_internal/node/develop.ts

@@ -2,17 +2,21 @@ import type { CLIContext } from '@strapi/strapi';
 import * as tsUtils from '@strapi/typescript-utils';
 import { joinBy } from '@strapi/utils';
 import chokidar from 'chokidar';
+import * as fs from 'fs-extra';
+import path from 'path';
+
 import cluster from 'node:cluster';
 
-import { getTimer } from './core/timer';
 import { checkRequiredDependencies } from './core/dependencies';
+import { getTimer, type TimeMeasurer } from './core/timer';
 import { createBuildContext } from './createBuildContext';
-import { WebpackWatcher, watch as watchWebpack } from './webpack/watch';
 import { build as buildWebpack } from './webpack/build';
+import { watch as watchWebpack, WebpackWatcher } from './webpack/watch';
 
+import strapiFactory from '@strapi/strapi';
 import EE from '@strapi/strapi/dist/utils/ee';
 import { writeStaticClientFiles } from './staticFiles';
-import strapiFactory from '@strapi/strapi';
+import { prettyTime } from './utils';
 
 interface DevelopOptions extends CLIContext {
   /**
@@ -24,6 +28,33 @@ interface DevelopOptions extends CLIContext {
   watchAdmin?: boolean;
 }
 
+const cleanupDistDirectory = async ({
+  tsconfig,
+  logger,
+  timer,
+}: Pick<DevelopOptions, 'tsconfig' | 'logger'> & { timer: TimeMeasurer }) => {
+  const distDir = tsconfig?.config?.options?.outDir;
+
+  if (!distDir || !(await fs.pathExists(distDir))) {
+    return;
+  }
+  const timerName = 'cleaningDist' + Date.now();
+  timer.start(timerName);
+  const cleaningSpinner = logger.spinner(`Cleaning dist dir ${distDir}`).start();
+
+  const dirContent = await fs.readdir(distDir);
+  const validFilenames = dirContent
+    // Ignore the admin build folder
+    .filter((filename) => filename !== 'build');
+  for (const filename of validFilenames) {
+    await fs.remove(path.resolve(distDir, filename));
+  }
+
+  const generatingDuration = timer.end(timerName);
+  cleaningSpinner.text = `Cleaning dist dir (${prettyTime(generatingDuration)})`;
+  cleaningSpinner?.succeed();
+};
+
 const develop = async ({
   cwd,
   polling,
@@ -35,6 +66,8 @@ const develop = async ({
 }: DevelopOptions) => {
   const timer = getTimer();
 
+  const distDir = tsconfig?.config?.options?.outDir;
+
   if (cluster.isPrimary) {
     const { didInstall } = await checkRequiredDependencies({ cwd, logger, ignorePrompts }).catch(
       (err) => {
@@ -47,6 +80,12 @@ const develop = async ({
       return;
     }
 
+    // Build without diagnostics in case schemas have changed
+    if (distDir) {
+      await cleanupDistDirectory({ tsconfig, logger, timer });
+      await tsUtils.compile(cwd, { configOptions: { ignoreDiagnostics: true } });
+    }
+
     /**
      * IF we're not watching the admin we're going to build it, this makes
      * sure that at least the admin is built for users & they can interact
@@ -64,7 +103,7 @@ const develop = async ({
         options,
       });
       const contextDuration = timer.end('createBuildContext');
-      contextSpinner.text = `Building build context (${contextDuration}ms)`;
+      contextSpinner.text = `Building build context (${prettyTime(contextDuration)})`;
       contextSpinner.succeed();
 
       timer.start('creatingAdmin');
@@ -75,13 +114,18 @@ const develop = async ({
       await buildWebpack(ctx);
 
       const adminDuration = timer.end('creatingAdmin');
-      adminSpinner.text = `Creating admin (${adminDuration}ms)`;
+      adminSpinner.text = `Creating admin (${prettyTime(adminDuration)})`;
       adminSpinner.succeed();
     }
 
     cluster.on('message', async (worker, message) => {
       switch (message) {
         case 'reload': {
+          if (distDir) {
+            // Build without diagnostics in case schemas have changed
+            await cleanupDistDirectory({ tsconfig, logger, timer });
+            await tsUtils.compile(cwd, { configOptions: { ignoreDiagnostics: true } });
+          }
           logger.debug('cluster has the reload message, sending the worker kill message');
           worker.send('kill');
           break;
@@ -104,17 +148,6 @@ const develop = async ({
   }
 
   if (cluster.isWorker) {
-    if (tsconfig?.config) {
-      timer.start('compilingTS');
-      const compilingTsSpinner = logger.spinner(`Compiling TS`).start();
-
-      tsUtils.compile(cwd, { configOptions: { ignoreDiagnostics: false } });
-
-      const compilingDuration = timer.end('compilingTS');
-      compilingTsSpinner.text = `Compiling TS (${compilingDuration}ms)`;
-      compilingTsSpinner.succeed();
-    }
-
     const strapi = strapiFactory({
       appDir: cwd,
       distDir: tsconfig?.config.options.outDir ?? '',
@@ -122,6 +155,37 @@ const develop = async ({
       serveAdminPanel: !watchAdmin,
     });
 
+    const strapiInstance = await strapi.load();
+
+    timer.start('generatingTS');
+    const generatingTsSpinner = logger.spinner(`Generating types`).start();
+
+    await tsUtils.generators.generate({
+      strapi: strapiInstance,
+      pwd: cwd,
+      rootDir: undefined,
+      logger: { silent: true, debug: false },
+      artifacts: { contentTypes: true, components: true },
+    });
+
+    const generatingDuration = timer.end('generatingTS');
+    generatingTsSpinner.text = `Generating types (${prettyTime(generatingDuration)})`;
+    generatingTsSpinner.succeed();
+
+    if (tsconfig?.config) {
+      timer.start('compilingTS');
+      const compilingTsSpinner = logger.spinner(`Compiling TS`).start();
+
+      if (distDir) {
+        await cleanupDistDirectory({ tsconfig, logger, timer });
+        await tsUtils.compile(cwd, { configOptions: { ignoreDiagnostics: false } });
+      }
+
+      const compilingDuration = timer.end('compilingTS');
+      compilingTsSpinner.text = `Compiling TS (${prettyTime(compilingDuration)})`;
+      compilingTsSpinner.succeed();
+    }
+
     let webpackWatcher: WebpackWatcher | undefined;
 
     /**
@@ -141,7 +205,7 @@ const develop = async ({
         options,
       });
       const contextDuration = timer.end('createBuildContext');
-      contextSpinner.text = `Building build context (${contextDuration}ms)`;
+      contextSpinner.text = `Building build context (${prettyTime(contextDuration)})`;
       contextSpinner.succeed();
 
       timer.start('creatingAdmin');
@@ -152,27 +216,10 @@ const develop = async ({
       webpackWatcher = await watchWebpack(ctx);
 
       const adminDuration = timer.end('creatingAdmin');
-      adminSpinner.text = `Creating admin (${adminDuration}ms)`;
+      adminSpinner.text = `Creating admin (${prettyTime(adminDuration)})`;
       adminSpinner.succeed();
     }
 
-    const strapiInstance = await strapi.load();
-
-    timer.start('generatingTS');
-    const generatingTsSpinner = logger.spinner(`Generating types`).start();
-
-    await tsUtils.generators.generate({
-      strapi: strapiInstance,
-      pwd: cwd,
-      rootDir: undefined,
-      logger: { silent: true, debug: false },
-      artifacts: { contentTypes: true, components: true },
-    });
-
-    const generatingDuration = timer.end('generatingTS');
-    generatingTsSpinner.text = `Generating types (${generatingDuration}ms)`;
-    generatingTsSpinner.succeed();
-
     const restart = async () => {
       if (strapiInstance.reload.isWatching && !strapiInstance.reload.isReloading) {
         strapiInstance.reload.isReloading = true;

packages/core/admin/_internal/node/utils.ts

@@ -0,0 +1,3 @@
+export const prettyTime = (timeInMs: number): string => {
+  return Math.ceil(timeInMs) + 'ms';
+};