Clojurians Log v2
reagent
hi, how can I add a class to a DOM element dynamically? Like I have [:div.one.two.bla but I want to like if something then add another class to that div
hi, I am trying to follow Reactive with ClojureScript Recipes and can't seem to understand why I am getting this complaing: Uncaught TypeError: Cannot set property 'value' of null at goog.History.update_ (history.js?zx=r1oaxet69n5k:905) at goog.History.onHashChange_ (history.js?zx=r1oaxet69n5k:593) at Object.goog.events.fireListener (events.js?zx=o0es7lq25agk:753) at goog.events.handleBrowserEvent_ (events.js?zx=o0es7lq25agk:879) at f (events.js?zx=o0es7lq25agk:296)
I get that complaint when clicking on a link to move to the other page. the idea is to build a multi page react app using secretary only
now, I have ran the code from the book, and it worked, but it won't work in my copy of the code. the only difference I am aware of is that the book's repo uses boot whereas I am using leiningen
would anyone have any idea what is happening?
[:div {:class [:x :y (when z? :z]} ...]
the core.cljs code is the same in both repos... I use the same browser to run both apps. there are dependencies in build.boot that are not in either my project.clj or core.cljs
It doesn't look like a complete stack trace. Can you expand it and post the full version?
yes sure
Uncaught TypeError: Cannot set property 'value' of null at goog.History.update_ (history.js?zx=r1oaxet69n5k:905) at goog.History.onHashChange_ (history.js?zx=r1oaxet69n5k:593) at Object.goog.events.fireListener (events.js?zx=o0es7lq25agk:753) at goog.events.handleBrowserEvent_ (events.js?zx=o0es7lq25agk:879) at f (events.js?zx=o0es7lq25agk:296)
goog.History.update_@history.js?zx=kfvgrrf3mblh:905 goog.History.onHashChange_@history.js?zx=kfvgrrf3mblh:593 goog.events.fireListener@events.js?zx=8jn41k7kh75c:753 goog.events.handleBrowserEvent_@events.js?zx=8jn41k7kh75c:879 f@events.js?zx=8jn41k7kh75c:296
Ah, OK.
But notice the previous warning about write - it's possible that some file could not be loaded because of it. I'd try to get rid of the warning first. Perhaps your JS bundle is included in your HTML as <script async ...>?
thanks for your time man. my script is not loaded with async... however, another difference I haven't mentioned earlier between my code and that from the book's repo is that core.cljs in the book repo has (defn ^:export main ...) whereas mine only has (defn main [] ...) and then calls (main) after that. maybe this is the problem
and then in index.html, the code from the book just has <script src="main.js"></script>
and no callin of main as (main)... perhaps this is what 'unless explicitly opened' means in "It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
The code from the book also has to call main somewhere. Since the symbol is exported, perhaps it's not (main) but rather project.core.main(). Or maybe it adds main as a callback for onload.
No, the "unless explicitly opened" part means something different.
hmmm
this is all the html in the book's code:
<!DOCTYPE html>
<head>
<title>hello</title>
</head>
<html lang="en">
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>In any case, books get outdated, versions diverge and so on. I would try just a regular Reagent how-to/tutorial first to make sure that the basics are taken care of.
alright, thanks. if you happen to have a link to such tutorial, please feel invited to share
(reload :on-jsload 'hello.core/main) this is in build.boot so I guess that is where the main function is being called
now I tried playing with, but could not break the code to behave same as my repo... this is weird
Perhaps some kind of cache.
well, the code did break, but just not the same as my repo
will have to see what I haven't tried yet... but, yes, thanks for your time. let me let you go
BTW a small correction to what I said before - you need not a Reagent tutorial specifically, but a ClojureScript tutorial for browsers. All in all, the initial steps are usually pretty simple but they can depends on the build tool that you're using.
For example, I use shadow-cljs and it has a pretty good quick start on its GitHub page: https://github.com/thheller/shadow-cljs
thanks. yes, there seems to be something in the shape of the code that executes that is the culprit. the book code has these two dependencies adzerk.boot-cljs and adzerk.boot-reload. these two seem to do something that my lein & project.clj don't
Oh. So seems like the book uses Boot but you're using Leiningen, probably with figwheel figwheel-main. Goes to confirm my statement about books getting outdated. :) Very few people use Boot nowadays.
Given that there can be absolutely anything in those namespaces (maybe crucial to the whole book, maybe not), I would consider trying a different book. Or better yet, online resources that have a much higher chance of staying up to date.
yes, apparently I am following outdated resources
I reinitialized my project with the following command
lein new reagent-figwheel <project-name>:figwheel {:on-jsload "reframe-reagent.core/reload"}but, no, that is not it... that line is in my other repo also.. hmmm... anyways...
you are calling some function with no argument, and the function expects arguments. so, I'd suspect (r/flush) or (rtl/cleanup) needs arguments
it was a misstypo on a component
sorry 😞
[[:button ,,, 😞