Fork me on GitHub

Hi a bit new to cljs/react, and have a question on using bootstrap css. How are you folding the JS portion into your projects with the dependency on jquery for menu toggles, validation, datepicker, etc. Do you just include jquery alongside clojurescript? Are you re-creating the jquery functionality in cljs? Or are there better choices that fits more naturally into the react/reagent world than boostrap css? Thanks!


@mikeb by chance are you talking about reactstrap? Because this was just recently announced


Not that specifically, I have been working on building a site with reagent, and ran into this issue when I started using boostrap.


It's been a long time since I messed with that combo. I don't remember the jquery dependency though. Maybe I was using a certain version. In any case, if you need to bring it in, you should be able to do so in the :foreign-libs directive your project.clj using one of the jquery modules from cljsjs, over here:


My preference would be to not pull in jquery, as it likely will mess with dom and cause issues right? So if not bootstrap, what are others using? Really just need a responsive grid, responsive navigation, basic form controls (eg datepicker) and validation.


I didn't realize it at first, but baking-soda is wrapping reactstrap and that looks to be precisely what I was looking for, bootstrap components for react that don't depend on jquery. Now to just figure out how to get it working to toggle the menu.


i assume the only fix to would be to push a new closure-compiler build somewhere. has anyone else already done this or worked around the issue another way?


@devth that’s one way, otherwise you just have to use a previous CLJS release


@dnolen ok, thanks. i'm going to see if i can get the artifact deployed somewhere.


@devth let me know if you figure this out 🙂


@thedavidmeister i ended up downgrading to 1.9.456 for now. trying to configure maven to deploy to a different repository was bringing back too many bad memories 😂


@thedavidmeister that issue looks suspiciously like missing externs, that may cause the craziest errors


@thedavidmeister found at least one problem so far. the pickadate cljsjs package wants to use cljsjs/pickadate/common/pickadate.ext.js externs but the file in the jar is cljsjs/common/pickadate.ext.js so those externs are not used


I don't know what was the original issue but I did confirm this problem in Cljsjs and fixed it:


What’s the best way to inject environment into a clojurescript app that will hosted in a java app server via java -jar uber.jar?


@tankthinks either load them via xhr when you CLJS starts


or call <script>;</script> in your html after loading the JS


@tankthinks serve your index.html with this vars via hiccup


thanks @thheller and @souenzzo! I’m doing the xhr now, but I want something a bit more secure, loading in the html was my next thought … thanks for confirming


actually the HTML way is the least secure


must take good care of escaping <script>setup("some user data </script><script>alert('boom')<script>")


use XHR to be safe


let’s say I’m have a secret that I need to get into the client side … it seems like I’ll need to encrypt/decrypt that packet


no such thing as secret in the browser


use HTTPS to ensure that the transport is safe


but if anyone is able to execute JS in your context there is nothing you can do to protect that


so use HTTPS 😉


got it … made me realize I didn’t even need insecure stuff client side anyway … thanks @thheller


anyone know of any ajax libraries that use core/async rather than callbacks?


There was another one I liked but I can't recall it at the moment


i somehow landed on cljs-ajax which seems to actually be the minority in not using core/async


Hi everyone 🙂

Drew Verlee19:04:39

i’m searching for a way to write a blog. Ideally something where i could write in markdown and use klipse. Any suggestions from the community? I understand their are probably a dozen ways of approaching this.

Drew Verlee19:04:16

Cryogen looks like a good choice (from another thread).


an example of some code:

function test (...arg) {
  return arg[0].map((item, index) => {
    return item + ((arg[index + 1]) ? arg[index + 1] : '')

const a = 1
const b = 2
const c = 3

console.log(test`asd ${a} asd ${b} asd ${c} a`)
$> asd 1 asd 2 asd 3 a


is there a convenient way to deal with this? I'm just a week into clojurescript and I absolutely love the language. Thanks in advance.


so a tagged template literal de-sugars to a function call, so I believe that:

foo`hello ${"there"} how ${"are"} you`;

// should be the same as:

foo(["hello ", " how ", " you"], "there", "are");


that's correct


but yeah, I don't have a good answer for how to interop with it. Since Clojure strings are multiline by default, I've been trying some code that looks like:

(def header-class (styled "
  font-size: 72px;
  font-family: " @font-family ";
  font-style: italic;
  color: " #(:color %) ";
...and then using an ugly reduce to turn it into a normal function call, but I don't know of a straightforward way to do it


maybe someone else knows a better way?


or just good old CLJS and without stupid strings ... 😉


I'm going to read into this, looks promising. Thanks


And thanks to @rgdelato, you're "tagged template literal de-sugars to a function call" example cleared up some stuff as well


I've run into a bit of a problem, wondering if anyone can help. I want to depend on a function that is exported (commonjs) from js using module.exports = <a function> but can't figure out how to refer to it from cljs... any pointers?


yeah, we've had the plain CSS vs. data structures discussion before 😛 ...but that sadly doesn't help for interop with other things like tagged GraphQL queries or whatnot. Maybe it actually would be useful to have some kind of js-tagged-template function wrapper or something out there


read-string turns the string into a proper cljs code block.


but pr-str does not do the same thing to the block.


How do I return the compiled js function of a cljs string?


by defining a new serializable function type I would guess


are my intuitions off here, because the repl is evaluating the fn declaration before it is sent to the browser env? Whereas read-string sends the form to the browser, where it can't be compiled?


as far as I know it's only an accident that the printed form of a defn in cljs is pretty much (but as you've learned not exactly) its code


there's no functionality in clojurescript that claims to be able to reproduce a function by serializing it to a string


it's kind of cool that it's this close to actually working - maybe there's a clever hack that will make it work - but it's not a behavior that is explicitly designed or intended as far as I know


yeah... I'm exploring whether there are enough working scenarios for it to be useful.


I'm thinking that, if not from the repl, when you pr-str a particular function you will be returning the js code anyway.


i haven't worked with cljs in nearly six months and am revisiting an old project so could very likely be confused/forgetful, but it seems like i'm having a problem where figwheel is constantly reverting to an older version of the code. the project is a library that draws to the canvas element and has several tests at the end. if i comment out the test from when i last opened it, and uncomment another one figwheel will update to just draw both of them. and anytime i reload the page it will revert to drawing the old test even if it's commented out. i've obviously tried cleaning the build, even deleting the compiled js, but it hasn't changed the behavior. any ideas what could be going on here?


Hey - anyone who's used re-natal, or a cljs/react native setup, how did you go about testing? There's a stub in the framework, but it isn't run or built by anything.


(Interested in just basic, non-UX testing)


@sophiago just to rule out, did you remove cache, or hard-reload the browser between?


i have hard-reloaded the browser


do you think i should try cleaning the cache? i suspect it's figwheel related as it's the first time i'm running it on a new machine. and i'm also experiencing a problem where i have a subdirectory and figwheel launches the core.cljs file from the one above it


are you useing react or direct dom manipulations. Not sure how good figwheel is keeping hot-reloading state if you append data to dom, vs declare it with react.


i know i've had to manually reload it often in the past and never quite understood when it does and doesn't automatically update, but the issue here is almost the opposite


it seems almost as if it's reverting to an old build, but i know that's not possible


hard to tell what is going on here. Now I lean towards that your fighweel options are incorrect. If you have different core.cljs files in your directory path, could it be that figwheel is compiling the one you don't want it to. And if figwheel doesn't hot reload, it probably means if wasnt watching the file you changed, hence some setting not right.


hlolli: that was my suspicion


but I do get this what you describe, but it does leave when I delete the main.js/out (dir) and target, in my cases.


and i did actually have some old versions in another directory inside src (one of those "what were you thinking six months ago moments"), but i went through and deleted everything extraneous in the project directory, including compiled js, then cleaned and rebuilt


What are you drawing into what sort of canvas?


what do you mean what sort of canvas?


i'm drawing lines


You mentioned you're using library to draw into canvas above. So just thinking if it's a dom-append, then when figwheel reloads, it will just listen to the js code that's effectively saying, add this data to this dom element. As in contrast to react.js, where there's better knowledge of what has been rendered to the dom. Otherwise I'm a bad troubleshooter.


the project is a library


and it's not doing anything with the dom


the canvas is hardcoded in the index.html


and the lines are dscribed in css?


there's no css


i'm not sure what you're getting at tbh


there's no css inside the canvas element


i should say, i haven't tested in a vanilla browser repl as i haven't used one in forever


i could also try cloning the repo from github and seeing how that behaves


i'm not sure what I'm getting at either


i just suspect it's leiningen related as it's the first time i'm working on this on a new machine


ok, i experience the same behavior cloning it from github


@hlolli: here's the repo if you want to see if you can reproduce it:


you should just be able to comment out tests at the bottom to see it draw in different ways (probably requiring manual reload)


I've heard multiple people say that recently; that it appears as if old builds are impossibly running. I thought I saw something like that too recently.


@john i'm having trouble finding anything about that on their github issues. could you possibly dig up a link to anything about it?


In this case I'd rather use autobuild with cljsbuild, I never used figwheel in non-react environment but I suspect that figwheel was developed with react deeply in mind. Didn't know about the canvas html element, cool. But like I mentioned, you may bump into the situation that the browser holds a state of the canvas element that figwheel knows nothing about, and multiple renders on top of old renders are very possible.


maybe before calling (draw (painter george))you want to clear the canvas directly?


@hlolli: i have tried manually clearing the canvas despite never experiencing that issue before with it


@sophiago Check the logs in the #figwheel channel. @mikerod was saying: "mikerod [2:45 PM] …and resources/public/js/compiled was completely gone. and figwheel kept starting up with stale state"


thanks. i only checked the lein channel, not figwheel. i'd rather ask bruce there than open an issue seeing as i'm so rusty with this i'd be concerned i'm just missing something


wait, did he resolve it by clearing cache?


i actually haven't ever launched this project in this browser so that seems unlikely for me...


I think cljs repl development might be more stable if we weren't constantly synchronizing two separate code bases. Now that google-closure.js is out, we should be able to run the whole compiler in a webworker and use a server daemon to upload sources directly to it. One compiled code base, in the browser.


:on-jsload "Lazy-Henderson.core/on-js-reload" this function is missing? (tough I don't think it matters here)


hlolli: must be some boilerplate i never deleted


i haven't messed around much with the project file figwheel generates, although this was working fine once upon a time


at this point i think i need to try opening it in a vanilla browser repl. it's just such a pain 😛


I have to use weasel right now to repl into a browser. Not pretty


I mean webworker


yeah, i'm leaning towards putting this off. i tagged bruce in the figwheel channel