Fork me on GitHub
#rum
<
2016-12-01
>
firstclassfunc15:12:43

I am trying to update a JS object based on atom state and continue to have issues. My prototype looks something like

(defn add-codemirror [dom]
  "Mixin CodeMirror component"
  {:did-mount
   (fn []
     (let [editor-dirty? (rum/cursor app-state :editor-dirty?)
           cm (js/CodeMirror (u/el dom)
                             (clj->js
                               {:autofocus         true
                                :mode              "xml"
                                :matchBrackets     true
                                :autoCloseBrackets true
                                :lineNumbers       true
                                :lineWrapping      true
                                :extraKeys         {"Ctrl-Space" #(register-hints)}}
                               )
                             )
           doc (.-doc cm)
           _ (swap! app-state assoc :doc doc)] ; save doc
       cm))
   })


(rum/defc load-editor < (add-codemirror "cm")
          []
          "CodeMiror component. Never refreshes with React, Populated on #cm tag with add-cm mixin"
          [:div
           [:div#cm]
           ])
I want to be able to update the view state of the CodeMirror object based on changes to app-state.

martinklepsch15:12:25

@firstclassfunc mixins take state as argument and must return state, not sure if this is the issue in this case but your mixin does not follow this rule

firstclassfunc16:12:56

@martinklepsch: fair but not readily the issue?

rauh17:12:24

@firstclassfunc Coudl very well be. You lose all state and that will break your entire component.

rauh17:12:54

Also, you never use editor-dirty? and the return value cm goes straight to rum which will be confused

rauh17:12:37

I'd probably just use [:div#cm {:ref hook-codemirror}] where hook-codemirror takes a dom element as the only argument (and null in case it unmounts)

firstclassfunc17:12:54

The component renders fine, i manipulate it through its method calls and can update it through the appropriate class. The editor-dirty? was leaked into the example but is merely triggered from a callback within the CodeMirror object.

rauh17:12:45

It'll render once fine, then you lost all state

rauh17:12:14

Just give it a try, {;did-moutn (fn [st] ...... lost of ceremony .... st)}

firstclassfunc17:12:59

So my issue is how to call the JS method (. setValue doc <cursor>) when the app-state changes.

firstclassfunc17:12:40

Will try the 'ref' thanks @rauh

martinklepsch17:12:15

@rauh never considered refs for that but it makes perfect sense for some cases, cool!