Template builder for React and Vue
Templates Builder, is a package which generate file and folder structure from templates via config file and argv
TB extension, see more: Extension
This package also have a VSCode extension:Table of Contents
- Get Started
- Usage
- Config
- Available Template Variables
- Templates
- Middlewares
- Preview
- VSCode Extension
- Future Goals
- Contribution
- License
Get started
Install templates-builder with npm:
npm install --save templates-builder
or using yarn:
yarn add templates-builder
Usage
Extended description and usage of this, see: Config
Use default preset or use config like:
{
"adjustVars": ["index", "props", "styles", "stories"],
"entry": "src",
"transformType": "kebab",
"extension": "js",
"framework": "vue",
"folders": ["components", "services", "helpers", "graphql", "__tests__"],
"fileNameSeparator": ".",
"reExport": true,
"templates": "path/to/your/templates"
}
Quick guide
Provide your path includes your entry
in the config, or default entry value, if no entry, is an src
, and execute like this:
tb enter/your/path/...
or use package.json scripts:
...
{
"scripts":{
...
"generate:template": "tb ..."
...
}
}
...
Config
Sample config filename:
tb.config.json
tb.config.js
.tbconfigrc
Config Options:
Config option | Require | Available types | Defaults | Meaning |
---|---|---|---|---|
entry | false |
String |
src |
Absolute directory from which the files are generated |
adjustVars | false |
Array<String> |
['index'] |
Sub-files, like props or styles |
transformType | false |
kebab or snake or pascal or camel |
camel |
Names transform strategy |
extension | false |
js or ts |
js |
Files extension |
framework | true |
react or vue |
react |
Framework based generation |
folders | false |
String |
[] |
Additional folders, which will be on the endpoint |
templates | false |
String |
{} |
Path to the templates files, json format, see Templates |
fileNameSeparator | false |
. or - or _ |
. |
Filename separator strategy |
reExport | false |
Boolean |
true |
Creates index file, which re-export fn from the main |
middlewares | false |
Array<Function> |
[] |
Array of middlewares which would be executed on transform files, Available only in .js file
|
Templates
Your config file with your own templates to every file, or exactly for only one.
Template filename and extension:
*.js
Accepted exports:
-
export const ...
-
export {...}
-
export default {...}
Allowed variables:
-
$FILENAME$
- filename -
$EXTENSION$
- file extension -
$relation$
- relation to the main file, used only inindex
template
Example:
If you set to the config adjustVars
, for example, index
and style
you can provide the same vars to the template, like this:
const index = `some template`
const style = 'styles template'
export default { style, index }
Also you can pass variables, like this:
export const props = '$FILENAME$ is a props file with $EXTENSION$ extension'
export const index = `$relation$ relation to main file`
Middlewares
Available only in tb.config.js
file
Middlewares conception available via config file. You can use custom framework agnostic middlewares.
examples/middlewares
Examples path from the root repository - Currently middlewares accepting all transformed files and config object with methods to manipulate config (without modifying)
Usage
All types available in examples/middlewares
directory
Middlewares can be used only via config file. Set a property middlewares
which allow Array<Middleware>
, so for example:
const Middleware = (config) => (files) => files
module.exports = () => ({
...,
middlewares: [Middleware, Middleware, Middleware],
...
})
Preview
-
Files with or without folders
-
Each file have a template, also u can provide variables:
$filename$
-
Result may vary because config may vary
VSCode Extension
This package have a VSCode extension to autocomplete your config file, generate templates folder from current config and create it from scratch..
Usage and Installation
Installation
Easiest way - use tb-ext
from the shell.
First Way - follow this link and click install: tb-config
Second Way - search via VSCode extension store, extension name: tb-cfg
Third Way - manually install: ext install lgtome.tb-config
Usage
Full autocomplete for config file by default. Commands (use ctrl\cmd + shift + p):
-
Templates Builder: Create config
- create config file with default structure -
Templates Builder: Create template file from config
- generate templates folder from config
Contributing
In an active search for contributors and I will be glad to support the package.
Follow this flow:
- Fork this repository
-
git clone
your fork -
npm install
oryarn install
make your changes - Update
CHANGELOG.md
commit and make a pull request
Currently working on
- Tests
- Support folder file structure