Setup better dependency resolution system

[L8D]

Goals:

• Components can specify what stylesheets they need injected (and/or included in the inline <style> tag)
• Components can specify what route-dependent resources they need to render
• Components can specify actions/metadata like setting the page title or analytics/logging during initialization
• Components can specify instances of client-side controllers they need to read from (possibly merged with the route-dependent resources)

Closes #6

[L8D]

Notes:

Using the conventional store system as opposed to having seperate models and controllers gives us more flexibility with how we structure (and query) our models. It also means our components directly depend on stores, instead of having to indirectly declare what controllers would need to be initialized.

Using decorators to annotate what dependencies need to be injected/fetched for components gives us more flexibility in how we store, encode and query that data. It's also more precise and clean. For example, it would be very easy to setup a system for tracking what stylesheets to inject by adding a stylesheet decorator, and from there we can choose whether to incorporate it with the dependency resolution system, or if we want to use a separate system to track and query that.

Some psuedo-code:

// stores/restaurant.js
import {Dispatcher} from 'flux';
import {Store} from 'some-base-store-class';
import {RouteParams} from 'some-place';
import {SomeRestaurantAction} from '../actions/some-restaurant';

import {Restaurant} from '../models/restaurant';

@inject(Dispatcher, RestaurantResolver)
export class RestaurantStore extends Store {
  constructor(dispatcher, restaurant) {
    super(dispatcher);

    this.restaurant = restaurant;

    this.bind(SomeRestaurantAction, this.handleSomeRestaurant);
  }

  handleSomeRestaurant(payload) {
    // ...
  }

  getRestaurant() {
    return this.restaurant;
  }
}

@injectPromise(RouteParams)
export function RestaurantResolver(routeParams) {
  const restaurant = new Restaurant({id: routeParams.restaurant_id});

  return restaurant.fetch().return(restaurant);
}

// components/restaurant{,/index}.js
import React, {Component} from 'react';
import {stylesheet, dependency, listeningTo} from 'some-other-place';
import {RestaurantStore} from '../stores/restaurant';

@stylesheet('restaurant/index')
@dependency({restaurantStore: RestaurantStore})
@listeningTo(['restaurantStore'], 'getStateFromStores') // compiles down to componentWillMount and componentWillUnmount listeners
export class RestaurantComponent extends Component {
  getStateFromStores = () => {
    const {dependencies} = this.context;
    const {restaurantStore} = dependencies;

    return {
      restaurant: restaurantStore.getRestaurant()
    };
  }

  // ...
}