reagent 2017-05-28 | Slack Archive

@gadfly361 yes I've seen this too

I saw it when using webpack to generate a standalone bundle for a react-based library

I frequently run into these kinds of issues when: - I mess up with webpack's config: the external and library options are useful - reagent comes with its own version of react, and I forget to exclude it. - or I mess up excluding it, because some other library also depends on cljsjs/react - same for cljsjs/react-dom and cljsjs/react-with-addons - loading order matters, window.React needs to be set early enough some things to try: - check window.React.version and window.ReactDOM.version from chrome's console. Do they match your expectations? - webpack can be made to export multiple libs, by using a custom entry file entry.js containing window.React=require("react"); window.ReactDOM=require("react-dom"); - use lein deps :tree to verify expectations about dependencies loaded

pesterhazy10:05:09

I'm wondering if these days it's not better, for some projects, to let webpack handle js dependencies and take cljsjs out of the mix - you can just include two bundles or concatenate the webpack-generated one and the cljs-generated one

dimovich13:05:09

@pesterhazy is this a correct usage of ref callback?

dimovich13:05:51

I don't like the update-in so much...

pesterhazy13:05:02

You don't actually need to implement the ref prop yourself. It's a react feature

dimovich13:05:33

hmm...

pesterhazy13:05:03

https://presumably.de/reagent-mysteries-part-3-manipulating-the-dom.html

dimovich13:05:20

thanks, having a look

dimovich14:05:17

if I don't explicitly run the ref callback during component-did-mount, it seems it doesn't get run by React

gadfly36115:05:29

@pesterhazy thanks so much for the response! I'll try and see if the react dependency is the issue

jtth22:05:13

Does anyone have a good implementation of a wrapper around SimpleMDE I could take a look at? I’ve tried @yogthos’s memoryhole one (https://github.com/yogthos/memory-hole/blob/master/src/cljs/memory_hole/pages/issues.cljs#L49) but it doesn’t seem to update when the re-frame subscription it’s tied to is changed. I know the re-frame implementation is good because a plain textarea updates just fine.

jtth22:05:39

What’s weird is that when I change to a different page in my SPA, or use figwheel to reload stuff, it does update.

yogthos23:05:35

@jtth I think you just have to implement :component-did-update callback for that

jtth16:05:35

yogthos: for future reference, i reimplemented the whole thing this way, which is probably way too verbose, but the trick was dereferencing the text atom in the :reagent-render part:

(defn editor [text]
  (let [dom-node (r/atom nil)]
    (r/create-class
      {:component-did-update
       ;; this is the draw code plus the update code
                     (fn [this old-argv]
                       (let [editor (js/SimpleMDE.
                                      (clj->js
                                        {:autofocus    true
                                         :spellChecker true
                                         :placeholder  ""
                                         :forceSync    true
                                         :element      @dom-node
                                         :initialValue @text
                                         :value        @text
                                         }))]
                         (-> editor
                             .-codemirror
                             (.on "change" (fn [] (reset! text (.value editor)))))
                         ;(set! (.-value editor) @text)
                         ))
       :component-did-mount
       ;; this is where we set the dom node once the component actually mounts
                     (fn [this]
                       (let [node (r/dom-node this)]
                         (reset! dom-node node)))
       :display-name "mjn-note-editor"
       :reagent-render
                     (fn []
                       @dom-node
                       [:textarea {:defaultValue @text}])})))

yogthos16:05:45

ah simple enough 🙂

yogthos23:05:44

in cases of memory hole, I never need the component to react to external changes, so I only added :component-did-mount to set the initial state for it

jtth23:05:54

@yogthos i figured it was something like that but wasn’t sure where to start. thanks!

2017-05-28

Channels