Reapp

reapp-routes

A small library for generating a tree representing routes that also map to paths.

This does two things: saves code and enforces consistency.

Before reapp-routes

var App = require('./components/App');
var Sub = require('./components/app/Sub');
var OtherSub = require('./components/app/OtherSub');
module.exports =
  <Route handler={App} path="/">
    <Route name="sub" handler={Sub} />
    <Route name="otherSub" handler={OtherSub} />
  </Route>

With reapp-routes

module.exports = routes(require,
  route('app',
    route('sub'),
    route('otherSub')
  )
)

The routes method reads in the object tree generated by route and determines the path correspondingly. You can even customize it using the dir property on routes. In the end, you end up with consistent directory structures that map to your routes, less requires, less code and a simple routes file.

It does require Webpack or a bundle system that handles dynamic requires.

Examples

Using react-router helpers:

var { route, routes } = require('reapp-routes/react-router/generator');
module.exports = routes(require,
  route('app', '/', { dir: '' },
    route('kitchen', '/',
      route('controls'),
      route('modals'),
      route('popovers'),
      route('forms')
    ),
    route('viewer')
  )
);

Rolling your own:

var React = require('react');
var { Route, DefaultRoute } = require('react-router');
var { route, routes } = require('react-router-generator');
module.exports = generate(routes(
  { dir: 'components/' },
  route({ name: 'app', path: '/', dir: '' },
    route('kitchen',
      route('controls'),
      route('modals'),
      route('popovers')
    )
  )
));
function generate(props) {
  props.children = props.children ? props.children.map(generate) : null;
  props.handler = require(props.handlerPath);
  return props.defaultRoute ?
    <DefaultRoute {...props} /> :
    <Route {...props} />;
}

Corresponding file tree. Notice how dir affects nesting:

/components
  /kitchen
    Controls.jsx
    Modals.jsx
    Popovers.jsx
  Kitchen.jsx
  App.jsx

Todo

  • Document, tests

See the index.js for more in-code documentation.

reapp-component

Component is a tiny, no-dependency library designed for top-down applications.

It's essentially a factory, that provides two things on it's factories:

  • Decorators through addDecorator
  • Dependency Injection through addStatics

So essentially Dependency Injection and Decorations.

In reapp it's optional, but we found it helpful when creating large apps, for times when you want to add a mixin to every class, or have commonly used ones. As well as for injecting stuff like stores, etc.

Because React apps use gradual controller-view -> view trees DI is typically very simple and more akin to global variables. Decorators are helpful for medium to large scale apps. They can help you have default mixins, and automate other tasks you'd normally do all over the place.

Usage

var c1 = Component();
c1.addDecorator(spec => {
  spec.decorated = true;
  return spec;
});
c1.addStatics('hello', 'world');
assert(c1.hello === 'world');
assert(c1({}) === { decorated: true })

reapp-platform

This library is, for now, the "glue" library for a few different pieces of reapp. Ideally this library could eventually be phased out altogether into smaller ones, or moved into the other reapp pieces, respectively.

When you require this library it does two things:

  • Enables touch events for React (this will be not necessary by React 1.0)
  • Includes reapp-object-assign which gives you a polyfill to use Object.assign() in your app.

It also exports an object with:

  • Env: { CLIENT: (true/false), SERVER: (true/false) }
  • Helpers:
    • storePromise: pass in a store, and a function that takes in the store data and returns true or false, will resolve the promise when the condition returns true.
  • Mixins:
    • RoutedViewListMixin: provides a variety of helpers for use with react-router and ViewLists
    • storeRefreshMixin: pass in actions as arguments, will forceRefresh a React component when those actions happen.

reapp-request

An early-stage library (unfinished) that wants to help package together a nice isomorphic request module. For now there are a few options including superagent, request, and cujojs/rest.

Superagent works nicely but doesn't have promise support, but there is a good library superagent-bluebird-proimise, so for now we just extend that.

The others also either bundle their own promise library or have separate modules for them, but are bulky or tied to their promise library.

The goal here is to take the nice and small surface of superagent with superagent-bluebird-promise, and add on caching and offline support, eventually.

reapp-reducer

Simple reducer for use with flux. Reduces an array or map into an array of objects with: { id, data, status }

Status is given first so we can allow currying, e.g.:

var loadedReducer = reducer.bind(null, 'LOADED');
fetch(url).then(loadedReducer).then(store);

status is optional, default value is 'OK'

assert(reducer([1]) === [{ id: 0, data: 1, status: 'OK' }]

reapp-object-assign

Injects Object.assign into your apps.

Polyfill taken from MDN.

reapp-pack

A helper for generating webpack configs, along with some small helpers. Includes ./webpackServer for easy use of webpack-dev-server.

Based heavily on the official webpack/react-starter repo.

Webpack is just an export of the version of webpack used in this repository.

Usage

See required files in ./config.

var config = require('./config/webpack.run.js');
var webpackServer = require('reapp-pack/webpackServer');
webpackServer(config, {
  port: 3011,
  debug: true,
  hot: true
});

Options

See ./index.js.

reapp-server

reapp-server provides express and webpack servers that work together to serve a reapp app.

reapp-server takes in options that it uses to build the webpack config. By default it runs in development mode and looks for a /config/config.development.js file to determine options. It includes default configs for development and production though.

See ./webpack/config.*.js for the default config files.

See ./webpack/make.js for how to builds the webpack config.

Options

mode: corresponds to config files, typically 'development' or 'production'
port: port to serve on, webpack server port by default is +1 of this
wport: optional, to specify custom webpack server work
staticPaths: array of strings, relative paths of where to serve static assets
dir: dir of where to serve app
debug: turn on debugging from webpack
hostname: set hostname to serve from, default 'localhost'

TODO

  • Work to be done getting isomorphic working again
  • General organization, tests and code docs throughout