The Problem

Most often your project shares consistent boilearplate all across that you wish you could avoid re-doing and/or re-typing; and on other instances, cli can take you far but yet not far enough. Templateall is here for all of those other moments when the project structures feels really personal and you desired to bring about a lot of code without compelling amount of configuration.

Not only I have utilzed it with a tremendous degree of sucess, but fellow teammates have appreciate its simplicity and the increased tempo that it provides. Make it your own!

Installation

This module is distributed via npm. In order to scafold or create boilerplate - from templates - globally install this package.

npm install templateall -g

Running The Command

The command would prompt you for document name and document type, the list of types is orginated from the Types defined in the configuration file (config.json)

templateall-create

On Success the module will provide confirmation of the documents created

Prelude

In order stay consistent and provide ownership to the template creator and apply the least amount of configuration when running the module. The configuration file config.json and the templates must be under one common directory.

Usage

• Download the contents of the assets forlder into c:\templateall
• The above will provide a few examples that you could run in order to get you started with the templates
• Point the configuration file to the diserable template folder.

Config File (config.json)

{
  "templates": "C:\\templateall\\templates",
  "types": {
    "NGXS State": "state",
    "NGXS State & List Filter Paginator": "state-list-paginator",
    "NG Component & Resolver": "ng-component-resolver",
    "NG Component": "ng-component",
    "NG Component & Formly": "ng-component-formly",
    "NG Component & List Filter Paginator": "ng-component-list-filter"

  },
  "autoIndent": false,
}

• In types you could specify the name of the template and under what name the templates would be found.

• Change the template according to the below options

Name | Description --- |--- Type | The name of the type selected (If the first above selected then value equals state) Name_original | Name of the original document name entered -i.e myDocument Name_file | Name of the file to generate (currently snake cased) -i.e my-document Name_titlelized | Name of the entry as a title -i.e My Document Name_pascalized | Name of the entry as a pasca -i.e MyDocument Name_camelized | Name of the entry as a camel -i.e myDocument

• Hence you can specify binding syntax in the document as the following, Like an the NGXS Example

Action File ({state}.actions.ts)

export class {Name_pascalized}Loading {
  static type = '[{Name_titlelized}] Set As Working';
}

export class {Name_pascalized}Done {
  static type = '[{Name_titlelized}] Set As Done';
}

export class {Name_pascalized}GetElements {
  static type = '[{Name_titlelized}] Get Elements';
}

State File ({state}.state.ts)

import { Store, State, Selector, StateContext, Action } from '@ngxs/store';
import { HttpClient } from '@angular/common/http';
import { I{Name_pascalized}StateModel } from './{Name_file}.model';
import { {Name_pascalized}Done, {Name_pascalized}Loading, {Name_pascalized}GetElements } 
from './{Name_file}.actions';
import { tap, mergeMap } from 'rxjs/operators';

@State<I{Name_pascalized}StateModel>({
name: '{Name_camelized}State',
defaults: <I{Name_pascalized}StateModel>{
    working: true,
    records: [],
}
})
export class {Name_pascalized}State {

    constructor(
        private httpClient: HttpClient
    ){}

@Selector()
static IsWorking(state: I{Name_pascalized}StateModel) : boolean {
    return state.working;
}

@Selector()
static getItems(state: I{Name_pascalized}StateModel): any[] {
    return state.records;
}

@Action({Name_pascalized}Done)
on{Name_pascalized}Done(ctx: StateContext<I{Name_pascalized}StateModel>) {
    ctx.patchState({
      working: false
    });
}
...

• Will provide the following results

Action File (my-document.actions.ts)

export class MyDocumentLoading {
  static type = '[My Document] Set As Working';
}

export class MyDocumentDone {
  static type = '[My Document] Set As Done';
}

export class MyDocumentGetElements {
  static type = '[My Document] Get Elements';
}

State File (my-document.state.ts)

import { Store, State, Selector, StateContext, Action } from '@ngxs/store';
import { HttpClient } from '@angular/common/http';
import { IMyDocumentStateModel } from './my-document.model';
import { MyDocumentDone, MyDocumentLoading, MyDocumentGetElements } 
from './my-document.actions';
import { tap, mergeMap } from 'rxjs/operators';

@State<IMyDocumentStateModel>({
    name: 'myDocumentState',
    defaults: <IMyDocumentStateModel>{
        working: true,
        records: [],
      }
})
export class MyDocumentState {

    constructor(
        private httpClient: HttpClient
    ){}

@Selector()
  static IsWorking(state: IMyDocumentStateModel) : boolean {
    return state.working;
  }

  @Selector()
  static getItems(state: IMyDocumentStateModel): any[] {
    return state.records;
  }

  @Action(MyDocumentDone)
  onMyDocumentDone(ctx: StateContext<IMyDocumentStateModel>) {
    ctx.patchState({
      working: false
    });
  }
...

Contributors