# builder-react-comp

> Builder Archetype - React Component

Latest version **0.1.6** (published 2016-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install builder-react-comp
pnpm add builder-react-comp
yarn add builder-react-comp
bun add builder-react-comp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2016-03-22 |
| First published | 2016-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 36 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Thomas Hourlier |
| Maintainers | cnode |
| Keywords | builder, archetype, react, component |

## Links

- npm: https://www.npmjs.com/package/builder-react-comp
- Repository: https://github.com/hourliert/builder-react-comp
- Homepage: https://github.com/hourliert/builder-react-comp#readme
- Issues: https://github.com/hourliert/builder-react-comp/issues
- npm.io page: https://npm.io/package/builder-react-comp

## Dependencies (36)

- [react](https://npm.io/package/react.md) ^0.14.7
- [semver](https://npm.io/package/semver.md) ^5.1.0
- [typings](https://npm.io/package/typings.md) ^0.7.9
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.5.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.7
- [babel-core](https://npm.io/package/babel-core.md) ^6.5.0
- [typescript](https://npm.io/package/typescript.md) ^1.8.9
- [react-addons-perf](https://npm.io/package/react-addons-perf.md) ^0.14.7
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.5.0
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.5.0
- [babel-plugin-react-transform](https://npm.io/package/babel-plugin-react-transform.md) ^2.0.0
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.1.1
- [babel-plugin-transform-regenerator](https://npm.io/package/babel-plugin-transform-regenerator.md) ^6.5.0
- [babel-plugin-check-es2015-constants](https://npm.io/package/babel-plugin-check-es2015-constants.md) ^6.5.0
- [babel-plugin-transform-es2015-for-of](https://npm.io/package/babel-plugin-transform-es2015-for-of.md) ^6.5.0
- [babel-plugin-transform-es2015-spread](https://npm.io/package/babel-plugin-transform-es2015-spread.md) ^6.5.0
- [babel-plugin-transform-es2015-classes](https://npm.io/package/babel-plugin-transform-es2015-classes.md) ^6.5.0
- [babel-plugin-transform-es2015-literals](https://npm.io/package/babel-plugin-transform-es2015-literals.md) ^6.5.0
- [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.5.0
- [babel-plugin-transform-decorators-legacy](https://npm.io/package/babel-plugin-transform-decorators-legacy.md) ^1.3.4
- [babel-plugin-transform-es2015-parameters](https://npm.io/package/babel-plugin-transform-es2015-parameters.md) ^6.5.0
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.5.0
- [babel-plugin-transform-es2015-object-super](https://npm.io/package/babel-plugin-transform-es2015-object-super.md) ^6.5.0
- [babel-plugin-transform-es2015-sticky-regex](https://npm.io/package/babel-plugin-transform-es2015-sticky-regex.md) ^6.5.0
- [babel-plugin-transform-es2015-block-scoping](https://npm.io/package/babel-plugin-transform-es2015-block-scoping.md) ^6.5.0
- [babel-plugin-transform-es2015-destructuring](https://npm.io/package/babel-plugin-transform-es2015-destructuring.md) ^6.5.0
- [babel-plugin-transform-es2015-function-name](https://npm.io/package/babel-plugin-transform-es2015-function-name.md) ^6.5.0
- [babel-plugin-transform-es2015-typeof-symbol](https://npm.io/package/babel-plugin-transform-es2015-typeof-symbol.md) ^6.5.0
- [babel-plugin-transform-es2015-unicode-regex](https://npm.io/package/babel-plugin-transform-es2015-unicode-regex.md) ^6.5.0
- [babel-plugin-transform-es2015-duplicate-keys](https://npm.io/package/babel-plugin-transform-es2015-duplicate-keys.md) ^6.5.0
- [babel-plugin-transform-es2015-arrow-functions](https://npm.io/package/babel-plugin-transform-es2015-arrow-functions.md) ^6.5.0
- [babel-plugin-transform-es2015-modules-commonjs](https://npm.io/package/babel-plugin-transform-es2015-modules-commonjs.md) ^6.5.0
- [babel-plugin-transform-es2015-template-literals](https://npm.io/package/babel-plugin-transform-es2015-template-literals.md) ^6.5.0
- [babel-plugin-transform-es2015-computed-properties](https://npm.io/package/babel-plugin-transform-es2015-computed-properties.md) ^6.5.0
- [babel-plugin-transform-es2015-shorthand-properties](https://npm.io/package/babel-plugin-transform-es2015-shorthand-properties.md) ^6.5.0
- [babel-plugin-transform-es2015-block-scoped-functions](https://npm.io/package/babel-plugin-transform-es2015-block-scoped-functions.md) ^6.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2016-03-22
- 0.1.5 — 2016-03-22
- 0.1.4 — 2016-03-22
- 0.1.3 — 2016-03-22
- 0.1.2 — 2016-03-22
- 0.1.1 — 2016-03-22
- 0.1.0 — 2016-03-22
- 0.0.6 — 2016-03-17
- 0.0.5 — 2016-03-16
- 0.0.4 — 2016-03-16
- 0.0.3 — 2016-03-16
- 0.0.2 — 2016-03-16
- 0.0.1 — 2016-03-16
- 0.0.0 — 2016-03-16

## README

# builder-react-comp
[![npm version](https://badge.fury.io/js/builder-react-comp.svg)](https://badge.fury.io/js/builder-react-comp)

React component archetype for [builder][builder-link].
It brings a lot of features that help you to make a react component.

It is used by [react-component-seed][react-component-seed-link]. 
Please check this project to understand how to use these builder tasks.

## Getting started
You could check [builder][builder-link] if you want to understand how it works.

```
npm install --save-dev builder
npm install --save builder-react-comp
npm install --save-dev builder-react-comp-dev
```

```yaml
# .builderrc
---
archetypes:
  - builder-react-comp
```

## Tasks
### Build
* `builder run build:commomjs`: Compile the component to ES5. Commonjs module compatible. The output folder is `./lib`
* `builder run build:es`: Compile the component to ES5. ES2015 module compatible. The output folder is `./es`
* `builder run build:typescript`: Compile the component to ES2015. ES2015 module compatible. The output folder is `./libTS` and generate typescript definition files
* `builder run build`: Execute the 3 previous tasks in parallel

### Server playground
* `builder run serve:playground`: Serve the component playground. Check `http://localhost:3000` :smile:

### Test
* `builder run test:all`: Test the component once
* `builder run test:all:watch`: Test the component once and enter in watch mode (usefull for tdd)
* `builder run test:all:coverage`: Test the component and generate test coverage

### Typings
* `builder run typings:install`: Install type definition files

### Linters
* `builder run eslint`: Run eslint on the project
* `builder run tslint`: Run tslint on the project
* `builder run lint`: Run the 2 previous tasks

### Release the component
* `builder run release -- semverCompatibleVersion`: **Only if you are using git flow**. Create a release of the component. `semverCompatipleVersion` must be valid according to [semver][semver-link]
  This will update `package.json` and create a git flow release

## Builder Help

```
$ builder help builder-react-comp
Usage:

  builder <action> <task(s)>

Actions:

  run, concurrent, envs, help
  
Tasks:

  build:commonjs
    [builder-react-comp] rimraf ./lib && BABEL_ENV=commonjs babel ./libTs/src --out-dir ./lib --ignore **/__tests__/**,**/*.d.js

  build:es
    [builder-react-comp] rimraf ./es && BABEL_ENV=es babel ./libTs/src --out-dir ./es --ignore **/__tests__/**,**/*.d.js

  build:typescript
    [builder-react-comp] rimraf ./libTs && tsc -p .

  serve:playground
    [builder-react-comp] BABEL_ENV=development node node_modules/builder-react-comp/lib/index serve playground

  test:all
    [builder-react-comp] BABEL_ENV=commonjs jest --config node_modules/builder-react-comp/config/jest/config.json --colors

  test:all:coverage
    [builder-react-comp] BABEL_ENV=commonjs jest --config node_modules/builder-react-comp/config/jest/config.coverage.json --colors

  test:all:watch
    [builder-react-comp] BABEL_ENV=commonjs jest --config node_modules/builder-react-comp/config/jest/config.json --watch --watchExtensions ts,tsx,js --colors

  typings:install
    [builder-react-comp] typings install

  build
    [builder-react-comp] builder run build:typescript && builder concurrent build:commonjs build:es

  eslint
    [builder-react-comp] eslint --color '{playground,src}/**/*.{js,jsx}'

  lint
    [builder-react-comp] builder concurrent eslint tslint

  prepublish
    [builder-react-comp] npm run builder:compile

  release
    [builder-react-comp] node node_modules/builder-react-comp/lib/index release

  tslint
    [builder-react-comp] tslint -c tslint.json '{playground,src}/**/*.{ts,tsx}'
```

[builder-link]: http://builder.formidable.com/
[react-component-seed-link]: https://github.com/hourliert/react-component-seed
[semver-link]: https://github.com/npm/node-semver

---
_Source: https://npm.io/package/builder-react-comp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._