Fork me on GitHub
#clojurescript
<
2017-04-10
>
mikeb02:04:28

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!

john02:04:45

@mikeb by chance are you talking about reactstrap? Because this was just recently announced https://github.com/gadfly361/baking-soda

mikeb02:04:56

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

john02:04:08

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

mikeb05:04:23

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.

mikeb06:04:06

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.

devth12:04:11

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?

dnolen12:04:21

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

devth12:04:07

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

thedavidmeister13:04:29

@devth let me know if you figure this out 🙂

devth13:04:47

@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 😂

thheller13:04:57

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

thheller14:04:49

@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

juhoteperi14:04:19

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

tankthinks14:04:51

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?

thheller14:04:41

@tankthinks either load them via xhr when you CLJS starts

thheller14:04:15

or call <script>my.app.env.setup(DATA);</script> in your html after loading the JS

souenzzo14:04:48

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

tankthinks14:04:41

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

thheller14:04:11

actually the HTML way is the least secure

thheller14:04:18

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

thheller14:04:45

use XHR to be safe

tankthinks14:04:58

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

thheller14:04:36

no such thing as secret in the browser

thheller14:04:58

use HTTPS to ensure that the transport is safe

thheller14:04:19

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

thheller14:04:34

so use HTTPS 😉

tankthinks14:04:26

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

samueldev18:04:21

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

john18:04:08

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

samueldev18:04:11

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

rickheere19:04:38

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).

rickheere19:04:43

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

rickheere19:04:52

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.

rgdelato19:04:11

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");

rickheere19:04:21

that's correct

rgdelato19:04:33

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

rgdelato19:04:13

maybe someone else knows a better way?

thheller19:04:30

or just good old CLJS and without stupid strings ... https://github.com/thheller/shadow/wiki/shadow.markup 😉

rickheere20:04:06

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

rickheere20:04:26

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

kahlin20:04:07

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?

rgdelato20:04:45

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

john20:04:28

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

john20:04:48

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

john20:04:12

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

noisesmith20:04:58

by defining a new serializable function type I would guess

john20:04:00

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?

noisesmith20:04:08

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

noisesmith20:04:28

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

noisesmith20:04:26

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

john20:04:37

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

john20:04:47

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

sophiago22:04:23

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?

acgt22:04:15

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.

acgt22:04:42

(Interested in just basic, non-UX testing)

hlolli22:04:41

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

sophiago22:04:07

i have hard-reloaded the browser

sophiago22:04:22

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

hlolli22:04:29

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.

sophiago22:04:18

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

sophiago22:04:50

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

hlolli22:04:43

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.

sophiago22:04:45

hlolli: that was my suspicion

hlolli22:04:11

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.

sophiago22:04:49

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

hlolli22:04:15

What are you drawing into what sort of canvas?

sophiago22:04:29

what do you mean what sort of canvas?

sophiago22:04:35

i'm drawing lines

hlolli22:04:34

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.

sophiago22:04:58

the project is a library

sophiago22:04:10

and it's not doing anything with the dom

sophiago22:04:29

the canvas is hardcoded in the index.html

hlolli22:04:09

and the lines are dscribed in css?

sophiago22:04:21

there's no css

sophiago22:04:31

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

sophiago22:04:46

there's no css inside the canvas element

sophiago23:04:01

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

sophiago23:04:29

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

hlolli23:04:43

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

sophiago23:04:41

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

sophiago23:04:17

ok, i experience the same behavior cloning it from github

sophiago23:04:13

@hlolli: here's the repo if you want to see if you can reproduce it: https://github.com/Sophia-Gold/Lazy-Henderson

sophiago23:04:57

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

john23:04:16

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.

sophiago23:04:40

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

hlolli23:04:17

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.

hlolli23:04:29

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

sophiago23:04:54

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

john23:04:12

@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"

sophiago23:04:01

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

sophiago23:04:33

wait, did he resolve it by clearing cache?

sophiago23:04:00

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

john23:04:52

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.

hlolli23:04:21

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

sophiago23:04:45

hlolli: must be some boilerplate i never deleted

sophiago23:04:23

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

sophiago23:04:40

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

john23:04:01

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

john23:04:10

I mean webworker

sophiago23:04:41

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