Fork me on GitHub
#clojurescript
<
2018-09-04
>
FluffyPuppy07:09:08

Is there some way to turn clojurescript into javascript?

FluffyPuppy07:09:25

So that I can do the silly "give somebody an html file" deployment. 🙂

henrik07:09:32

@anonypicard For shadow-cljs

shadow-cljs release your-app
For vanilla: https://clojurescript.org/guides/quick-start#production-builds

henrik07:09:40

@anonypicard Shadow-cljs has in my opinion lower threshold to get started. If you want to give it a go, this is largely the process:

yarn init
yarn add shadow-cljs
./node_modules/.bin/shadow-cljs init
Edit shadow-cljs.edn and add a build, {:app {:target :browser}}, for example
./node_modules/.bin/shadow-cljs release app
You might want to ln -s ./node_modules/.bin/shadow-cljs for convenience. More about builds here: https://shadow-cljs.github.io/docs/UsersGuide.html#_build_configuration

4
thheller08:09:25

if you want to get started even faster try npx create-cljs-project foo

thheller08:09:17

@henrik you can also install shadow-cljs globally to skip the ln part. ie. yarn global add shadow-cljs

thheller08:09:26

it'll still use the version installed in your project

👍 4
henrik08:09:58

I had no idea, thanks!

Hannu Hartikainen09:09:48

We’re using shadow-cljs and now we’d like to have a CSS preprocessor (LESS or SASS, or convince me otherwise). Is it easiest to just install a preprocessor from npm? What’s a good way to integrate the CSS build into our lein build? We currently have shadow-cljs running via shadow-server in dev and configured in uberjar build like this:

:prep-tasks     ["compile"
                 ["run" "-m" "shadow.cljs.devtools.cli" "release" "app"]]

Hannu Hartikainen09:09:37

Ok, thanks. I guess I’ll consider separating the frontend and backend builds if that’s what experienced developers tend to do 🙂

thheller09:09:34

you can create a (defn make-release [] (sh "node-sass" ...) (shadow/release :app)) fn and call that via ["run" "-m" "your.util/make-release"]

thheller09:09:11

but yeah I just call node-sass ... && shadow-cljs release app personally

thheller09:09:42

there is also lein-sass

Hannu Hartikainen09:09:14

Ah, that’s a good tip. I knew running my own code as part of lein build must be possible, but never realized it’s that easy.

henrik10:09:02

I also use node-sass. I’ve just piled the commands into package.json and run yarn release.

Hannu Hartikainen10:09:15

Thanks. I’ll go with node-sass too.

lauritzsh10:09:33

I am thinking of writing a larger project in ClojureScript but I am not sure what libraries to use. Probably Reagent or Rum but I am not so sure about state management. Could Rum+DataScript be used instead of Reagent+re-frame or what stack would you pick?

lukas.rychtecky10:09:54

I have no experience with Datascript, but as I checked it’s README. I’d go with re-frame + reagent. Otherwise you will end-up with recreating re-frame like framework IMO.

lauritzsh10:09:09

How do you feel about Rum+Citrus?

lukas.rychtecky10:09:52

I didn’t created any Rum project, but as I see Rum+Citrus is a good choice, if you prefer Rum over Reagent.

cjmurphy13:09:14

State management is handled by Fulcro: http://book.fulcrologic.com/

lauritzsh10:09:57

I have done a small project in Reagent+re-frame, around 500 SLOC which doesn't say much since I am new to ClojureScript

exit212:09:55

For the webpack documentation, it says to create a build.edn file - I currently have all of my similar options in a project.clj. is that okay?

dnolen13:09:26

@njj yes - in fact I would just remove your build stuff from your project.clj

exit214:09:45

Oh I think I misread this. Are you recommending I move to a build.edn or that its fine to continue to have my project.clj handling that stuff?

dnolen13:09:55

ClojureScript is generally just dev time - when you deploy all you have is JS assets

exit213:09:15

there is a lot of stuff going on in the build for project.clj

exit213:09:25

I guess I’ll need to refactor it

idiomancy14:09:43

there's something I'm not getting about metadata in clojurescript 😕 so, I have this component definition defined:

(defn ^{:cmp :button} button [name]
  ...)
and my header is designed to accept children as arguments, so I include a header with a button like this:
[cmp/header
    ^{:key "left button!"} [cmp/button "left button!"]]
but if I capture and inspect the meta of cmp/button at that point, it's nil... shouldn't it be {:cmp :button} because of the metadata I put in the definition?

pesterhazy14:09:00

my advice is to use a regular key prop, rather than metadata, in reagent, much less confusing

idiomancy14:09:38

hrm.. yeah, in this case I was actually hoping to use it to communicate something about the component to its parent components. They inject a BEM style class into the component. But it's all good. I can use a lookup from a registry atom to accomplish the same thing

idiomancy15:09:47

basically, the reason I had ^{:cmp :button} on the definition is so that buttons that are children of headers will have a class automatically added to them :header__button. if that makes sense.

pesterhazy15:09:58

yeah I think there are simpler ways to accomplish this

idiomancy15:09:49

I don't suppose there's any way that one can look up the symbol from an object? so, is there any way I can go

(some-function (first [cmp/button "a button!"])

=> 'cmp/button

idiomancy15:09:39

probably not. that's macro territory.

idiomancy15:09:09

hurgh... I can't actually figure out the "simpler" way to do this. I don't know what to use as a lookup key for a global registry, because there's nothing on the object that references its component. It's like I need to attach some kind of data that describes the object at a meta level :((

samedhi15:09:13

I have a clojure macro above that is called from clojurescript code. When the macro is pulled in clojurescript it is in "clojure" mode and the wrong test library gets pulled for clojurescript (`clojure.test` instead of cljs.test). Wondering how I can get a cljc macro that knows it is being pulled for clojurescript purposes so can pull the correct testing library.

Ramzi15:09:43

I'm trying to get data from an ajax call and populate a table.

Ramzi15:09:02

I am doing an on change.

Ramzi15:09:21

But I have to put my HTML with traditional < > tags rather than the new hiccup tags?

javi15:09:22

Hi guys, I am exploring extending the reader and writer. Extending the reader with tagged literals is simple enough,

(ns scratch
  (:require [cljs.reader :as reader]))

(def ^:private reader-extensions {'atom atom})

(defn read-string
  "Read a config from a string of edn. Refs may be denotied by tagging keywords
   with #ig/ref."
  ([s]
   (read-string {:eof nil} s))
  ([opts s]
   (let [readers (merge reader-extensions (:readers opts {}))]
     (reader/read-string (assoc opts :readers readers) s))))

(read-string "{:p #atom 1}")

;;=> {:p #object[cljs.core.Atom {:val 1}]}

Any pointers for docs, resources to learn how to extend the printer with custom serializers? Thanks!

gon15:09:08

@its.ramzi hiccup tags are fine!

thheller15:09:30

@fj.abanses consider using transit-cljs instead. extending the printer can only be done globally otherwise

Ramzi15:09:28

@gon: so, when I do this it works: (defn make-table-from-string [n] (for [k n] (str "<h2> " k "</h2>") ) ) But when I do this, (defn make-table-from-string [n] (for [k n] (str [:h2 k ]) ) ) I get back: ("[:h2 \"0\"]" "[:h2 \"{\"]" "[:h2 \":\"]" "[:h2 \"i\"]" "[:h2 \"d\"]"

exit215:09:27

Any recommendations on debugging closure compiler :optimizations :advanced logs? I’m getting some errors in the javascript console that are preventing my app from loading, but its pretty much impossible to figure out what is going on.

john15:09:25

@fj.abanses If you make a custom deftype you can just define how the thing is printed and stringified right there.

Ramzi15:09:37

Even without the str in the second code block, I still get the [:h2 printed out

john15:09:59

And you can put as much info in there as necessary to rehydrate the object on the other side

👍 4
thheller15:09:47

@njj compile with :pseudo-names true

👍 4
exit216:09:47

Thanks for this! I’m able to glean a little bit more 🙂

pesterhazy15:09:48

@njj, - read https://clojurescript.org/guides/externs - turn on infer-externs - turn on pseudo-names (temporarily) - turn on warn-on-infer - study the warnings

👍 4
pesterhazy15:09:58

usually fixing the problem is a matter of infer-externs plus adding ^js in the right places

exit217:09:34

Does ^js differ from #js?

pesterhazy17:09:48

Yes, the two are unrelated

javi15:09:00

thanks! @john makes sense.

john15:09:10

np. you can also get fancy with it and reshape the printing of existing objects, as they flow through the system (using specify). Even numbers. I just did that to play with a custom #float reader that always prints as 0.0 instead of taking the js route and truncating trailing zeros and coercing to ints.

john15:09:31

So, just do the specify in the reader function for #float, so that it prints the same (with a #float) but also as an actual float.

javi15:09:33

thanks @john for the pointer 🙂 looking into it.

Ramzi15:09:47

john, why would my h2's render as [:h2 rather than as <h2> ?

john16:09:31

np. They specify thing is so you don't have to make a new deftype if you don't want to, just alter semantics of existing types flowing through

john16:09:29

@its.ramzi sounds like the hiccup forms must not be going through a hiccup interpreter. Maybe the hiccup is getting stringified or maybe your bypassing that interpretation somewhere

👍 4
Ramzi16:09:02

@john i do have (str all over the place, but that's because stuff worked with it and not without it.

john17:09:42

@its.ramzi keep experimenting! 🙂

Ramzi17:09:24

@john why would I be getting two alerts? When I do (for [k n]). The first alert has all the data in it, and the second alert has nil.

henrik17:09:38

@its.ramzi you're turning the hiccup tags into strings by placing them inside str.

henrik17:09:43

Move to [:h2 (str k)]

Ramzi17:09:52

Henrik, now I'm trying to get a Slickgrid on the page. I think I imported the dependent js files correctly, but I'm having a hard time actually rendering the grid.

john17:09:32

@its.ramzi you can "drill in" to nested objects with extra for bindings, like: (take 10 (for [x (cycle [[[0 1 2] [3 4 5]]]) y x] y)) #_=> ([0 1 2] [3 4 5] [0 1 2] [3 4 5] [0 1 2] [3 4 5] [0 1 2] [3 4 5] [0 1 2] [3 4 5])

john17:09:58

see, the y get's the next object in x

Ramzi17:09:09

thats too advanced for me right now

john17:09:07

give it time 🙂

Ramzi17:09:46

Something is wrong here

Ramzi17:09:49

(defn change-dom [content] (-> js/document (.getElementById "some-div") (.-innerHTML) (set! (-> js/document (.getElementById "some-div") (.-value) [:h2 (str make-table-from-string content)])))))

Ramzi18:09:05

Because I cant wrap my head around the -> operator

john18:09:01

You can't set hiccup forms on html nodes directly. They must go through a hiccup interpreter first.

Ramzi18:09:21

So I have to use <> brackets right

Ramzi18:09:43

that seems really lame

john18:09:49

Are you trying to take the contents of some-div and put them back into some-div?

Ramzi18:09:14

im trying to take the contents of content and put them in some-div

john18:09:19

I think it's something like (-> js/document (.getElementById "some-div") .-innerHTML (set! "content"))

john18:09:41

Don't quote me on that though. Gotta try it yourself

Ramzi18:09:44

maybe we can ignore this problem if I can get Slickgrid working

john18:09:03

The world's your oyster. Gotta run!

Ramzi18:09:14

View page source here: http://6pac.github.io/SlickGrid/examples/example-header-row.html How hard would it be to implement that in Clojurescript

rplevy18:09:25

Has anyone come across a problem with lein-cljsbuild always running one particular build no matter what build argument is passed ie you run lein cljsbuild once deploy and it proceeds to inform you Compiling build dev?

rplevy18:09:09

I'm trying to retrace what might have caused this, because it was previously working

rplevy18:09:06

I have now found that oddly the cause of this behavior is having added "env/dev/clj" to source-paths in my dev profile. When I either remove that, or run cljsbuild under a different with-profile, cljsbuild behaves correctly