function computer(interactions) {
let model = createGroup({
list$: (initialList$, addItem$, newItemName$, list$) =>
Rx.Observable.merge(
addItem$.tap(log('addItem$')).withLatestFrom(newItemName$, list$, (add, newItem, list) =>
[ newItem ].concat(list)
),
initialList$
).tap(log('list$')),
addingMode$: (turnOnAddingMode$, addItem$) =>
Rx.Observable.merge(
turnOnAddingMode$.map(() => true),
addItem$.map(() => false)
).startWith(false)
.tap(log('addingMode$'))
});
model.inject({
initialList$: Rx.Observable.just([ 'abc', 'def', 'xyz' ]),
turnOnAddingMode$: interactions.get('.add', 'click'),
addItem$: interactions.get('.confirm-add', 'click'),
newItemName$: interactions.get('.new-item-name', 'input')
.map(({ target }) => target.value)
}, model
);
return Rx.Observable.combineLatest(
model.list$,
model.addingMode$,
(list, addingMode) =>
h('div', [
h('div', addingMode ? [
h('input', {
type: 'text',
className: 'new-item-name',
value: Math.floor(Math.random() * 10e10).toString(31)
}),
h('button', {
className: 'confirm-add'
}, 'Add')
] : h('button', {
className: 'add'
}, 'Add item')
),
h('ul', {
}, list.map((item) =>
h('li', { }, item)
)
)
]
)
);
}
registerCustomElement(tagName, (interactions, properties) => {
let model = createGroup({
value$: (initialValue$, apply$, input$) =>
apply$.withLatestFrom(
input$.merge(initialValue$),
(apply, input) => input
).merge(initialValue$)
});
model.inject({
initialValue$: properties.get('value').take(1),
apply$: interactions.get(`.${formClass}`, 'submit')
.tap((e) => e.preventDefault()),
input$: interactions.get(`.${inputClass}`, 'input')
.map(({ target }) => target.value)
}, model);
let vtree$ = Rx.Observable.combineLatest(
model.value$,
(value) =>
h('form', {
className: `${formClass}`
}, [
h('input', {
className: `${inputClass}`,
type: 'text',
value: value,
'focus-hook': new FocusHook()
}),
h('button', {
type: 'submit',
className: `${applyButtonClass}`
}, 'Apply')
]
)
);
return {
vtree$,
value$: model.value$.skip(1)
};
});