clojurescript

ClojureScript, a dialect of Clojure that compiles to JavaScript http://clojurescript.org | Currently at 1.10.879
Nazral 2020-11-27T08:14:08.456800Z

Is there something that behaves like agent in clojurescript ?

Nazral 2020-11-27T08:14:44.457600Z

I'd like to port my clojure library to cljs but it uses agent because it needs their asynchronicity

Nazral 2020-11-27T08:24:11.458200Z

Or I guess I can use reader conditionals to use an atom when using cljs and an agent when using clojure

oliver 2020-11-27T08:28:29.458800Z

According to the https://clojurescript.org/about/differences#_concurrent_programming “Agents are currently not implemented”.

thheller 2020-11-27T08:31:41.459100Z

javascript is single-threaded so agent would just act like atoms

Nazral 2020-11-27T08:33:28.459200Z

I know, hence my question 😛

Nazral 2020-11-27T08:33:40.459400Z

Makes sense, thank you

2020-11-27T08:37:38.459600Z

not exactly, e.g for nested updates the ordering of operations in not the same

oliver 2020-11-27T08:39:46.459800Z

fair engough 😅

Yuner Bekir 2020-11-27T09:03:29.468800Z

Hello. I am trying to open a file dialog box. I tried the following code without any results. (.. js/document (getElementById "file-upload") click) When I tried running `document.getElementById("file-upload").click()` the dialog opened. Could you suggest a fix?

thheller 2020-11-27T09:06:13.470600Z

there are limits in what the browser lets you do. for security reasons certain things are only allowed when actually triggered by a user event and so on. you can't just randomly open a dialog box like that, browser will block or just ignore the request. trying to do that in the browser console may bypass those restrictions.

Sophie 2020-11-27T09:07:22.470700Z

Hey Guys, I'm kind of stuck with the same problem for weeks now. I'm pretty sure the solution is quite simple but I didn't get it on my own. So here's the problem: I have a text input field with a value. The value is within a nested atom so it's mutable, in theory 😉...   With a simple atom it's working, but not with a nested one.  At first I can't change the value in the input field and second if I choose for an input field without value I can change it but the output doesn't change. That's the code:

(defn inputPage [title rNames rSizes rCost url]
    (let [room-property (r/atom {:title title
                                 :name rNames
                                 :Size rSizes
                                 :Costs rCost
                                 :img-scr url})]
      (if-not (blank? rNames)
        [:div {:class "inputLine"}
         [:img {:src url :class "roomImg"}]
         [:LineContainer
          [:TextLine [:p {:class "headLine"} [:b rNames " " ]  [:comment "(" (zeroDec (* rCost dd-costKey))" €/qm)"]]
           [:p {:class "roomLine"}   (:Size @room-property) " qm, " [:class {:class "result"} [:u "Summe: " (zeroDec (* rCost dd-costKey rSizes))" €"]]]]
          ]

         [:span
          [:b rNames " " ]
          [:input {:type "text"
                   :name :Size
                   :value (:Size @room-property)
                   :on-change #(reset! [room-property :Size] (-> % .-target .-value))}]
          [:p {:id "eOutputCell" } (:Size @room-property) ]]]

     

        ))

  )
I solved it finally. The hints from thheller and lassemaata where very helpful. Thank you Guys. The solution was a fn [] around the component. So this is it:
(defn atom-input [value]
  [:input {:type "text"
           :value (:Size @value)
           :on-change #(swap! value assoc :Size (.. % -target -value))}]
  )




(defn inputPage [title rNames rSizes rCost url]
    (let [room-property (r/atom {:title title
                                 :name rNames
                                 :Size rSizes
                                 :Costs rCost
                                 :img-scr url})]
      (if-not (blank? rNames)
        (fn []
          [:div {:class "inputLine"}
           [:img {:src url :class "roomImg"}]
           [:LineContainer
            [:TextLine [:p {:class "headLine"} [:b rNames " " ]  [:comment "(" (zeroDec (* rCost dd-costKey))" /qm)"]]
             [:p {:class "roomLine"}   (:Size @room-property) " qm, " [:class {:class "result"} [:u "Summe: " (zeroDec (* rCost dd-costKey rSizes))" "]]]]
            ]

           [:span
            [:b rNames ": " ]
            [atom-input room-property]
            [:p {:id "eOutputCell" } (:Size @room-property) ]]])


        [:div {:class "inputLine"
               :onClick #(testPage rSizes) }
         [:plus]]

        ))

  )

✅ 1
thheller 2020-11-27T09:09:48.471500Z

#(reset! [room-property :Size] (-> % .-target .-value)) is not valid. you are calling reset! on the vector. you want to use swap! and assoc

Yuner Bekir 2020-11-27T09:11:03.471900Z

The interesting thing is that the on-click event handler is called, but the dialog is not displayed. My use case is the following: I am in tab A, when I click a button in A I have to navigate to B and click a button which opens the file dialog. Maybe a way to do it would be to navigate to B but open the dialog before navigation from A

Sophie 2020-11-27T09:12:30.473500Z

Thanks I will try it. But what is the reason I can't change the input field? There must be anything totally wrong. 😞

thheller 2020-11-27T09:12:37.473600Z

yeah browser restrictions are weird in some cases. I can't remember the exact rules either but my guess would be that is the cause of your issue.

thheller 2020-11-27T09:13:40.474100Z

it keeps the current value because you :on-change fails, see https://reactjs.org/docs/forms.html#controlled-components

Sophie 2020-11-27T09:16:44.475900Z

Ok nice thanks for the explanation and the link. I'm not aware that there are dependencies between.

thheller 2020-11-27T09:18:02.477200Z

you can also do uncontrolled components https://reactjs.org/docs/uncontrolled-components.html

lassemaatta 2020-11-27T09:18:08.477400Z

also, shouldn't that component return a function? otherwise the atom is re-initialized every time the arguments change? (disclaimer: I haven't done cljs in ages)

👍 1
thheller 2020-11-27T09:18:30.477700Z

that too probably

Yuner Bekir 2020-11-27T09:21:07.477800Z

thanks for your help

Sophie 2020-11-27T09:28:05.480500Z

😂I have absolutely no idea what you guys are talking about. I'm an absolute beginner but I will work through the links and hopefully I will understand your remarks after that. Thank you so much

lassemaatta 2020-11-27T09:37:14.481300Z

it might also be a good idea to check out the reagent documentation, e.g. https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md

Sophie 2020-11-27T09:39:23.481700Z

👍

borkdude 2020-11-27T14:52:43.482900Z

Where in the CLJS tests can I find the unit tests for JS interop like (.- ...), (.. ...) and (js/foo.bar ..) etc?

2020-11-27T16:27:12.484600Z

oh boy do I feel dumb. I just learned the hard way that (prn ..) in a macro emits the printed text into the compiled file, at least under Figwheel main dev builds.

2020-11-27T16:27:43.485300Z

it happened that the output in my case kinda resembled JS code, and I was getting syntax errors in the browser that made no sense at first.

dpsutton 2020-11-27T16:35:04.486Z

i think *out* is bound to the output file during compilation?

william 2020-11-27T21:22:36.490200Z

I'm executing this code from a cljs file, after installing cystoscape via npm (I'm using shadow-cljs

(ns minimal.core
    (:require
      ["cytoscape" :as cytoscape]))

(def graph
  (cytoscape
   (clj->js {:container (.getElementById js/document "graph")
             :elements [{:group "nodes" :data {:id 1 :immediate "a"}}
                        {:group "nodes" :data {:id 2 :immediate "b"}}
                        {:group "edges" :data {:id 12 :source 1 :target 2 :immediate "meh"}}]
             :style [{:selector "node"
                      :style {:label "data(immediate)"}}]})))
This works, and displays everything as wanted, but then I do:
(.add graph (clj->js {:group "nodes" :data {:id 3 :immediate "c"}}))
and it works, but in the browser console I also get:
Collection [Element(1), _private: {…}]0: Element [Element(1), _private: {…}]length: 1_private: {eles: Collection(1), cy: Core, rebuildMap: ƒ}__proto__: Array RangeError: Maximum call stack size exceeded
    at Object.eval [as cljs$core$ILookup$_lookup$arity$2] (cljs.core.js:23845)
    at Function.eval [as cljs$core$IFn$_invoke$arity$2] (cljs.core.js:6641)
    at Object.eval [as cljs$core$IFn$_invoke$arity$1] (cljs.core.js:11321)
    at cljs$core$pr_writer (cljs.core.js:33105)
    at Object.cljs$core$pr_sequential_writer [as pr_sequential_writer] (cljs.core.js:32802)
    at Object.cljs$core$pr_writer_impl [as pr_writer_impl] (cljs.core.js:33011)
    at cljs$core$pr_writer (cljs.core.js:33113)
    at Object.cljs$core$pr_sequential_writer [as pr_sequential_writer] (cljs.core.js:32802)
    at Object.cljs$core$pr_writer_impl [as pr_writer_impl] (cljs.core.js:33011)
    at cljs$core$pr_writer (cljs.core.js:33113)
I googled, for the error, and it seems related to clojurescript, but I can't figure why. Any pointers?

dpsutton 2020-11-27T21:25:33.490800Z

If you try (do (your form above) nil) does it work?

william 2020-11-27T21:26:40.491100Z

it does, and doesn't cause the error! But why?

dpsutton 2020-11-27T21:27:25.492400Z

The error above had some stack traces in the printer. So it seemed like it was “working” but just blowing up printing the result in the repl

william 2020-11-27T21:28:30.493Z

I see! Thanks a lot for explaining that!

william 2020-11-27T21:29:21.493700Z

and is writing (do MyForm nil) (or defining (silence MyForm) the best I can do here?

dpsutton 2020-11-27T21:30:55.495500Z

You can’t print the value. But the value itself is fine. If you’re using the repl the p is killing you. If it’s just in regular code or not the return value of an expression if printed it’s fine

william 2020-11-27T21:31:56.495900Z

I see, thanks again 🙂

2020-11-27T23:42:14.496900Z

You know, looking into eval in clojurescript some more, is there any reason why find-ns-obj can't work in :target :bundle?

borkdude 2020-11-28T10:18:46.026900Z

@leif if you need sandboxed eval in CLJS, you might want to look at sci