The 'choose 2' problem of pure stream based UI development

choose2.js

// Currently you can't have all 3 of these, you can only have 2 of them at the same time:
// 1. VDOM composition
// 2. Functional purity
// 3. Rich components (have states, effects etc. - compound output)

//////////////////////////////////
// Choose 1 and 2 (possible in both React and CycleJS):
// +vdom composition
// +purity
// -rich component

function Cmp2(props) {
  return pragma('div', props, [/*...*/]);
}
function Cmp1(props) {
  return pragma('div', props, [
    pragma(Cmp2, props, [/*...*/])
  ]);
}

//////////////////////////////////
// Choose 1 and 3 (React):
// +vdom composition
// -purity
// +rich component

function Cmp1(props) {
  useWhatever()...
  return pragma(Cmp2, props, []);
}

//////////////////////////////////
// Choose 2 and 3 (CycleJS):
// -vdom composition
// +purity
// +rich component

function Cmp1(sources) {
  const cmp2 = Cmp2(sources);
  return {
    DOM: xs.combine([cmp2.DOM /*, ...*/], (cmp2Vdom /*, ...*/) =>
      // here at the composition part you can't invoke
      // to pass further children etc. :(
	  pragma('div', props, [
        cmp2Vdom
      ])
    )
  }
}