What is Reactman?
Reactman helps you quickly author new sets of files to your codebase, from your codebase.
Reactman is added to your NPM development dependancies and is initiated with NPM scripts. Reactman will prompt the developer to populate a set of templates which are added to your codebase. He's here to help the lone gun or dedicated team.
We believe that front end development is becoming more complex across much larger and fragmented codebases. Reactman helps codebases keep consistent code-styles, tests and documentation. Reactman can be configured for any Node.js based project and is designed to be a part of agile workflows.
Getting set up
Install
Start by installing Reactman as a development dependancy. Reactman config is local your project and no global dependancies are required. Just type and go.
npm install reactman --save-dev
Once completed you might want to add a template or reactman folder to your codebase. Reactman is however quite agnostic.
Adding a config
Reactman needs a config to get started and know where to look for templates and where it will write files. It's recommended you add this config to the subdirectory mentioned in the previous step.
The most important part of this file is the "scripts" section. This holds the template locations and the Inquirer.js prompt script which will be presented to the developer. In this most basic example we simple ask for the module name to be exported.
{
"templatesFolder" : "./templates/",
"outputFolder" : "./src/",
"scripts" : {
"component" : {
"files" : {
"example.jsx" : "components/{%=o.exports%}.jsx"
},
"script" : [{
"name": "exports",
"message": "Exports"
}]
}
}
}
There are a few more basic options described in the README.
In advanced setups you can export the JSON and add some formatting and validation methods to your code. This is especially useful for checking variable names or code quality.
Running the config
To run the config you'll need to add a NPM script to your package.json file. This allows multiple configs for more expansive projects.
"scripts" : {"reactman": "reactman --config ./templates/my-config.json"}
Adding the template
Of course none of this work without a BlueImp Javascript template. Here's the example from the readme, it most cases it's authoured by the lead developer and maintained by the team.
import React from "react";
/**
* A new react components
*
* @exports {%=o.exports%}
* @extends React.Component
*/
export default class {%=o.exports%} extends React.Component {
/**
* @return {ReactElement} {%=o.exports%}
*/
render() {
return(<div>{%=o.exports%}</div>)
}
}
Reactman, away!
npm run reactman
Select 'component' and type a name and the file is generated.
/**
* A new react components
*
* @exports test
* @extends React.Component
*/
export default class test extends React.Component {
/**
* @return {ReactElement} test
*/
render() {
return(<div>test</div>)
}
}
Next steps
Adding more scripts to the Reactman config is as easy as writing a new template and then matching the prompts. Let's take a look.
{
"templatesFolder" : "./templates/",
"outputFolder" : "./src/",
"default_script" : "action",
"scripts" : {
"action" : {
"files" : {
"action.js" : "actions/{%=o.exports%}.jsx"
},
"script" : [{
"name": "exports",
"message": "Exports"
}]
},
"component" : {
"files" : {
"example.jsx" : "components/{%=o.exports%}.jsx"
},
"script" : [{
"name": "exports",
"message": "Exports"
}]
}
}
}
It's as simple as that. Reactman uses the Inquirer.js package. If we export the JSON from a JS file we can add some more advanced features to Inquirer.js.
Adding validation and filters
Inquirer.js enables Reactman to "validate" or "filter" inputs with the corresponding keys. Each accepts a function as exampled below. Here we see only valid variable names being allowed for module naming and transforming a comma-separated list into an array for further processing in the template. For Redux Actions it's very useful to be able to type quickly generate the constants and functions associated with this type of file.
function variableName(i) {
var exp = /^[a-zA-Z][a-zA-Z0-9]*?$/;
var pass = exp.test(i);
if(pass) {
return true;
} else {
return "Invalid variable name, please try again...";
}
}
module.exports = {
"templatesFolder" : "./templates/",
"outputFolder" : "./src/",
"default_script" : "action",
"scripts" : {
"action" : {
"files" : {
"action.js" : "actions/{%=o.exports%}.jsx"
},
"script" : [{
"name": "exports",
"message": "Exports",
"required": true,
"default": "NewComponent",
"type": "input",
"validate" : variableName
},{
"name": "actions",
"message": "Add functions",
"required": false,
"default": "",
"type": "input",
"filter" : function(i) {
return i.replace(" ","").split(",");
}
}]
},
"component" : {
"files" : {
"example.jsx" : "components/{%=o.exports%}.jsx"
},
"script" : [{
"name": "exports",
"message": "Exports"
}]
}
}
}
Templates
Reactman add three post-fixes to each string you supply to your script. There are LowerCase, Slug and CamelCase for some help with naming variables. Spaces will be replaced by underscores.
This is best illustrated by example.
This looks like a job for Reactman!
-----------------------------------
? Choose a Script from your config: component
? Exports: Exports Test
...
{%= o.exports %}
{%= o.exportsSlug %}
{%= o.exportsLowerCase %}
{%= o.exportsCamelCase %}
...
Exports Test
Exports_Test
exports_test
exportsTest
Let's look at these in a real world example combined with some Javascript loops and string methods. We are creating a file with a set of constants and placeholder functions.
/*
* action types
*/
{% for(var i = 0; i < o.actions.length; i++) { %}
export const {%= o.actions[i].toUpperCase() %} = '{%= o.actions[i].toUpperCase() %}';
{% } %}
/*
* action creators
*/
{% for(var i = 0; i < o.actions.length; i++) { %}
export function {%= o.actions[i] %}(input) {
return { type: {%= o.actions[i].toUpperCase() %}, input }
}
{% } %}
Will result in a file similar to...
/*
* action types
*/
export const ADD = 'ADD';
export const REMOVE = 'REMOVE';
export const CLEAR = 'CLEAR';
/*
* action creators
*/
export function add(input) {
return { type: ADD, input }
}
export function remove(input) {
return { type: REMOVE, input }
}
export function clear(input) {
return { type: CLEAR, input }
}
Once Reactman has been set up it just takes a few keystrokes to add a well structured file ready for your work. This is Reactman's Power.
If you're still looking for more, please see the examples.
Contribute
Reactman is a young buck who has more training to complete. Can the community support his near-heroic efforts?
His mission is to improve developer productivity and have codebases be clean and maintainable. Reactman wants you!