Fork me on GitHub
Daniel Flores Garcia02:08:59

Hello! I’m working on a web app with figwheel, using reagent. I have reagent form 1 component defined as:

(defn gp-text []
  [:div @gp-info])
where gp-info is defined simply as:
(def gp-info (r/atom ""))
In the same program, I have a function named gp that starts a long process from which I want to report periodically. My idea was to write a report function, called multiple times on a loop within the gp function, that updates gp-info. As in, within this report function:
(reset! gp-info (str generation-info))
However, the reagent component is not re-rendered as I would expect during the process until after the gp call is done, so only the report on the last iteration of the loop is displayed on my browser. Indeed, if I write:
(println @gp-info)
right above the (reset! …) line, the report string on each loop iteration is printed to the console but is not displayed as a component on my browser, until the last iteration. Is there any way to re-render gp-info within the gp function call, and before gp is done executing?

Daniel Flores Garcia15:08:00

Ahhh, I see. I guess I’ll have to rethink the way I report. Thank you!

👍 3
Pepijn de Vos15:08:04

When I print a JS object it prints as #object[DOMMatrixReadOnly matrix(1, 0, 0, 1, 0, 0)] but it does not seem like you can read this right back in. What's needed to achieve that?


In a general case, you can't. You can only do it on a case-by-case basis, and even then it might not work - depends on the type of that object. If the type is rather simple, you can create your own tagged literal, so it will be something like #dom-matrix instead of #object. I'm assuming you need it at run time and not at compile time.

Pepijn de Vos15:08:05

Not sure what I'm missing but I can't really find how to define a custom reader. The docs say some handwavy stuff about binding *data-readers* or that #foo/bar just calls the corresponding function... but... how do I make it PRINT #dom-matrix rather than #object ?


I think you can extend the IPrintWithWriter protocol to support that type. The implementation of print is rather straightforward.

Pepijn de Vos17:08:23

It worked!

👍 3
Pepijn de Vos17:08:50

Okay so next step is I want to upload an edn file and read it. But it seems clojure.edn/read expects something other than what I get from a file input. (clojure.edn/read (.stream (aget (.. e -target -files) 0)))

Pepijn de Vos17:08:27

No protocol method defined for type object: [object ReadableStream]


Wrap the stream in .

Pepijn de Vos17:08:19

Huuuh, isn't that a java specific namespace?


Oh, we're in #clojurescript , right.

Pepijn de Vos17:08:48

Is there cljs-specific documentation for clojure.edn/read? Like... I'm not even sure what type it's supposed to be operating on.

Pepijn de Vos17:08:07

But IPushbackReader isn't defined anywhere as far as I can tell.


maybe use readAsText from file reader and then use cljs.reader/read-string?


You're looking at the wrong reader @UPHKPR2A3 It's not an EDN one, it's a CLJS one.


Ah, the EDN one uses the same function. Alright.


That reader-types namespace is in a different jar.


Easier to go with the javi's suggestion, I think.

Pepijn de Vos17:08:30

But WHERE? It's literally not on all of github or ddg as far as I can see.

Pepijn de Vos17:08:35

Yea I'll go with that option...

Pepijn de Vos17:08:41

I see so... if you go through all the trouble to extend the actual JS stream api to that protocol it might work. Or just take the string...

Pepijn de Vos18:08:29

Alright that worked...

Pepijn de Vos18:08:26

What's the proper method to write EDN? It's obviously not prn-str because it prints keywords like ::foo which edn reader chokes on.



> (prn-str ::a)

Pepijn de Vos18:08:18

Hrm... not sure if some *config* thing or user error. Probably the latter... actually...

Pepijn de Vos18:08:47

Yea... don't do (keyword (gensym :foo))


Heh, right.


i have a reagent cljs website that is hosted at a certain ns : http:://foobar.baz/special-ns/index.html now js runtime is still looking for the cljs-runtime folder at root of that host:

instead of:


I have added the following to the index.html

<script src="/special-ns/js/main.js"></script>
but i still get errors that show attempts are being made to look for cljs-runtime files at root


how can i fix this? i'm using shadow-cljs for building


have you shadow-cljs release my-app ? sounds like you uploaded a dev version maybe?


the above was fixed by adding the :asset-path option to the build configuration


but there is another problem that still remains unsolved: i'm getting hiccup from a reagent component and rendering the vega parts with oz the thing renders locally but i only get the hiccup values inside a div without any rendering to html! i also get an "overflow" tag when i inspect it with firefox (whether locally or on remote host) any ideas?


Can you provide at least some code? And screenshots of what the result looks like.


(defn doc-body-view
  (let [{:keys [id body tags timestamp title display]} @doc]
    (into [:div {:id id
                 ;; :style {:display (:display @doc)}
            (instance? Ref body) (do (a/go (swap! doc assoc :body
                                                  [(sp/setval (sp/walker #{:vega-lite})
                                                              (:body (a/<! (client/get (:address body)))))]))
                                     (:body @doc))
            :default (:body @doc))


sp stands for specter


as you can see in the code, the :vega-lite attributes should've been replaced with "oz.core/vega-lite"


this works fine on my local machine


but for some reason i get the unrendered hiccup


very strange to me


Not sure, can't see what could be wrong immediately. I'd try to debug it - something returns a string instead of a Hiccup vector. One small advice, just in case - don't use specter in browser if you care about your bundle size.


Oh, wait - I think you have the :default branch working in your local setup and the (instance? Ref body) working after the deployment, for whatever reason. The (:body (a/<! ...)) part almost definitely returns a string. And you can't just setval on it - you have to convert the data to a CLJS structure first.

🎉 3

much appreciated


still don't understand how it magically works in dev mode


I am looking the best way for affiliate program tracking. How do you do Cross-Domain Tracking? Do you know any git repo which do similar thing? I don’t want to reinvent wheel, but maybe I will have to. I have concerns like should I use 1px image or JS script and what / how exactly code 1) record visit on website from link with parameter 2) record the user from 1) bought something on this website and other events


I'll not give you exact coding instructions, but here is what I think. Might be helpful, might be not 🙂 I worked in the past with several analytics sdks on mobile, not affiliate related, but still, and I bet there are some ready-to-use SDK you could integrate. What I would do is reaching several tools in category "affiliate tracking software" and ask them are they good fit for what you need? Even if not, you could end up understanding your problem better. If I understand your problem correctly: • you provide your partners affiliate links leading to your website (where people can buy stuff) • each partner holds a unique link • if the purchase comes after opening the unique link, note to reward a particular partner. If that is correct, my guess would be to: • when user opens the website from an affiliate link send an event to server with (a) affiliate partner id (from link), (b) fingerprint (to identify the browser/device, I have never worked on web frontend so don't have a clue what could it be). • when purchase happen, you send another event, holding the fingerprint. That way you could match affiliate partner id with purchase. If you already use any analytics (Facebook, Google Analytics, Google Tag Manager, etc) for marketing campaigns, most probably you could use it for events transport from front to server and fingerprint generation (or at least in their docs should be something how to get such a fingerprint). But even if you use any of the traditional analytics sdks (Facebook, Googles), for affiliates you might still need to do the matching (links to purchases) and rewords calculation on your backend. That's why, as I mentioned at the beginning, I think it should be already something. Especially that if you doing it yourself, your partners might smell here a small conflict of interests (you pay them, and you score how many purchases are done from their link). Replaying to your message, if my diagnose about your problem is correct, you need JS script on your website. Again, I'm not an expert (neither analytics nor frontend) but I think 1px image would make sense only if it was embedded on 3rd party websites (unique per website) or emails (unique per partner or client). Update: re 1px image, But well, I might be wrong. If there are some data possible to retrive from the client fetching the image, who knows, you might be able to use these data as a fingerprint. I don't know :man-shrugging: Summarising, I think there should be some SDK to use, and if it is not there, let me know, it might be a good product to build 😉


Thank you for your answer. > What I would do is reaching several tools in category “affiliate tracking software” I didn’t find anything useful in github so far, only advertising. > If I understand your problem correctly: I want to write software which connect merchants (shops), affiliates (publishers) and customers (buyers). The point is I wanted to see someone else work to not reinvest the wheel. So see data structure in DB, type of events etc. There are also issues about web browser blocking tracking etc. > Summarising, I think there should be some SDK to use, and if it is not there, let me know, it might be a good product to build 😉 That is what I am doing 😉 There are some software, but not open source and I am especially interested in about technical details.


haha, I got it now 🙂 I think the problem is pretty specific, so it might be hard to find examples. And even if you find them, it might be useful but only if it is done correctly. If not, better to drop it and not get influenced by (I was in similar situation recently). Let me rephrase the idea again: • merchants register at your platform • merchants can generate affiliate links, or maybe invite publishers to register on your platform (that way publishers could generate links on their own and figure out what works best, and that way conflict of interests bias is smaller) • clients open the merchant website using an affiliate link and make or not a purchase • your platform gathers events from merchants website and calculates rewards. If you have never worked with analytics I would start from trying to integrate typical non-affiliate tools for tracking, conversions, A/B tests. That way you could figure out how events look like, and what are options there. It might sounds like there is one good way, but I've seen several tools and sometimes they are used different approaches. Secondly, I would look at how, if possible, to integrate with typical analytics as a 3rd party (your affiliate analytics solution). The reason for it, is that it is easier to step in if merchants needs to only tweak a bit its own analytics or integrate well known and well documented SDK, vs integrating yet another SDK (yours). Integrating yet another solution might don't sound bad to you, but I've seen projects sending events to several analytics solutions. If you integrate them right, using some facade, it is not that bad. But I've seen bad codebases and you will sell to these people too. So less effort for them, better for you. Another reason for using these common analytics SDKs is that they can automatically detect some of the events, e.g. add-to-cart, purchase, etc, so if you use them, you don't have to implement same features or request merchants to add such events specially for you. So when it comes to events, you need to track at least :open and :purchase. I wrote purchase, but the conversion does not always is measured in terms of purchases, so I would keep it elastic and let the merchant choose which event he wants to track for affiliates (just an idea). {:type :open :dt "date" :fingerprint "ABC" :affiliate-id "XYZ" ...} {:type :purchase :dt "date" :fingerprint "ABC" ...} This is very simplified view how I understand it would work. If you leverage your solution using some existing general purpose analytics, you don't have to care about fingerprint as it is already done, just need to figure out how to add that :affiliate-id to the :open event and watch the events on your end for conversions. I haven't worked with analytics for several years now, so read this with a grain of salt 😉


> If you have never worked with analytics I did > it is easier to step in if merchants needs to only tweak a bit its own analytics I have plan to use javascript / cljs But in general it can be hard (impossible) to do “plug and play”. They need to add at least a few lines of code 🙂 Most of popular shops can have plugins, so I prefer to maintenance this plugins. At least I think so. > Another reason for using these common analytics SDKs is that they can automatically detect some of the events, e.g. add-to-cart, purchase, etc, Do you have specific example of implementation to inject into ready analytic solution? It sounds for me like a unstable and hard thing. > If you leverage your solution using some existing general purpose I don’t think it is possible to plug in into google analytics, but please correct me if I am wrong. Even if so I feel it is too risky.


No, I don't have any specific example. This is something I think could be done, but to ensure, one needs to check the docs or reach GA/GTM/Facebook/other analytics teams. I haven't touched analytics for years, but I remember some über tool promising integration of several of tool under one, that's why I thought 3rd party integration could be possible. But well, it was a while ago, memory is flawed, I could mess something up. Good luck :thumbsup: