Component remounted when `map`ping `mkDOM`

[echaozh]

Code: map (DOM.div {} <<< singleton) [DOM.p {} (), DOM.p {} ()] produces:
Error: Invariant Violation: mountComponent(.0.0.1.1, ...): Can only mount an unmounted component. Make sure to avoid storing components between renders or reusing a single component instance in multiple places.

Code: map (DOM.div {} <<< singleton <<< DOM.text) ["a", "b"] oddly produces 2 bs, instead of 1 a before 1 b.

I'm not very familiar with reactjs, but my understanding is that the {} is shared by all the DOM nodes thus created, and this sharing is not allowed. I've tried cloning the {}, and it works.

My proposal is to add a group of mkDOM wrappers cloning the props before constructing the nodes. They may get their own module namespace. Shallow cloning should be OK as the reactive fields inside the props observed by the React.DOM constructors are still shared. Also, cloning is not necessary if mkDOM is not partially applied to props, so the non-cloning wrappers should be kept as default.

[joneshf]

Well, that's no fun. Looks like the culprit is here: https://github.com/purescript-contrib/purescript-react/blob/master/src/React/DOM.purs#L6-L15

I guess we should start a test suite or something.

[joneshf]

This has bit me in the butt twice already. Are we the only ones running into this?

[andreypopp]

FWIW React will soon allow to reuse component descriptors across render calls. I tested map (DOM.div {} <<< singleton) [DOM.p {} (), DOM.p {} ()] with React's master and it works.

Though the issue with ["a", "b"] is another one. Investigating.

[andreypopp]

Yeah, I confirm, shallow cloning props would solve the problem.

[joneshf]

Awesome!