Fork me on GitHub
#reagent
<
2021-01-18
>
Audrius15:01:27

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

p-himik15:01:34

[:div {:class [:x :y (when z? :z]} ...]

bibiki15:01:52

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)

bibiki15:01:06

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

bibiki15:01:07

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

bibiki15:01:22

would anyone have any idea what is happening?

bibiki15:01:37

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

p-himik15:01:38

It doesn't look like a complete stack trace. Can you expand it and post the full version?

bibiki15:01:08

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)

bibiki15:01:46

[email protected]?zx=kfvgrrf3mblh:905 [email protected]?zx=kfvgrrf3mblh:593 [email protected]?zx=8jn41k7kh75c:753 [email protected]?zx=8jn41k7kh75c:879 [email protected]?zx=8jn41k7kh75c:296

p-himik16:01:36

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 ...>?

bibiki16:01:54

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

bibiki16:01:09

and then in index.html, the code from the book just has <script src="main.js"></script>

bibiki16:01:11

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."

p-himik16:01:32

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.

p-himik16:01:47

No, the "unless explicitly opened" part means something different.

bibiki16:01:37

this is all the html in the book's code:


<head>
<title>hello</title>
</head>
<html lang="en">
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

p-himik16:01:11

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.

bibiki16:01:58

alright, thanks. if you happen to have a link to such tutorial, please feel invited to share

bibiki16:01:58

(reload :on-jsload 'hello.core/main) this is in build.boot so I guess that is where the main function is being called

bibiki16:01:42

now I tried playing with, but could not break the code to behave same as my repo... this is weird

p-himik16:01:16

Perhaps some kind of cache.

bibiki16:01:50

well, the code did break, but just not the same as my repo

bibiki16:01:31

will have to see what I haven't tried yet... but, yes, thanks for your time. let me let you go

p-himik16:01:48

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.

p-himik16:01:36

For example, I use shadow-cljs and it has a pretty good quick start on its GitHub page: https://github.com/thheller/shadow-cljs

bibiki16:01:09

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

p-himik16:01:45

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.

p-himik16:01:02

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.

bibiki16:01:59

yes, apparently I am following outdated resources

bibiki18:01:43

I reinitialized my project with the following command

lein new reagent-figwheel <project-name>
and the same code now works fine. I still do not know why it works, but at least this allows me to progress through the book. the interesting thing is that my project.clj has this funy line:
:figwheel     {:on-jsload "reframe-reagent.core/reload"}
that I suspect has a lot to do with it working. will have to investigate further. just thought I put this here, and let you know also

bibiki18:01:59

but, no, that is not it... that line is in my other repo also.. hmmm... anyways...

Ian Fernandez20:01:18

I do not understand why

bibiki20:01:59

you are calling some function with no argument, and the function expects arguments. so, I'd suspect (r/flush) or (rtl/cleanup) needs arguments

Ian Fernandez20:01:32

it was a misstypo on a component

Ian Fernandez20:01:25

[[:button ,,, 😞