hulot v0.0.8
hulot
is a React component and test generator.
Usage:
$ hulot <COMPONENT-NAME>
=> Generates a component called CoolComponent and a matching test file.$ hulot -c <COMPONENT-NAME>
=> Generates component only, no test. (Why aren't you testing?!)$ hulot -t <COMPONENT-NAME>
=> Generates test only, no component. (Yep, get testing!)
Adding proptypes:
If you want to add prop validation via Reacts proptypes you can do so "rails style":$ hulot <COMPONENT-NAME> <PROPNAME>:<PROPTYPE>
And if you want the prop to be required you just add :req
at the end:$ hulot <COMPONENT-NAME> <PROPNAME>:<PROPTYPE>:req
The proptypes supported by hulot are: array
, bool
, func
, number
, object
, string
, node
and element
.
For more on proptypes, see the official documentation.
Example:
If we wanted to create a component (and the matching test file) called Greeter
that takes a required string
name-prop and an optional boolean
isVIP-prop we would write it like this:$ hulot greeter name:string:req isVIP:bool
Details
The goal of hulot
is to make it as easy as possible to get started writing and testing React components.
It takes the name of the wanted component component using dash-case - so for example, if you want a HelloWorld
component you enter hello-world
- and hulot
spits out a component with that name, hello-world.js
and a test file with the name plus -spec.js
added to the end (so hello-world-spec.js
in our case).
Configuration
The default for hulot assumes that your component and test files are layed out like this:
+---src
| +---components
| | hello-world.js
| | // ALL OF YOUR COMPONENTS
+---spec
| +---components
| | hello-world-spec.js
| | //ALL OF YOUR TESTS
If you want to change this you can do so on a per project basis by adding a hulot property to you package.json file, like this:
inside package.json
{
// boring stuff redacted
"hulot": {
"components": "path/to/were/you/places/your/components/",
"tests": "path/to/your/tests/"
},
// more boring stuff
}