Skip to content

Commit

Permalink
docs(docs): refactor documentation pages for improved readability
Browse files Browse the repository at this point in the history 
Cleaned up and reformatted documentation pages by:
- Removing redundant headings
- Improving code formatting
- Enhancing code examples
- Ensuring consistent styling across pages
  • Loading branch information
@IKatsuba
IKatsuba committed Jan 31, 2025
1 parent 492168f commit e46d6bd
Show file tree
Hide file tree
Showing 16 changed files with 344 additions and 274 deletions.
82 changes: 38 additions & 44 deletions docs/src/app/advanced-usage/page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,38 @@ nextjs:
description: 'Learn advanced techniques and patterns for using Mutates effectively'
---

# Advanced Usage

This guide covers advanced techniques and patterns for using Mutates effectively in complex scenarios.
This guide covers advanced techniques and patterns for using Mutates effectively in complex
scenarios.

## Complex Transformations

### Chaining Operations

```typescript
import { getClasses, editClasses, addMethods, addProperties } from '@mutates/core';
import { addMethods, addProperties, editClasses, getClasses } from '@mutates/core';

// Find and transform classes in multiple steps
const classes = getClasses({ pattern: 'src/**/*.ts' });

classes.forEach(klass => {
classes.forEach((klass) => {
// First transformation
editClasses(klass, () => ({
isExported: true,
isAbstract: true
isAbstract: true,
}));

// Add methods
addMethods(klass, {
name: 'initialize',
isAbstract: true,
returnType: 'Promise<void>'
returnType: 'Promise<void>',
});

// Add properties
addProperties(klass, {
name: 'isInitialized',
type: 'boolean',
initializer: 'false'
initializer: 'false',
});
});
```
Expand All @@ -50,16 +49,15 @@ import { getClasses, Node } from '@mutates/core';

const classes = getClasses();

classes.forEach(klass => {
classes.forEach((klass) => {
// Check if class extends a specific base class
const baseClass = klass.getBaseClass();
if (baseClass && Node.isIdentifier(baseClass) && baseClass.getText() === 'BaseComponent') {
// Apply specific transformations for components
}

// Check for specific decorators
const hasInject = klass.getDecorators()
.some(d => d.getName() === 'Inject');
const hasInject = klass.getDecorators().some((d) => d.getName() === 'Inject');
if (hasInject) {
// Apply transformations for injectable classes
}
Expand Down Expand Up @@ -107,8 +105,8 @@ addClasses('service.ts', {
properties: [
{
name: 'items',
type: 'T[]'
}
type: 'T[]',
},
],
methods: [
{
Expand All @@ -117,17 +115,17 @@ addClasses('service.ts', {
parameters: [
{
name: 'key',
type: 'K'
type: 'K',
},
{
name: 'value',
type: 'T[K]'
}
type: 'T[K]',
},
],
returnType: 'T | undefined',
statements: 'return this.items.find(item => item[key] === value);'
}
]
statements: 'return this.items.find(item => item[key] === value);',
},
],
});
```

Expand All @@ -140,16 +138,12 @@ import { getClasses } from '@mutates/core';

// Multiple patterns
const classes = getClasses({
pattern: [
'src/**/*.service.ts',
'src/**/*.repository.ts',
'!src/**/*.spec.ts'
]
pattern: ['src/**/*.service.ts', 'src/**/*.repository.ts', '!src/**/*.spec.ts'],
});

// Pattern with alternatives
const components = getClasses({
pattern: 'src/**/*.(component|directive).ts'
pattern: 'src/**/*.(component|directive).ts',
});
```

Expand All @@ -159,15 +153,15 @@ const components = getClasses({
import { getClasses, Node } from '@mutates/core';

// Find classes with specific characteristics
const classes = getClasses().filter(klass => {
const classes = getClasses().filter((klass) => {
// Has specific method
const hasMethod = klass.getMethods()
.some(method => method.getName() === 'ngOnInit');
const hasMethod = klass.getMethods().some((method) => method.getName() === 'ngOnInit');

// Has specific import
const hasImport = klass.getSourceFile()
const hasImport = klass
.getSourceFile()
.getImportDeclarations()
.some(imp => imp.getModuleSpecifier().getText().includes('@angular/core'));
.some((imp) => imp.getModuleSpecifier().getText().includes('@angular/core'));

return hasMethod && hasImport;
});
Expand All @@ -186,7 +180,7 @@ addClasses('service.ts', {
'/**',
' * Service for handling API communications',
' * @template T - The response data type',
' */'
' */',
],
methods: [
{
Expand All @@ -197,10 +191,10 @@ addClasses('service.ts', {
' * @param endpoint - The API endpoint',
' * @returns Promise with the response data',
' * @throws {ApiError} When the request fails',
' */'
]
}
]
' */',
],
},
],
});
```

Expand All @@ -212,11 +206,11 @@ import { editClasses } from '@mutates/core';
// Preserve existing comments while modifying code
editClasses(targetClass, (structure) => ({
...structure,
methods: structure.methods?.map(method => ({
methods: structure.methods?.map((method) => ({
...method,
// Preserve method documentation
docs: method.docs
}))
docs: method.docs,
})),
}));
```

Expand All @@ -225,7 +219,7 @@ editClasses(targetClass, (structure) => ({
### Batch Processing

```typescript
import { getClasses, editClasses, createProject, saveProject } from '@mutates/core';
import { createProject, editClasses, getClasses, saveProject } from '@mutates/core';

// Process files in batches
createProject();
Expand All @@ -235,7 +229,7 @@ const batchSize = 100;

for (let i = 0; i < allClasses.length; i += batchSize) {
const batch = allClasses.slice(i, i + batchSize);
editClasses(batch, /* transformations */);
editClasses(batch /* transformations */);
}

saveProject();
Expand All @@ -251,14 +245,14 @@ const classCache = new Map<string, boolean>();

function isEligibleForTransform(klass: Node) {
const key = klass.getFilePath();

if (classCache.has(key)) {
return classCache.get(key);
}

const isEligible = /* complex computation */;
classCache.set(key, isEligible);

return isEligible;
}
```
Expand All @@ -282,7 +276,7 @@ function validateClass(klass: Node) {
}

// Validate property types
klass.getProperties().forEach(prop => {
klass.getProperties().forEach((prop) => {
const type = prop.getType();
if (type.isAny()) {
errors.push(`Property ${prop.getName()} has 'any' type`);
Expand All @@ -294,7 +288,7 @@ function validateClass(klass: Node) {

// Use validation in transformations
const classes = getClasses();
classes.forEach(klass => {
classes.forEach((klass) => {
const errors = validateClass(klass);
if (errors.length > 0) {
console.error(`Validation failed for ${klass.getName()}:`, errors);
Expand Down
51 changes: 26 additions & 25 deletions docs/src/app/angular/page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ nextjs:
description: Learn how to use Mutates with Angular projects
---

# @mutates/angular

🌟 **@mutates/angular** is a specialized package within the Mutates toolset, offering powerful tools
to mutate the Abstract Syntax Tree (AST) of Angular projects. Built on top of `@mutates/core`, this
package provides Angular-specific transformations, making it easier to work with Angular components,
Expand Down Expand Up @@ -55,21 +53,23 @@ saveProject();
Find and modify Angular components:

```typescript
import { getComponents, editComponents, addProviders } from '@mutates/angular';
import { addProviders, editComponents, getComponents } from '@mutates/angular';

// Find components
const components = getComponents({
pattern: 'src/**/*.component.ts'
pattern: 'src/**/*.component.ts',
});

// Modify components
editComponents(components, () => ({
changeDetection: 'ChangeDetectionStrategy.OnPush',
styles: [`
styles: [
`
:host {
display: block;
}
`]
`,
],
}));

// Add providers
Expand All @@ -81,14 +81,14 @@ addProviders(components, ['MyService']);
Manipulate Angular modules:

```typescript
import { getModules, addImports, addDeclarations } from '@mutates/angular';
import { addDeclarations, addImports, getModules } from '@mutates/angular';

const modules = getModules();

// Add imports
addImports(modules, {
namedImports: ['CommonModule'],
moduleSpecifier: '@angular/common'
moduleSpecifier: '@angular/common',
});

// Add declarations
Expand All @@ -102,7 +102,7 @@ addDeclarations(modules, ['MyComponent']);
Convert NgModule-based components to standalone:

```typescript
import { migrateToStandalone, getComponents } from '@mutates/angular';
import { getComponents, migrateToStandalone } from '@mutates/angular';

const components = getComponents();
migrateToStandalone(components);
Expand All @@ -119,13 +119,13 @@ import { addInjectionToken, editProviders } from '@mutates/angular';
addInjectionToken('src/app/tokens.ts', {
name: 'API_URL',
type: 'string',
value: '"https://api.example.com"'
value: '"https://api.example.com"',
});

// Edit providers
editProviders(targetModule, (providers) => [
...providers,
{ provide: 'API_URL', useValue: 'https://api.example.com' }
{ provide: 'API_URL', useValue: 'https://api.example.com' },
]);
```

Expand All @@ -141,7 +141,7 @@ editComponents(components, () => ({
<div *ngIf="data$ | async as data">
{{ data | json }}
</div>
`
`,
}));
```

Expand All @@ -158,12 +158,12 @@ const modules = getModules();
addImports(modules, [
{
namedImports: ['MatButtonModule'],
moduleSpecifier: '@angular/material/button'
moduleSpecifier: '@angular/material/button',
},
{
namedImports: ['MatInputModule'],
moduleSpecifier: '@angular/material/input'
}
moduleSpecifier: '@angular/material/input',
},
]);
```

Expand All @@ -182,10 +182,10 @@ addRoutes(modules, [
children: [
{
path: ':id',
component: 'UserDetailComponent'
}
]
}
component: 'UserDetailComponent',
},
],
},
]);
```

Expand All @@ -201,16 +201,16 @@ addServices('src/app/services', {
{
name: 'getData',
returnType: 'Observable<any>',
statements: 'return this.http.get("/api/data");'
}
statements: 'return this.http.get("/api/data");',
},
],
constructorParameters: [
{
name: 'http',
type: 'HttpClient',
accessModifier: 'private'
}
]
accessModifier: 'private',
},
],
});
```

Expand Down Expand Up @@ -254,8 +254,8 @@ try {
Create tests for your transformations:

```typescript
import { addProviders, getComponents } from '@mutates/angular';
import { createTestingProject } from '@mutates/core/testing';
import { getComponents, addProviders } from '@mutates/angular';

describe('Angular Transformations', () => {
beforeEach(() => {
Expand Down Expand Up @@ -289,6 +289,7 @@ Create custom schematics:

```typescript
import { Rule } from '@angular-devkit/schematics';

import { createAngularProject } from '@mutates/angular';

export function customSchematic(): Rule {
Expand Down
Loading

0 comments on commit e46d6bd

Please sign in to comment.