FormidableLabs/builder-radium-component

Name: builder-radium-component

Owner: Formidable

Description: A Radium component archetype for builder.

Created: 2016-01-14 22:12:58.0

Updated: 2016-01-21 22:04:47.0

Pushed: 2016-06-07 04:03:47.0

Homepage: null

Size: 161

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Builder Archetype: Victory Component

A Victory component archetype for builder.

Installation

To use the production and development workflows, install both this package and the development module:

m install --save builder-victory-component
m install --save-dev builder-victory-component-dev

Project Structure

This archetype assumes an architecture as follows:

.builderrc                  # Configures builder archetype
package.json
demo                        # Component demo
??? app.jsx
??? index.html
docs                        # Ecology documentation
??? README.md
??? app.jsx
??? docs.jsx
??? ecology.md
??? index.html
??? static-index.jsx
??? static-render-entry.jsx
dist                        # Distribution build destination (standalone)
lib                         # Lib build destination (npm)
src                         # Component source
??? components
?   ??? *.jsx?
??? index.js
test                        # Component tests
??? client
    ??? main.js
    ??? spec
    ?   ??? components
    ?       ??? *.jsx?
    ??? test.html

The name field in package.json (the published npm package name) is assumed to be:

1. The desired file name of the distribution files and dash-cased.
2. The desired default exported class name when converted to PascalCase.

So, if a package.json has:

ame": "my-cool-component"

The distribution files to output are:

/my-cool-component.js
/my-cool-component.js.map
/my-cool-component.min.js
/my-cool-component.min.js.map

and the exported class name is MyCoolComponent.

An example project using this structure is: formidable-react-component-boilerplate

Usage Notes

Babel Configuration

This archetype does not currently specify its own .babelrc. Your project should specify its own in the root directory if you want non-default Babel settings (like using stage 0, for instance). See the recommended settings.

peerDependencies

This archetype is meant to be used in a very specific context: A Victory component. As such, it's assumed that the implementing component bring along these dependencies:

• react & react-dom 0.14+
• Most Victory components will also want to depend on radium 0.16+`.

The reason we don't specify these in the archetype package.json's peerDependencies is to lower the friction to testing out beta builds of React by specifying a peer of react 0.14.x. Similarly, specifying a peer of >=0.14.x would imply that we're compatible with future React releases, something we can't promise.

Tasks

Run $ builder help to see usage.

e:

ilder <action> <task(s)>

ons:

lp, run, concurrent, envs

s: General

builderrc: Path to builder config file (default: `.builderrc`)

s:

m:postinstall
[builder-victory-component] cd lib || builder run build

m:preversion
[builder-victory-component] builder run check

m:test
[builder-victory-component] builder run test-frontend

m:version
[builder-victory-component] builder run clean && builder run build

ild
[builder-victory-component] builder run build-lib && builder run build-dist

ild-dist
[builder-victory-component] builder run clean-dist && builder run build-dist-min && builder run build-dist-dev

ild-dist-dev
[builder-victory-component] webpack --bail --config node_modules/builder-victory-component/config/webpack/webpack.config.dev.js --colors

ild-dist-min
[builder-victory-component] webpack --bail --config node_modules/builder-victory-component/config/webpack/webpack.config.js --colors

ild-lib
[builder-victory-component] builder run clean-lib && babel src -d lib --copy-files

eck
[builder-victory-component] builder run lint && builder run npm:test

eck-ci
[builder-victory-component] builder run lint && builder run test-ci

eck-cov
[builder-victory-component] builder run lint && builder run test-cov

eck-dev
[builder-victory-component] builder run lint && builder run test-dev

ean
[builder-victory-component] builder run clean-lib && builder run clean-dist

ean-dist
[builder-victory-component] rimraf dist

ean-lib
[builder-victory-component] rimraf lib

v
[builder-victory-component] builder concurrent server-dev server-test

cs-build-static
[builder-victory-component] webpack --config node_modules/builder-victory-component/config/webpack/docs/webpack.config.static.js --progress

cs-dev
[builder-victory-component] webpack-dev-server --port 3000 --config node_modules/builder-victory-component/config/webpack/docs/webpack.config.dev.js --content-base docs

cs-hot
[builder-victory-component] webpack-dev-server --port 3000 --config node_modules/builder-victory-component/config/webpack/docs/webpack.config.hot.js --hot --content-base docs

t
[builder-victory-component] builder concurrent server-hot server-test

nt
[builder-victory-component] builder concurrent lint-server lint-client lint-client-test

nt-client
[builder-victory-component] eslint --color --ext .js,.jsx -c node_modules/builder-victory-component/config/eslint/.eslintrc-client src demo/*.jsx

nt-client-test
[builder-victory-component] eslint --color --ext .js,.jsx -c node_modules/builder-victory-component/config/eslint/.eslintrc-client-test src test/client

nt-server
[builder-victory-component] eslint --color -c node_modules/builder-victory-component/config/eslint/.eslintrc-server *.js

en-demo
[builder-victory-component] opener http://127.0.0.1:3000

en-dev
[builder-victory-component] builder concurrent dev open-demo

en-hot
[builder-victory-component] builder concurrent hot open-demo

sh-gh-pages
[builder-victory-component] git subtree push --prefix docs/build origin gh-pages

rver-dev
[builder-victory-component] webpack-dev-server --port 3000 --config node_modules/builder-victory-component/config/webpack/demo/webpack.config.dev.js --colors --content-base demo

rver-docs
[builder-victory-component] http-server docs/build

rver-hot
[builder-victory-component] webpack-dev-server --port 3000 --config node_modules/builder-victory-component/config/webpack/demo/webpack.config.hot.js --colors --inline --hot --content-base demo

rver-test
[builder-victory-component] webpack-dev-server --port 3001 --config node_modules/builder-victory-component/config/webpack/webpack.config.test.js --colors

st-ci
[builder-victory-component] builder run test-frontend-ci

st-cov
[builder-victory-component] builder run test-frontend-cov

st-dev
[builder-victory-component] builder run test-frontend-dev

st-frontend
[builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.js

st-frontend-ci
[builder-victory-component] karma start --browsers PhantomJS,Firefox node_modules/builder-victory-component/config/karma/karma.conf.coverage.js

st-frontend-cov
[builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.coverage.js

st-frontend-dev
[builder-victory-component] karma start node_modules/builder-victory-component/config/karma/karma.conf.dev.js