Templated Folder Generator

Installation

npm i templated-folder-generator -g

or locally

npm i templated-folder-generator -D

and use it with npm scripts

package.json

{
  "scripts":{
    "tfg": "tfg"
  }
}

npm run tfg -- g default-react-class

or npx

npx tfg g default-react-class

Quick Start

The generator comes with 2 react component templates. I will be using it for quickstart examples.

Generating Components

cd path/to/target/folder
tfg g <templateName>

or

tfg g <templateName> <path/to/target/folder>

Example:

cd src/my-react-component
tfg g default-react-class

or

tfg g default-react-class path/to/my/new/react/component/directory

Generating Components with custom name:

cd
tfg g default-react-class -n super-cool-component

Generating Components with custom template folder

Example:

1. create a folder with the below structure within your project

template folder structure:

├── package.json
├── templates
│   ├── my-less-template
│   │   ├── {{filename}}.js
│   │   ├── {{filename}}.less
│   ├── my-scss-template
│   │   ├── {{filename}}.js
│   │   ├── {{filename}}.scss

2. Execute below commands to generate from your custom template

cd path/to/my/scss/folder
tfg g my-scss-template -p <absolute or relative path to /templates | relative path to /templates from project root containing package.json>

Example:

cd path/to/my/scss/folder
tfg g my-scss-template -p ./templates

You can also use Environment Variable TEMPLATE_PATH to specify default path to search for the template and can be used in your package.json

package.json

{
  "scripts": {
    "gen": "TEMPLATE_PATH=templates tfg g"
  }
}

then use it like:

npm run gen -- my-scss-template

Please Refer to Template Creation for how to create templates

Check Available Templates

tfg t

Checking Available Templates with your own template dir

tfg t -p path/to/my/custom/template/folder

Dry Run (won't generate file)

tfg g my-template -d

Custom Template Variables

please refer to user defined context section

Custom File Type Mapping

please refer to User Defined File Type Mapping

Usage

Help:

Usage: tfg [options] [command]

Options:
  -v, --version                 output the version number
  -p, --path <templatePath>     custom template folder path
  -n, --name <name>             change the name of the component (default is based on dest dir name)
  -c, --context <context>       pass in a file path to a js file containing an export of a context builder callback
  -f, --filetypemap <map>       give a filetype map to change the file types of templates
  -x, --prefix <name>           add prefix to component file name
  -X, --postfix <name>          add postfix to component file name
  -d, --dryrun                  dry run
  -h, --help                    output usage information

Commands:
  templates|t
  generate|g [template] [dest]

Template Creation

tfg uses handlebars.js syntax.

Default Template Variables:

Example Template

import * as React from 'react';
import './index.less';

class {{component.name.capitalizedCamelCase}} extends React.Component{
  render(){
    return (
      <div className="{{component.name.camelCase}}">
        {{component.name.original}}
      </div>
    );
  }
}

User Defined Context

Suppose you have a template:

function Person(){
  this.name = "{{person.name}}";
  this.age = {{person.age}};
}

you can create a custom context file:

// context.js

module.exports = function initContext({componentName, filename, dirName}) {
  return {
    name: 'Bob',
    age: '40'
  }
}

then import it like so:

tfg g my-template -c [relative|absolute path to context.js]

this will generate:

function Person(){
  this.name = "Bob";
  this.age = 40;
}

tfg comes with a default set of context. Based either by the current working directory name (process.cwd()) or given -n --name argument

suppose the user is in /Desktop/myProject/myComponent. But the user gave a name arg -n myCoolComponent. The context will be as follows:

const context = {
  component: {
    name: {
      original: 'myCoolComponent',
      hypen: 'my-cool-component',
      snakeCase: 'my_cool_component',
      lowerCasedSnakeCase: 'my_cool_component',
      camelCase: 'myCoolComponent',
      capitalizedCamelCase: 'MyCoolComponent',
      upperCase: 'MYCOOLCOMPONENT',
      lowerCase: 'mycoolcomponent'
    },
  },
  filename: 'index',
  dirName: 'myComponent',
};

User Defined File Type Mapping

Suppose you had a template like below:

├── package.json
├── templates
│   ├── my-react-component
│   │   ├── {{filename}}.js

but I want to change file extension from .js to .jsx you can do this:

tfg g my-template -f '{"js":"jsx"}'
# will output my-react-component.jsx

Please note to not include the '.' and put single quotes around the json string and double quotes on field names

Change Filenames

Generating with custom name:

tfg g default-react-class -n super-cool-component
# super-cool-component.js

Generating with prefix :

tfg g default-react-class -x my-
# my-super-cool-component.js

Generating with postfix :

tfg g default-react-class -X .test
# my-super-cool-component.test.js

Dry Run

dry run will not output files but give you a stdout output of the compiled template

tfg g default-react-class g -d

stdout:

[Dry run] will generate file to path: /absolute/path/to/target/folder
================== SOF ==========================
import React, { Component } from 'react';
import './index.css'

export default Test extends Component{
  static defaultProps = {
  }
  state = {
  }
  /*
  componentWillMount(){
  }
  componentDidMount(){
  }
  shouldComponentUpdate(nextProps,nextState){
    return true;
  }
  componentWillReceiveProps(nextProps,nextState){
    return true;
  }
  componentWillUpdate(nextProps,nextState){
  }
  componentDidUpdate(prevProps,prevState){
  }
  componentWillUnmount(prevProps,prevState){
  }
  */
  render(){
    return (
      <div className="test">
        test
      </div>
    )
  }
}

<<<<<<<<<<<<<<<<<< EOF <<<<<<<<<<<<<<<<<<<<<<<<<<

done