Devextreme: migrate from gulp to nx

.github/copilot-instructions.md

@@ -1,6 +1,6 @@
 # DevExtreme Monorepo
 
-DevExtreme is an enterprise-ready suite of UI components for Angular, React, Vue, and jQuery, distributed as a pnpm/Nx monorepo containing the core library, framework wrappers, themes, themebuilder, and test suites. Stack: TypeScript, JavaScript, SCSS, pnpm + Nx, Node, Gulp + custom Nx executors (`devextreme-nx-infra-plugin`). The .NET SDK is required for `devextreme-internal-tools` code generation.
+DevExtreme is an enterprise-ready suite of UI components for Angular, React, Vue, and jQuery, distributed as a pnpm/Nx monorepo containing the core library, framework wrappers, themes, themebuilder, and test suites. Stack: TypeScript, JavaScript, SCSS, pnpm + Nx, Node, custom Nx executors (`devextreme-nx-infra-plugin`). The .NET SDK is required for `devextreme-internal-tools` code generation.
 
 **DevExtreme** is an enterprise-ready suite of powerful UI components for Angular, React, Vue, and jQuery. This is a large-scale monorepo containing the core library, framework wrappers, demos, and extensive test suites.
 
@@ -61,7 +61,7 @@ pnpm install --frozen-lockfile
       data/                # Data layer
       renovation/          # Renovation components (new architecture)
     testing/               # QUnit tests
-    build/                 # Build scripts and Gulp tasks
+    build/                 # Build config consumed by Nx executors (transpile config, module metadata, templates)
     artifacts/             # Build output (generated)
   devextreme-angular/      # Angular wrapper
   devextreme-react/        # React wrapper
@@ -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
+pnpm nx dev devextreme                    # build:dev, then start all dev watches
+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. There is no gulpfile — `clean` runs directly via `pnpm nx clean:artifacts devextreme`. Pre-commit hook runs `lint-staged` (stylelint + eslint --quiet). The developer watch workflow (`pnpm run dev` / `dev:watch`) is native composite Nx targets (`dev`, `dev-watch`) — see the "Former gulp tasks" table in @packages/nx-infra-plugin/AGENTS.md.
 
 ## Conventions
 

.github/renovate.json

@@ -123,37 +123,6 @@
             "matchPackageNames": [
                 "*"
             ]
-        },
-        {
-            "matchPackageNames": [
-                "gulp-sass",
-                "gulp-babel",
-                "gulp-typescript",
-                "gulp-clean",
-                "gulp-minify",
-                "gulp-replace",
-                "gulp-sourcemaps",
-                "gulp-cache",
-                "gulp-plumber",
-                "gulp-shell",
-                "gulp-cached",
-                "gulp-concat",
-                "gulp-each",
-                "gulp-eol",
-                "gulp-file",
-                "gulp-flatmap",
-                "gulp-footer",
-                "gulp-header",
-                "gulp-if",
-                "gulp-jsbeautifier",
-                "gulp-multi-process",
-                "gulp-notify",
-                "gulp-rename",
-                "gulp-tap",
-                "gulp-uglify-es",
-                "gulp-watch"
-            ],
-            "enabled": false
         }
     ],
     "lockFileMaintenance": {

.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}'

.github/workflows/renovation.yml

@@ -94,7 +94,7 @@ jobs:
 
     - name: Build localization
       working-directory: ./packages/devextreme
-      run: pnpm exec gulp localization
+      run: pnpm exec nx build:localization devextreme
 
     - name: Check test types
       run: pnpm exec nx check-types devextreme

.vscode/launch.json

@@ -19,21 +19,6 @@
       "sourceMaps": true,
       "cwd": "${workspaceRoot}"
     },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Gulp Tests watch",
-      "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
-      "args": [
-        "build-renovation-testing:watch",
-        "--playgroundName",
-      ],
-      "runtimeArgs": [
-        "--harmony"
-      ],
-      "sourceMaps": true,
-      "cwd": "${workspaceRoot}"
-    },
     {
       "type": "node",
       "request": "launch",

CLAUDE.md

@@ -18,7 +18,7 @@ Always use `--frozen-lockfile`. CI enforces it.
 
 ## Build
 
-The `dev` script is run manually in WebStorm (not by agents). It runs a Gulp watch build with hot reload and starts the QUnit test server on port 20060:
+The `dev` script is run manually in WebStorm (not by agents). It runs an Nx watch build with hot reload and starts the QUnit test server on port 20060:
 
 ```bash
 # From packages/devextreme — run manually, not via agent

e2e/bundlers/generate_entry_files.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const modulesMetadataFilePath = path.join(__dirname, '../../packages/devextreme/build/gulp/modules_metadata.json');
+const modulesMetadataFilePath = path.join(__dirname, '../../packages/devextreme/build/modules_metadata.json');
 
 const filePaths = {
     cjs: path.join(__dirname, './entry/modules_cjs.js'),

nx.json

@@ -15,8 +15,7 @@
     ],
     "devextreme-build-config": [
       "{projectRoot}/build/**/*",
-      "{projectRoot}/webpack.config.js",
-      "{projectRoot}/gulpfile.js"
+      "{projectRoot}/webpack.config.js"
     ]
   },
   "targetDefaults": {

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-themebuilder/src/metadata/generate.ts

@@ -2,9 +2,8 @@
 import * as path from 'path';
 import MetadataCollector from './collector';
 import DependencyCollector from './dependency-collector';
-import { version } from '../../../devextreme/build/gulp/context';
-import { resolveDataUri } from '../../../devextreme/build/gulp/gulp-data-uri';
-import { browserslist } from '../../../devextreme/package.json';
+import { resolveDataUri } from './resolve-data-uri';
+import { browserslist, version } from '../../../devextreme/package.json';
 
 const stylesDirectory = path.resolve(__dirname, '../../../devextreme-scss/scss');
 const stylesDestinationDirectory = './src/data/scss';

packages/devextreme-themebuilder/src/metadata/resolve-data-uri.ts

@@ -0,0 +1,25 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
+const dataUriRegex = /data-uri\((?:'(image\/svg\+xml;charset=UTF-8)',\s)?['"]?([^)'"]+)['"]?\)/g;
+
+const svg = (buffer: Buffer, svgEncoding?: string): string => {
+  const encoding = svgEncoding || 'image/svg+xml;charset=UTF-8';
+  const encodedSvg = encodeURIComponent(buffer.toString());
+
+  return `"data:${encoding},${encodedSvg}"`;
+};
+
+const img = (buffer: Buffer, ext: string): string => `"data:image/${ext};base64,${buffer.toString('base64')}"`;
+
+const handler = (_: string, svgEncoding: string, fileName: string): string => {
+  const relativePath = path.join(__dirname, '..', '..', '..', 'devextreme-scss', fileName);
+  const filePath = path.resolve(relativePath);
+  const ext = filePath.split('.').pop() as string;
+  const data = fs.readFileSync(filePath);
+  const buffer = Buffer.from(data);
+  const escapedString = ext === 'svg' ? svg(buffer, svgEncoding) : img(buffer, ext);
+  return `url(${escapedString})`;
+};
+
+export const resolveDataUri = (content: string): string => content.replace(dataUriRegex, handler);