With Mori
Terrible title, I know.
The rationale for using Mori comes from my desire to use immutable collections in dealing with properties that are transformed when incorporated into my React components.
This really helps when you have to modify your properties in order to fit them into a format for another library to consume while trying to have the data separated out for your own organization/sanity.
If you've ever played with Highcharts, my code should be very simple to follow, but the gist of it is that while I need a chart options object that contains other objects like "chart", "xAxis", "series", and whatnot, I really would like to split up the properties passed into my component.
My chart object is basically constructed as such:
(assoc chart
:chart
(assoc (:chart props)
"renderTo" {{myDOMNode}}
width (:width props)
height (:height props))
:series
(:series props))
Anyway, here's the "implementation": http://jsfiddle.net/kimagure/UP2Qd/1/
Obviously, it's very broken and barely functional, but it's just a demonstration of how properties can be fed into my component to make it change accordingly.
Hope this is helpful in some way and/or sparks an idea on how to improve on this very basic implementation.
Revisited with addons.update
Since the 30KB gzipped size of mori can be very unappealing to people, I have revisited this and used React's experimental Immutability Helpers ('Addons.Update'). This comes with React when you just add react-with-addons.js instead of react.js.
var chartOptions = React.addons.update(chartModel, {
chart: {
renderTo: {$set: selector}
},
series: {$set: seriesModel}
});
Syntax is kind of ugly, but this seems to work pretty nicely: http://jsfiddle.net/kimagure/UP2Qd/3/
By the way, I have this pushed onto Github if you want to check it out: https://github.com/kimagure/highcharts-mori-test