@verkstedt/summon-components

summon-components

Small cli tool to create react components and its associated files.

setup

• Create a .summon folder
• Set your options in .summon/options.js (see option file)
• Create you're templates inside of .summon/templates (see template files)

usage

npm summon <ComponentPath> [-t <tags>]

<ComponentPath> specifies the path to the component with the components name as last path segment

By default, summon will just create files whos tag is contained inside of the tagsDefault option. This value can be overwritten by the -t <tags|comma-sepearated> flag (e.g. -t index,style,story).

option file

You're options reside in .summon/options. An default structur for the file can be found in summon-components/src/defaults.json.

option overview:

"srcPath": <string> // defines the src path inside of you're project (e.g. `src` or `app`).
"component": {
  "tagsDefault": <array|strings>, // defines which tags will be used when non are passed as cli argument
  "vars": <object>, // custom template variables
  "files": [  // describe the possible file options
    {
      "tag": <string>, // identifger for the file (available in template and can be used as filter in the cli)
      "template": <string> // path to the template file (inside of `.summon/templates`)
      "target": <string/handlebars> // target path for the generated file, handlebars can be used (see [template variables](#template-variables))
    }
  ]
}

template files

Each file specified in options has a template property which referes to a template which will be used to create the file. Variouse variables are available inside this handlebar template (see template variables).

Templates reside in .summon/templates and can be of any filetype.

template variables

Template files and the target property of a file can be expressed as a handlebars template, following variables are available:

name: Name of the Component as specified by the cli argument
name_lower: Name in lowercase
name_upper: Name in Uppercase
name_lcFirst: Name with lowercase first
name_ucFirst: Name with uppercase first
srcPath: Src Path as specified by the options
path: Path to the Component as specified by the cli argument
full_path: Path with prepended <srcPath>
pwd: Absolute path from where <summon> was called
tags: Object containing all tags (as <tag: true>) specified either by the options or the cli arguments
vars: Object containing custom variables which can be used in all templates (path and file)
// only available inside of file templates
target: Final Path where the current file will be created