Kirpichik
Minimalistic and flexible scaffold tool for components creation 🏗
Table of content
- Installation
- Usage
- Options
- Component creation
- Templates reference
- Helper reference
- Partials reference
- Roadmap
Installation
Install kirpichik
local or globally:
npm i -g kirpichik
Find and install template what you want. For example kirpichik-vue
:
npm i -g kirpichik-vue
Usage
Ans use it! It doesn't need any configuration. Call it directly in directory, where you want generate components:
kirpichik -t vue Component OtherComponent
Options
Command | Command description |
---|---|
-t , --template |
Component template |
-h , --help |
Help calling |
-i , --info |
Info about choosen template. Must be used with -t |
-s , --set |
Generate component composed by passed parts |
-o , --options |
Pass options to template for "slim configuration" |
You can also call --help
and see all options with examples.
Component creation
If you want to create your own component, you must create package with following structure:
├──src/
| ├──fragments/ # There are all template fragments
| ├──partials/ # There are all template partials
| └──helpers/ # There are all helpers functions
└──kirpichikrc.json
kirpichik.json
contains small configuration of component:
Property | Type | Description |
---|---|---|
name |
string |
Template name |
description |
string |
Component description |
namesIngorePatterns |
string[] |
Save original template files name. Directory with compiled component always takes component name! |
defaultSet |
string[] |
Default set option data |
options |
Object |
Description and deault of all template options. description includes option description, default includes value of option. |
Also, you can create kirpichik
property in package.json
file in you template directory.
You can also check example of vue-component template.
Templates reference
kirpichik
templates uses handlebars
as template engine.
All logical constructions must be wrapped into double handlebars. In the
example above uses __NAME__
variable. This is component name constant and it
always replacing by component name.
You can also use helpers functions:
Component HelloWorld
compiles to:
Helpers reference
If you want use your custom helper to process template data, just create .js
file in helpers
directory of your template.
For example:
helpers/reverse.js
:
const reverse = input moduleexports = reverse // Must be common-js module!
Compilation result with HelloWorld
name:
Partials reference
You can use partials
from handlebars
for write reusable code and make your templates more
cleaner.
For create partial
create directory with one file (required) in partials
directory and call it
in your template like this:
{{>myPartial}}
If you want to use partials dynamically, you must use partial
helper and pass partial name as
single parameter.
Example:
css
partial:
sass
partial:
We pass preprocessor
option as sass
and component name equals to TestComponent
.
Component template:
export default { name: '{{__NAME__}}' }
Must rendered to:
export default { name: 'TestComponent' }
You can also check example of partials usage in vue-component template.
Roadmap
- - allow to save origin name of specifiy files
- - extract application core to isolated package
- - write documentation