code-transformation

---

O Hook Declarativo do tipo code-transformation permite inserir, remover e modificar qualquer código fonte.

info

O Hook code-transformation possui as seguintes capacidades. Elas são:

• Suporte para a linguagem Typescript;
• Suporte para inserir código nos escopos de import e decorator/annotation;
• O escopo de annotation deve trazer a annotation/decorator e também os atributos que devem ser modificados.
• Se possível, utilize um formatador de código após a execução do Hook. Você pode acrescentar o Hook de run para executar o comando de lint.

Ações disponíveis

path:

O caminho do arquivo do código fonte que será editado. Pode ser composto por expressões Jinja.

path: src/app_module.ts

---

trigger:

Campo para os definir gatilhos que informam o momento em que a edição de arquivos deve ocorrer.

after-render:
Executa o Hook Declarativo após o Template gerar arquivos no projeto.

trigger: after-render

info

No momento o Hook Declarativo code-transformationsuporta apenas a opção after-render.

---

code-transformation:

Lista de opções para transformação de código fonte.

typescript:

Linguagem do código fonte alvo que será transformado. Suporta a linguagem Typescript.

import:(Opcional)

Opção que define as transformações do código fonte alvo dentro do escopo de import. A opção para transformação é insert.

insert:

Insere o import no código fonte alvo.

Exemplo:

Preencha o Hook para obter a transformação do trecho de código, confira a seguir o modelo:

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

O resultado será:

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:(Opcional)

Opção que define as transformações do código fonte alvo dentro do escopo de decorator/annotation. Você deve definir o nome do decorator/annotation alvo. A opção para transformação do decorator/annotation é insert.

attribute:

Nome do atributo do objeto passado como parâmetro para o decorator/annotation alvo.

insert:

Código que será inserido na lista do atributo definido na opção attribute.

Exemplo:

Preencha o Hook para obter a transformação do trecho de código, confira a seguir o modelo:

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

O resultado será:

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

Confira abaixo os exemplos de definição de um Hook Declarativo do tipo code-transformation:

Exemplo de transformação de código typescript adicionando um 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';

Exemplo de transformação de código adicionando um elemento no array e um novo objeto em propriedades de uma 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, },

Exemplo usando inputs na transformação de código

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.nome_input}} } from '@my_lib/some_name';

Caso de uso

1. Arquivo Typescript para ser alterado (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 com Hook de code-transformation

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. O resultado da transformação deve ser este:

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 {}