chore(devextreme): migrate transpile gulp task to nx, part 2

.github/copilot-instructions.md

@@ -10,7 +10,7 @@
 - **Languages:** TypeScript, JavaScript, SCSS, C# (.NET for test runner)
 - **Package Manager:** pnpm 9.15.4 (specified in package.json)
 - **Node Version:** 20.x (required by CI)
-- **Build System:** Gulp + Nx + custom build scripts
+- **Build System:** Gulp + Nx + custom build scripts + custom Nx executors (via `devextreme-nx-infra-plugin`)
 - **Test Frameworks:** QUnit, Jest, TestCafe, Karma (Angular)
 
 ## Critical Setup Requirements
@@ -70,6 +70,8 @@ pnpm install --frozen-lockfile
   devextreme-themebuilder/ # Theme builder package
   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)
   testcafe-models/         # TestCafe page object models
 
 /apps/
@@ -150,20 +152,69 @@ pnpm run clean
 ```
 
 **Build process includes:**
-1. Localization generation
+1. Localization generation (via `devextreme-nx-infra-plugin:localization` executor)
 2. Component generation (Renovation architecture)
-3. Transpilation (Babel)
-4. Bundle creation (Webpack)
-5. TypeScript declarations
+3. Transpilation (via native NX executors: `babel-transform` for JS, `build-typescript` for TS)
+4. Bundle creation (Webpack) - `bundle:debug` and `bundle:prod` targets
+5. TypeScript declarations - `build:declarations` target
 6. SCSS compilation (from devextreme-scss)
-7. NPM package preparation
+7. NPM package preparation - `build:npm` target
+
+**Granular Nx build targets (can be run individually):**
+```bash
+pnpx nx build:localization devextreme  # Generate localization files
+pnpx nx build:transpile devextreme     # Transpile source code
+pnpx nx bundle:debug devextreme        # Create debug bundle
+pnpx nx bundle:prod devextreme         # Create production bundle
+pnpx nx build:npm devextreme           # Prepare NPM packages
+```
+
+**Build with testing configuration (for CI):**
+```bash
+pnpx nx build devextreme -c=testing
+```
 
 **Important environment variables:**
 - `DEVEXTREME_TEST_CI=true` - Enables test mode (skips building npm package)
 - `BUILD_ESM_PACKAGE=true` - Builds ESM modules (skips building npm package)
 - `BUILD_TESTCAFE=true` - Builds for TestCafe tests
 - `BUILD_TEST_INTERNAL_PACKAGE=true` - Builds internal test package
 
+## Custom Nx Executors (nx-infra-plugin)
+
+The `packages/nx-infra-plugin` provides custom Nx executors for build automation:
+
+| Executor | Description |
+|----------|-------------|
+| `add-license-headers` | Adds DevExtreme license headers to compiled files with version information |
+| `babel-transform` | Transforms JS/TS files using Babel with configurable presets, debug block removal, and extension renaming |
+| `build-angular-library` | Builds Angular libraries using ng-packagr programmatically |
+| `build-typescript` | Compiles TypeScript to CJS or ESM modules with configurable output format, tsconfig, and path alias resolution |
+| `clean` | Removes directories and files with support for exclusion patterns |
+| `concatenate-files` | Concatenates files with optional content extraction via regex, header/footer, and find/replace transforms |
+| `copy-files` | Copies files and directories to specified destinations with glob pattern support |
+| `create-dual-mode-manifest` | Generates package.json files for dual-mode (ESM + CJS) support with main, module, typings, and sideEffects |
+| `generate-component-names` | Generates TypeScript file with component name constants for test automation |
+| `generate-components` | Generates framework components (React/Vue/Angular) from DevExtreme metadata |
+| `karma-multi-env` | Runs Karma tests across multiple Angular environments (client, server, hydration) |
+| `localization` | Generates CLDR data and compiles localization message files from JSON to JavaScript |
+| `pack-npm` | Creates npm packages using `pnpm pack` for distribution |
+| `prepare-package-json` | Creates distribution-ready package.json with cleaned dependencies for npm publishing |
+| `prepare-submodules` | Creates package.json entry points for submodule exports |
+
+**Example executor usage in project.json:**
+```json
+{
+  "build:localization:generate": {
+    "executor": "devextreme-nx-infra-plugin:localization",
+    "options": {
+      "messagesDir": "./js/localization/messages",
+      "cldrDataOutputDir": "./js/__internal/core/localization/cldr-data"
+    }
+  }
+}
+```
+
 ## Testing
 
 ### Test Types and Commands
@@ -348,8 +399,8 @@ pnpm run lint-ts -- --fix
 - `packages/devextreme-react/src/**/*` (except templates)
 - `packages/devextreme-vue/src/**/*` (except templates)
 - `packages/devextreme/js/renovation/**/*.j.tsx`
-- `packages/devextreme/js/common/core/localization/default_messages.js`
-- `packages/devextreme/js/common/core/localization/cldr-data/**/*`
+- `packages/devextreme/js/__internal/core/localization/default_messages.ts`
+- `packages/devextreme/js/__internal/core/localization/cldr-data/**/*`
 
 **Source files (EDIT THESE):**
 - `packages/devextreme/js/**/*.js` (core logic)
@@ -378,13 +429,15 @@ pnpm run lint-ts -- --fix
 ## Key Facts
 
 - **Nx is used for task orchestration** - prefer `pnpx nx` commands over direct npm scripts
+- **Custom Nx executors** - `devextreme-nx-infra-plugin` provides specialized executors for localization, file operations, and build tasks
 - **Frozen lockfile is mandatory** - CI will fail without it
 - **Build artifacts are in gitignore** - never commit `artifacts/` directories
 - **Wrappers are generated** - modify generators, not generated code
 - **Multiple test frameworks** - QUnit (legacy), Jest (new), TestCafe (E2E)
 - **Monorepo uses pnpm workspaces** - dependencies are hoisted
 - **CI uses custom runners** - `devextreme-shr2` for most jobs, `ubuntu-latest` for some
 - **Timeouts are strict** - optimize for speed, use caching
+- **Granular build caching** - individual build steps have proper Nx caching for faster rebuilds
 
 ## Quick Reference
 
@@ -398,6 +451,14 @@ pnpm run all:build-dev
 # Build (prod)
 pnpm run all:build
 
+# Build with testing configuration (for CI)
+pnpx nx build devextreme -c=testing
+
+# Build specific targets
+pnpx nx build:localization devextreme
+pnpx nx build:transpile devextreme
+pnpx nx bundle:debug devextreme
+
 # Test
 pnpx nx run-many -t test
 pnpm run test-jest          # From devextreme package
@@ -411,6 +472,7 @@ pnpm run regenerate-all
 
 # Clean
 pnpm run clean              # From devextreme package
+pnpx nx clean:artifacts devextreme  # Clean build artifacts only
 
 # Run demos
 pnpm run webserver          # From root, then visit localhost:8080

.github/workflows/default_workflow.yml

@@ -56,7 +56,7 @@ jobs:
       run: >
         pnpx nx run-many
         -t lint,test
-        --configuration ci
+        -c ci
         --exclude
         devextreme
         devextreme-themebuilder

.github/workflows/demos_visual_tests.yml

@@ -15,7 +15,6 @@ on:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
   NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
-  BUILD_TEST_INTERNAL_PACKAGE: true
   RUN_TESTS: true
 
 jobs:
@@ -145,13 +144,11 @@ jobs:
         shell: bash
         run: |
           pnpx nx build devextreme-scss
-          pnpx nx build devextreme
+          pnpx nx build devextreme -c testing
 
       - name: DevExtreme - Build-all
         if: needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
-        env:
-          BUILD_TEST_INTERNAL_PACKAGE: true
-        run: pnpm run all:build-dev
+        run: pnpm nx all:build-testing workflows
 
       - name: Zip artifacts (for jQuery tests)
         working-directory: ./packages/devextreme

.github/workflows/publish-demos.yml

@@ -38,9 +38,7 @@ jobs:
         pnpm install --frozen-lockfile
 
     - name: DevExtreme - Build-all
-      env:
-        BUILD_TEST_INTERNAL_PACKAGE: true
-      run: pnpm run all:build-dev
+      run: pnpm nx all:build-testing workflows
 
     - name: Move packages
       run: |

.github/workflows/testcafe_tests.yml

@@ -15,7 +15,6 @@ on:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
   NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
-  BUILD_TEST_INTERNAL_PACKAGE: true
   RUN_TESTS: true
 
 jobs:
@@ -72,7 +71,7 @@ jobs:
         NODE_OPTIONS: --max-old-space-size=8192
       run: |
         pnpx nx build devextreme-scss
-        pnpx nx build devextreme
+        pnpx nx build devextreme -c testing
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme

.github/workflows/wrapper_tests.yml

@@ -10,7 +10,6 @@ on:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
   NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
-  BUILD_TEST_INTERNAL_PACKAGE: true
 
 jobs:
   build:
@@ -49,10 +48,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build devextreme package
-        env:
-          BUILD_TEST_INTERNAL_PACKAGE: true
-        working-directory: ./packages/devextreme
-        run: pnpx nx build
+        run: pnpx nx build devextreme -c testing
 
   check-regenerate:
     runs-on: devextreme-shr2

.github/workflows/wrapper_tests_e2e.yml

@@ -15,7 +15,6 @@ on:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
   NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
-  BUILD_TEST_INTERNAL_PACKAGE: true
 
 jobs:
   build-packages:
@@ -55,9 +54,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build all DevExtreme packages
-        env:
-          BUILD_TEST_INTERNAL_PACKAGE: true
-        run: pnpm run all:build-dev
+        run: pnpm nx all:build-testing workflows
 
       - name: Build wrappers apps
         working-directory: e2e/wrappers

apps/demos/project.json

@@ -109,7 +109,7 @@
         "script": "prepare-js"
       },
       "dependsOn": [
-        { "projects": ["devextreme"], "target": "build" },
+        { "projects": ["devextreme"], "target": "build", "params": "forward" },
         { "projects": ["devextreme-angular", "devextreme-react", "devextreme-vue"], "target": "pack" }
       ],
       "inputs": [

package.json

@@ -18,7 +18,7 @@
     "prepare": "husky install",
     "all:update-version": "ts-node tools/scripts/update-version.ts",
     "all:build": "ts-node tools/scripts/build-all.ts",
-    "all:build-dev": "pnpm run all:build --dev",
+    "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",
     "demos:start": "http-server ./apps/demos --port 8080 -c-1"

packages/devextreme-angular/project.json

@@ -167,7 +167,13 @@
     },
     "build": {
       "executor": "nx:run-commands",
-      "dependsOn": ["^build"],
+      "dependsOn": [
+        {
+          "dependencies": true,
+          "target": "build",
+          "params": "forward"
+        }
+      ],
       "options": {
         "commands": [
           "pnpm --workspace-root nx clean:dist devextreme-angular",
@@ -182,7 +188,14 @@
         "{projectRoot}/npm/dist"
       ],
       "cache": true,
-      "inputs": ["default"]
+      "inputs": ["default"],
+      "configurations": {
+        "testing": {
+          "env": {
+            "BUILD_TEST_INTERNAL_PACKAGE": "true"
+          }
+        }
+      }
     },
     "pack": {
       "executor": "nx:run-commands",
@@ -289,7 +302,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "pnpm --workspace-root nx build devextreme-angular",
+          "pnpm --workspace-root nx build devextreme-angular -c testing",
           "pnpm --workspace-root nx build:tests devextreme-angular",
           "pnpm --workspace-root nx test:all devextreme-angular"
         ],