Does Cycle.js DOM driver works with JSX for transforms?

Question

I have a very simple transform on top of a DOM source on a cycles piece of code:

const tt_dom$ = tt_slider.DOM
   .map(vn => {vn.sel += '.tt';console.log(9870, vn); return vn})

Now if the component (i.e. tt_slider) specifies the HTML code without JSX, say

div('.myclass', [])

Then I get the desired output from my transform:

<div class="myclass tt">

But if I specify this using JSX:

 <div className="myclass">

I just get

<div class="myclass">

Am I doing something wrong? Is this standard behavior? Or maybe a bug somewhere on Cycles?

Thanks

Answer 1

The className prop in Snabbdom overwrites all other css classes (in your case the sel). The reason why your hyperscript code works is that you dont use the props but the sel instead.

If you change it to div({ props: { className: 'myClass' }}, []) you will see the same issue. I've openened a bug report for snabbdom, but it seems like this is indended behavior.

You could solve your issue by making the transform use the className prop.