Templates-builder NPM

Template builder for React and Vue

npm bundle size Build Status

Templates Builder, is a package which generate file and folder structure from templates via config file and argv

This package also have a VSCode extension: TB extension, see more: Extension

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 in index 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 path from the root repository - `examples/middlewares`

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