touchx v0.0.3

touchx

touchx is a command line interface tool that seeks to automate the create of new Front End files (like React components, javascript services, css files, HTML, json data, ...).

This project is still in development!

Getting Started

Install the touchx command line tool globally so you can use it from any project directory.

$ npm install -g touchx

$ cd your-project/

Config

You can generate a config file to manage your destination folder for each type of templates. You can also create your own templates.

$ touchx init

{
  "css": null,
  "css_template": null,
  "express_route": null,
  "express_route_template": null,
  "html": null,
  "html_template": null,
  "react_component": null,
  "react_component_template": null,
  "service": null,
  "service_template": null
}

Commands

Create a file

To create a new file, just type:

$ touchx new my-file.my-extension

This is the different types of files you can generate:

There is the different extensions allowed for now:

HTML

• .html
• .hml
• .ejs

CSS

• .css
• .scss
• .sass
• .less
• .styl

JS

• .js
• .jsx

others

• .json

For each new file, you can precise the destination folder with the -d|--dist option.

If you don't set that option, the path you set in the config file is use.

If you don't have a config file or the value is set to null, the file is add at the root folder.

Usage: genfile <command> [options]

  Commands:

    config                               Generate a config file.
    new  <name>                          Generate a new file.

  Options:

    -d, --dist     destination directory
    -h, --help     output usage information
    -V, --version  output the version number

React Component options

When you want generate a new Javascript file, you can choose between 4 options:

• javascript (basic file)
• react component
• service
• express route

If you select react component, you have the option to add directly some props.

Template API

You can overwrite the template by create a new one.

Template list

For the template, I use EJS engine. All your new templates has to finish by .ejs

You can see the current template in /templates

Variables available

• name contain different format of the file name you will set when you generate a new file.

{
	prefix: '_', // or empty
  original: '_my-component.scss',
  camelCase: 'myComponent',
  lowerCase: 'my-component,
  upperCase: 'MY-COMPONENT',
  capitalize: My-Component,
	}

• props is an array containing the different props (name, type, isRequired).

[
  {
    name: 'myProps',
    type: 'string',
    required: true
  },
  {
    name: 'mySecondProps',
    type: 'bool',
    required: false
  }
]

Contributing

If you want to contribute to this project, or if you want some new features/templates, just make a pull request :)

License

Available under the MIT license.