Define and generate automatically your own custom component from CLI (like the angular CLI)
npm install component-creator-cli


!Issues 
Are you interested in the architecture of your project?
Do you do Domain Driven Design (DDD), Clean Architecture, React or simply MVC?
If YES, then you will probably generate a project with repeating components that will have the same file structure.
And you will reuse these paterns throughout the construction of your project architecture. (And even after) !
Therefore, in order to save time on the creation of your architecture and improve your workflow, you can use "Component creator CLI" to generate your personalized component in 1 second! (via the command line)
**1- Create your custom generic template
2- And run the CLI generate command to generate your component at the chosen locations.** (It's like the Angular CLI, with your own custom components !)
| # | Meaning |
|------------------------------------------------|-----------------|
| :heavy_check_mark: | Implemented |
| :soon: | Not yet Implemented |
- :heavy_check_mark: Create your custom template
- :heavy_check_mark: Define the files created by the template
- :heavy_check_mark: Define the files content
- :heavy_check_mark: Place the generic replacement keyword
- :heavy_check_mark:Choose the formatting convention for your generic keyword
- :heavy_check_mark: Configure component work directory target
- :heavy_check_mark: Configure component work directory extension
- :heavy_check_mark: Generate your own custom component
- :heavy_check_mark: Automatically Replace generic keyword
- :heavy_check_mark: Automatically Formate generic keyword
- :heavy_check_mark: Automatically Handle import path
- :soon: Delete created component
- :heavy_check_mark: List all template available
- :heavy_check_mark: Generate an example template
Gif incomming
!Demo animation cli
Run CLI command from eveywhere
Install component-creator-cli as global dependency
``bash `
npm i -g component-creator-cli ccc
- For run any command use : keyword
Run CLI command from your project
Install component-creator-cli as dev-dependency`bash `
npm i -D component-creator-cli npx ccc
- For run any command use : keyword
Definitions:
- Template : A template is a way of writing an directory with some information “left to fill”
- files name
- files content
- location
(This missing informations will be provided through the CLI during component building. Generally, one template is used for build multiple components.)
- Component : A component is fulfilled version of a template. A component is builded from a template.
`cmd `
ccc init
This command initializes the CLI :
- If this is the first use : it create config dir and an example template.
- Otherwise, it checks the validity of existing templates and updates the cache.
Use generate keywork (alias g)
`cmd `
ccc generate `cmd `
ccc g
This command will generate component based on template.
The creation location is configured upstream (in the template config file )
#### Arguments : generate
| Argument | Type | Description |
|:-----------------:|:------:|:-----------------------------------------------------------------------------------------------------:|
| | string | Required. Name of template to use. |
| | string | Required. Replacement value used to replace the generic keyword in brackets |
#### Options : generate--subdomain
| Option | Short | Type | Description | Default Value |
|:-----------:|:-----:|:------:|:--------------------------------------------------------------------------------:|:-------------:|
| | -s | string | Optional. Path of subdomain. It should be relative to componentWorkDir or rootWorkDir. The subdomain will be placed between the componentWorkDir and rootWorkDir | none |
`cmd `
ccc list
This command lists all available templates
`cmd `
ccc --help
This command displays a command line help interface
The value contained in generic keyword defines the formatting result of the replacement value
| Keyword | Formatting | Exemple |
|:----------------:|:---------------------------------------------------:|:------------:|
| $none$ | Don't apply formatting | none | $camelCase$
| | Capitalized word except first one. | exempleCase | $pascalCase$
| | Capitalized word. | ExempleCase | $snakeCase$
| | Lower case string with underscores between words. | exemple_case | $paramCase$
| | Lower cased string with dashes between words. | exemple-case | $constantCase$
| | Upper case string with an underscore between words. | EXEMPLE_CASE | $sentenceCase$
| | Lower cased string with spaces between words. | exemple case |
my-project-directory/
├─ .ccc-templates/ ---> CLI config directory
│ │
│ ├─ my-extravagant-$none$/ ---> A custom template
│ │ ├─ template-config.json ---> Component config file
│ │ ├─ interfce-$none$.ts
│ │ ├─ show-$none$-formated.html
│ │ ├─ $none$-beauty.css
│ │ ├─ test-my-$none$-please.test.ts
│ │ └─ $none$.js
│ │
│ ├─ other$camelCase$Entity/ ---> Another template
│ │ └─ ...
│ │
└─ ...
`
The .ccc-templates/CLI configuration directory is mandatory and it must be created at the root of your project.
In this directory you will stored all your templates like my-extravagant-$none$ and other$camelCase$Entity/.- The keywords "
[none]" and "[camelCase]" belongs to a family of generics keywords .
- On running generate command : Every generic keywords will be replaced by the replacement value$3
When you need to create multiple templates that share the same directory name, you can provide IDs to the directories to differentiate between them.
Additionally, when using community templates, a random ID may be added to each template's directory to avoid name conflicts.
(This ID will not be transmited to components)
Note :
- IDs will not be used for component creation
- ID is an optional feature
To define an id you must add
@ AFTER the root of your template : ./template_dir_name@TEMPLATE_DIR_IDExamples :
`
.ccc-templates/
│
├─ $camelCase$@entity
│
├─ $camelCase$@entity-v2
│
├─ $camelCase$@aggregate
│
└─ ...
` $3
The
./template-config.json configuration file is mandatory.| Field | Type | Description |
|:---------------------------------------------------:|:--------------------:|:----------------------------------------------------------:|
|
template | string | Required & Unique. Template name. |
| componentWorkDirectory| string \| object | Required. Used to set the component working directory. Should be relative to project directory | ####
"componentWorkDirectory": string | object
As string :
| Field | Type | Description |
|:--------------------------------------:|:--------:|:-----------------------------------------------------:|
| componentWorkDir | string | Required. Component working directory. |
As object :
| Field | Type | Description |
|:--------------------------------------:|:--------:|:-----------------------------------------------------:|
|
componentWorkDir.rootWorkDir | string | Required. Component working directory. Should be relative to project directory |
| componentWorkDir .extensionWorkDir | string | Optional. Exention of component working directory. Should be relative to rootWorkDir |
Use the "
componentWorkDir" property as object when working with subdomains and want to create your components in different subdomains like example 3 with "--subdomain" option.
Examples
- In all the examples we will create a component from this 'repository' template
- All examples will use the same template
- All the examples will use the same template and same files contoent
- But all the examples will have different :
- template configuration file
- project tree directorySame 'repository' template directory
my-$paramCase$-repository/
`
./.ccc-templates/
├─ my-$paramCase$-repository/
│ ├─ template-config.json
│ ├─ interface-$paramCase$-repository.ts
│ ├─ implementation-$paramCase$-repository.ts
│ ├─ $paramCase$-repository.test.ts
└─ ...
`
Same 'repository' template file content : ./interface-$paramCase$-repository.ts
`typescript
interface I$pascalCase$Repo {
anyProperty : string
hello : number
getAll$pascalCase$ () : Object[]
getOne$pascalCase$ () : Object
}
`
Example 1 : Classic usage
\- project tree directory
/my-project-1
`
my-project-1/
├─ .ccc-templates/
├─ src/
│ ├─ repos/
├─ node_modules/
├─ package.json
└─ ...
` \- 'repository' template config file
./template-config.json
- define at /my-project-1/.ccc-templates/my-$paramCase$-repository/template-config.json
`json
{
"template" : "repository",
"componentWorkDir" :"src/repos"
}
`
\- command
generate
`cmd
ccc generate repository 'car'
`
\- component directory my-car-repository/ generated at /my-project-1/src/repos/my-car-repository
`
./my-car-repository/
├─ interface-car-repository.ts/
├─ implementation-car-repository.ts/
└─ car-repository.test.ts/
`
\- component file content
./interface-car-repository.ts
`typescript
interface ICarRepo {
anyProperty : string
hello : number
getAllCar () : Object[]
getOneCar () : Object
}
` Example 2 : Set directory extension in "generate" command
\- project tree directory
/my-project-2
`
my-project-2/
├─ .ccc-templates/
├─ src/
│ ├─ domain/
│ ├─ infra/
│ │ ├─ repos/
│ │ ├─ mappers/
│ │ ├─ .../
├─ node_modules/
├─ package.json
└─ ...
` \- 'repository' template config file
./template-config.json define at /my-project-2/.ccc-templates/my-$paramCase$-repository/template-config.json
`json
{
"template" : "repository",
"componentWorkDir" :"src"
}
`
\- command
generate
`cmd
ccc generate repository 'bus' -s ./infra/repos
`
\- component directory my-bus-repository/
generated at /my-project-2/src/infra/repos/my-bus-repository
`
./my-bus-repository/
├─ interface-bus-repository.ts/
├─ implementation-bus-repository.ts/
└─ bus-repository.test.ts/
`
\- component file content
./interface-bus-repository.ts`typescript
interface IBusRepo {
anyProperty : string
hello : number
getAllBus () : Object[]
getOneBus () : Object
}
` Example 3 : Use "componentWorkDir" config property as object
\- project tree directory
/my-project-3
`
my-project-3/
├─ .ccc-templates/
├─ src/
│ ├─ boundedCtx1/
│ ├─ boundedCtx2/
│ ├─ boundedCtx3/
│ │ ├─ domain/
│ │ ├─ infra/
│ │ │ ├─ repos/
│ │ │ ├─ mappers/
│ │ │ ├─ .../
├─ node_modules/
├─ package.json
└─ ...
` \- 'repository' template config file
./template-config.json
define at /my-project-3/.ccc-templates/my-$paramCase$-repository/template-config.json
`json
{
"template" : "repository",
"componentWorkDir" :{
"rootWorkDir" : "src",
"extensionWorkDir" : "infra/repos",
}
}
`
\- command generate
`cmd
ccc generate repository 'taxi' -s ./boundedCtx3
`
\- component directory my-taxi-repository/
generated at /my-project-3/src/boundedCtx3/infra/repos/my-taxi-repository
`
./my-taxi-repository/
├─ interface-taxi-repository.ts/
├─ implementation-taxi-repository.ts/
└─ taxi-repository.test.ts/
`
As we can see, the "--subdomain" command option allows to place a subdomain between the rootWorkDirand "extensionWorkDir" paths\- component file content
./interface-taxi-repository.ts
`typescript
interface ITaxiRepo {
anyProperty : string
hello : number
getAllTaxi () : Object[]
getOneTaxi () : Object
}
`
More
Technichal information
- This CLI contain
javascrit caching system database` for speeds up reads operations:#### Lience : MIT
#### Author : @enzo-cora