action-stream

It is a library for realizing Model - View - Stream architecture.

Purpose

You can realize the Uni-direction data flow architecture using the Node Stream API.
Presentation logic can be divided into multiple modules with common API.

All events of user intaraction and model modification are convert as a action objet.
Actions flow in the stream.
Modules of this architecture are in the stream.
They respond to actions that have flowed through the stream.

The amount of source code increases.

See also

Model View Streamのご提案 - Qiita (Japanese)

Usage

$3

npm install action-stream

$3

#### ActionReadable
It converts View(user intaraction) events to actions and pushes that actions to the stream.

An action is an object with target property and type property.

example:

``js
import {
ActionReadable
}
from 'action-stream'

export default class extends ActionReadable {
constructor(selector) {
super(selector)
this.name = 'ActionReaderSample'
}
_bindComponent(selector, push) {
let component = document.querySelector(selector)

component
.querySelector('.button')
.addEventListener('click', e => push({
target: 'some',
type: 'any'
}))
}
`

#### FunnelStream

It bundles multiple action streams into the stream.

example:

`js
import {
FunnelStream
}
from 'action-stream'
import ActionStream1 from './ActionStream1'
import ActionStream2 from './ActionStream2'

let funnel = new FunnelStream(true)

new ActionStream1(selector.INPUT_NODE).pipe(funnel)
new ActionStream2(selector.EDIT_NODE).pipe(funnel)

export default funnel
`

If you set the first argument of the constructor to true, it output passing actions by console.log.

#### ActionTransform

It responds to the action flowing through the stream and modify the Model and View.

##### Example 1 Model

Whether it reacts to an action is distinguished by the action's taget and type.

Specify a target to react to the first argument of bindActions method.
The second argument to the bindActions method is an array consisting of a pair of type and a function to be executed.

The arguments of the callback function are the received action and the function to flow the action to the stream.

`js
import {
ActionTransform
}
from 'action-stream'

export default class extends ActionTransform {
constructor(model) {
super()
this.name = 'ModelStream'

this.bindActions('same', [
['any', (action, push) => madel.doAnything(action)]
])
}
}
`

##### Example 2 View

`js
import {
ActionTransform
}
from 'action-stream'

export default class extends ActionTransform {
constructor(selector) {
super()
let component = document.querySelectorAll(selector)

bindActions('same', [
['any', (action, push) => {
if (action.type === 'any')
_component.innerHTML =