Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import xs, {Stream} from 'xstream';
- import {run} from '@cycle/xstream-run';
- import isolate from '@cycle/isolate';
- import TextInput, {TextInputComponent} from './ui/TextInput';
- import {makeDOMDriver, DOMSource, VNode, div} from '@cycle/dom';
- interface MainSources{
- DOM: DOMSource
- }
- interface ModelShape{
- username: string
- password: string
- }
- interface MainIntents{
- change$: Stream<ModelShape>
- }
- interface MainModel{
- value$: Stream<ModelShape>
- }
- interface MainSinks{
- DOM: Stream<VNode>
- }
- interface MainProps{
- }
- interface MainChilds{
- username: TextInputComponent
- password: TextInputComponent
- }
- function intent(sources: MainSources, props: MainProps, childrens: MainChilds): MainIntents{
- return {
- change$: xs.combine(
- (username, password) => ({username, password}),
- childrens.username.change$,
- childrens.password.change$
- )
- };
- }
- function model(intents: MainIntents, childrens: MainChilds): MainModel{
- return {
- value$: xs.combine(
- (username, password) => ({username, password}),
- childrens.username.value$,
- childrens.password.value$
- )
- };
- }
- function view(model: MainModel, childrens: MainChilds): MainSinks{
- return {
- DOM: xs.combine(
- (username, password, value) => div([
- username,
- password,
- JSON.stringify(value)
- ]),
- childrens.username.DOM,
- childrens.password.DOM,
- model.value$
- )
- };
- }
- function main(sources: MainSources, props?: MainProps): MainSinks{
- const username = isolate(TextInput, 'username')(sources);
- const password = isolate(TextInput, 'password')(sources, {value$: username.change$.mapTo('')});
- const childrens = {username, password};
- const componentIntents = intent(sources, props, childrens);
- const componentModel = model(componentIntents, childrens);
- return view(componentModel, childrens);
- }
- run(main, {
- DOM: makeDOMDriver('#app')
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement