flummox.js

// Generated by CoffeeScript 1.9.2

/*

 * Flummox using CoffeeScript --

 * build:

cjsx -b -c flummox.cjsx && browserify --exports=require flummox.js -o flummox0.js
 */
var Actions, App, AppFlux, Flux, FluxComponent, MessageActions, MessageStore, React, Store, flux, log, page, ref, rtypes,
  slice = [].slice,
  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
  hasProp = {}.hasOwnProperty;

log = function() {
  var s;
  s = 1 <= arguments.length ? slice.call(arguments, 0) : [];
  return console.log.apply(console, s);
};

log("flummox.cjsx");

ref = require('flummox'), Actions = ref.Actions, Store = ref.Store, Flux = ref.Flux;

MessageActions = (function(superClass) {
  extend(MessageActions, superClass);

  function MessageActions() {
    return MessageActions.__super__.constructor.apply(this, arguments);
  }

  MessageActions.prototype.createMessage = function(messageContent) {
    return {
      content: messageContent,
      date: Date.now()
    };
  };

  MessageActions.prototype.clearMessages = function() {
    log("clearMessages");
    return {};
  };

  return MessageActions;

})(Actions);

MessageStore = (function(superClass) {
  extend(MessageStore, superClass);

  function MessageStore(flux) {
    var messageActionIds;
    MessageStore.__super__.constructor.call(this);
    messageActionIds = flux.getActionIds('messages');
    this.register(messageActionIds.createMessage, this.handleNewMessage);
    this.register(messageActionIds.clearMessages, this.clearMessages);
    this.state = {
      messages: []
    };
  }

  MessageStore.prototype.handleNewMessage = function(message) {
    log("appending new message");
    this.setState({
      messages: this.state.messages.concat([message])
    });
    return log("now state=", this.state);
  };

  MessageStore.prototype.clearMessages = function() {
    log("clearing messages");
    return this.setState({
      messages: []
    });
  };

  return MessageStore;

})(Store);

AppFlux = (function(superClass) {
  extend(AppFlux, superClass);

  function AppFlux() {
    log("AppFlux constructor");
    AppFlux.__super__.constructor.call(this);
  }

  return AppFlux;

})(Flux);

flux = new AppFlux();

flux.createActions('messages', MessageActions);

flux.createStore('messages', MessageStore, flux);

flux.addListener('dispatch', function(payload) {
  return log('Dispatch: ', payload);
});

window.flux = flux;

window.React = React = require('react');

rtypes = React.PropTypes;

App = (function(superClass) {
  extend(App, superClass);

  function App() {
    return App.__super__.constructor.apply(this, arguments);
  }

  App.prototype.propTypes = {
    title: rtypes.string
  };

  App.prototype.message_list = function() {
    var i, j, len, m, ref1, results;
    if (this.props.messages != null) {
      ref1 = this.props.messages;
      results = [];
      for (i = j = 0, len = ref1.length; j < len; i = ++j) {
        m = ref1[i];
        results.push(React.createElement("div", {
          "key": i
        }, m));
      }
      return results;
    }
  };

  App.prototype.render = function() {
    return React.createElement("div", null, React.createElement("h1", null, this.props.title), React.createElement("form", {
      "onSubmit": this.submit_handler
    }, React.createElement("button", {
      "type": "submit"
    }, "Send a new message"), this.message_list()), React.createElement("form", {
      "onSubmit": this.clear_handler
    }, React.createElement("button", {
      "type": "submit"
    }, "Clear messages")));
  };

  App.prototype.submit_handler = function(event) {
    event.preventDefault();
    log("new message button pushed");
    return flux.getActions('messages').createMessage("the button was pushed -- " + (Math.random()));
  };

  App.prototype.clear_handler = function(event) {
    event.preventDefault();
    log("clear button pushed");
    return flux.getActions('messages').clearMessages();
  };

  return App;

})(React.Component);

FluxComponent = require('flummox/component');

window.FluxComponent = FluxComponent;

log("FluxComponent=", FluxComponent);

page = function() {
  return React.createElement(FluxComponent, {
    "flux": flux,
    "connectToStores": ['messages']
  }, React.createElement(App, {
    "title": "Demo"
  }));
};

log("render");

React.render(page(), document.getElementById('app'));