Integration of JS libraries

[bendisposto]

I wonder if there is a better way to integrate JS libs (in my case for graph drawing) into the framework? Currently I turn every change in a subscription into a handler event (using reagent.ratom/run!).
The event then does the JS calls, so it looks like this:

(defn sub->handler [handler sub & args]
  (let [x (re-frame/subscribe sub)]
    (ratom/run! (re-frame/dispatch (into [handler @x] args)))))

(re-frame/register-handler
 :foo-event
 (fn [db [_ subscription-result elem]]
    ;; call some JS stuff to change elem 
   db))

(defn component [x]
  (reagent/create-class
   {:component-did-mount
    (fn [c]
      (let [elem (.getDOMNode c)]
        (subs->handler :foo-event [:bar-subscription x] elem)))
    :reagent-render (fn [] [:div {:id "component"}])}))

[mike-thompson-day8]

@bendisposto Somehow that doesn't seem right. But I'm not sure what alternative to suggest yet. Any chance of a simple repo, showing the issue. I haven't had to integrate with any JS libs so far, so I need to see something real.

Sven appeared to raise a related issue (?) here:
https://groups.google.com/forum/#!topic/clojurescript/Dl2gC1BnIHE

[bendisposto]

Here is an example project: https://github.com/bendisposto/reframe-cytoscape

[sveri]

Yes, this is basically the same solution I came up with to call a resumable.js function.

[mike-thompson-day8]

Does anything around this need to be added to the Wiki? Or just close this issue?

[bendisposto]

I have not found a better way to do the integration yet. So maybe we should produce a wiki page if somebody encounters the same problem.

[mike-thompson-day8]

@bendisposto; Jens, I've had a quick look at this. Although this approach is "creative", it breaks just about every rule in re-frame. So I don't think we'll be describing it in the Wiki. :-)

The challenge here is that you have a js library (cytoscape) which wants to imperatively mutate the DOM.

As far as I know, the best approach is to use Nils' technique described here:
http://nils-blum-oeste.net/clojurescripts-reagent-using-props-in-lifecycle-hooks/

You create a component which takes the "graph data" as "props" (aka parameters) This component renders a simple div and then lets cytoscape do its imperative job on the DOM via did-update and did-mount.

Because the "graph data" is a prop for the Component, each time it changes, the component will update, and did-update will be called.

[ChipNowacek]

@bendisposto Did you ever get cytoscape integrated into re-frame?