tiosam v0.0.4-alpha.1

tioSAM

WIP SAM pattern implementation

#Usage

import SAM from 'tioSAM'
import actions from './actions' //your actions
import acceptors from './acceptors' //your acceptors

import {renderer} from 'tioSAM-react'
import component from './component

let el = document.createElement('div')
document.body.appendChild(el)

let system = new SAM({
  model = {
    tasks: []
    idCount: 0
  },
  actions,
  acceptors,
  state: renderer(component, el),
  next,
})

//actions.js file
export default function(propose){

  return {
    createTask(newTask){
      propose({
        newTask
      })
    }
  }
}

//acceptor.js file
export default function(model, state, proposal){
  if(proposal.newTask != null){
    model.tasks.push({
      text: proposal.newTask,
      id: model.idCount
    })
    model.idCount += 1
    state('TASK_LIST_CHANGED')
  }
}

//component.js file
import {connect} from 'tioSAM-react'
import React from 'react'

let main = (props) => <div>
    <TaskAdder />
    <TaskList taskList={props.tasks} />
  </div>


let TaskAdder = connect(class extends React.Component{
  textChanged = (e) => {
    this.setState({ text: e.target })
  }

  createTask = () => {
    let text = this.state.text
    if( text != null){
      this.props.actions.createTask(text)
    }
  }

  render(){
    <input type='text' onChange={this.textChanged} />
    <button onClick={this.createTask} />
  }
})

let TaskList = connect((props)=><ul>
  {props.taskList.forEach(task => <li>
        <span>{task.id}</span>
        <p>{task.text}</p>
      </li> 
    )  
  }
</ul>)

export default main