Fork me on GitHub

Any suggestion how I can do the equivalent of "import marioPNG from "./mario.png";" and use the webpack file-loader to decode that image file? I can load the data but I need it decoded in same format webpack file-loader...


@olivergeorge: That repo really helped - seeing how you had to :require everything and not :import made a huge difference, and I finally got the quickstart translated to CLJS and working. In the course of getting to this I've had to reinstall Java, reinstall Node, learn a bunch about the Closure compiler, and learn how to test and compile Clojurescript with a patch. Thanks a ton!


Hi everyone, I need some ideas... I have a cljs app, trying to compile it with simple optimization. One of our namespaces is reported missing (JSC_MISSING...). The require of this namespace has been added to the top level namespace but for some reason the compiler still does not seem to detect it (it's working fine with figwheel however). The compiler never copies it to the 'out' folder before calling the optimization phase. It's referenced in 5 different namespaces. This namespace requires goog.string and alike. That's the only feature that sets it apart What am I missing ? Using 1.9.473 here...


Well, see if goog.string is the problem


Then see if it compiles with no optimizations


Maybe it's a filesystem issue of some sort


@lprefontaine not sure if this is exactly your issue, but I believe there was a subtle bug in :whitespace and I assume in :simple mode as well. the order of dependencies concatenated in generated file can be wrong under some circumstances. The :none and :advanced modes work properly.


Ok, will give it a try. Looks like it's related to the source file format. Did a test with Replete using copy&paste and a couple of lines did not pass the compilation in the REPL.


Short Question: is it possible to throw an UNCATCHABLE EXCEPTION ? Long Question: I'm doing

(defmethod mutate 'todo/new-item [...]
    (fn []
      (. js/console log "hit pre line")
     (assert false)
      (. js/console log "hit pre line")
Now, when I press the new item button, I get: "hit pre line" I don't get "hit post line" and I don't get an exception So it seems like OM caught my exception, and then ignored it. Returning back to my question: is there a way to either (1) tell OM to NOT catch my exceptions OR (2) throw an UNCATCHABLE exception ?


@qqq not possible, but you can check the error you’re getting


it’ll be in the return value of om/transact!


@anmonteiro : nice, thanks! I get the exception from om/transact! now


however, is it possible to tell om/transact! to not catch it? I'd prefer cljs-dev tools catch it and show me the debugger


when om/transact! catches it, I end up getting a bunch of js line numbers inated of cljs line numbers


I looked at the compiler output using the verbose flag. It says "Analyzing" for this specific file but it never compiles it... I re-created the file from a cat output to make sure no non-printable characters are present.... still no change,,,


not possible AFAIK, but you can probably rethrow it


if I rethrow it, I get line where the rethrow happens, not the origiinal line right?


I don’t know, but since you get an instance of js/Error it’ll probably have the original stacktrace


that would be my assumption


where is transact! efined?;q=transact%21 I don't mind modifying it as this is really important to me


I will test out rethrow


also this would probably be a conversation more appropriate to have in #om


@anmonteiro : got it all working; thanks for your help! the "om transact! returns exception" was the key part


Found it, they were still a couple of creepy characters hidden in the namespace o the source file. Hence the namespace hierarchy did not match the file path... 😬🔫


question have anyone seen figwheel setup where app would be served not on localhost:3449/ but on localhost:3449/some-arbitrary-path-here? Would love someone giving me pointer. Also, this might be X-Y problem, so will talk about the problem I’m having: I’m using secretary and accountant (utilizing html5 history) for reagent SPA. when ran on localhost everything is ok, but once deployed to gh-pages of a project, it breaks because /login !== /some-path/login. I tried using (secretary/set-config! :prefix “some-path”) but it seems not to work for me.


or should it be handled in :ring-handler? :thinking_face:


anyone seen routing solutions where there is not a global config where you specify which route shows which components, but where the components themselves can decide if they want to appear for a certain path (route)? i am trying to avoid having to use something like react-router


@ashnur: I hate the term "routing" (I think it dates back to the PHP era) and I use something different, which works the way you describe. I have to write it up in a blog post, really.


Basically, I pass around a nav-state structure, which contains the URI split into "tokens". The structure contains a list of :consumed-tokens and :remaining-tokens. Every component only deals with (first (:remaining-tokens nav-state)), and when calling other components, calls consume-token, which simply takes one token from :remaining-tokens and places it onto :consumed-tokens. That way every component can have its local nav structure, independent of anything else, and it's also reusable: you can use the same component at several places in your application.


jrychter: interesting. can you elaborate a bit? it sounds like you eschew the traditional dispatcher fn, which takes a path and finds a component to call based on a dispatch table. you give dispatch authority to components, by adding a nav-state param to their signature. is that accurate? the dispatch table is still there, but it's implicit, wired into the components. sth like that?


@U0LGCREMU: yes, that's an accurate description. As a result, I can rearrange and reuse components at will, and the URI structure follows automatically and naturally.


I use this extensively in PartsBox (


This means that I have no global "routing table": as the nav-state structure is passed down the component tree, everybody consumes whatever they need, and things just happen.


For building links, I have a bunch of utility functions, some build relative links based on the current nav-state, and some (very rare) build global links.


i don't follow completely


if you consume, how you add a new components that appears on the same path?


The render function for your component (that exists at say "/main/comp1") calls (comp2 (consume-token nav-state)). This means that if the URL was really "/main/comp1/something", your comp2 will get a nav-state with :consumed-tokens ["main" "comp1"] :remaining-tokens ["something"], so it will only deal with "something".


what if there is another component that would also need "something"


But if it needs to construct a full URL to something, it still can.


Every nav path points to only one component, not sure how you'd like it to be otherwise. Of course, that component can render whatever it wants (including several other components with no knowledge of navigation).


well, for me nav paths don't point to components, rather they define a context in which components can choose to do whatever they want. I do parse it into parts to be able to generate new paths but it does not modify the path so it allows other components to act on it


i just see no reason to be destructive.


Can you use the same component (with its local navigation) in two different places in your app? I think any approach that doesn't follow the "one path -> one component" is fundamentally problematic if you want reuse.


Also, there is nothing "destructive" about what I described. It's a pure functional approach.


Your app tree becomes a function of your nav path, this simplifies a lot of things.


i see no reason why i couldn't. instead of writing if route matches this, i write if route matches this or this. Similarly, using the same component multiple times, i just include it multiple times into the parent view.


i am not saying I know better, usually when i am doing something else than others, i am missing something, i just don't know what, in this case


I am not going to argue — I have a nice and simple solution which works very well and allows me to move components around and reuse them without modifying any global routing table. Whatever works for you 🙂


I'm doing something similar to you, jrychter, but take it even a step further with the simplicity: I'm only ever 2 levels deep with the tokens (namespace + name), and then for some routes some "parameters". Haven't needed more levels with my app (over >30 routes).


@jrychter i wasn't trying to argue, i was asking if you see something obviously wrong with i am saying. I am not questioning the validity of your setup, obviously, i am here to learn, mostly, not to put up my views against other's views 🙂


and thanks for what you've told me because it is really good to know that i am not the only one who has issues with global routing tables


Well, I don't think it's "wrong", just that it's more complicated that it should be, and has certain disadvantages (like not being able to easily reuse components in a different part of the app). I can't see any advantages, only complexity and disadvantages.


I am trying to build apps where the entire component tree is a function of the URI and the app-state atom, and where components can be rearranged at will (e.g. uri structure will follow). I know there is one drawback: this doesn't work if you don't control the URI structure, e.g. if somebody tells you that particular URIs must map to particular places in the app.


@jrychter interestingly, my own experience was that this made things simpler, not complicated. but i am guessing that we just simply don't understand each other's architecture clearly, that's why we both are a bit confused about it 🙂


How do I retrieve the doc-string of a defn?


(meta some-fn) => nil


@hkjels (meta #'some-fn), assuming some-fn is a var


@moxaj ahh, great.. Thanks!


hi guys, is there anyway we can convert clj->js but we still want to keep the namespace in keyword ?


@nxqd conversion between clj/js value is around two protocols - so yes


@dnolen Thanks for the answer. I stumbled upon the same issue being posted here ? . But it seems extending the protocol is the solution for now


yeah we’re not going to change the default behavior now


pointless breakage


so extending the protocol is the answer and probably always will be


I want to give a shout out to @doglooksgood amazing parinfer mode for emacs


@dnolen do you can help me? 😕


@victorvoid: Probably worth asking in #re-frame, there are some interactions between the 2 libraries that can make a difference to how well it works. also uses Secretary and re-frame so might give you some ideas.


I've got an error I don't understand related to require vs import for Google Closure dependencies - it's not actually necessary for me to understand or fix it, I'd just like to understand why it's happening this way. works fine, but gives me an error message. From my (poor) understanding, if the dependency is a class then I should be using import, but this doesn't seem to work that way in this case. I get similar results if I change any of the other requires to import statements. Any ideas?


this is cljs right?


import is for java classes


so not really relevant to cljs


unless you're writing a macro


@jr: Yes, cljs - using a google closure library though, and import is recommended for classes in - and I think the code in question is a class and namespace based on the docs at and the interop usage of (ol.source.OSM.). Very, very possible I'm wrong about something fundamental here though.


> This is only for when you would like to refer directly to a class which is also a namespace


that appears to be the case


@jr: Ok, so it looks like import should work there, right?


Ok at least I didn't misunderstand that part, thanks :)


@shaun-mahood if you import something you can use the short name for it


that is pretty much the only difference to require


@thheller: Oh that makes sense, thanks!


question about using map


if i have the following


(defn render-welcome-message-content[msg] ([:dev.welcome-message-content msg])) `


(defn render-welcome-message [] [:div.welcome-message-container (map render-welcome-message-content welcome-message-1 welcome-message-2)])


what did i do wrong


@binliu4clojure ([:dev.welcome-message-content msg]) means "create a vector and then call it as a function"; you probably have an extra set of parens around that


(that's the body of render-welcome-message-content)


oh should be div, but still get error


not quite following..


what i want is [div.welcome-message-container [:div.content msg1] [:div.content msg2]]


so i define a function output [:div.content msg], msg as argument, and use map


your first problem has nothing to do with render-welcome-message, but render-welcome-message-content; you have an extraneous set of parentheses in render-welcome-message-content


(defn render-welcome-message-content [msg]
  ([:dev.welcome-message-content msg]))
should probably be
(defn render-welcome-message-content [msg]
  [:dev.welcome-message-content msg])


got it!! Thanks!


but now it seems it take all my msgs , each letter as an element and out put them each letter one line...


and if you want something that looks like [:div.welcome-message-container [:div.welcome-message-content "msg1"] [:div.welcome-message-content "msg2"]]; you probably want to use

(into [:div.welcome-message-container] (map render-welcome-message-content welcome-message-1 welcome-message-2))


warnings is each child in an array or iterator should have a unique key


(defonce welcome-message-2 "Sign in with your GitHub account")


how to represent an object in cljs?


or make the function think msg2 is one element instead of a lot of letters?


oh! sorry, (into [:div.welcome-message-container] (map render-welcome-message-content welcome-message-1 welcome-message-2)) should be (into [:div.welcome-message-container] (map render-welcome-message-content [welcome-message-1 welcome-message-2])), or something similar


by using a string directly as an argument to map like was originally there, it's calling the function on each character in the string


Ah yes. putting [] around msg1 and msg2 do the trick


@shaun-mahood I guess it should be (:import [ol.source OSM]) in order to call constructor like (def my-source (OSM.))


but yeah, I can't explain the machinery, just following the rules 🙂


@metametadata: Fantastic, that works - apparently I'm not smart enough to understand the docs right the first time. Thanks!


Is there any way to write the equivalent of a JS debugger; statement? (js/debugger) throws a ReferenceError


trying to do some clojurescript namespace hacking (don't worry, this is for my eyes only). I'm attemting to make cljs vesion of Mikkera's pull macro in clojure. Basically merge the symbol interns into a new namaepace. This creates an infinite loop, maybe an stupid attemt and I guess most here would talk my out of this idea.

(defn pull [into-namespace namespace]
  (let [into-map (get-in @env/*compiler* [:cljs.analyzer/namespaces
        replace-map (get-in @env/*compiler*
                            [:cljs.analyzer/namespaces namespace :defs])
        merged-map (merge into-map replace-map)]
    (swap! env/*compiler* assoc-in [:cljs.analyzer/namespaces
                                    :defs] merged-map)))


It looks like I can use (js/eval "debugger") and then step out in the debugger to get to the line in the sourcemap, but that's not amazing...


@rgdelato there’s cljs.core/js-debugger


@anmonteiro awesome, thank you! That works! For future reference, where would I go to look up that kind of thing?


I think this is a pretty good resource


they’re directly mapped from the source


I've never used Google Closure with a non-cljs project, but I just want to know this: do you still need to provide externs if you use packages with one of the supported module formats or are they entirely different concerns?


I'm playing around with loading node modules to ClojureScript and so far it seems like you still need externs.


afaik it is for foreign libs, not needed when you see JS written like this file: