|
2 | 2 |
|
3 | 3 | 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. |
4 | 4 |
|
5 | | -## Commands |
| 5 | +**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. |
| 6 | + |
| 7 | +**Repository Stats:** |
| 8 | +- **Type:** Monorepo (pnpm workspaces + Nx) |
| 9 | +- **Size:** Large (1000+ files across multiple packages) |
| 10 | +- **Languages:** TypeScript, JavaScript, SCSS |
| 11 | +- **Package Manager:** pnpm 9.15.4 (specified in package.json) |
| 12 | +- **Node Version:** 20.x (required by CI) |
| 13 | +- **Build System:** Nx + custom build scripts + custom Nx executors (via `devextreme-nx-infra-plugin`) |
| 14 | +- **Test Frameworks:** QUnit, Jest, TestCafe, Karma (Angular) |
| 15 | + |
| 16 | +## Critical Setup Requirements |
| 17 | + |
| 18 | +### Environment Prerequisites |
| 19 | + |
| 20 | +**ALWAYS install dependencies with frozen lockfile:** |
| 21 | +```bash |
| 22 | +pnpm install --frozen-lockfile |
| 23 | +``` |
| 24 | + |
| 25 | +**Node.js:** Version 20.x is required (CI uses Node 20) |
| 26 | +**pnpm:** Version 9.15.4 (managed via packageManager field) |
| 27 | +**.NET SDK:** Version 8.0.x required for running devextreme-internal-tools (uses .NET tool for code generation) |
| 28 | + |
| 29 | +### First-Time Setup |
| 30 | + |
| 31 | +1. **Install dependencies from repository root:** |
| 32 | + ```bash |
| 33 | + pnpm install --frozen-lockfile |
| 34 | + ``` |
| 35 | + |
| 36 | +2. **For development builds of devextreme package:** |
| 37 | + ```bash |
| 38 | + pnpm exec nx build:dev devextreme |
| 39 | + ``` |
| 40 | + OR from monorepo root: |
| 41 | + ```bash |
| 42 | + pnpm run all:build-dev |
| 43 | + ``` |
| 44 | + |
| 45 | +3. **For production builds:** |
| 46 | + ```bash |
| 47 | + pnpm run all:build |
| 48 | + ``` |
| 49 | + |
| 50 | +## Repository Structure |
| 51 | + |
| 52 | +### Key Directories |
| 53 | + |
| 54 | +``` |
| 55 | +/packages/ |
| 56 | + devextreme/ # Core library (main package) |
| 57 | + js/ # JavaScript/TypeScript source code |
| 58 | + ui/ # UI widgets |
| 59 | + viz/ # Visualization components |
| 60 | + core/ # Core utilities |
| 61 | + data/ # Data layer |
| 62 | + renovation/ # Renovation components (new architecture) |
| 63 | + testing/ # QUnit tests |
| 64 | + build/ # Build scripts and Gulp tasks |
| 65 | + artifacts/ # Build output (generated) |
| 66 | + devextreme-angular/ # Angular wrapper |
| 67 | + devextreme-react/ # React wrapper |
| 68 | + devextreme-vue/ # Vue wrapper |
| 69 | + devextreme-scss/ # SCSS themes and styles |
| 70 | + devextreme-themebuilder/ # Theme builder package |
| 71 | + devextreme-metadata/ # Metadata generation for wrappers |
| 72 | + devextreme-monorepo-tools/ # Internal tooling |
| 73 | + nx-infra-plugin/ # Custom Nx executors for build automation |
| 74 | + workflows/ # Cross-package NX build orchestration (all:build-dev, all:build-testing) |
| 75 | + testcafe-models/ # TestCafe page object models |
| 76 | +
|
| 77 | +/apps/ |
| 78 | + demos/ # Technical demos (Angular, React, Vue, jQuery) |
| 79 | + angular/ # Angular playground |
| 80 | + react/ # React playground |
| 81 | + vue/ # Vue playground |
| 82 | + react-storybook/ # Storybook for React components |
| 83 | +
|
| 84 | +/e2e/ |
| 85 | + testcafe-devextreme/ # TestCafe end-to-end tests |
| 86 | + wrappers/ # Wrapper integration tests |
| 87 | + bundlers/ # Bundler compatibility tests |
| 88 | + compilation-cases/ # TypeScript compilation tests |
| 89 | +
|
| 90 | +/tools/scripts/ # Build and utility scripts |
| 91 | +``` |
| 92 | + |
| 93 | +### Configuration Files |
| 94 | + |
| 95 | +- **Root:** `nx.json`, `pnpm-workspace.yaml`, `tsconfig.json`, `package.json` |
| 96 | +- **Linting:** `.lintstagedrc`, `eslint.config.mjs` (per package) |
| 97 | +- **Styles:** `.stylelintrc.json` (in devextreme-scss) |
| 98 | +- **Git Hooks:** `.husky/pre-commit` (runs lint-staged) |
| 99 | + |
| 100 | +## Build System |
| 101 | + |
| 102 | +### Build Commands (from root) |
| 103 | + |
| 104 | +**Development build (faster, for testing):** |
| 105 | +```bash |
| 106 | +pnpm run all:build-dev |
| 107 | +``` |
| 108 | +- Sets `DEVEXTREME_TEST_CI=TRUE` |
| 109 | +- Skips some production optimizations |
| 110 | +- Builds all packages |
| 111 | + |
| 112 | +**Production build (full):** |
| 113 | +```bash |
| 114 | +pnpm run all:build |
| 115 | +``` |
| 116 | +- Includes documentation injection |
| 117 | +- Creates minified bundles |
| 118 | +- Generates all npm packages |
| 119 | +- Takes significantly longer (~15-30 minutes) |
| 120 | + |
| 121 | +**Build specific package:** |
| 122 | +```bash |
| 123 | +pnpm exec nx build devextreme |
| 124 | +pnpm exec nx build devextreme-angular |
| 125 | +pnpm exec nx build devextreme-react |
| 126 | +pnpm exec nx build devextreme-vue |
| 127 | +pnpm exec nx build devextreme-scss |
| 128 | +pnpm exec nx build devextreme-themebuilder |
| 129 | +``` |
| 130 | + |
| 131 | +**Build with Nx cache skip:** |
| 132 | +```bash |
| 133 | +pnpm exec nx build devextreme --skipNxCache |
| 134 | +``` |
| 135 | + |
| 136 | +### DevExtreme Package Build Details |
| 137 | + |
| 138 | +**From packages/devextreme directory:** |
6 | 139 |
|
7 | 140 | ```bash |
8 | 141 | # Install (frozen lockfile is mandatory; CI fails otherwise) |
|
0 commit comments