templateman v0.1.0

Templateman

Simple and flexible code generating CLI tool for frequently used components.

Concepts

Templateman is designed to facilitate creation a large number of repeating components and make you free from this drudgery.

It provides the ability to generate new files, directories and file structures based on code templates, regardless of the file type, framework or programming language.

Think of Templateman as VS Code snippets or WebStorm Live Templates, but which generates the file structure of each snippet and is independent of the IDE.

Templateman includes 2 main units:

• Code templates: files which are used as templates and can contain special Templateman variables in the form of ${TM:VARIABLE_NAME}.
• Templateman config: describes and combines all your code templates, which you will use, including their names, location and output path. Templateman finds and loads a configuration object from:
  • a templateman.config.js CommonJS module
  • a JSON or YAML .templatemanrc file
  • a templateman property in package.json

Install

npm install templateman -g

or if you use Yarn

yarn global add templateman

Usage

Basic example

Let's imagine that you use React, CSS Modules and snapshot tests for each component in your project.

Creating a huge number of such components can tire you very quickly. You can automate this process with Templateman so that you don't have to do repetitive work over and over again.

Firstly, create a component template file in your project.

./templates/react-func.template:

import React from 'react';
import PropTypes from 'prop-types';
import style from './style.module.css';

function ${TM:COMPONENT_NAME}({children}) {
  return <div className={style.${TM:COMPONENT_NAME}}>{children}</div>;
}

${TM:COMPONENT_NAME}.defaultProps = {
  children: '',
};

${TM:COMPONENT_NAME}.propTypes = {
  children: PropTypes.node,
};

export default ${TM:COMPONENT_NAME};

Here ${TM:COMPONENT_NAME} is a special syntax for Templateman variables. VARIABLE_NAME may contain only latin characters in uppercase, digits and underscore symbol.

Then create templateman config file.

./templatemanrc.json:

{
  "templates": [
    {
      "name": "React Functional Component",
      "files": [
        {
          "from": "./templates/react-func.template",
          "to": "./src/components/${TM:COMPONENT_NAME}/${TM:COMPONENT_NAME}.js"
        }
      ]
    }
  ]
}

As you can see ${TM:VARIABLE_NAME} syntax is allowed also in to field in templateman config.

Now just type tm in your console:

$ tm

As you can see React Functional Component has appeared in the templates list. After selecting it Templateman will walk through all the template files in selected template and look for variables there.

In our case you have only ${TM:COMPONENT_NAME} variable now.

Then when you have set variable values they will be replaced and new template contents will emit into output file specified in to field.

Complex React-component

Now let's complicate the task and add CSS module, re-export file and snapshot test file into our component.

First add required template files.

./templates/css-module.template:

.${TM:COMPONENT_NAME} {}

./templates/export-module.template:

export {default} from './${TM:COMPONENT_NAME}';

./templates/react-test-spec.template:

import React from 'react';
import renderer from 'react-test-renderer';
import ${TM:COMPONENT_NAME} from './${TM:COMPONENT_NAME}';

it('Renders ${TM:COMPONENT_NAME} correctly', () => {
  const tree = renderer.create(<${TM:COMPONENT_NAME} />).toJSON();
  expect(tree).toMatchSnapshot();
});

And extend templateman config file.

./templatemanrc.json:

{
  "templates": [
    {
      "name": "React Functional Component",
      "files": [
        {
          "from": "./templates/react-func.template",
          "to": "./src/components/${TM:COMPONENT_NAME}/${TM:COMPONENT_NAME}.js"
        },
        {
          "from": "./templates/export-module.template",
          "to": "./src/components/${TM:COMPONENT_NAME}/index.js"
        },
        {
          "from": "./templates/css-module.template",
          "to": "./src/components/${TM:COMPONENT_NAME}/style.module.css"
        },
        {
          "from": "./templates/react-test-spec.template",
          "to": "./src/components/${TM:COMPONENT_NAME}.test.js"
        }
      ]
    }
  ]
}

Then run tm command in your terminal and see how Templateman magic works.

Case transformers

Requires 0.1.0 version or higher.

Sometimes you need to change case in Templateman variables. For example, if your team use kebab-case in project file names, but framework requires to name its components in PascalCase.

You can add :CASE_RULE postfix into ${TM:VARIABLE_NAME} to postprocess Templateman variables.

If you take the example above you can change config like this:

{
  "templates": [
    {
      "name": "React Functional Component",
      "files": [
        {
          "from": "./templates/react-func.template",
          "to": "./src/components/${TM:COMPONENT_NAME:KEBAB_CASE}/${TM:COMPONENT_NAME:KEBAB_CASE}.js"
        },
        {
          "from": "./templates/export-module.template",
          "to": "./src/components/${TM:COMPONENT_NAME:KEBAB_CASE}/index.js"
        },
        {
          "from": "./templates/css-module.template",
          "to": "./src/components/${TM:COMPONENT_NAME:KEBAB_CASE}/style.module.css"
        },
        {
          "from": "./templates/react-test-spec.template",
          "to": "./src/components/${TM:COMPONENT_NAME:KEBAB_CASE}.test.js"
        }
      ]
    }
  ]
}

And don't forget to change imports in your templates.

./templates/export-module.template:

export {default} from './${TM:COMPONENT_NAME:KEBAB_CASE}';

./templates/react-test-spec.template:

import React from 'react';
import renderer from 'react-test-renderer';
import ${TM:COMPONENT_NAME} from './${TM:COMPONENT_NAME:KEBAB_CASE}';

it('Renders ${TM:COMPONENT_NAME} correctly', () => {
  const tree = renderer.create(<${TM:COMPONENT_NAME} />).toJSON();
  expect(tree).toMatchSnapshot();
});

List of available case transformers

More examples

Templateman is not limited to just one framework or programming language. You can use it to create any boilerplate code in your project such as components, styles, state managers, API routes, controllers, models, views, mocks and so on. You can use it at front-end, back-end, mobile development, desktop development and basically everywhere if you have Node.js installed on your computer.

See more template examples here.

Maintainers

• Igor Sebelev

License

Apache 2.0