The :item-renderer function. Although the docs incorrectly state that it's "a function which takes no params and returns nothing". Judging by the source, it's a function that accepts choice id-fn selected on-change disabled? label-fn required? as-exclusions? and returns Hiccup for a particular item.

https://github.com/day8/re-com/blob/master/src/re_com/selection_list.cljs#L177

is there an example of how i can use it?

Right there in the sources are as-checked and as-radio. The only difference is that those functions also accept parts.

sorry im quite a beginner at re-com and cant make it work tbh. i wanna include it with my existing classes in the parts I want a simple working example that works, that i can play with

What have you come up with that doesn't work?

(defn my-item-renderer [item id-fn selected on-change disabled? label-fn required? as-exclusions?]
  [:div
   {:on-click #(do (reset! selected item) (println (str "Item " item " clicked!")))}
   (if selected
     [:span.selected (label-fn item)]
     [:span (label-fn item)])])

[selection-list :src (at)
    :class (selection-list-style)
    :hide-border? true
    :model          selections
    :choices        multi-select-items
    :label-fn       :label
    :as-exclusions? false
    :item-renderer (r/atom nil)
    :multi-select?  (:allow_multiple settings)
    :disabled?      false
    :required?      false
    :item-renderer my-item-renderer
    :parts {:list-group {:class (list-group-style)}
            :list-group-item {:class (list-group-item-style  {:background-color (str (:answers_background_color theme-data) "60")
                                                              :border-color (:answers_border_color theme-data "#9c9ea8")
                                                              :answer-color (:answers_color theme-data)
                                                              :border-size "1px solid"
                                                              :style {:focus-visible {:outline "2px solid blue"}}})}
            :checkbox {:class (list-group-checkbox-style {:color (:buttons_color theme-data)})}
            :radio-button {:class (list-group-radio-btn-style {:color (:buttons_color theme-data)})}}
    :on-change      (fn [value]
                      (reset! selections value)
                      (println (str "val: " value))
                      (reset! new-session false))]

Try copying the as-select function first and removing its parts argument and everything that uses it. It should work right away. And start from there.

Also, why :item-renderer (r/atom nil)? It must be a function, not a ratom.

this was supposed t be deleted, im uaing the below item-renderer. which as-select function?

Sorry, I meant as-checked.

is there an example of one tht works and is simple? i can manag from there..

as-checked is such an example. What issues do you have after copying it verbatim and replacing the code that uses parts?

copy it as is in place of parts without item-renderer?

I meant it as "copy the implementation of as-checked and use it as the body of your my-item-renderer but replace all the parts that use the parts argument with something reasonable".

No clue about LiveView and what "sending" here means and entails, but, assuming that "live version" also means "compiled with advanced optimizations" and "locally" means "compiled with none or simple optimizations", then those optimizations are likely to blame. Something gets renamed - something that shouldn't be. Impossible to tell from this stacktrace, but you can compile optimized code with pseudo names - that should get you going in the right direction.

Also pay attention to "cannot infer type" warnings.

Thanks, I just noticed cannot infer type warning is turned off.

yeah, that looks like an externs issue

I'm still on the issue but I'll describe briefly what I'm trying to achieve.

(ns app.utils.events
  (:require
   [goog.events :as gevents]))

# create custom event
(defn- create [ev payload]
  (js/CustomEvent. ev
                   (clj->js {:detail {:payload payload}})))

# dispatch custom event
(defn dispatch
  "Dispatches the event `ev` with the `payload` on the `js/document`
   element by default, but allows specifying a different `target` element."
  ([ev payload]
   (dispatch ev payload js/document))
  ([ev payload target]
   (let [ev (create ev payload)]
     (.dispatchEvent target ev))))

# listen to event
(defn listen
  "Listens for events on element `el` and executes function `f` when
   triggered.

   Saves non-phx events to enable listener cleanup on unmount, as phx
   events are registered only once on live view mount and don't
   require cleanup."
  ([el ev f] (listen el ev f false))
  ([el ev f is-phx?]
   (when el
     (gevents/listen el ev f)
     (if (not is-phx?)
       (update-state :ui {:el el
                          :ev ev
                          :f f})))))

(ns app.services.wallets.metamask
  (:require
   [app.utils.events :as events]))

(defn- test-dispatch []
  (events/dispatch "relay-data"
                   {:address "3893937927293739339"}))

(ns app.hooks
  (:require
   [app.utils.events :as events]))

;; (set! *warn-on-infer* false)

(defn- payload [ev]
  (.. ev -event_ -detail -payload))

(defmulti listen
  "Listens for event `ev` and executes function `f`.

   ;; Usage:
   (listen key this ev)
   "
  identity)

(defmethod listen :relay [_ this ev]
  (events/listen js/document
                 ev
                 #(.pushEvent this ev (payload %))
                 true))

(defn- callback [hook evs]
  {:mounted #(this-as this
                      (doseq [ev evs]
                        (listen hook this ev)))})

(defn callbacks
  "Map of livesocket hook callbacks used in the app. They are
   passed to the socket in the `app.main` namespace."
  []
  {:relay (callback :relay ["relay-data" "alert"])
  ;;  other hooks here
   })

(.. ev -event_ -detail -payload))
iex(1)> ---------^----------------------------------------------------------------------
iex(1)>  Cannot infer target type in expression (. ev -event_)

#(.pushEvent this ev (payload %))
iex(1)> -------------------------^------------------------------------------------------
iex(1)>  Cannot infer target type in expression (. this pushEvent ev (payload p1__11520#))

No need to @ - participants of a thread will be notified when something is posted there, unless they've unsubscribed from the thread. https://code.thheller.com/blog/shadow-cljs/2017/11/06/improved-externs-inference.html

tl;dr: Add ^js in front of ev for the first warning and in front of this for the second (although weird that you got the warning for this).

@U05224H0W Do you think it would make sense to add that or some other link to that warning? Awfully often mentions of the warning are followed by answers with that link or some run-of-the-mill explanation.

Thanks, I no longer have the warnings. I'll go ahead and test the live version.

It's working. Thanks. Thanks for the help.

goog.net.cookies was a deprecated namespace and was removed in the latest closure library update that shadow-cljs just started using in 2.22.+

so you can either downgrade the closure library to the older release

or switch the code to not use that. goog.net.Cookies is the proper ns

https://github.com/google/closure-library/blob/master/closure/goog/net/cookies.js

Thanks heller, that's what it looked like on my end to.

I would suggest against using libraries like re-frame-cookie-fx, unless such a library does something magical (and then I would suggest against it for another reason). It's just 50 lines of code if you reformat it and remove obvious comments and extra whitespace. And much less if you remove all the things you don't use (I assume you don't need each and every coeffect from there).