@mutates/angular NPM

@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, directives, services, and more.

Features

Angular-Specific Transformations: Modify the AST of Angular components, directives, modules, and services.
Seamless Integration: Works in conjunction with @mutates/core for a smooth development experience.
Efficient: Designed to handle the unique structure and requirements of Angular projects.

Installation

To install the Angular package, use the following command:

npm install @mutates/angular @mutates/core

Usage

Basic Example

Here is a simple example demonstrating how to use @mutates/angular to modify an Angular component:

import { addProviders, getComponents } from '@mutates/angular';
import { createProject, createSourceFile, saveProject } from '@mutates/core';

// Initialize a new Angular project
createProject();

// Add an Angular component file to the project
createSourceFile(
  'app.component.ts',
  `
  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    template: '<h1>Hello, World!</h1>'
  })
  export class AppComponent {}
`,
);

// Perform some Angular-specific transformations
addProviders(getComponents('app.component.ts').at(0)!, ['AppService']);

// Save the modified file
saveProject();

For schematics and migrations the package provided special function to connect with Angular Tree. Angular Tree is a special tree that is used to work with Angular projects. It is based on the @angular-devkit/schematics package.

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

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

export function mySchematic(): Rule {
  return (tree: Tree, context: SchematicContext) => {
    // Use Angular Tree to work with Angular projects
    createAngularProject(tree);

    // Perform Angular-specific transformations
    addProviders(getComponents('app.component.ts').at(0)!, ['AppService']);

    saveProject();

    return tree;
  };
}