const {Observable, Subject, ReplaySubject} = Rx;

const {button, div, span, makeDOMDriver} = CycleDOM;

const isolate = CycleIsolate;

​

function log(from) {

  return (args) =>

    console.log(args + " from: " + from)

};

​

function UserContainer({DOM, user$}) {

    const logAction$ = DOM

        .select(".log")

        .events("click")

        .map(() => "log");

​

    /*

     * This would print a input each time the button is clicked

     * assuming we have a log function

     */

    logAction$.subscribe(log("UserContainer"));

​

​

    return {

        //what should be printed depending on the user

        DOM: user$.map((user) => div([

            span(".user-name", user.name),

            button(".log", "Log")

        ])),

​

        /*

         * the log action fired when the user clicks on the 

         * log button

         */

        logAction$: logAction$

    };

}

​

function main({DOM}) {

    const user$ = Observable.just({name: "felix"});

    //we map the user stream to an 'instance' of a UserContainer

    const userContainer$ = user$

      .map(user =>

          //from @cycle/isolate https://github.com/cyclejs/isolate

          isolate(UserContainer)({ DOM, user$: Observable.just(user) })

      )

    /* forget this, and you will

     * end up creating as many components as they are 

     * streams that are created from `components$` 

     */ 

    //.shareReplay();

​

    const userContainerDOM$ = userContainer$

      //meaning you will create a new component here ...

      .map(container => container.DOM);

    const userContainerLogAction$ = userContainer$

      //... and a new component here too

      .flatMapLatest(container => container.logAction$);

​

    /*

     * /!\ here is the problem, this will never print anything

     * when the button is clicked !!

     */

    userContainerLogAction$.subscribe(log("main function"));

​

    return {

        /* which means the DOM attribute you get from the

         * `userContainerDOM$` stream is not coming from the same component

         * as the `userContainerLogAction$` stream

         * which means that you are completly blind and the

         * `userContainerLogAction$` stream won't be feeded at all

         */

         DOM: userContainerDOM$

    }; 

}

​

Cycle.run(main, {

  DOM: makeDOMDriver('#app')

});