### Install ESLint Configuration

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/eslint-config/README.md

Install the shared ESLint configuration package as a development dependency.

```bash
npm install @com.mgmtp.a12.devtools/eslint-config --save-dev
```

--------------------------------

### Install NPM Packages and Compile

Source: https://github.com/mgm-tp/a12-devtools/blob/main/README.md

Installs all necessary NPM packages and compiles the project. Requires Node.js 24 and pnpm 11+.

```bash
pnpm install
node --run compile
```

--------------------------------

### Example: Creating a Custom Command Task with LeadingBuildTask

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/build-utilities/README.md

Shows how to create a custom Gradle task that executes a command-line operation using the LeadingBuildTask.

```groovy
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.tasks.LeadingBuildTask

task myCustomCommand(type: LeadingBuildTask) {
    commandLine = ['echo', 'Hello World']
}
```

--------------------------------

### Install Prettier and Config

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Install the Prettier package and the A12 shared config as development dependencies.

```bash
npm install --save-dev prettier @com.mgmtp.a12.devtools/prettier-config
```

--------------------------------

### Example: Using VersionUtils for NPM Dist Tag

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/build-utilities/README.md

Demonstrates how to use VersionUtils to determine the NPM distribution tag type for a given version.

```groovy
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.utils.VersionUtils

task checkVersion {
    doLast {
        def distTag = VersionUtils.getNpmDistTagType('1.2.3')
        println "NPM dist tag: ${distTag}"  // Output: latest
    }
}
```

--------------------------------

### Install ESLint Prettier Integration

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Install the eslint-config-prettier package to resolve conflicts between ESLint and Prettier.

```json
"eslint-config-prettier": "^8.1.0",
```

--------------------------------

### Configure Prepare Models Plugin

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/prepare-models/README.md

Customize the 'prepareModels' extension properties, such as input/output paths and logging. This example shows how to define a custom action for processing file paths during the copy operation.

```groovy
prepareModels {
    // for example, flatten only specific subdirectories
    eachFileAction.set({
        fileCopyDetails ->
        if (fileCopyDetails.path.startsWith('common/')) {
            fileCopyDetails.path = fileCopyDetails.name
        }
    } as Action)
}
```

--------------------------------

### Build All Gradle Plugins

Source: https://github.com/mgm-tp/a12-devtools/blob/main/README.md

Use this command to build all Gradle plugins within the A12 platform. Ensure Java 21 and Gradle 9 are installed.

```bash
gradle build
```

--------------------------------

### Test Gradle Plugins

Source: https://github.com/mgm-tp/a12-devtools/blob/main/README.md

Executes tests for all Gradle plugins. Ensure Java 21 and Gradle 9 are installed.

```bash
gradle test
```

--------------------------------

### Run ESM Codemod

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/esm-codemod/README.md

Execute the ESM Codemod CLI tool to convert import statements in a specified file or folder. Ensure Node v22 or higher is installed.

```bash
npx @com.mgmtp.a12.devtools/esm-codemod <absolute-path-to-file-or-folder>
```

--------------------------------

### Tracking Custom Hooks with WDYR

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/whyDidYouRender/PERFORMANCE.MD

WDYR can be configured to track custom hooks by using `trackExtraHooks`. This example shows how to track `useSelector` from `react-redux`. Note that the component using the hook must also be tracked.

```typescript
!!(
	Component.whyDidYouRender ||
	(wdyrStore.options.trackAllPureComponents &&
		((Component &&
			Component.prototype instanceof wdyrStore.React.PureComponent) ||
			isMemoComponent(Component))) ||
	shouldInclude(displayName)
);
```

--------------------------------

### Configure Prettier with .prettierrc file

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Export the Prettier configuration as a string in a .prettierrc file.

```bash
"@com.mgmtp.a12.devtools/prettier-config"
```

--------------------------------

### Apply Prepare Models Plugin

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/prepare-models/README.md

Add the Prepare Models plugin to your build.gradle file. Replace '<version>' with the actual plugin version.

```groovy
plugins {
    id 'com.mgmtp.a12.devtools.plugins.prepare-models' version '<version>'
}
```

--------------------------------

### Import Build Utilities Classes

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/build-utilities/README.md

Import necessary classes from the Build Utilities Plugin into your build script.

```groovy
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.Helper
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.tasks.LeadingBuildTask
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.tasks.PackageJsonModifierTask
import com.mgmtp.a12.devtools.gradle.plugins.buildutils.utils.VersionUtils
```

--------------------------------

### Configure Prettier in package.json

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Add the Prettier configuration to your project's package.json file.

```json
"prettier": "@com.mgmtp.a12.devtools/prettier-config"
```

--------------------------------

### Create Codemod CLI

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Creates a codemod command-line interface. Requires options like name, version, description, logger, and recipes.

```typescript
import type { Project } from 'ts-morph';
import type { ProjectOptions } from 'ts-morph';
import { SourceFile } from 'ts-morph';

// @public (undocumented)
export interface CodemodCLIOptions {
    description?: string;
    logger?: Logger;
    name: string;
    recipes: Recipe[];
    version: string;
}

// @public (undocumented)
export function createCodemodCLI(options: CodemodCLIOptions): void;
```

--------------------------------

### createCodemodCLI

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Creates a command-line interface for running codemods. It takes options such as a name, version, logger, and a list of recipes to execute.

```APIDOC
## createCodemodCLI

### Description
Creates a command-line interface for running codemods. It takes options such as a name, version, logger, and a list of recipes to execute.

### Signature
`createCodemodCLI(options: CodemodCLIOptions): void`

### Parameters
#### Options
- **name** (string) - Required - The name of the codemod CLI.
- **version** (string) - Required - The version of the codemod CLI.
- **recipes** (Recipe[]) - Required - An array of recipes to be executed by the CLI.
- **description** (string) - Optional - A description for the codemod CLI.
- **logger** (Logger) - Optional - A logger instance for outputting messages.
```

--------------------------------

### Extend React Recommended ESLint Configuration

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/eslint-config/README.md

Extend the recommended ESLint configuration for React projects. Add project-specific rules after extending.

```javascript
import devtoolsConfigs from "@com.mgmtp.a12.devtools/eslint-config";

export default [
	...devtoolsConfigs.reactRecommended
	// Add your project specific rules here
];
```

--------------------------------

### Configure Prettier with prettier.config.js

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Export the Prettier configuration as an object in a prettier.config.js file. Allows for overriding properties.

```javascript
module.exports = {
  ...require("@com.mgmtp.a12.devtools/prettier-config"),
  // endOfLine: 'lf', // to overwrite the property
};
```

--------------------------------

### Apply Build Utilities Plugin

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/build-utilities/README.md

Add the Build Utilities Plugin to your Gradle build script.

```groovy
plugins {
    id 'com.mgmtp.a12.devtools.plugins.build-utilities' version '<version>'
}
```

--------------------------------

### Extend Recommended ESLint Configuration

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/eslint-config/README.md

Extend the basic recommended ESLint configuration for TypeScript projects. Add project-specific rules after extending.

```javascript
import devtoolsConfigs from "@com.mgmtp.a12.devtools/eslint-config";

export default [
	...devtoolsConfigs.recommended
	// Add your project specific rules here
];
```

--------------------------------

### Add Kernel Dependencies

Source: https://github.com/mgm-tp/a12-devtools/blob/main/gradle-plugins/prepare-models/README.md

Include the necessary A12 kernel libraries as buildscript dependencies. Ensure the kernel version matches the document models in your workspace.

```groovy
buildscript {
    dependencies {
        classpath 'com.mgmtp.a12.kernel:kernel-md-model:<version>'
        classpath 'com.mgmtp.a12.kernel:kernel-md-facade:<version>'
        classpath 'com.mgmtp.a12.kernel:kernel-tool-model-migration:<version>'
    }
}
```

--------------------------------

### Test NPM Packages

Source: https://github.com/mgm-tp/a12-devtools/blob/main/README.md

Runs tests for all NPM packages. Requires Node.js 24.

```bash
node --run test
```

--------------------------------

### ESM Codemod CLI Options

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/esm-codemod/README.md

View available options for the ESM Codemod CLI. These options allow customization of the import conversion process, including alias mappings, ignored packages, files, and extensions.

```bash
Options:
  --version            Show version number                                                                                         [boolean]
  --alias              Comma-separated tsconfig alias mappings: alias1=absoluteFilePath1,alias2=absoluteFilePath2                   [string]
  --ignore-packages    Comma-separated list of import packages to ignore                                              [string] [default: []]
  --ignore-files       Comma-separated file patterns to ignore. E.g: '/**/*.skip-test/*'                              [string] [default: []]
  --ignore-extensions  Comma-separated list of import extensions to ignore. E.g: '.png,.svg'                 [string] [default: ".css,.svg"]
  --debug              Enable debug mode                                                                          [boolean] [default: false]
  --help               Show help                                                                                                   [boolean]
```

--------------------------------

### Add Prettier Check Script

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Add a script to your package.json to check code formatting using Prettier.

```json
"scripts": {
    "prettier": "prettier --check \"{widgets,showcase}/src/**/*.{ts,tsx}\""
}
```

--------------------------------

### NPM Scripts for A12 Devtools

Source: https://github.com/mgm-tp/a12-devtools/blob/main/README.md

A collection of NPM scripts available at the root level for managing the A12 development environment, including cleaning, compiling, watching, testing, linting, and formatting.

```bash
# Clean all build artifacts
node --run clean

# Compile all packages
node --run compile

# Start TypeScript watch mode for all packages
node --run start

# Test all packages
node --run test

# Lint code
node --run lint

# Format code
node --run format
```

--------------------------------

### Extend ESLint Configuration for Prettier

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/prettier-config/README.md

Extend your ESLint configuration to include the 'prettier' config, ensuring it's the last entry to suppress formatting rules.

```javascript
extends: [
		"@com.mgmtp.a12.devtools/eslint-config/eslint-config-react",
                ...
		// prettier should be the last entry
		"prettier"
	]
```

--------------------------------

### Test Recipe Execution

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Tests a given recipe against a source text. Allows specifying file path and project options for the ts-morph project.

```typescript
import type { Project } from 'ts-morph';
import type { ProjectOptions } from 'ts-morph';
import { SourceFile } from 'ts-morph';

// @public
export interface Recipe {
    execute(project: Project): Promise<void> | void;
    readonly metadata: RecipeMetadata;
}

// @public
export interface RecipeMetadata {
    readonly description: string;
    readonly id: string;
    readonly supportedVersions: string;
}

// @public (undocumented)
export function testRecipe(recipe: Recipe, sourceText: string, options?: {
    filePath?: string;
    projectOptions?: ProjectOptions;
}): Promise<string>;
```

--------------------------------

### testRecipe

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Tests a given Recipe against a source code string. It returns the transformed source code after the recipe has been executed.

```APIDOC
## testRecipe

### Description
Tests a given Recipe against a source code string. It returns the transformed source code after the recipe has been executed.

### Signature
`testRecipe(recipe: Recipe, sourceText: string, options?: { filePath?: string; projectOptions?: ProjectOptions; }): Promise<string>`

### Parameters
- **recipe** (Recipe) - Required - The recipe to test.
- **sourceText** (string) - Required - The source code text to apply the recipe to.
- **options** (object) - Optional - Additional options for testing.
  - **filePath** (string) - Optional - The file path for the source text.
  - **projectOptions** (ProjectOptions) - Optional - Options for the ts-morph Project.
```

--------------------------------

### migrateImports

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Migrates import statements within a given SourceFile according to the provided configuration. This can include entity and path migrations.

```APIDOC
## migrateImports

### Description
Migrates import statements within a given SourceFile according to the provided configuration. This can include entity and path migrations.

### Signature
`migrateImports(sourceFile: SourceFile, config: ImportMigrationConfiguration): void`

### Parameters
- **sourceFile** (SourceFile) - Required - The SourceFile object to migrate imports in.
- **config** (ImportMigrationConfiguration) - Required - The configuration object for import migrations, including entity and path migrations.
```

--------------------------------

### Migrate Imports

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/codemod/index.api.md

Migrates imports within a source file based on a provided configuration. The configuration can include entity and path migrations.

```typescript
import type { Project } from 'ts-morph';
import type { ProjectOptions } from 'ts-morph';
import { SourceFile } from 'ts-morph';

// @public
export interface EntityMigrationConfiguration {
    // (undocumented)
    from: SourceEntityMigrationConfiguration;
    // (undocumented)
    to: TargetEntityMigrationConfiguration;
}

// @public
export interface ImportMigrationConfiguration {
    entityMigrations?: EntityMigrationConfiguration[];
    pathMigrations?: PathMigrationConfiguration[];
}

// @public
export function migrateImports(sourceFile: SourceFile, config: ImportMigrationConfiguration): void;

// @public
export interface PathMigrationConfiguration {
    exclude?: string | string[];
    from: string;
    to: string;
}

// @public
export interface SourceEntityMigrationConfiguration {
    defaultImport?: boolean;
    entity?: string;
    namespaces?: string[];
    packageName: string;
    subPath?: string;
}

// @public
export interface TargetEntityMigrationConfiguration {
    entity?: string;
    namespaces?: string[];
    packageName?: string;
    subPath?: string;
}
```

--------------------------------

### Explicitly Tracking a Component for WDYR

Source: https://github.com/mgm-tp/a12-devtools/blob/main/packages/whyDidYouRender/PERFORMANCE.MD

To ensure WDYR reports re-renders for a specific component, especially when it uses hooks, you must explicitly track the component. This is done by setting the `whyDidYouRender` prop directly on the component function.

```typescript
function MyComp() {}
MyComp.whyDidYouRender = true;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.