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.
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
See the index.js for more in-code documentation.
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:
addDecoratoraddStaticsSo 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.
var c1 = Component();
c1.addDecorator(spec => {
spec.decorated = true;
return spec;
});
c1.addStatics('hello', 'world');
assert(c1.hello === 'world');
assert(c1({}) === { decorated: true })
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:
It also exports an object with:
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.
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' }]
Injects Object.assign into your apps.
Polyfill taken from MDN.
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.
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
});
See ./index.js.
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.
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'