Fork me on GitHub
#reagent
<
2017-01-12
>
cfleming00:01:49

Do I need to add React IDs to the elements here to aid the diffing algorithm?

juhoteperi00:01:44

Should work without

juhoteperi00:01:32

> clicking the checkbox doesn’t cause the checked state to change How do you inspect the state?

gadfly36100:01:31

@cfleming this works for me without seeing the aforementioned error ... tried to capture the essence of what you were doing. So still not sure.

(def app-state (reagent/atom {:errors {:reseller-id "some error"}}))

(defn reseller-field []
  [:div
   [:label
    [:input {:type      :checkbox
             :checked   (:reseller? @app-state false)
             :on-change #(swap! app-state update :reseller? not)}]]
   (when (:reseller? @app-state false)
     [:div
      [:input {:type      "text"
               :value     (:reseller-id-field @app-state "")
               :on-change #(swap! app-state assoc :reseller-id-field (-> % .-target .-value))
               :on-blur   #(js/console.log "validated")
               :on-focus  #(js/console.log "clear error")}]
      (when-let [error (get-in @app-state [:errors :reseller-id])]
        [:p.error-label error])
      [:p.note "If you do not have a reseller ID, please "
       [:a {:href ""} "contact us"] "."]]
     )])

cfleming00:01:32

No, I’ll try that now.

juhoteperi00:01:03

(huh, my message didn't make much sense, should be going to sleep)

cfleming00:01:41

So when I click the checkbox, the state is updated correctly, but the checkbox is not checked/unchecked.

cfleming00:01:02

But that could be because react is barfing earlier than that and not terminating the diff.

cfleming00:01:24

The relevant react issue definitely talks about the app silently swallowing some other error, but I have no try/catch or promise code here at all.

juhoteperi00:01:14

That's strange, I have seen the same error often, but usually it is caused by obvious error and accompanied by other errors or Cljs compiler warning

gadfly36100:01:38

@cfleming are you running figwheel?

cfleming00:01:46

Yeah, I’m not seeing anything else, either in the console or the figwheel log.

gadfly36100:01:12

try running (reload-config) ... just in case, if you havent recently

gadfly36100:01:21

maybe there is a hidden error or something

cfleming00:01:01

Amazingly, that fixed it.

gadfly36100:01:08

because i am unable to reproduce the error you are describing with your code snippet (tho i am mocking your on-blur and -on-focus handlers ... assuming the error happens before input interaction)

cfleming00:01:37

So that basically does a clean build? I swear I did one previously, but using lein clean.

gadfly36100:01:08

so no, it doesn't do a clean. a lein clean followed by lein figwheel <build-id> would have been more brute force than (reload-config) with figwheel running

gadfly36100:01:15

reload-config wont clean your assets

cfleming00:01:22

Actually, I wonder if this is the problem - from my project.clj:

cfleming00:01:36

:output-to     "output/test/js/renew.js"
:output-dir    "output/test/js/renew"

cfleming00:01:07

So my output is not under target, this is because I’m injecting the JS into a site generated with a static site builder.

cfleming00:01:19

So lein clean wouldn’t touch it.

gadfly36100:01:16

ahh yeah, you're right, your clean would miss your js stuff

cfleming00:01:12

I actually have a related newbie question about that - is :output-dir only used for temporary content? Does its location have to have any relation to :output-to?

gadfly36100:01:15

if you wanted, you can add

:clean-targets ^{:protect false} ["output/test/js"  "target"]

cfleming00:01:12

The doc is a bit vague on the subject, and I’m not sure if the cljsbuild version has the same semantics as the CLJS compiler version.

cfleming00:01:28

Thanks, I’ll do that.

gadfly36100:01:56

I don't think those locations have to be 1:1. However, the :output dir and your :asset-path most likely have a relation in a dev build

cfleming00:01:51

I see, yes - looks like they have the correct relation:

cfleming00:01:17

:asset-path    "/js/renew"
:output-to     "output/test/js/renew.js"
:output-dir    "output/test/js/renew"

cfleming00:01:22

Ok, thanks very much for all your help, that was really useful

gadfly36100:01:10

np, anytime 🙂

notanon01:01:18

hey... i should probably read some react documentation or something... but i really dont want to 😞

notanon01:01:08

how do you deal with a scenario of wanting to hide/detach dom nodes instead of create/destroying them? such as show/hiding a nasty table of 5K elements x 20 columns?

notanon01:01:38

the use case is tabbing through a ui where one of the tabs has a nasty dom tree

minikomi05:01:48

Hiya. Does anyone have experience as to if Reagent rendered SPA’s are google-bot friendly? No difference from React itself I’m guessing?

mikethompson05:01:45

@minikomi No direct experience. But I can't see how it would be different from React. Ends up as javascript

minikomi05:01:51

Cool. Looking into using perhaps http://www.brombone.com/ or another prerendering service

minikomi06:01:44

I wonder if there’s a penalty for having a normally generated page for each URL, but then as a user having a more dynamic app which communicates with the server / renders using reagent..

pesterhazy09:01:09

@selfsame is there a cljs library for building up inline styles programmatically with out a .css file? Seems like a neat approach

ejelome09:01:06

garden perhaps

pbaille10:01:16

I'm trying to use :on-load callback on an :img tag in reagent, "this" doesn't seems to be bound correctly, any idea?

[:img {:src url
           :on-load
           (fn [x]
                   (this-as this
                     (println 
                         {:width (.-width this)
                          :height (.-height this)})))}]

pesterhazy11:01:46

try (js/console.log this), which should give you what this refers to

pesterhazy11:01:14

@pbaille you can use a :ref callback to get a reference to the DOM element

pbaille11:01:53

"this" is bound to window

pbaille11:01:35

thanks for the :ref idea, haven't used it yet

pesterhazy11:01:50

this works for me

;loaded from gist: 
(require '[reagent.core :as r])

(defn i []
  (let [dims (r/atom {})
        el (atom nil)]
    (fn [][:div
           [:img {:style {:width :100%}
                  :ref #(reset! el %)
                  :src ""
                  :on-load
                  (fn [x]
                    (reset! dims {:width (.-width @el) :height (.-height @el)}))}]
           [:div (pr-str @dims)]])))

(r/render-component [i]
                    (js/document.getElementById "klipse-container"))

pbaille11:01:24

yes it works for me too

pesterhazy11:01:35

by the way, using KLIPSE for this kind of question is great

pbaille11:01:40

i've updated my klipse

pesterhazy11:01:09

is there a way for me to store (and link to) a modified klipse?

pesterhazy11:01:58

@pbaille asked a question, and I wanted to modify it and share my modified version

Yehonathan Sharvit11:01:59

You can either 1. Create a gist of your own

Yehonathan Sharvit11:01:45

Ctrl-s will give you a url with your code

Yehonathan Sharvit11:01:12

But if your code is too long ot wont work:grimacing:

pesterhazy11:01:50

ok it just url-encodes it

pesterhazy11:01:07

I guess the reason is that you don't want to have a server-side component?

pesterhazy11:01:00

how do I create a gist-based klipse?

Yehonathan Sharvit12:01:26

it contains the gist id in the url

Yehonathan Sharvit12:01:52

You are right @pesterhazy about the fact that I don’t want to have a server-side component

Yehonathan Sharvit12:01:12

But what I could do is to provide a way to update/fork a gist directly from klipse

pesterhazy13:01:28

that would be cool

pesterhazy13:01:52

also a dialog "Open Gist" would be nice

Yehonathan Sharvit13:01:50

I also thought about having a chrome extension that works on http://gist.gihub.com and makes the gist interactive by transforming it into a klipse snippet

Yehonathan Sharvit13:01:10

I made a prototype for something like that that works on http://clojuredocs.org

pesterhazy13:01:20

a chrome extension or just a bookmarklet that redirects you to klipse

pesterhazy13:01:04

wow, the clojuredocs idea is great

pesterhazy13:01:27

if it's client-side, the authors of clojuredocs may consider adding a "klispify" button?

Yehonathan Sharvit14:01:54

But they might be security issues with it

Yehonathan Sharvit14:01:30

Imagine a malicious guy is creating a doc example that contains malicious code...

pesterhazy14:01:10

what can you do in JavaScript though?

Yehonathan Sharvit17:01:23

or accessing the web server and cause damages with ajax

pez20:01:59

What is the latest when it comes to isomorfic server and client side rendering? I got the *node.js* approach in this article to sort of work: http://blog.testdouble.com/posts/2016-01-21-isomorphic-clojurescript.html But as soon as I have client side code that uses browser objects, like document, window, history, etcetera, it stops working. I’ve tried to mock/stub those objects, but while I can get some of my code to execute that way, it doesn’t seem to take me the whole way and I sort of thing it might be the wrong thing to do.

pez20:01:22

I did find an interesting node module; benv, that seemed like it might be what I needed, but I couldn’t find out how to make it make any difference at all for my project.