Simple interface for authoring and distributing React Components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
.gitignore
LICENSE
README.md
package.json

README.md

WORK IN PROGRESS. NOT RELEASED YET

react-component-tasks

This component provides a simple cli interface for authoring and distributing React Components. It takes advantage of some conventions that allow you to build your component with almost zero configuration.

Features

  • Write your code in ES6.
  • Bundle your React Component with webpack.
  • Spin up a dev server with hot loading using webpack-dev-server.
  • Generate a demo site.
  • Deploy demo site to Github Pages.

Conventions

  • Component code in src/ and entry point is src/index.{js,jsx}.
  • Demo code in demo/ and entry point is demo/index.{js,jsx}.
  • Dist is generated in dist/.
  • Demosite is generated in gh-pages/.
  • It resolves .eslintrc if exists.
  • Webpack
    • .jsx: babel (presets: es2015, stage-1, react) (plugins: transform-runtime)
    • .js: babel (presets: es2015, stage-1, react) (plugins: transform-runtime)
    • .icss: css-modules, postcss (autoprefixer)
    • .css: regular css, postcss (autoprefixer)
    • .scss: sass, postcss (autoprefixer)
    • .(jpe?g|png|gif|svg): optimized using image-webpack, inlined if size <=8k.

Usage

  1. Install react-component-tasks in your project.

    $ npm install --save-dev react-component-tasks
  2. Create a webpack.config.js file in the root of your project. And add the following:

    module.exports = require('react-component-tasks').webpack.getConfig();
  3. Add the tasks you need to the scripts attribute of your package.json.

    Usage: rct <task-name> [opts] [-- suboptions]

    "scripts": {
        "start": "rct webpack-dev",
        "dist": "rct webpack-dist",
        "deploy": "rct webpack-demosite && rct github-deploy"
    }

rtc is a shortcut for react-component-task cli.

Configuration

There are two kinds of configurations in react-component-tasks:

  • Project configuration

    General configuration for the whole project, mainly paths, and names. (Defaults)[./src/config/defaults.js] can be overriden adding the proper params after the task name.

      $ rct webpack-dev --path.src '~/src' --path.dist '~/dist'
    
  • Task configuration

    Each task might also have its own configuration. Tasks can define a set of defaults based on the current Project configuration. See here

    This defaults can also be overriden just passing the proper params after --.

      $ rct webpack-dev --path.src '~/src' -- --bail
    

Available Tasks

TODO: document all tasks

webpack-dev

webpack-dist

webpack-demosite

babel-es5

eslint

karma-test

karma-tdd

react-docgen

Uses react-docgen-readme.

github-deploy

  • -d, --dist <dist> base directory for all source files. Default: './gh-pages'.
  • -s, --src <src> pattern used to select which files should be published.

Running the project locally

Clone the project and from the root of the repo run the following commands:

$ npm install
$ npm link
$ cd examples/
$ npm install
$ npm link react-component-tasks

Then, from examples/ you can run with npm run <task> all the available task in the scripts attribute of examples/package.json.

Debugging

With iron-node

$ iron-node ./node_modules/react-component-tasks/src/cli.js babel-es5

With node-inspector

$ node-debug ./node_modules/react-component-tasks/src/cli.js babel-es5

Remember to replace babel-es5 in the previous commands with the task you want to debug.

License

Distributed under the MIT license.

TO-DO

  • rebump config
    • rename defaults to project
    • ensure naming is consistent
    • move configs to /config (webpack, karma, eslint...)
  • move webpack config to a separate npm module
  • allow webpack config to be overriden, now only getConfig
  • util to call spawn an log full command
  • add remaining tasks:
  • allow any webpack config to be overrided
  • default styling for demo page
  • update documentation
    • optional .eslintrc
    • babel attr in package.json
    • .gitignore
  • component-generator
  • move cli.js to bin/