Fork me on GitHub
#clojurescript
<
2019-10-22
>
Drew Verlee00:10:15

Whats everyones favorite way to get track state in the front end? Currently i'm using binarayage's tools, though im thinking about upgrading to https://github.com/binaryage/dirac. I also just do a fair amount of storing state in atoms so i can inspect it.

Drew Verlee01:10:13

Now that it comes down to it, im worried i can't use drac devtools because it says you have to install it in your "Chrome Canary" Which is the nightly build for developers and "isn't supported on linux"

p-himik05:10:52

On Linux you can use google-chrome-unstable for that.

lilactown01:10:32

what are you looking for in dirac?

Drew Verlee01:10:19

A debugger that can track state, let me fiddle with it in a cljs repl, would be nice. Right now, i end up saving state to atom to do that. I dont think there is anything wrong with that strategy. I'm also making sure i'm not missing some set of insight that could be helping me. I find a lot of my headaches are when i encounter something i dont understand and i'm looking for fast ways to poke at it.

dpsutton01:10:13

I think i remember wanting to try vals scope capture

dpsutton01:10:53

Nice to turn off figwheel auto reload and then state can persist. I remember that turning it back on requires a page refresh unfortunately

Drew Verlee01:10:51

err dirac seems to not play nice with shadow cljs projects.

p-himik05:10:14

Indeed. But you use a CLJS REPL that goes with shadow-cljs. Of course, it won't be in the Chrome DevTools console, but you will still be able to see all your state.

David Pham04:10:39

Did you try reframe-10x?

Nazral09:10:13

Hi, I'm trying to render a d3 graph in a div generated by reagent. I'm triggering the render in the :component-did-update but somehow it often tells me that the div I am looking for doesn't exist...

Nazral09:10:23

I'm not sure how to fix this

p-himik09:10:42

How do you refer to the target div?

Nazral09:10:21

(.querySelector js/document (str "#" selector "-graph")) (the reagent generates [:div#selector [:div#selector-graph] [:div.other-divs])

p-himik09:10:30

Try using a React ref (`let [ref (react/createRef)] ...)`) and check that it has been set before using it (`(when-some [n (.-current ref)] ...)`).

Nazral09:10:20

I still have this error, could it be the id that has a weird format?

Nazral09:10:34

(I'm logging the reference of the element)

p-himik09:10:50

I'm not sure. Why do you need to set the ID at all? Can you show your code?

Nazral09:10:21

because the user will create many of such divs, each with its own graph

Nazral09:10:31

clojure
(defn update-command
  [cur-command]
  (fn [ev]
    (let [text (.-value (.-target ev))]
      (cond (or
             (= (.-keyCode ev) 8)
             (= (.-keyCode ev) 32)
             (= (.-keyCode ev) 13))
            (com/expand-query text cur-command)))))

(defn draw-command-line
  [card-uuid cur-command refs]
  (fn []
    [:div.command-line
     [(keyword (str "div#" card-uuid "-graph.graph"))
      {:ref #(swap! refs assoc :graph-area %)}]
     [:div.explanation
      (map
       (fn [{node :name}]
         [:p.qnscore {:key (str "k-" node)} node])
       (get-in @cur-command [:expansion :inferred]))]
     [:div.command
      [:input.typing
       {:on-key-down (update-command cur-command)}]
      [:p.overlay (:text @cur-command)]]]))

(defn new-command-line
  [card-uuid]
  (let [new-command (r/atom {:text "" :expansion {} :status :current})
        refs (r/atom {})]
    (r/create-class
     {:display-name (str "command-line-" card-uuid)
      :component-did-update
      (fn [this old-argv]
        (when (:graph-area @refs)
          (.log js/console (:graph-area @refs))
          (let [new-exp (graph/prep-graph (:expansion @new-command))]
            (graph/remove-svg card-uuid)
            (graph/trigger-draw-graph card-uuid new-exp)
            )))
      :reagent-render (draw-command-line card-uuid new-command refs)})))

p-himik09:10:23

That doesn't really mean that you have to use IDs. You can still use refs and forgo IDs altogether. Well, assuming that D3 accepts not only ID strings but also DOM nodes. Also, yeah - it seems that IDs cannot start with a digit, I just tested it in Chrome. MDN says: "Though this restriction has been lifted in HTML5, an ID should start with a letter for compatibility"

Nazral09:10:50

I think I know what's the problem, elements ids can not start with a number, and because I use random-uuid, sometimes it does

Nazral09:10:01

yes you are correct 😛

Nazral09:10:16

I'm not sure if d3 can use DOM nodes, I'll check. Thank you for the help!

p-himik09:10:59

But still - the current version of your code seems backwards to me. It seems that draw-command-line can manage its own state - there's no need for its parent to do anything. But if the code you actually use has more going on, then maybe it's OK. No problem.

Nazral09:10:09

I'm not sure how draw-command-line could trigger the redrawing of the graph automatically when the content of the input field changes without the use of :component-did-update :thinking_face:

p-himik10:10:38

It looks like you could just move the contents of the :component-did-update function to the draw-command-line component itself. You will have to turn it into a form-2 component and use reagent.ratom/run! to spy on the changes of the ratom. new-command-line shouldn't care about what happens inside draw-command-line at all. Another thing - don't write (keyword (str "div#" card-uuid "-graph.graph")). Just write [:div {:id "...", :ref ...} ...]. The whole :div.class1.class2#id syntax is a mess IMO.

Nazral10:10:34

ok thank you, I will look into the run! function

p-himik10:10:09

If I understood your intentions correctly, here's how I would do it. Note that it definitely won't work right away since I used expand-query differently. And probably there are errors, so this is just to give you a general idea.

(defn new-command-line []
  (let [expansion (r/atom nil)
        update-command #(when (#{8 32 13} (.-keyCode %))
                          (let [text (.-value (.-target %))]
                            (reset! expansion (com/expand-query text))))
        ref (react/createRef)]
    (r/run!
      ;; `@` has to be outside of any condition to let the `run!` magic work.
      (when-some [expansion @expansion]
        (when-some [node (.-current ref)]
          (let [new-exp (graph/prep-graph expansion)]
            ;; Assuming these functions can accept DOM nodes.
            (graph/remove-svg node)
            (graph/trigger-draw-graph node new-exp)))))
    (fn []
      [:div {:class :command-line}
       [:div {:ref ref}]
       [:div {:class :explanation}
        (for [{node :name} (:inferred @expansion)]
          ^{:key (str "k-" node)}
          [:p {:class :qnscore}
           node])]
       [:div {:class :command}
        [:input {:class       :typing
                 :on-key-down update-command}]]])))

p-himik10:10:08

Ah, but since expansion is also used in the rendering function, maybe the explanation part has to be moved into its own component that accepts the expansion ratom. Just so that React doesn't re-render the main component when expansion's value changes.

Nazral10:10:32

wow thank you! I'll try it, that looks much cleaner than what I have

davehodge11:10:00

What tools or patterns would one use to build a reusable library with ClojureScript that renders a simple modal and makes ReSTful calls?

benzap13:10:17

@U117LQ849 http-kit for the web server https://www.http-kit.org liberator for making the RESTful api https://clojure-liberator.github.io/liberator/ reagent for the frontend modal https://github.com/reagent-project/reagent Possibly re-frame, if you plan on using the library in larger projects https://github.com/day8/re-frame A decent and quick starting point would be to create a project from the chestnut template https://github.com/plexus/chestnut Hope this helps

davehodge17:10:09

Appreciate it, wasn’t sure if re-frame was overkill for this type of library

Nazral15:10:58

I'm getting and error when calling async/<!! that the symbol doesn't exist, has it been removed ?

Alex Miller (Clojure team)15:10:36

did you include the core.async library and require it?

Nazral15:10:40

yes, I can use go and <!

thheller15:10:04

clojurescript does not support the blocking variants of take/put, so no <!! or >!!

Nazral15:10:05

I get Invalid :refer, var cljs.core.async/<!! does not exist

Nazral15:10:30

Oh ok thank you

Ramon Rios16:10:28

Did someone here works with Yada? Is this has some code example for set basic role-access authentication?

fmnoise19:10:36

hi everyone, trying to extend protocol for js/Object and getting warning

Extending an existing JavaScript type - use a different symbol name instead of js/Object e.g object

fmnoise19:10:57

does that mean I should always extend js/Object as object?

thheller19:10:27

the basic built-in types yes. object, number, string, array, function

fmnoise20:10:30

ok, thanks!

jsa-aerial21:10:59

I've been looking around, but haven't seen the (self-hosted) ClojureScript variants for clojure.repl/doc and clojure.repl/source. Noodle around with cljs.repl and clojure.browser.repl but neither of these looks appropriate. Anyone have any information on this?

mfikes21:10:00

@jsa-aerial While self-hosted ClojureScript can be used to implement a REPL, it doesn’t inherently provide REPL-specific functionality.

mfikes21:10:44

Take a look at Lumo or Planck to see how they implement these functions.

👍 4