Template builder for React and Vue

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

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 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

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 or yarn install make your changes
• Update CHANGELOG.md commit and make a pull request

Currently working on

• Tests
• Support folder file structure

License

MIT-licensed.