Quick sanity check. I'm having trouble requiring a node module where default is name mangled to default$ then doesn't resolve correctly. This...

(ns interop.masked-input
  (:require [react-text-mask :as MaskedInput]
            [reagent.core :as r]))

(def masked-input (r/adapt-react-class MaskedInput/default))

Turns into

// Compiled by ClojureScript 1.10.773 {:target :nodejs}
goog.provide('interop.masked_input');
goog.require('cljs.core');
goog.require('reagent.core');
interop.masked_input.node$module$react_text_mask = require('react-text-mask');
interop.masked_input.masked_input = reagent.core.adapt_react_class.call(null,interop.masked_input.node$module$react_text_mask.default$);

with cljsrn I happily set :language-out to something very recent. is that the safe/correct approach for web browser targets?

I think this indicates I can feel good about compatibility with :language-out :es6 https://caniuse.com/?search=es6

hmm. wild guess here but would the following work?

(ns interop.masked-input
  (:require [react-text-mask :default MaskedInput]
            [reagent.core :as r]))
(def masked-input (r/adapt-react-class MaskedInput))

Does anyone know how to translate this into clojurescript ...

<MapConsumer>
  {(map) => {
    console.log('map center:', map.getCenter())
    return null
  }}
</MapConsumer>

[:> MapConsumer]

Okay seems like it is ...

[:> MapConsumer
    (fn [map] (do (js/console.log map)
                  nil))]

You can remove the do

fn has an implicit body

But otherwise looks right

Errrr actually hold on

What exactly is MapConsumer?

The function is correct, but if it's reagent land you're looking at something like [MapConsumer {} (fn ...)]

Not sure what it looks like in raw cljs land

Honestly, that's something I'm asking myself now. Leaflet react doesn't have amazing documentation https://react-leaflet.js.org/docs/api-map/#mapconsumer but using leaflet directly and creating my own reagent components is too tough for me for now

Yeah I don't need the {} it is assumed to be empty

Oh that's what it is, you may want to look into.... one tic

https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md

Specifically reagent/adapt-react-class

@lsenjov just so that I don't get stuck if I need this ... do you happen to know how to the equivalent for ^

There's a big rabbit hole here of what useMap is doing and what it's setting

Wait, is map just a global?

Oh right

(fn my-comp [] (js/console.log (.getCenter (js/useMap))))
(fn my-map-comp [] [(adapt-react-class MapContainer) {:center [50.5 30.5] :zoom 13} [my-comp]])

I think?

console.log returns null anyway, so we shouldn't need to do any let bindings in there

Oh, I forgot the extra bit of text in console.log, but you can add that in yourself

Note again that this is reagent land, I'm not sure how this works in react cljs or raw cljs

Yeah am using reagent. I think the [my-comp] doesn't seem to work

:thinking_face:

I can only guess - but do you see any errors about my-comp not being a valid component? It doesn’t have any visual elements in it, and I’d guess reagent barfs at that. I don’t know the purpose of my-comp, but a crude attempt could be to wrap it in a [:div… and display: none it and figure out the logic part?

@jaju @lsenjov okay will try that. I think this isn't as important for now. Will look into it again if I encounter it again :x but thank for your help!!

Hey, I build the app with shadow-cljs release app , filling the release/public dir with js files [app.js, utils.js] and no html files. So for run the static app I added a page.html importing css and js files in order or dependency. Everything is loaded without console error, but the page is blank. What I'm missing?

Stupid question - did you call the init -equivalent JS function in the HTML? Or, is it called by default in your main namespace, so as the initialize the app?

@eliascotto94 what is in your html used for the development builds?

@thheller I don't use any html for the build. Is created in Clojurescript when the user go on the route (reitit-ring/router [["/" {:get {:handler index-handler}}]]) index-handler is a hiccup component

(def mount-target
  [:div#app
   [:h2 "Welcome to 7GUIs"]
   [:p "please wait while shadow-cljs is waking up ..."]
   [:p "(Check the js console for hints if nothing exciting happens.)"]])

(defn head []
  [:head
   [:meta {:charset "utf-8"}]
   [:meta {:name "viewport"
           :content "width=device-width, initial-scale=1"}]
   (include-css (if (env :dev) "/css/site.css" "/css/site.min.css"))])

(defn loading-page []
  (html5
   (head)
   [:body {:class "body-container"}
    mount-target
    (include-js "/js/utils.js")
    (include-js "/js/app.js")
    [:script "sevenguis.core.init_BANG_()"]]))

(defn index-handler
  [_request]
  {:status 200
   :headers {"Content-Type" "text/html"}
   :body (loading-page)})

loading-page is your html and this emits a <script> tag calling your init function. so thats missing from your page.html

Yep, I missed that. In any case now says sevenguis is not defined.

if you want to do it correctly you remove that script tag entirely and in your build config use :init-fn to call it for you. if you prefer to keep the script tag you need to ^:export your init! function. so (defn ^:export init! [] ...)

:modules {:utils {:entries [sevenguis.utils]}
          :app   {:entries [sevenguis.core]
                  :depends-on #{:utils}
                  :init-fn sevenguis.core/init!}}

An error occurred when calling (sevenguis.core/init!)
Uncaught Error: No matching clause: 

well you are using a router. so I suspect that it doesn't have a proper route? what is the rest of the stacktrace?

the template you used seems to expect some kind of server? if you just have a static html file things might be different

An error occurred when calling (sevenguis.core/init!) app.js:979:357
Uncaught Error: No matching clause: 
    QD file:///Users/elia/dev/elias94.github.io/js/app.js:580
    VD file:///Users/elia/dev/elias94.github.io/js/app.js:581
    AA file:///Users/elia/dev/elias94.github.io/js/app.js:433
    VD file:///Users/elia/dev/elias94.github.io/js/app.js:581
    <anonymous> file:///Users/elia/dev/elias94.github.io/js/app.js:979
    <anonymous> file:///Users/elia/dev/elias94.github.io/js/app.js:980
app.js:580:376

you can try shadow-cljs release app --debug to get a better idea whats actually wrong

my guess would be that you have a router and a case somewhere that usually expects a "/" or so route which now doesn't exist

An error occurred when calling (sevenguis.core/init!) append.js:2:57
Uncaught Error: No matching clause:  core.cljs:856:2
    $sevenguis$core$page_for$$ core.cljs:856
    $sevenguis$core$init_BANG_$$/< core.cljs:887
    $accountant$core$dispatch_current_BANG_$$ core.cljs:169
    $sevenguis$core$init_BANG_$$ core.cljs:893
    <anonymous> append.js:2
    <anonymous> app.js:14733

(defn page-for [route]
  (case route
    :index #'home-page))

(defn current-page []
  (fn []
    (let [page (:current-page (session/get :route))]
      [:div
       [page]
       [:footer
        [:p]]])))

(defn mount-root []
  (rdom/render [current-page] (.getElementById js/document "app")))

(defn init! []
  (accountant/configure-navigation!
   {:nav-handler
    (fn [path]
      (let [match (reitit/match-by-path router path)
            current-page (:name (:data  match))
            route-params (:path-params match)]
        (session/put! :route {:current-page (page-for current-page)
                              :route-params route-params})
        (clerk/navigate-page! path)))
    :path-exists?
    (fn [path]
      (boolean (reitit/match-by-path router path)))})
  (accountant/dispatch-current!)
  (mount-root))

(def app
  (reitit-ring/ring-handler
   (reitit-ring/router
    [["/" {:get {:handler index-handler}}]])
   (reitit-ring/routes
    (reitit-ring/create-resource-handler {:path "/" :root "/public"})
    (reitit-ring/create-default-handler))
   {:middleware middleware}))

as I said. see the case route. that doesn't have a default case so it fails since you are not getting :index

can't see your router so not sure what you actually get, server side parts don't matter here

I have an issue with Re-frame's event handler reg-event-db

i am trying to, by clicking a button, to add extra information into an array in the appdb. But what is currently happening is that the data that is stored in the key is being replaced

how do i make sure that the data is added to the array?

code:

(reg-event-db
  :fetch-data
  (fn [db [_ map]]
    (let [{:keys [a]} map]
    (assoc-in db [:data :a] a))))

and currently in the appdb :data :a holds [1,2,3]

and i am trying to add 4,5,6

so it becomes [1,2,3,4,5,6]

May I know how to access properties of a javascript object in clojurescript?

Curious, does anyone not like hiccup in reagent? If so why? I’m trying to decide if I’ll go down that route or not for a hobby project

Hey. How do you import a font from ClojureScript? In JavaScript it's import "@fontsource/roboto", which imports css styles what's the ClojureScript equivalent? I'm using material-ui.

@olivergeorge should be ok - but note there's a better way now

@rbowen I'm pretty sure that is not a JavaScript feature? that's a feature of build tooling

such things are not possible directly in ClojureScript and that's unlikely to change

however this problem was already considered some time ago - the :bundle target allows you to write these patterns outside of your ClojureScript

meaning we punted the problem to where it belongs - not in the language but in tooling

Makes sense.

So the tooling would be shadow-cljs? It should be able to handle that correct? I came across :ignore-asset-requires true|false but it seems to have no effect when set to false, assuming it is true by default.

I don't know if shadow-cljs supports such things directly

no support for css no. the ignore is only for npm packages that might want to require css directly which would otherwise break

Okay, got it, thanks.

Can someone point me in the right direction with regards to symbol resolution in CLJS? This will work in CLJ but not CLJS:

(resolve (:boo (clojure.edn/read-string (pr-str {:boo 'inc}))))
=> #'clojure.core/inc

clojure.lang.ExceptionInfo : 
    java.lang.AssertionError : Assert failed: Argument to resolve must be a quoted symbol

i.e. I’d like to read some EDN and then resolve any symbol in there

clojurescript cannot do any runtime evaluation. the repl has some limited at dev time

One would think it should work since ns-publics seems to work. Not sure if it survives :advanced compilation

@beders all those things are macros. so they all work at compile time in a static context. none of them take any arguments that resolve at runtime since that is technically impossible with :advanced

thanks Thomas, looks like I need to roll my own limited symbol resolution

if you ^:export all the things that you want resolvable that still works and you can look up the things by name after. vars don't really exist though so you just get the thing not a var like you would in CLJ

trying not to pollute. So maybe something using ns-publics or a hand-rolled mapping. All things I need to resolve are static.

thanks for the explanation @thheller You are the MVP of CLJS!

does anyone know how I can print the value of an atom straight in the chrome console?

@luishendrix92 ClojureScript has deterministic munging

w/ Dev tools autocompletion it's pretty easy to use anything in ClojureScript directly as long as you're not using advanced compilation

console.log(cljs.core.deref(your_ns.core.your_atom)) or whatever