No render when combining non-trivial components and having drivers

[Elvecent]

Full code here: https://codesandbox.io/s/quirky-butterfly-0pdjd?file=/src/index.ts

function main(sources: any) {
  const counter = Counter(sources, xs.of(2));
  const other = Counter(sources, xs.of(1));
  return {
    react: xs
      .combine(counter.DOM, other.DOM)
      .map((els) => h("div", els))
  };
}

const App = makeComponent(main, {});

render(h(App), document.getElementById("app"));

Given the code above, I get an empty webpage with no components rendered, even though the DOM stream does fire with valid component data.

I can make this work by either removing drivers:

makeComponent(main)

or by replacing my Counter components with something trivial:

.combine(
  xs.of(h("div", "one")),
  xs.of(h("div", "two"))
)

I suspect that there is a bug somewhere in makeComponent code where it branches on non-null drivers argument, but I haven't done any actual investigation.

[staltz]

The example looks a lot like a glitch to me, see https://staltz.com/rx-glitches-arent-actually-a-problem.html

I've stumbled upon many bug reports that mention some kind of xs.combine(xs.of('A'), xs.of('B')) under the hood, so I would recommend checking the blog post and refactoring your application to avoid diamond shapes. At least it seems like it's a xstream glitch, not an issue specific to @cycle/react.

[Elvecent]

In fact, using xs.combine(xs.of('A'), xs.of('B')) kind of code in my example does work exactly as I intend. It's the other thing that doesn't, and I don't see how glitches can be a problem here.

[staltz]

I'll take a look at it sometime soon.