This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-04-10
Channels
- # beginners (61)
- # boot (264)
- # cider (125)
- # cljs-dev (3)
- # clojure (118)
- # clojure-gamedev (3)
- # clojure-greece (1)
- # clojure-italy (1)
- # clojure-nl (2)
- # clojure-poland (3)
- # clojure-russia (38)
- # clojure-spain (2)
- # clojure-spec (17)
- # clojure-taiwan (1)
- # clojure-uk (42)
- # clojurescript (118)
- # clojutre (5)
- # cursive (24)
- # datomic (22)
- # emacs (3)
- # events (2)
- # figwheel (19)
- # funcool (1)
- # jobs-discuss (224)
- # jobs-rus (1)
- # klipse (14)
- # luminus (1)
- # lumo (49)
- # off-topic (51)
- # om (34)
- # pedestal (1)
- # perun (1)
- # planck (93)
- # powderkeg (1)
- # re-frame (15)
- # ring (4)
- # rum (9)
- # slack-help (3)
- # spacemacs (2)
- # specter (13)
- # uncomplicate (1)
- # unrepl (22)
- # untangled (10)
- # yada (36)
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 https://github.com/gadfly361/baking-soda
But there's a few blog posts out there about bootstrap and cljs/react in general: https://medium.com/@bepitulaz/clojurescript-integrating-react-bootstrap-and-reagent-f695006f63e4, https://gist.github.com/bepitulaz/c1139d4f826789609826, http://nicolovaligi.com/boostrap-components-reagent-clojurescript.html
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: https://github.com/cljsjs/packages
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 https://github.com/google/closure-compiler/issues/2336 would be to push a new closure-compiler
build somewhere. has anyone else already done this or worked around the issue another way?
the cljs issue tracking it is http://dev.clojure.org/jira/browse/CLJS-1954
@devth let me know if you figure this out 🙂
i'm stuck between two bugs - https://github.com/tonsky/datascript/issues/206
@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: https://github.com/cljsjs/packages/commit/873bb122901b8563719ac41483ab11ca13b9f12c
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
@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
hmmm …
must take good care of escaping <script>setup("some user data </script><script>alert('boom')<script>")
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
but if anyone is able to execute JS in your context there is nothing you can do to protect that
got it … made me realize I didn’t even need insecure stuff client side anyway … thanks @thheller
@samueldev will this work? https://github.com/r0man/cljs-http
then you've got chord: https://github.com/jarohen/chord
i somehow landed on cljs-ajax which seems to actually be the minority in not using core/async
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.
Cryogen looks like a good choice (from another thread).
in es16 the 'Tagged template literals' feature was added (https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Template_literals). Some libraries use this heavily, for example https://github.com/styled-components/styled-components and https://github.com/apollographql/graphql-tag .
an example of some code:
function test (...arg) {
return arg[0].map((item, index) => {
return item + ((arg[index + 1]) ? arg[index + 1] : '')
}).join('')
}
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");
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 itor just good old CLJS and without stupid strings ... https://github.com/thheller/shadow/wiki/shadow.markup 😉
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
by defining a new serializable function type I would guess
it's been done with clj https://github.com/technomancy/serializable-fn
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
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.
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.
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
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.
i should say, i haven't tested in a vanilla browser repl as i haven't used one in forever
i just suspect it's leiningen related as it's the first time i'm working on this on a new machine
@hlolli: here's the repo if you want to see if you can reproduce it: https://github.com/Sophia-Gold/Lazy-Henderson
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.
@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
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)
i haven't messed around much with the project file figwheel generates, although this was working fine once upon a time