AutoReact

A library that infers UI state dependencies and automatically updates views.

Example

Note the lack of setState() and forceUpdate(). Yet, it works.

var ReactDOM = require('react-dom')
var React = require('react')
var _ = require('lodash')
var AutoReact = require('AutoReact')
 
var UIState = AutoReact.DeclareUIState({
    Username: String,
    CurrentRoomIndex: Number,
    Rooms: Array({
        Name: String,
        LastMessage: String,
        Messages: Array({
            From: String,
            Text: String,
            Time: Number
        })
    })
})
 
var store = (function() {
    UIState.Rooms = []
    return {
        setUsername: function(username) {
            UIState.Username = username
        },
        addRoom: function(name) {
            UIState.Rooms.push({
                LastMessage:null,
                Messages:[],
                Name:name
            })
        },
        addMessage: function(text) {
            UIState.Rooms[UIState.CurrentRoomIndex].Messages.push({
                From: UIState.Username,
                Text: text,
                Time: new Date().getTime()
            })
        },
        selectRoom: function(roomIndex) {
            UIState.CurrentRoomIndex = roomIndex
        }
    }
}())
 
 
var AppView = AutoReact.View({
    componentDidMount: function() {
        window.gApp = this
    },
    render: function() {
        return <div>
            <div>{ this.renderControls() }</div>
            <div>Username: { UIState.Username || '(none)' }</div>
            <RoomListView/>
            <ChatView/>
        </div>
    },
    renderControls: function() {
        return <div>Controls:
            <button onClick={this.addRoom}>Add Room</button>
            <button onClick={this.setUsername}>Set Username</button>
            <input id='usernameInput' />
        </div>
    },
    addRoom: function() {
        store.addRoom("A Room "+new Date().getTime())
    },
    setUsername: function() {
        store.setUsername(document.getElementById('usernameInput').value)
    }
})
 
var RoomListView = AutoReact.View({
    render: function() {
        return <div>
            {_.map(UIState.Rooms, function(Room, roomIndex) {
                return <RoomView key={Room.Name} roomIndex={roomIndex} />
            })}
        </div>
    }
})
 
var RoomView = AutoReact.View({
    render: function() {
        var Room = UIState.Rooms[this.props.roomIndex]
        var isCurrent = (this.props.roomIndex == UIState.CurrentRoomIndex)
        return <div onClick={this.selectRoom}>
            {Room.Name} {isCurrent && ' (current)'}
        </div>
    },
    selectRoom: function() {
        store.selectRoom(this.props.roomIndex)
    }
})
 
var ChatView = AutoReact.View({
    render: function() {
        var Room = UIState.Rooms[UIState.CurrentRoomIndex]
        if (!Room) {
            return <div>No room selected</div>
        }
        return <div>
            {_.map(Room.Messages, (message) =>
                <div key={message.Time}>
                    {message.From}: {message.Text}
                </div>
            )}
            <input id='messageInput' onKeyPress={this.onKeyPress} />
        </div>
    },
    onKeyPress: function(event) {
        if (event.key != 'Enter') { return }
        event.preventDefault()
        var input = document.getElementById('messageInput')
        store.addMessage(input.value.trim())
        input.value = ''
    }
})
 
var viewport = document.body.appendChild(document.createElement('div'))
ReactDOM.render(AppView(UIState), viewport)

Misc TODOs

- [ ] Performance tests
- [ ] ??? Prevent UIState objects from being passed to components
- [ ] SHOULD WORK BETTER WITH FLUX:
	- [ ] 		A single store keeps app state.
	- [ ] 		A single UIState keeps UI state.
	- [ ] 		Store updates UIState
- [ ] Bind a UIState value with an input field
- [ ] Should the store perhaps grab a mutable copy of UIState?
	- [ ] 		Pro: clarity.
	- [ ] 		Con: prevents easy prototoyping without a store.
	- [ ] 		Pro: can seemingly explain the magic a bit?