This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-05-28
Channels
- # beginners (67)
- # boot (31)
- # cider (1)
- # cljs-dev (12)
- # cljsjs (1)
- # cljsrn (23)
- # clojure (86)
- # clojure-russia (2)
- # clojure-spec (6)
- # clojure-uk (12)
- # clojurescript (171)
- # core-async (2)
- # core-matrix (1)
- # cursive (3)
- # events (1)
- # lumo (6)
- # off-topic (118)
- # om (51)
- # onyx (16)
- # perun (3)
- # re-frame (14)
- # reagent (19)
- # uncomplicate (5)
- # unrepl (6)
- # untangled (6)
@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
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
@pesterhazy is this a correct usage of ref callback?
You don't actually need to implement the ref prop yourself. It's a react feature
if I don't explicitly run the ref callback during component-did-mount, it seems it doesn't get run by React
@pesterhazy thanks so much for the response! I'll try and see if the react dependency is the issue
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.
What’s weird is that when I change to a different page in my SPA, or use figwheel to reload stuff, it does update.
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}])})))