Is there some way to turn clojurescript into javascript?

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

@anonypicard For shadow-cljs

shadow-cljs release your-app

@henrik thanks

@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

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

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

it'll still use the version installed in your project

I had no idea, thanks!

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.hartikainen I personally currently use node-sass via the CLI https://github.com/sass/node-sass#command-line-interface

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

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

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

there is also lein-sass

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.

https://shadow-cljs.github.io/docs/UsersGuide.html#clj-run same way works in lein run

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

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

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?

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

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?

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

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

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

I guess I’ll need to refactor it

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

(defn ^{:cmp :button} button [name]
  ...)

[cmp/header
    ^{:key "left button!"} [cmp/button "left button!"]]

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

see https://presumably.de/reagent-mysteries-part-1-vectors-and-sequences.html

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

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.

yeah I think there are simpler ways to accomplish this

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

probably not. that's macro territory.

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 :((

https://gist.github.com/samedhi/84a66d3c5a16d6a5e5381179b745e8b8

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.

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

I am doing an on change.

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

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}]}

@its.ramzi hiccup tags are fine!

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

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

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.

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

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

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

@njj compile with :pseudo-names true

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

also check these two PRs: https://github.com/pesterhazy/cljs-spa-example/pull/9/files and https://github.com/pesterhazy/cljs-spa-example/pull/10

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

thanks! @john makes sense.

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.

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.

thanks @john for the pointer 🙂 looking into it.

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

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

@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

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

@its.ramzi keep experimenting! 🙂

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

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

Move to [:h2 (str k)]

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.

@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])

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

thats too advanced for me right now

give it time 🙂

Something is wrong here

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

Because I cant wrap my head around the -> operator

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

So I have to use <> brackets right

that seems really lame

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

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

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

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

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

The world's your oyster. Gotta run!

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

See ya

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?

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

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