Entity event system for javascript
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples/react
src
.babelrc
.esdoc.json
.gitignore
.npmignore
LICENSE.MIT.TXT
Readme.md
index.js
package.json

Readme.md

emes

npm version

Emes is a library in the vein for Entity Component Systems for javascript applications. It provides a centralized store for application state and a message bus to handle state changes and events. Reade more.

Installation

OS X & Linux:

npm install emes --save

Usage example

In app.jsx

class TodoApp extends React.Component {
    
    ... 

    componentDidMount() {
        manager.addSystem(function (message, manager) {
            if (message.name === "change")  {
                self.setState({todos : manager.getEntitiesByType("todo")});
            }
        });
        router.init('/');
    }

    ...
    handleNewTodoKeyDown(event) {
        if (event.keyCode !== ENTER_KEY) {
            return;
        }

        event.preventDefault();

        var val = this.state.newTodo.trim();

        if (val) {
            manager.notify(new Message("addTodo", {title: event.target.value}));
            this.setState({newTodo: ''});
        }
    }

    ...

        return (
            <div>
                <header className="header">
                    <h1>todos</h1>
                    <input
                        className="new-todo"
                        placeholder="What needs to be done?"
                        value={this.state.newTodo}
                        onKeyDown={this.handleNewTodoKeyDown.bind(this)}
                        onChange={this.handleChange.bind(this)}
                        autoFocus={true}
                    />
                </header>
                {main}
                {footer}
            </div>

Inside the model,

import {Manager, System, Entity, Message} from 'emes';
import Immutable from 'immutable';

export var manager = new Manager();

manager.addSystem(function (message, manager) {
    if (message.name == "addTodo") {
        var title = message.data.title;
        var todo = manager.createEntity("todo", {
            title: title,
            completed: false
        });
        manager.notify(new Message("change", {message: message}));
    }
});

Docs

The workflow is approximately this,

  1. Every time state needs to be changed, create a new Message and notify the manager
  2. Manager broadcasts the message to all registered Systems
  3. Systems changes the store and notifies everyone via a change Message
  4. UI changes its state by listening to the change message

Docco documentation avaiable here.

Release History

  • 1.0.4
    • CHANGE: Documentation
  • 1.0.3
    • CHANGE: Added serialising functions to Entity
  • 1.0.2
    • CHANGE: Readme
  • 1.0.1
    • CHANGE: First commit

License

Distributed under the MIT license.

Contributing

  1. Fork it (https://github.com/moodyharsh/emes/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Authors