this can be a handy snippet to have near the top of your project too: (defn $ [q] (.querySelectorAll js/document q))

Hi, each time I save my code hot reload kicks in but I get this error:

error when calling lifecycle function wishlist-app.core/init Error: Target container is not a DOM element.

(defn render-active-panel []
  (rdom/render
   [site-layout]
   (.getElementById js/document "app")))

(defn init []
  (re-frame/dispatch-sync [:initialize-db])
  (hook-browser-navigation!)
  (render-active-panel))

;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies
  [reagent/reagent "0.10.0"]
  [re-frame/re-frame "0.12.0"]
  [clj-commons/secretary "1.2.4"]]

 :builds
 {:app {:target     :browser
        :output-dir "resources/public/js"
        :asset-path "/js"
        :modules    {:main {:entries [wishlist-app.core]
                            :init-fn wishlist-app.core/init}}

        :devtools {:repl-init-ns cljs.user
                   :preloads     []
                   :http-port    8021
                   :http-root    "resources/public"
                   :after-load   wishlist-app.core/init
                   :autoreload   true}}}}

@lilokoego you should use :after-load wishlist-app.core/render-active-panel not init since that will re-initialize everything. https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html

pretty sure your hook-browser-navigation! thing may reset the page and remove the <div id="app">

Aaah! That makes sense! Thanks a lot!

@lilokoego If you have any further issues, the re-frame-template will give you a working scaffold for a re-frame application, and that would act as a good reference.

Thanks @mikethompson. I will set up a different project and see how everything is hooked.

Hi, I'm porting existing React TSX code to CS and in TSX there is a pattern that you just import CSS files (like this: import './index.css';) which I guess just get run as a plain JS script inside the browser. The file in question just defines variables (like this: --ion-color-primary: #3880FF;). Is there a way for me to invoke the same code to be run from CS in the same way? I obviously tried to google for a solution but as of yet did not find one.

it isn't turned into JS. webpack bundles up .css file references and just serves a regular .css file

and no there is no way to express this in CLJS

Ok. If that is the case now if I reference the file like typical CSS in HTML should that work? Like in Reagent terms [:link {:rel "stylesheet" :href "./index.css"}]

no. the file is likely in some npm package and probably has multiple.

or is this an actual css file you have? in that case yes you just include it normally in html (probably not reagent though)

ok, I have both cases: a local file that is simple and then the complex stuff from imported libraries

Hi everyone, I'm working on a React-native / re-frame / re-natal / figwheel app, and I can't get anything to work: Be it with a running emulator or my actual android device, my app doesn't start but the major problem is that I never get any "easy to google/ find on stackoverflow" kind of error I should note that I am on linux (Ubuntu 20.04) and that my phone/emulator is on android Every time I want to start up the app, I do re-natal use-android-device [avd | real] ; re-natal use-figwheel and then in 3 different shells : lein figwheel android react-native start (the metro bundler) react-native run-android Sometimes I will get stuck on the "Waiting for figwheel to load files" screen, which is sometimes resolved with a adb -s <device-name> reverse tcp:8081 tcp:8081. If I get past that screen I might end up with a cryptic error message (on the phone) :

Doesn't support name: 
eval
    [native code]
<unknown>
    
tryCallOne
    
<unknown>
    StyleSheetValidation.js:60:5
_callTimer
    ReactNativeRenderer-dev.js:1750:6
_callImmediatesPass
    ReactNativeRenderer-dev.js:1795:13
callImmediates
    ReactNativeRenderer-dev.js:2320:21
callImmediates
    [native code]
__callImmediates
    
<unknown>
    
__guard
    index.js:42
flushedQueue
    
flushedQueue
    [native code]
invokeCallbackAndReturnFlushedQueue
    [native code]

Hi Everyone, honestly abit overwhelmed at the different pathways/frameworks I can use to build a web app with Clojurescript. I've been looking at Fulcro for abit but am wondering if it will be a right fit. Need to make a single page application with stuff like leaflet (gis library) and postgresql (for spatial queries) Any advice or suggestions would be appreciated! :D

Hi @zackteo https://github.com/Lokeh/helix may be more useful to your needs, if complex UI state management is not your primary concern. I’ve integrated leaflet, it’s straightforward enough, message me with questions on that if you want

@danie ooh, by any chance have you also tried integrating arcgis js api? https://developers.arcgis.com/javascript/. I'll probably still to leaflet but it might be a consideration. Hmmm I'm not too sure if the core of what I need to do is considered as complex state management. Will need to allow the end user to perhaps pick a series of choices (like locations) or filter out locations (choices computed by the backend) which will need user input to continue and save that state at any point to then load back to it later :thinking_face:

Anyone with experience and knowledge about how to use cljs.js that can help me? I’m trying to get the self-hosted compiler working, but am running into trouble with defn and all the other cljs.core macros not being expanded. The input CLJS

(ns foo.bar)
(def a 12)
(defn x [] (+ a 30))
(+ (x) 3)

goog.provide("foo.bar");
foo.bar.a = (12);
foo.bar.defn.call(null,foo.bar.x,cljs.core.PersistentVector.EMPTY,cljs.core._PLUS_.call(null,foo.bar.a,(30)));
cljs.core._PLUS_.call(null,foo.bar.x.call(null),(3));

What might be the most efficient way to build up a very large string in cljs? At the moment I’m using numerous calls to str and it’s showing up in my profiler as a potential slowdown. I’m looking at goog.string/buildString as a potential alternative.

I'm attempting to add a reader literal that will work in cljs - I'm attempting to copy the setup in the time-literals library. I'm confused by the parsing code is a returning a list instead of a normal function: https://github.com/henryw374/time-literals/blob/master/src/time_literals/data_readers.cljc

Quick question… Are transient maps supposed to support find in ClojureScript? They do in Clojure. i.e. ClojureScript:

=> (def m (transient {}))
#'cljs.user/m
=> (def m (assoc! m :a 1))
#'cljs.user/m
=> (find m :a)
nil
=> (get m :a)
1

=> (def m (transient {}))
#'user/m
=> (def m (assoc! m :a 1))
#'user/m
=> (find m :a)
[:a 1]
=> (get m :a)
1

Working around it by using the (get [o k not-found]) arity on get, but it took me a while to track down that this was my problem

IMHO doing lookup on transients is often a sign you aren't using them as intended

they are designed to be used during some accumulation step then finalized into a real coll

it is an unusual thing, I grant you

I’m doing it for a multimap

also standard warning that transients are not a safe way to mutate a data structure in place

OK

but should find work?

someone else needs to answer that, the number of tiny ways clojure/cljs differ and which percentage of differences are intentional but undocumented are beyond me, sorry