Clojurians Log v2

is there a way to destructure js objects in the function arg list? something like (fn [#js {foo :foo bar :bar}] (.log js/console foo bar))

Hey clojurians, wondering about key attributes in #reagent. I'm hoping to use css transitions, but these tend to get skipped when components re-render. I supposed using keys would make them persistent, but this only works some of the time, for some of the components. On clicking "Next," I should see both the blue and green boxes move to the left. However, only the blue box does. Any idea how I can fix this?

(ns kimok.example
  (:require
   [reagent.core :as reagent :refer [atom]]
   [reagent.ratom :refer [reaction]]
   [reagent.dom :as rdom]))
(def size 200)
(def place (atom 1))
(def colors ["red" "green" "blue" "yellow"])
(def this-color (reaction (get colors @place)))
(def prev-color (reaction (get colors (dec @place))))
(def next-color (reaction (get colors (inc @place))))
(defn container [& children]
  [:div.container {:style {:position "relative"
                           :width size
                           :height size
                           :margin size
                           :overflow "visible"}}
   children])
(defn slider [color left]
  [:div {:style {:position "absolute"
                 :width size
                 :height size
                 :background color
                 :transition "all 1s"
                 :left left 
                 :top 0}}])
(defn app []
  [:div [container
         ^{:key @this-color}
         [slider @this-color 0]
         ^{:key @next-color}
         [slider @next-color size]
         ^{:key @prev-color}
         [slider @prev-color (- 0 size)]]
   [:button {:on-click #(swap! place dec)}
    "prev (" @prev-color ")"]
   [:button {:on-click #(swap! place inc)}
    "next (" @next-color ")"]])
(rdom/render [app] (.getElementById js/document "app"))

Hello @kimo for CSS transitions please look into: http://reactcommunity.org/react-transition-group/css-transition

[:> CSSTransition
          {:in (boolean @open)
           :timeout 300
           :unmountOnExit true
           ;:onExit js/console.log
           ;:onExiting js/console.log
           ;:onExited js/console.log
}
          [:div.dropdown2 {:style {:position :absolute
                         :top 0
                         :right 0}}
           (into [:<>] (r/children (r/current-component)))
           ]]

example of how you are using it is this

(of course, do look into :foreign-libs in order to use this [the react-transition-group NPM package] with Reagent)

@andrewboltachev Thanks. I was hoping not to add dependencies, but I should look into this otherwise.

Is there a way to get intellisense for ClojureScript when using Javascript interop to help with auto completing methods on objects? Specifically for shadow-cljs in emacs. It’s been a bit of a pain point for me

I am trying to set up a new reagent project from scratch and it's surprisingly difficult to find out what is the recommended way of adding the React dependency by glossing over the README. The README even contains namespace aliases that aren't explained. EDIT: this looked like a shadow-cljs problem

I just looked out of curiosity and it seems that all aliases are explained (link to readme: https://github.com/reagent-project/reagent)? I guess you're talking about rd ? I was confused at first, but it's explained after first usage.

I think it would be better if they add the require with the example

sure, but then they would have to duplicate the require into every snippet using the aliases. Or they could just start with alias assumptions like Fulcro does: https://book.fulcrologic.com/#_common_prefixes_and_namespaces (I don't care that much about docs as long as it's clear enough for me - which Reagent is)

Regarding React dependency - the README states: > [Adding Reagent as a dependency] is all you need to do if you want the standard version of React

Regarding aliases - this section is there:

(ns example
  (:require [reagent.core :as r]
            [reagent.dom :as rd]))

I think there was some weirdness with shadow-cljs then\

I retract my problem :)

https://borkdude.github.io/sci-script-tag/#reagent ;)

Because the notion of "private functions" doesn't really work in Clojurescript (and is sort of an illusion in Clojure as well), some have recommended that you use a separate "helper namespace" for all your helper/private functions. Has anyone here done this?

Perhaps as an aid for autocompletion it can make sense to separate, but the trade-off is that you have “one more place” to make decisions about. I haven’t actually tried this. One convention I’ve used is prefixing the “private” function with ‘-’, so a fn name becomes (defn -my-private-function-name …) Are you designing a library or an API?

Clojure JVM will actually throw an error and not allow you to call the private fn from another namespace (there’s ways around it but they are non-standard)

So it’s more “real”.

(scratch/private-1 1 2) Syntax error (IllegalStateException) compiling scratch/private-1 at (REPL:1:1). var: #’ss.scratch/private-1 is not public

@raspasov It's just a reagent project, but I used styled components and the way that the styled components library works is that it'll create a "styled tag" as a function macro (and no obvious way to use a local let binding in my component function itself)

And I just don't want to expose all the component specific tags that I use.

I'm actually trying to follow this section of "The Joy of Clojure" but I get compilation errors

Specifically "The required namespace "joy.component.impl" is not available, it was required by...

Is it because it’s a .clj namespace that you’re trying to require from ClojureScript? (I don’t remember if that is possible, I think it’s possible for macros)

I'm actually writing my own example but I didn't want to write all the source code down.

Let me actually show what I'm doing

Ideally I want something like this. A single folder per component that will contain the component file itself (in react this would be like index.js) and all the helper functions, styling, and other logic).

Ideally, anywhere in my application, I can refer to the todo.cljs file with (:require [components.todo as :todo) but I'm not sure if that's possible.

It kind of looks like it is? Because in that example, they do the same thing with the impl file.

Basically I want the "index.js" of clojurescript

It must be either .cljs or .cljc

.clj does not work the be required from a .cljs file directly

Oh yeah I'm only using cljs files here.

Maybe this just doesn't translate into clojurescript.

What’s is your exact project structure and require statements? What error are you getting?

The required namespace "components.todo" is not available, it was required by "frontend/core.cljs".

src/frontend/core.cljs

(ns frontend.core
    (:require [components.todo as :todo]))

src/components/todo/todo.cljs

(ns components.todo (:require [components.todo.tags as :tags]))

Shouldn’t (ns components.todo … be:

(ns components.todo.todo ...

Yes it should, but in the example, he does

(ns.joy.impl)

(ns.joy.impl.impl)

Honestly, it's fine. I'll just call the component file "index" or something and use that as a naming convention from now on.

👌

Thanks for helping me figure this out. I think it's a lot better than leaving every single styled tag definition in the same file. I don't really want them to be exported unless they're reusable (and thus put into a shared folder)

I didn't read the entire thread but yes, this is how I set up a lot of my projects: internal namespaces have an .impl segment in this, communicating that these are implementation details