Fork me on GitHub
#clojurescript
<
2020-04-11
>
ag04:04:30

does anyone know if weavejester/hiccup has something similar to re-agent’s [:<>]? I know it’s not a react lib (there’s no concept of fragments), but I have cases like this:

(def content
  [:div  ;; <- I am forced to wrap it in a div, otherwise hiccup complains
    [:li "one"]
    [:li "two"]
    [:li "three"]])

(html5 
  [:ul content])

ag05:04:26

I can of course do it this way:

(def content [[:li "one"] [:li "two"] [:li "three"]])

  (html5 [:ul (map identity content)])
But I don’t like it this way

dpsutton06:04:02

(require '[hiccup.compiler :as compiler])
(deftype Fragment [coll]
        compiler/HtmlRenderer
        (render-html [_]
          (compiler/render-element coll)))
(str (hiccup/html [:div (Fragment. [:ul [:li "one"] [:li "two"]])]))
"<div><ul><li>one</li><li>two</li></ul></div>"

👀 4
dpsutton06:04:17

and make a suitable function to hide the deftype constructor

dpsutton06:04:00

(defn <> [coll] (Fragment. coll))
#'user/<>
user> (str (hiccup/html [:div (<> [:ul [:li "one"] [:li "two"]])]))
"<div><ul><li>one</li><li>two</li></ul></div>"

dpsutton06:04:25

there are some nasty symbols you can use lol. (defn <:> [coll] (Fragment. coll))

😄 4
dpsutton06:04:12

or just a simple reify:

user> (page/html5
        [:div
         (reify compiler/HtmlRenderer
           (render-html [_]
             (compiler/render-html [:ul [:li "one"] [:li "two"]])))
         [:h3 "stuff"]])
"\n<html><div><ul><li>one</li><li>two</li></ul><h3>stuff</h3></div></html>"

ag19:04:44

Oh wow. This looks interesting. Thank you Dan!

4
Quentin Le Guennec10:04:31

I have an issue with figwheel-main, but #figwheel-main has considerably less users than this one. I am therefore reposting my question here: I am getting a lot of unwanted log information after I start my figwheel application. It seems to comes from the underlying figwheel http server. The log level is huge and I'm not interested in any of it. The origin namespace is `org.eclipse.jetty`

Jan K12:04:38

Configure your logger to ignore that namespace. For example with timbre you can use the :ns-blacklist option.

Quentin Le Guennec12:04:28

Hi, I am not using timbre, but I guess figwheel-main might use it. How do I configure it?

Jan K14:04:05

I think figwheel uses java.util.logging or something like that. There must be a way to configure whatever it is using, but I'm afraid I can't give any exact pointers right now.

Quentin Le Guennec14:04:41

Thanks a lot, I'll ask in the figwheel github page

kitallis18:04:51

in re-frame parlance, would an on-change event on an input that causes things to be drawn on a canvas on the page be best achieved by https://github.com/day8/re-frame/blob/master/docs/Effects.md?

kitallis18:04:09

on-change –> dispatch –> event –> effect –> draw?

p-himik18:04:41

Yes. Unless it's an input that's very tightly coupled with the canvas, and for a very good reason. Then I'd treat them as a single component.

dpsutton21:04:14

what does clojurescript development look like without figwheel or shadow? anyone have a representative repo somewhere? Wondering where compiler options and build is put. and repl environment look like

phronmophobic21:04:01

not sure exactly what you’re looking for. I’ve used lein cljsbuild https://github.com/emezeske/lein-cljsbuild before if you just want “refresh the page” development. repl support isn’t included. fwiw, I’ve also used figwheel sidecar for a programmatic interface to figwheel to do some fancier stuff, https://github.com/bhauman/lein-figwheel/tree/master/sidecar

phronmophobic21:04:32

something like:

(ra/start-figwheel!
 {:build-ids ["dev"]
  :all-builds
  [{:id "dev"
    :source-paths ["src"]
    :figwheel {:on-jsload "app.core/on-js-reload"}

    :compiler {:main 'app.core
               :asset-path "js/compiled/out"
               :output-to "resources/public/js/compiled/app.js"
               :output-dir "resources/public/js/compiled/out"
               :source-map-timestamp true}}]})

potetm23:04:45

It’s been a while since I worked on it, but I had a number of examples with different REPLs here: https://github.com/potetm/tire-iron/blob/master/src/dev/build/user.clj

dnolen22:04:14

@dpsutton if you're using ClojureScript directly you're probably using cljs.main you can supply build options in edn files

dnolen22:04:34

if you've used figwheel-main it's really not that different, figwheel-main is modeled on cljs.main

dnolen22:04:06

FWIW, for web I use figwheel-main because it just does a bunch of nice things that the standard browser REPL doesn't

dpsutton22:04:17

i'm looking at build.api and then throwing that into webpack. just learning all the raw tools so i understand how they can/should compose

dnolen22:04:32

for Node.js I don't use anything - cljs.main is sufficient

dnolen22:04:38

build.api is useful, but I rarely use it now cljs.main can do nearly all typical tasks, and deps.edn aliases can make typical commands quite short

dpsutton22:04:25

you don't use nrepl/piggieback i take it? static analysis in cursive and raw terminal there?

dnolen22:04:33

at some point I'd like to make the standard broswer REPL a bit more capable - but the existence of Figwheel just makes that a low priority - about the only time browser REPL gets worked on is if we're updating the docs so beginners and I see an area for improvement if you just want get the basic idea

dnolen22:04:00

I haven't used nrepl / piggieback for many, many years - no offense but I found that stuff to fragile and opaque many years ago

dpsutton22:04:08

i understand

dnolen22:04:34

cljs.main works just like clojure.main - stdio works pretty much everywhere

dnolen22:04:43

that + Emacs inf-clojure, and Cursive have worked great for me and when things go wrong there's nothing in between me and the failure

👍 4
dpsutton22:04:12

yes that aspect is very nice.

dnolen22:04:00

one thing that's not quite been very clear is that cljs.main has been extensible for a quite some time - there were a couple of issues but I just fixed most of those and they'll be in the next release

dnolen22:04:12

at some point I'd like to document that for would be tool builders

dnolen22:04:33

it's pretty easy to write a custom build tool in a couple of hundred lines and you can literally reuse all of cljs.main + your extensions

dnolen22:04:46

and end up with something that anybody that knows cljs.main can pick up very quickly.

dpsutton22:04:23

My hesistation has been towards the use of npm deps. And it sounds like that objection will be going away soon

Bardia Pourvakil23:04:31

Anyone know how to access HTML elements in cljs and set their inline style dynamically?

Bardia Pourvakil23:04:27

Trying to do something like this but in cljs

Bardia Pourvakil23:04:14

(.-style (first (array-seq (.getElementsByClassName js/document "vector-bar"))))

Bardia Pourvakil23:04:21

This is how I’m trying to get at it

Bardia Pourvakil23:04:26

But all I’m seeing is this as a response

Bardia Pourvakil23:04:47

#object[CSSStyleDeclaration [object CSSStyleDeclaration]]

Bardia Pourvakil23:04:12

Any way to change the CSS inside the style map through cljs js interop or am I stuck?

dnolen23:04:03

(set! (. el -style -backgroundColor) "red")