This document provides an overview of the tooling infrastructure that supports developers using and contributing to MUI. These tools facilitate project integration, version migrations, type safety, and code quality across the monorepo.
For build and release infrastructure, see Build Pipeline. For detailed codemod implementation, see Codemod System. For TypeScript configuration, see TypeScript Configuration.
The developer tools ecosystem provides primary categories of tooling:
@mui/codemod) - Automated code transformations for API migrations and version upgrades using jscodeshift and PostCSS packages/mui-codemod/package.json35-38These tools work together to support both end users migrating between MUI versions and contributors developing new components or features.
The developer tools operate at different stages of the development lifecycle, bridging the gap between source code and published assets.
Developer Tools System Overview
Sources: packages/mui-codemod/README.md1-12 packages/mui-codemod/CONTRIBUTING.md1-11 tsconfig.json1-15
The @mui/codemod package provides automated code transformations for migrating between MUI versions. It uses dual transformation engines to handle both logic and styling:
The codemods are executed via npx @mui/codemod@latest <codemod> <paths...> packages/mui-codemod/README.md17 This command allows specifying the codemod name, target paths, and additional options like --parser (defaulting to 'tsx') and --dry for dry runs packages/mui-codemod/README.md30-31
The system includes "preset" codemods like deprecations/all which orchestrate multiple individual transforms packages/mui-codemod/README.md84-85 For example, deprecations/all combines various deprecation-related codemods such as accordion-props, alert-classes, and system-props packages/mui-codemod/src/deprecations/all/deprecations-all.js1-56
Codemod Execution Flow
| Feature | Implementation | Source |
|---|---|---|
| JS Transform | j.withParser('tsx') | packages/mui-codemod/testUtils/index.js8 |
| CSS Transform | postcss-plugin.js | packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js108-123 |
| Composite | deprecationsAll function | packages/mui-codemod/src/deprecations/all/deprecations-all.js61-119 |
For details, see Codemod System.
Sources: packages/mui-codemod/src/deprecations/all/deprecations-all.js1-56 packages/mui-codemod/src/deprecations/all/postcss.config.js1-49 packages/mui-codemod/README.md17-41 docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md44-50
The monorepo uses a sophisticated TypeScript setup to ensure type safety across dozens of packages while maintaining build performance.
The root tsconfig.json defines global paths that map package names to their local source directories, allowing cross-package development without constant rebuilding tsconfig.json16-53 This setup is crucial for managing dependencies within the monorepo, such as @mui/material referencing @mui/system packages/mui-material/package.json38
MUI employs a "declaration-only" TypeScript build for production packages. While the main build scripts use code-infra build packages/mui-material/package.json28 tsc is used specifically to generate .d.ts files via the typescript script packages/mui-material/package.json31
For detailed configuration patterns and module augmentation testing, see TypeScript Configuration.
Sources: tsconfig.json1-58 packages/mui-material/package.json28-32
MUI uses a variety of tools to ensure code quality:
describeJscodeshiftTransform helper automates the testing of codemods by comparing actual.js and expected.js fixtures packages/mui-codemod/testUtils/index.js14-52generateProptypes script: This script (scripts/generateProptypes.ts) extracts PropTypes from TypeScript files and injects them into JavaScript files, ensuring consistency between type definitions and runtime prop validation package.json7formattedTSDemos script: This script (docs/scripts/formattedTSDemos.mjs) transpiles TypeScript demos to formatted JavaScript for the documentation site package.json34Sources: package.json7-68 packages/mui-codemod/testUtils/index.js1-52 packages/mui-codemod/CONTRIBUTING.md12-27