This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-01-12
Channels
- # aws (21)
- # aws-lambda (8)
- # beginners (53)
- # boot (56)
- # braveandtrue (1)
- # cider (49)
- # cljs-dev (8)
- # cljsjs (1)
- # cljsrn (57)
- # clojure (403)
- # clojure-austin (17)
- # clojure-dusseldorf (10)
- # clojure-greece (9)
- # clojure-spec (57)
- # clojure-uk (144)
- # clojurescript (60)
- # datomic (149)
- # docker (1)
- # emacs (1)
- # hoplon (23)
- # humor (1)
- # jobs (1)
- # leiningen (2)
- # luminus (1)
- # off-topic (1)
- # om (24)
- # om-next (15)
- # onyx (23)
- # protorepl (2)
- # re-frame (58)
- # reagent (90)
- # remote-jobs (1)
- # ring-swagger (4)
- # slackpocalypse (1)
- # spacemacs (2)
- # specter (18)
- # untangled (4)
- # vim (1)
- # yada (27)
Should work without
> clicking the checkbox doesn’t cause the checked state to change How do you inspect the state?
@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"] "."]]
)])
(huh, my message didn't make much sense, should be going to sleep)
So when I click the checkbox, the state is updated correctly, but the checkbox is not checked/unchecked.
But that could be because react is barfing earlier than that and not terminating the diff.
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.
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
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)
So that basically does a clean build? I swear I did one previously, but using lein clean.
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
So my output is not under target
, this is because I’m injecting the JS into a site generated with a static site builder.
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
?
if you wanted, you can add
:clean-targets ^{:protect false} ["output/test/js" "target"]
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.
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
:asset-path "/js/renew"
:output-to "output/test/js/renew.js"
:output-dir "output/test/js/renew"
hey... i should probably read some react documentation or something... but i really dont want to 😞
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?
Hiya. Does anyone have experience as to if Reagent rendered SPA’s are google-bot friendly? No difference from React itself I’m guessing?
@minikomi No direct experience. But I can't see how it would be different from React. Ends up as javascript
Cool. Looking into using perhaps http://www.brombone.com/ or another prerendering service
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..
@selfsame is there a cljs library for building up inline styles programmatically with out a .css file? Seems like a neat approach
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)})))}]
in action: http://app.klipse.tech/?cljs_in.gist=pbaille/342e82365b28166f1ad7111029c2c641&container
try (js/console.log this)
, which should give you what this refers to
@pbaille you can use a :ref
callback to get a reference to the DOM element
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"))
by the way, using KLIPSE for this kind of question is great
mad kudos to @viebel
http://app.klipse.tech/?cljs_in.gist=pbaille/342e82365b28166f1ad7111029c2c641&container
is there a way for me to store (and link to) a modified klipse?
What do u mean @pesterhazy ?
@pbaille asked a question, and I wanted to modify it and share my modified version
You can either 1. Create a gist of your own
2. Press ctrl-s
Ctrl-s will give you a url with your code
But if your code is too long ot wont work:grimacing:
ok it just url-encodes it
I guess the reason is that you don't want to have a server-side component?
how do I create a gist-based klipse?
Look at the one @pbaille sent
http://app.klipse.tech/?cljs_in.gist=pbaille/342e82365b28166f1ad7111029c2c641&container
it contains the gist id in the url
You are right @pesterhazy about the fact that I don’t want to have a server-side component
But what I could do is to provide a way to update/fork a gist directly from klipse
that would be cool
also a dialog "Open Gist" would be nice
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
I made a prototype for something like that that works on http://clojuredocs.org
Check this demo @pesterhazy https://www.youtube.com/watch?v=ucb-wDjZDsE&index=1&list=PLeN2zm0RqBfOlPpa00rGEpC8tThI7eD8D
a chrome extension or just a bookmarklet that redirects you to klipse
wow, the clojuredocs idea is great
if it's client-side, the authors of clojuredocs may consider adding a "klispify" button?
But they might be security issues with it
Imagine a malicious guy is creating a doc example that contains malicious code...
what can you do in JavaScript though?
@pesterhazy you could read cookies
or accessing the web server and cause damages with ajax
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.