Devextreme: migrate from gulp to nx

.github/copilot-instructions.md

@@ -71,7 +71,7 @@ pnpm install --frozen-lockfile
   devextreme-metadata/     # Metadata generation for wrappers
   devextreme-monorepo-tools/ # Internal tooling
   nx-infra-plugin/         # Custom Nx executors for build automation
-  workflows/               # Cross-package NX build orchestration (all:build-dev, all:build-testing)
+  workflows/               # Cross-package NX build orchestration (all:build, all:build-dev, all:build-testing)
   testcafe-models/         # TestCafe page object models
 
 /apps/
@@ -87,7 +87,7 @@ pnpm install --frozen-lockfile
   bundlers/                # Bundler compatibility tests
   compilation-cases/       # TypeScript compilation tests
 
-/tools/scripts/            # Build and utility scripts
+/tools/scripts/            # Leaf helpers invoked by workflows targets (inject-descriptions, versioning, etc.)
 ```
 
 ### Configuration Files
@@ -147,6 +147,10 @@ pnpm run all:build                        # full production build
 pnpm nx build:dev devextreme              # single package, dev mode
 pnpm nx build devextreme -c=testing       # CI testing configuration
 pnpm nx build:transpile devextreme        # transpile only (babel-transform / build-typescript)
+pnpm nx build:transpile:watch devextreme  # transpile in watch mode (incremental JS + TS rebuild)
+pnpm nx transpile:tests devextreme        # transpile testing/**/*.js in place (replaces gulp transpile-tests)
+pnpm nx dev devextreme                    # build:dev, then start all dev watches (replaces gulp dev)
+pnpm nx dev-watch devextreme              # start all dev watches in parallel, skipping the initial build
 pnpm nx bundle:debug devextreme           # debug bundle (Webpack via nx-infra-plugin)
 pnpm nx bundle:prod devextreme            # production bundle
 pnpm nx build:localization devextreme     # localization files only
@@ -185,19 +189,19 @@ packages/
   devextreme-metadata/              # metadata for wrapper generation
   devextreme-monorepo-tools/        # internal tooling
   nx-infra-plugin/                  # custom Nx executors
-  workflows/                        # cross-package Nx orchestration (all:build-dev, all:build-testing)
+  workflows/                        # cross-package Nx orchestration (all:build, all:build-dev, all:build-testing)
   testcafe-models/                  # TestCafe page object models
 apps/                               # demos and per-framework playgrounds (+ react-storybook)
 e2e/testcafe-devextreme/            # TestCafe e2e suite
 e2e/{wrappers,bundlers,compilation-cases}/   # integration / bundler / TS compilation tests
-tools/scripts/                      # build and utility scripts
+tools/scripts/                      # leaf helpers for workflows targets (not orchestration)
 ```
 
 For the full executor catalogue, conventions, and refactoring guidance, see @packages/nx-infra-plugin/AGENTS.md. File-specific coding rules live under @.github/instructions/.
 
 ## Build Pipeline
 
-clean (`devextreme-nx-infra-plugin:clean` preserving CSS and npm metadata) → localization → component generation (Renovation) → transpile (`babel-transform` for JS, `build-typescript` for TS) → bundle (Webpack via `devextreme-nx-infra-plugin:bundle`, debug + prod targets) → TypeScript declarations → SCSS compile (`devextreme-scss`) → npm package preparation. Task orchestration goes through Nx; cross-package builds (`all:build-dev`, `all:build`) live in the `workflows` package. The `gulpfile.js` clean task is a thin delegate to `pnpm nx clean:artifacts devextreme`. Pre-commit hook runs `lint-staged` (stylelint + eslint --quiet).
+clean (`devextreme-nx-infra-plugin:clean` preserving CSS and npm metadata) → localization → component generation (Renovation) → transpile (`babel-transform` for JS, `build-typescript` for TS) → bundle (Webpack via `devextreme-nx-infra-plugin:bundle`, debug + prod targets) → TypeScript declarations → SCSS compile (`devextreme-scss`) → npm package preparation. Task orchestration goes through Nx; cross-package builds (`all:build-dev`, `all:build`) live in the `workflows` package. The `gulpfile.js` clean task is a thin delegate to `pnpm nx clean:artifacts devextreme`. Pre-commit hook runs `lint-staged` (stylelint + eslint --quiet). The developer watch workflow (`pnpm run dev` / `dev:watch`) is now native composite Nx targets (`dev`, `dev-watch`) rather than gulp orchestrators — see the "Migrated gulp tasks" table in @packages/nx-infra-plugin/AGENTS.md.
 
 ## Conventions
 

.github/workflows/packages_publishing.yml

@@ -48,9 +48,7 @@ jobs:
         run: pnpm run all:set-timestamp-version
 
       - name: Build npm packages
-        env:
-          BUILD_INTERNAL_PACKAGE: true
-        run: pnpm run all:build
+        run: pnpm run all:build:internal
 
       - name: Set GitHub Packages auth
         run: pnpm set //npm.pkg.github.com/:_authToken='${NODE_AUTH_TOKEN}'

package.json

@@ -17,10 +17,11 @@
     "lint-staged": "lint-staged",
     "prepare": "husky install",
     "change-package-scope": "ts-node tools/scripts/change-package-scope.ts",
-    "make-artifacts-package": "ts-node tools/scripts/make-artifacts-package.ts",
-    "all:set-timestamp-version": "ts-node tools/scripts/set-timestamp-version.ts",
-    "all:update-version": "ts-node tools/scripts/update-version.ts",
-    "all:build": "ts-node tools/scripts/build-all.ts",
+    "make-artifacts-package": "nx make-artifacts-package workflows",
+    "all:set-timestamp-version": "nx set-timestamp-version workflows",
+    "all:update-version": "nx run workflows:update-version --",
+    "all:build": "nx all:build workflows",
+    "all:build:internal": "nx all:build workflows -c internal",
     "all:build-dev": "nx all:build-dev workflows",
     "all:pack-and-copy": "nx run-many -t pack-and-copy",
     "demos:prepare": "nx run devextreme-demos:prepare-js",
@@ -36,6 +37,7 @@
     "@types/node": "catalog:tools",
     "@types/shelljs": "0.8.15",
     "axe-core": "catalog:",
+    "chokidar": "5.0.0",
     "@types/yargs": "17.0.35",
     "devextreme-internal-tools": "catalog:tools",
     "devextreme-metadata": "workspace:*",

packages/devextreme-monorepo-tools/project.json

@@ -18,7 +18,11 @@
     },
     "pack-and-copy": {
       "dependsOn": ["build"],
-      "command": "ts-node tools/scripts/pack devextreme-monorepo-tools"
+      "executor": "devextreme-nx-infra-plugin:pack-npm",
+      "options": {
+        "packageDir": "./npm",
+        "destination": "../../artifacts/npm"
+      }
     },
     "test": {
       "executor": "@nx/jest:jest",

packages/devextreme-scss/package.json

@@ -3,7 +3,6 @@
   "type": "module",
   "devDependencies": {
     "autoprefixer": "10.5.0",
-    "chokidar": "5.0.0",
     "clean-css": "5.3.3",
     "opentype.js": "1.3.4",
     "postcss": "8.5.10",

packages/devextreme/build/gulp/bundler-config.js

@@ -1,45 +1,8 @@
 'use strict';
 
 const gulp = require('gulp');
-const replace = require('gulp-replace');
-const concat = require('gulp-concat');
-const rename = require('gulp-rename');
-const header = require('gulp-header');
-const eol = require('gulp-eol');
+const shell = require('gulp-shell');
 
-const context = require('./context.js');
-const headerPipes = require('./header-pipes.js');
-const { packageDir } = require('./utils');
-
-const BUNDLE_CONFIG_SOURCES = [
-    'build/bundle-templates/modules/parts/core.js',
-    'build/bundle-templates/modules/parts/data.js',
-    'build/bundle-templates/modules/parts/widgets-base.js',
-    'build/bundle-templates/modules/parts/widgets-web.js',
-    'build/bundle-templates/modules/parts/viz.js',
-    'build/bundle-templates/modules/parts/aspnet.js'
-];
-
-gulp.task('bundler-config', function() {
-    return gulp.src(BUNDLE_CONFIG_SOURCES)
-        .pipe(replace(/[^]*BUNDLER_PARTS.*?$([^]*)^.*?BUNDLER_PARTS_END[^]*/gm, '$1'))
-        .pipe(concat('dx.custom.js'))
-        .pipe(header('/* Comment lines below for the widgets you don\'t require and run "devextreme-bundler" in this directory, then include dx.custom.js in your project */'))
-        .pipe(headerPipes.useStrict())
-        .pipe(replace(/require *\( *["']..\/..\//g, 'require(\''))
-        .pipe(replace(/^[ ]{4}/gm, ''))
-        .pipe(replace(/^[\n\r]{2,}/gm, '\n\n'))
-        .pipe(eol())
-        .pipe(gulp.dest('build/bundle-templates'))
-        .pipe(rename('dx.custom.config.js'))
-        .pipe(replace(/require *\( *["']..\//g, 'require(\'devextreme/'))
-        .pipe(gulp.dest(`${context.RESULT_NPM_PATH}/${packageDir}/bundles`));
-});
-
-gulp.task('bundler-config-watch', function() {
-    return gulp
-        .watch(BUNDLE_CONFIG_SOURCES, gulp.series('bundler-config'))
-        .on('ready', () => console.log(
-            'bundler-config task is watching for changes...'
-        ));
-});
+gulp.task('bundler-config', shell.task(
+    'pnpm nx build:devextreme-bundler-config devextreme && pnpm nx build:devextreme-bundler-config devextreme -c prod'
+));

packages/devextreme/build/gulp/localization.js

@@ -1,50 +1,8 @@
 'use strict';
 
 const gulp = require('gulp');
-const path = require('path');
 const shell = require('gulp-shell');
-const through = require('through2');
-const fs = require('fs');
-
-const DEFAULT_LOCALE = 'en';
-const DICTIONARY_SOURCE_FOLDER = 'js/localization/messages';
 
 gulp.task('localization', shell.task('pnpm nx build:localization devextreme'));
 
-gulp.task('generate-community-locales', () => {
-    const defaultFile = fs.readFileSync(path.join(DICTIONARY_SOURCE_FOLDER, DEFAULT_LOCALE + '.json')).toString();
-    const defaultDictionaryKeys = Object.keys(JSON.parse(defaultFile)[DEFAULT_LOCALE]);
-
-    return gulp
-        .src([
-            'js/localization/messages/*.json',
-            '!js/localization/messages/en.json'
-        ])
-        .pipe(through.obj(function(file, encoding, callback) {
-            const parsedFile = JSON.parse(file.contents.toString(encoding));
-
-            const [locale] = Object.keys(parsedFile);
-            const dictionary = parsedFile[locale];
-
-            let newFile = defaultFile.replace(`"${DEFAULT_LOCALE}"`, `"${locale}"`);
-
-            defaultDictionaryKeys.forEach((key) => {
-                let replaceValue = null;
-                // eslint-disable-next-line no-prototype-builtins
-                if(dictionary.hasOwnProperty(key)) {
-                    const val = dictionary[key];
-                    if(!val.includes('TODO')) {
-                        replaceValue = val.replace(/"/g, '\\"');
-                    }
-                }
-
-                if(replaceValue != null) {
-                    newFile = newFile.replace(new RegExp(`"${key}":.*"(,)?`), `"${key}": "${replaceValue}"$1`);
-                }
-            });
-
-            file.contents = Buffer.from(newFile, encoding);
-            callback(null, file);
-        }))
-        .pipe(gulp.dest(DICTIONARY_SOURCE_FOLDER));
-});
+gulp.task('generate-community-locales', shell.task('pnpm nx build:community-localization devextreme'));