code-transformation

---

The code-transformation Declarative Hook allows you to insert, remove, and modify the source code.

info

The code-transformation Hook has the following capabilities:

• Support for Typescript language;
• Support for inserting code into import and decorator/annotation scopes;
• The scope of annotation must contain the annotation/decorator and also the attributes that must be modified.
• If it's possible, use a code formatting tool after running the Hook. You can add the run Hook to execute the lint command.

Available actions

path:

The source code file path will be edited. The path can be composed of Jinja expressions.

path: src/app_module.ts

---

trigger:

Field to define triggers that inform the moment in which the file edition must occur.

after-render: Executes the Declarative Hook after the Template generates files in the project.

trigger: after-render

info

At the moment the code-transformation Declarative Hook only supports the after-render option.

---

code-transformation:

The options list for the source code transformation.

typescript:

Language of the target source code that will be transformed. It supports the Typescript language.

import:(Optional)

The option that defines target source code transformations within the scope of import. The option for transformation is insert.

insert:

Inserts the import into the target source code.

Example:

Fill in the Hook to obtain the transformation of the code snippet, see the model below:

#.
#.
#.
import: 
  - insert: >
      import { NativeCommunicationModule, NativeObject } from '@my_lib/native-communication';

The result will be:

import { NativeCommunicationModule, NativeObject } from '@my_lib/native-communication';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { environment } from '../environments/environment'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'
import { BalanceComponent } from './balance/balance.component';
import { ConfigComponent } from './config/config.componenet';
import { FormComponent } from './form/form.component';
import { SharedModule } from './shared/shared.module';

annotation:(Optional)

The option that defines target source code transformations within the scope of decorator/annotation. You must define the name of the target decorator/annotation. The option for transforming decorator/annotation is insert.

attribute:

The attribute name of the object is passed as a parameter to the decorator/annotation target.

insert:

The code will be inserted in the list of the attribute defined in the attribute option.

Example:

Fill in the Hook to obtain the transformation of the code snippet, see the model below:

#.
#.
#.
annotation:
   - NgModule: # decorator/annotation name.
       - attribute: imports
         insert: NativeCommunicationModule,
       - attribute: providers
         insert: |
           {provider: NativeObject, useValue: environment.sdkObjectMock,}

The result will be:

@NgModule({
    declarations: [AppComponent, FormComponent, BalanceComponent, ConfigComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        SharedModule,
    NativeCommunicationModule,],
    providers: [{provider: NativeObject, useValue: environment.sdkObjectMock,},],
    bootstrap: [AppComponent],
})

Check below the definitions examples of a Declarative Hook code-transformation type:

Example of transforming typescript code by adding an import

name: hook-code-transformation
description: This is the hook code transformation
types:
  - app
hooks:
  - type: code-transformation
    trigger: after-render
    path: path/to/code/that/will/be/transformed.ts
    code-transformation:
      typescript:
        import:
          - insert: >
              import { some_class } from 'some_lib';

Code transformation example adding an element in the array and a new object in properties of an annotation/decorator

name: hook-code-transformation
description: This is the hook code transformation
types:
  - app
hooks:
  - type: code-transformation
    trigger: after-render
    path: path/to/code/that/will/be/transformed.ts
    code-transformation:
      typescript:
        annotation:
          - annotation_name:
              - attribute: array_attribute_name
                insert: new_element,
              - attribute: object_attribute_name
                insert: |
                  { property_name: value, property_name_2: value_2, },

Example using inputs in code transformation

name: hook-code-transformation
description: This is the hook code transformation
types:
  - app
inputs:
  - label: first input
    type: text
    name: first_input
hooks:
  - type: code-transformation
    trigger: after-render
    path: path/to/code/that/will/be/transformed.ts
    code-transformation:
      typescript:
        import:
          - insert: >
              import { {{inputs.input_name}} } from '@my_lib/some_name';

Use case

1. Typescript file to be changed (input)

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { environment } from '../environments/environment'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'
import { BalanceComponent } from './balance/balance.component';
import { ConfigComponent } from './config/config.componenet';
import { FormComponent } from './form/form.component';
import { SharedModule } from './shared/shared.module';

registerLocaleData(localePt, 'pt');

@NgModule({
    declarations: [AppComponent, FormComponent, BalanceComponent, ConfigComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        SharedModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

2. Plugin with code-transformation Hook

name: hook-code-transformation
description: This is the hook code transformation
types:
  - app
hooks:
  - type: code-transformation
    trigger: after-render
    path: path/to/code/that/will/be/transformed.ts
    code-transformation:
      typescript:
        import:
          - insert: >
              import { NativeCommunicationModule, NativeObject } from '@my_lib/native-communication';
        annotation:
          - NgModule:
              - attribute: imports
                insert: NativeCommunicationModule,
              - attribute: providers
                insert: |
                  {provider: NativeObject, useValue: environment.sdkObjectMock,}

3. The result of the transformation should look like this:

import { NativeCommunicationModule, NativeObject } from '@my_lib/native-communication';

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { environment } from '../environments/environment'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'
import { BalanceComponent } from './balance/balance.component';
import { ConfigComponent } from './config/config.componenet';
import { FormComponent } from './form/form.component';
import { SharedModule } from './shared/shared.module';

registerLocaleData(localePt, 'pt');

@NgModule({
    declarations: [AppComponent, FormComponent, BalanceComponent, ConfigComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        SharedModule,
    NativeCommunicationModule,],
    providers: [{provider: NativeObject, useValue: environment.sdkObjectMock,},],
    bootstrap: [AppComponent],
})
export class AppModule {}