index.ts

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')
});