Migrate gulp js-bundles-watch to NX (#34308)

Signed-off-by: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com>
Co-authored-by: Andrey Vorobev <738482+vorobey@users.noreply.github.com>

Author: GoodDayForSurf

packages/devextreme/build/gulp/js-bundles.js

@@ -12,9 +12,26 @@ gulp.task('clean', shell.task('pnpm nx clean:artifacts devextreme'));
 
 require('./build/gulp/bundler-config');
 require('./build/gulp/transpile');
-require('./build/gulp/js-bundles');
 require('./build/gulp/localization');
 
+gulp.task('js-bundles-prod', shell.task(
+    context.uglify
+        ? 'pnpm nx run devextreme:bundle:prod -c production'
+        : 'pnpm nx run devextreme:bundle:prod'
+));
+
+gulp.task('js-bundles-debug', shell.task(
+    context.uglify
+        ? 'pnpm nx run devextreme:bundle:debug -c production'
+        : 'pnpm nx run devextreme:bundle:debug'
+));
+
+gulp.task('js-bundles-watch', shell.task(
+    context.uglify
+        ? 'pnpm nx run devextreme:bundle:watch -c production'
+        : 'pnpm nx run devextreme:bundle:watch'
+));
+
 function getTranspileConfig() {
     if(env.TEST_CI) {
         return 'ci';

packages/devextreme/gulpfile.js

@@ -627,6 +627,34 @@
         "{projectRoot}/artifacts/js/dx.{all,web,viz,ai-integration,custom}.debug.js"
       ]
     },
+    "bundle:watch": {
+      "executor": "devextreme-nx-infra-plugin:bundle",
+      "options": {
+        "watch": true,
+        "entries": [
+          "bundles/dx.all.js",
+          "bundles/dx.web.js",
+          "bundles/dx.viz.js",
+          "bundles/dx.ai-integration.js",
+          "bundles/dx.custom.js"
+        ],
+        "sourceDir": "./artifacts/transpiled-renovation-npm",
+        "outDir": "./artifacts/js",
+        "mode": "debug",
+        "webpackConfigPath": "./webpack.config.js",
+        "applyLicenseHeaders": {
+          "prependAfterLicense": "\"use strict\";\n\n",
+          "separator": "",
+          "includePatterns": ["dx.*.debug.js"]
+        }
+      },
+      "configurations": {
+        "production": {
+          "sourceMap": false
+        }
+      },
+      "cache": false
+    },
     "bundle:prod": {
       "executor": "nx:run-commands",
       "options": {

packages/devextreme/project.json

@@ -76,6 +76,9 @@ Gulp tasks that have been migrated to Nx executor targets (the gulp task is now
 | `generate-community-locales` | `build:community-localization`          | Uses `devextreme-nx-infra-plugin:generate-community-locales` to normalize `js/localization/messages/*.json` against `en.json` in place (fills translations, English fallback for missing/`TODO` values, escapes quotes, inherits en's key order/formatting). Target is `cache: false` with no `outputs` (input dir == output dir — a source-normalization task, not a cached build artifact). The gulp task delegates via `shell.task('pnpm nx build:community-localization devextreme')`.                                                                                                                                                                                                                                                                                           |
 | `test-env`                   | `test-env`                              | Uses `nx:run-commands` to wrap the existing `node ./testing/launch` script (compiles the QUnit runner, starts the test server on port 20060, opens the browser). `cache: false`, no outputs (long-running server). `cwd` is `{projectRoot}`. The gulp task delegates via `shell.task('pnpm nx test-env devextreme')`. Still a `dev-watch` member, so the gulp registration stays as a delegate; full removal is deferred until `dev-watch` is migrated.                                                                                                                                                                                                                                                                                                                              |
 | `transpile-systemjs`         | `build:systemjs`                        | Uses `nx:run-commands` (no custom executor — same precedent as `test-env`) to run `node testing/systemjs-builder.js --transpile=<mode>` for each mode (`modules`, `testing`, `css`, `js-vendors`) with `parallel: true` and `cwd: {projectRoot}`, mirroring the old `gulp.parallel`. The transform logic stays entirely in `testing/systemjs-builder.js` (untouched, guaranteeing byte parity); the devextreme-specific script path + mode list live in `project.json`, not in the plugin. `cache: true`, keeps the existing `inputs`/`outputs`/`dependsOn: [build:dev]`. Not a `dev-watch` member, so `build/gulp/systemjs.js`, its `gulpfile.js` require, and the `build:systemjs` npm script were deleted outright (no delegate). CI runs `pnpm exec nx build:systemjs` directly. |
+| `js-bundles-watch`           | `bundle:watch`                          | Webpack watch via `devextreme-nx-infra-plugin:bundle` with `watch: true`. Does not run `compress:bundles`. Gulp delegates via `shell.task('pnpm nx run devextreme:bundle:watch')`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `js-bundles-prod`            | `bundle:prod`                           | Already delegated via `shell.task('pnpm nx run devextreme:bundle:prod ...')`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `js-bundles-debug`           | `bundle:debug`                          | Already delegated via `shell.task('pnpm nx run devextreme:bundle:debug ...')`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
 When migrating additional gulp tasks, follow the same pattern:
 

packages/nx-infra-plugin/AGENTS.md

@@ -51,6 +51,7 @@ function createWebpackConfig(
   mode: 'debug' | 'production',
   projectRoot: string,
   sourceMap: boolean,
+  watch: boolean,
 ): Configuration {
   const config: Configuration = {
     ...baseConfig,
@@ -68,6 +69,10 @@ function createWebpackConfig(
     minimize: false,
   };
 
+  if (watch) {
+    config.mode = 'development';
+  }
+
   if (mode === 'debug') {
     config.output = {
       ...(config.output || {}),
@@ -98,6 +103,19 @@ function createWebpackConfig(
   return config;
 }
 
+function collectWebpackErrorMessages(stats: Stats): string {
+  const info = stats.toJson({ errors: true });
+  return (info.errors || []).map((entry) => entry.message).join('\n');
+}
+
+function logWebpackWarnings(stats: Stats): void {
+  if (!stats.hasWarnings()) {
+    return;
+  }
+  const info = stats.toJson({ warnings: true });
+  (info.warnings || []).forEach((warning) => logger.warn(warning.message));
+}
+
 function runWebpack(webpack: typeof import('webpack'), config: Configuration): Promise<Stats> {
   return new Promise((resolve, reject) => {
     webpack(config, (err, stats) => {
@@ -110,16 +128,96 @@ function runWebpack(webpack: typeof import('webpack'), config: Configuration): P
         return;
       }
       if (stats.hasErrors()) {
-        const info = stats.toJson({ errors: true });
-        const errorMessages = (info.errors || []).map((entry) => entry.message).join('\n');
-        reject(new Error(errorMessages));
+        reject(new Error(collectWebpackErrorMessages(stats)));
         return;
       }
       resolve(stats);
     });
   });
 }
 
+async function runWebpackWatch(
+  webpack: typeof import('webpack'),
+  config: Configuration,
+  onSuccess: (stats: Stats) => Promise<void>,
+): Promise<void> {
+  await new Promise<void>((resolve) => {
+    const compiler = webpack(config);
+    let watching: ReturnType<typeof compiler.watch> | undefined;
+    let isClosing = false;
+
+    let postBuildChain = Promise.resolve();
+
+    const removeSignalHandlers = (): void => {
+      process.removeListener('SIGINT', stopWatching);
+      process.removeListener('SIGTERM', stopWatching);
+    };
+
+    const finishShutdown = (): void => {
+      void postBuildChain.finally(() => {
+        resolve();
+      });
+    };
+
+    const stopWatching = (): void => {
+      if (isClosing) {
+        return;
+      }
+      isClosing = true;
+      removeSignalHandlers();
+
+      if (!watching) {
+        finishShutdown();
+        return;
+      }
+      watching.close(() => {
+        setTimeout(finishShutdown, 100);
+      });
+    };
+
+    watching = compiler.watch(
+      {
+        aggregateTimeout: 200,
+        ignored: /node_modules/,
+        ...(process.platform === 'win32' ? { poll: 1000 } : {}),
+      },
+      (err, stats) => {
+        if (isClosing) {
+          return;
+        }
+        if (err) {
+          logger.error(err.message);
+          return;
+        }
+        if (!stats) {
+          return;
+        }
+        if (stats.hasErrors()) {
+          logger.error(collectWebpackErrorMessages(stats));
+          return;
+        }
+
+        logWebpackWarnings(stats);
+
+        postBuildChain = postBuildChain
+          .then(() => onSuccess(stats))
+          .then(() => {
+            logger.info('bundle watch: rebuild complete');
+          })
+          .catch((error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error(`bundle watch post-build failed: ${message}`);
+          });
+      },
+    );
+
+    logger.info('bundle watch mode is watching for changes...');
+
+    process.once('SIGINT', stopWatching);
+    process.once('SIGTERM', stopWatching);
+  });
+}
+
 function loadWebpackConfig(resolvedConfigPath: string): Configuration {
   if (!fs.existsSync(resolvedConfigPath)) {
     throw new Error(ERROR_MESSAGES.WEBPACK_CONFIG_NOT_FOUND(resolvedConfigPath));
@@ -146,6 +244,7 @@ interface ResolvedBundle {
   resolvedOutDir: string;
   mode: 'debug' | 'production';
   sourceMap: boolean;
+  watch: boolean;
   webpack: typeof import('webpack');
   baseConfig: Configuration;
   licenseHeaders?: ResolvedLicenseHeaders;
@@ -195,6 +294,7 @@ export default createExecutor<BundleExecutorSchema, ResolvedBundle>({
       mode,
       webpackConfigPath = './webpack.config.js',
       sourceMap = true,
+      watch = false,
       applyLicenseHeaders,
     } = options;
 
@@ -217,6 +317,7 @@ export default createExecutor<BundleExecutorSchema, ResolvedBundle>({
       resolvedOutDir,
       mode,
       sourceMap,
+      watch,
       webpack,
       baseConfig,
       licenseHeaders,
@@ -232,19 +333,31 @@ export default createExecutor<BundleExecutorSchema, ResolvedBundle>({
       resolved.mode,
       resolved.projectRoot,
       resolved.sourceMap,
+      resolved.watch,
     );
 
     logger.verbose(`Bundling ${resolved.entries.length} entries in ${resolved.mode} mode`);
     logger.verbose(`Source: ${resolved.resolvedSourceDir}`);
     logger.verbose(`Output: ${resolved.resolvedOutDir}`);
 
+    const applyHeadersIfNeeded = async (): Promise<void> => {
+      if (resolved.licenseHeaders) {
+        await applyLicenseHeadersStep(resolved.resolvedOutDir, resolved.licenseHeaders);
+      }
+    };
+
+    if (resolved.watch) {
+      await runWebpackWatch(resolved.webpack, config, async (stats) => {
+        const assets = Object.keys(stats.compilation.assets);
+        logger.verbose(`Produced ${assets.length} bundle(s): ${assets.join(', ')}`);
+        await applyHeadersIfNeeded();
+      });
+      return;
+    }
+
     try {
       const stats = await runWebpack(resolved.webpack, config);
-
-      if (stats.hasWarnings()) {
-        const info = stats.toJson({ warnings: true });
-        (info.warnings || []).forEach((warning) => logger.warn(warning.message));
-      }
+      logWebpackWarnings(stats);
 
       const assets = Object.keys(stats.compilation.assets);
       logger.verbose(`Produced ${assets.length} bundle(s): ${assets.join(', ')}`);
@@ -253,8 +366,6 @@ export default createExecutor<BundleExecutorSchema, ResolvedBundle>({
       throw new Error(ERROR_MESSAGES.WEBPACK_ERROR(message));
     }
 
-    if (resolved.licenseHeaders) {
-      await applyLicenseHeadersStep(resolved.resolvedOutDir, resolved.licenseHeaders);
-    }
+    await applyHeadersIfNeeded();
   },
 });