@itsjonq/remake v2.0.0

🦋 Remake

A simple generator from locally defined templates!

Usage: remake
  🦋  Remake

  remake <cmd> --option

  Example:
  remake component --name=MyComponent --someProp=value


Options:
  -V, --version    output the version number
  -n, --name       The name for the generate file(s)
  -o, --output     Location to output generated file(s)
  -i, --entry      Location of the template file(s)
  -w, --overwrite  Overwrite existing files
  -s, --silence    Suppresses the logs
  -h, --help       output usage information

Commands:
  *              The directory name for the template under .remake/

Table of contents

• Installation
• Usage
  • Create the template files
  • Run the command
• Example
• License

Installation

npm install --save-dev @itsjonq/remake

To install it globally, run:

npm install -g @itsjonq/remake

Usage

Create the template files

In your project's root directory, create a new directory called .remake:

my-app/
├── .remake/
└── .../

Within the .remake directory, create sub directories to associate with "commands" that you would like Remake to run. In this example, we'll create a directory called component, which Remake will use when running the command component:

my-app/
├── .remake/
│   └── component/
└── .../

Under the new component directory, we'll add a couple of files that we want Remake to generate for us:

my-app/
├── .remake/
│   └── component/
│       └── remake-name/
│           ├── index.js
│           └── remake-name.js
└── .../

Notice the remake-name directory and remake-name.js file. Remake will use props you provide to replace any remake-* file name. For this example, the file name will be replaced with the name prop.

Within the remake-name.js, let's add some template content:

// component/remake-name/remake-name.js
import React from 'react'

export class <%= name %> extends React.PureComponent {
  render () {
    return <div />
  }
}

export default <%= name %>

Notice the <%= name %>. Remake uses lodash.template to parse and modify template files. The name prop is provided to the template through CLI arguments. You can specify anything you'd like! Including if/else logic, if you wanna get fancy.

Run the command

Once you're happy with your template files, run the remake command.

The recommended way is to add a remake script to your project's package.json, like so:

  ...
  "remake": "remake",
  ...

You can even add the options to dedicated remake scripts for more commonly generated templates:

"remake:component": "remake component --output=src/components"

Alternatively, if you've installed remake globally, you can run:

remake component --name=Hello

For this example, remake will generate the following files:

my-app/
├── .remake/
│   └── component/
│       └── remake-name/
│           ├── index.js
│           └── remake-name.js
├── Hello
│   ├── index.js
│   └── Hello.js
└── .../

If we take a look at Hello.js, you'll see that the <%= name %> variables have been replaced by Hello, specified by --name=Hello:

// Hello/Hello.js
import React from 'react';

export class Hello extends React.PureComponent {
	render() {
		return <div />;
	}
}

export default Hello;

Example

Check out the example in the example directory 🙌

License

MIT © Q