Fork me on GitHub
#clojurescript
<
2019-12-11
>
deas07:12:51

I understand ClojureScript does not have a good css story yet, and we will have to make a tradeoff. I just like to be aware of it in advance, so ... Do people building reagent based apps and choosing tachyons or tailwind for css sacrifice css purging and autocomplete/intellisense ?

p-himik07:12:29

Yes. At least, with Cursive. Maybe other editors try to determine if you use Hiccup and autocomplete it, I don't know. A small remedy - if you start using keywords for classes, soon you will have autocompletions. The only issue is that it's not context-dependent, these keywords will be offered in autocompletion everywhere.

👍 1
deas08:12:56

Using cursive indeed. Thanks for the keyword hint!

p-himik08:12:32

Reagent now supports passing vectors of keywords as classes, so that helps.

athomasoriginal00:12:55

@U06FLL69W This is old, but what do you have in mind when you say > I understand ClojureScript does not have a good css story yet

deas08:12:07

One more thing wrt to tailwind/tachyons: Assuming you aim at bringing in components based on frameworks like bootstrap (re-com), bulma, foundation or the like. Does it appear reasonable to polyfill/monkey patch with tailwind/tachyons or is one better off adding those frameworks native css to the mix?

p-himik08:12:16

Can't talk for everyone, but I would not want multiple CSS libraries in my project, unless they're all well focused on different things and their names are really well separated. And I wouldn't want to polyfill/monkeypatch anything either - it's a lot of work that can never bring robust results that don't break with even a minor update. I prefer to have only one CSS library for a particular project. If I go with re-com that would be bootstrap. But I go with, say, Material UI, I could bring any CSS library because Material UI uses CSS-in-JS, so there wouldn't be any conflicts. Although I would still use just its CSS-in-JS, without any libraries.

👍 1
deas08:12:09

Flexibility matters a lot for us, and I would just as well hate it to mix multiple css solutions. I would only bring something else in if the component is really valuable and rewriting it not reasonable. With regards to polyfilling, I'd never aim at polyfilling a whole framework. Just the bare minimum needed. At this time, we are just looking at the bootstrap modal dialog, but it may be a little more in the future.

p-himik08:12:01

Often you can just extract only the required stuff into your project. Just make sure to check if the license allows it.

deas08:12:51

This is especially true for bootstrap. In fact this is what we did for the modal dialog. Needed some manual tweaking, but roughly 100 LOCs footprint was not all that bad.

henrik09:12:06

Am I correct in reading that to modify/override in Tailwind, you need to dig into the original JS source?

p-himik14:12:12

As far as I can tell, it can be used as a regular CSS library. Meaning, you can just follow the CSS specificity rules to override anything.

👍 1
rgm21:12:17

Depends what you're up to. If you want new tailwind directives they're just straight-up CSS you add, and PostCSS takes care of the bundling: https://tailwindcss.com/docs/adding-new-utilities#using-css

rgm21:12:28

If you want to add new colours, change font families, etc. then you'll want to set up a tailwind config file (which is more or less a big JS object with known keys) https://tailwindcss.com/docs/configuration

rgm21:12:00

(different breakpoints would be in the config as well).

borkdude13:12:01

if require/load-fn in self-hosted CLJS is async, does this mean that every indivual expression is evaluated in an async fashion after the first require expression?

wtfishappening13:12:45

Hey guys, im new to clojure and i want to build an app that uses react-native + clojurescript. I also want to use native modules that supports text-to-speech and mqtt. Wich is the best template to use?

Jakub Zika13:12:14

Hi everybody, I have got Luminus app with CLJ and CLJS. I have got one problems using LEIN: 1. CLJS works only when :output-dir is set in profile.clj. This generates js/app.js which is fine but it also generates js/app/out and this folder contains folder with my core.cljs file. Is it possible to not include this file? I dont wanna users to see my clojurescript code inside their browser console. Thank you + Please reply in thread.

Pavel KlavĂ­k14:12:46

Isn't this just a problem when building in development mode? If you release it, all js should be bundled in app.js.

Jakub Zika14:12:43

Hi Pavel (Ahoj Pavle), when i do lein uberjar the result is same. This is my project.clj

Jakub Zika14:12:43

(defproject xbimonitor "0.1.0-SNAPSHOT"

  :description "FIXME: write description"
  :url ""

  :dependencies [[buddy "2.0.0"]
                 [ch.qos.logback/logback-classic "1.2.3"]
                 [com.google.protobuf/protobuf-java "3.6.1"]
                 [cheshire "5.8.1"]
                 [clojure.java-time "0.3.2"]
                 [cprop "0.1.14"]
                 [expound "0.7.2"]
                 [funcool/struct "1.4.0"]
                 [luminus-jetty "0.1.7"]
                 [luminus-transit "0.1.1"]
                 [luminus/ring-ttl-session "0.3.3"]
                 [markdown-clj "1.10.0"]
                 [metosin/muuntaja "0.6.4"]
                 [metosin/reitit "0.3.9"]
                 [metosin/ring-http-response "0.9.1"]
                 [mount "0.1.16"]
                 [nrepl "0.6.0"]
                 [org.clojure/clojure "1.10.1"]
                 [org.clojure/tools.cli "0.4.2"]
                 [org.clojure/tools.logging "0.5.0"]
                 [org.webjars.npm/bulma "0.7.5"]
                 [org.webjars.npm/material-icons "0.3.0"]
                 [org.webjars/webjars-locator "0.36"]
                 [ring-webjars "0.2.0"]
                 [ring/ring-core "1.7.1"]
                 [ring/ring-defaults "0.3.2"]
                 [selmer "1.12.14"]
                 [clj-time "0.15.2"]
                 [org.postgresql/postgresql "42.2.1"]
                 [amazonica "0.3.146"]
                 [org.clojure/java.jdbc "0.7.5"]
                 [reagent "0.8.1"]
                 [cljs-ajax "0.8.0"]
                 [org.immutant/web "2.1.10"]
                 [org.immutant/caching "2.1.10"]
                 [org.immutant/messaging "2.1.10"]
                 [org.immutant/scheduling "2.1.10"]
                 [org.immutant/transactions "2.1.10"]
                 [org.clojure/clojurescript "1.10.238" :scope "provided"]
                 [funcool/promesa "3.0.0"]
                 [clj-http "3.10.0"]
                 [org.clojars.frozenlock/reagent-table "0.1.5"]
                 [stuarth/clj-oauth2 "0.3.2"]
                 [clj-commons/secretary "1.2.4"]
                 ]

  :min-lein-version "2.0.0"

  :source-paths ["src/clj" "src/cljs"]
  :test-paths ["test/clj"]
  :resource-paths ["resources" "target/cljsbuild"]
  :target-path "target/%s/"
  :main ^:skip-aot xbimonitor.core

  :plugins [[lein-immutant "2.1.0"]
            [lein-cljsbuild "1.1.7"]]

  :clean-targets
  ^{:protect false}
  [:target-path
   [:cljsbuild :builds :app :compiler :output-dir]
   [:cljsbuild :builds :app :compiler :output-to]]

  ;:hooks [leiningen.cljsbuild]

  :profiles
  {:uberjar {:omit-source true                              ;;najdi zavorkhy7
              :prep-tasks ["compile" ["cljsbuild" "once" "min"]]
              :cljsbuild{:builds
                         {:min
                          {:source-paths ["src/cljs" "env/prod/cljs"]
                           :compiler
                                         {                  ;:main "xbimonitor.core"
                                          :output-dir "target/cljsbuild/public/js"
                                          :output-to "target/cljsbuild/public/js/app.js"
                                          :source-map "target/cljsbuild/public/js/app.js.map"
                                          :optimizations :whitespace
                                          :pretty-print false
                                          infer-externs true
                                          :closure-warnings
                                          {:externs-validation :off :non-standard-jsdoc :off}}}}}
              :aot :all
              :uberjar-name "xbimonitor.jar"
              :source-paths ["env/prod/clj"]
              :resource-paths ["env/prod/resources"]}

   :dev           [:project/dev :profiles/dev]
   :test          [:project/dev :project/test :profiles/test]

   :project/dev  {:jvm-opts ["-Dconf=dev-config.edn"]
                  :dependencies [[pjstadig/humane-test-output "0.9.0"]
                                 [prone "2019-07-08"]
                                 [ring/ring-devel "1.7.1"]
                                 [ring/ring-mock "0.4.0"]]
                  :cljsbuild{:builds
                                  {:app
                                   {:source-paths ["src/cljs" "env/dev/cljs"]
                                    :compiler
                                                  {:main "xbimonitor.core"
                                                   :asset-path "/js/out"
                                                   :output-to "target/cljsbuild/public/js/app.js"
                                                   :output-dir "target/cljsbuild/public/js/out"
                                                   :source-map true
                                                   :optimizations :none
                                                   :pretty-print true}}}}
                  :plugins      [[com.jakemccrary/lein-test-refresh "0.24.1"]]

                  :source-paths ["env/dev/clj"]
                  :resource-paths ["env/dev/resources"]
                  :repl-options {:init-ns user}
                  :injections [(require 'pjstadig.humane-test-output)
                               (pjstadig.humane-test-output/activate!)]}
   :project/test {:jvm-opts ["-Dconf=test-config.edn"]
                  :resource-paths ["env/test/resources"]}
   :profiles/dev {}
   :profiles/test {}
   :user {:plugins [[lein-classpath-jar "0.1.0"]
                    [venantius/yagni "0.1.7"]
                    [lein-cljfmt "0.6.4"]
                    [lein-kibit "0.1.7"]]}})

Pavel KlavĂ­k15:12:57

hmm, no idea, I am using Shadow-cljs which makes everything much simpler, so I would recommend to switch to it

Pavel KlavĂ­k15:12:29

maybe you need to clean the directory, to make uberjar not pick dev files

Pavel KlavĂ­k15:12:39

maybe adding clean as prep-task

Jakub Zika09:12:02

I wanted to start with basic conf so i appreciate what Shadow-cljs does. I will try to correct this one and go with Shadow-cljs later. Thank you Pavel

Carsten Heisterkamp16:12:41

Hi, I guess a beginners question. I am trying to use the quil http://quil.info/ library for clojurescript and followed the installation for clojurescript and the tutorial but get an error when I try to use the live reload.

(use 'my-art.core :reload-all true)
core__init.class and core.clj can´t be found on classpath. I ried to fix it with lein deps but had no luck. Any help appreciated!

didibus17:12:40

It's not supposed to be :reload-all true

didibus17:12:46

Just :reload-all

didibus17:12:55

(use 'my-art.core :reload-all)

didibus17:12:45

Also, that error would mean that Clojure itself can't be found on the classpath

didibus17:12:53

Do you have a dependency on Clojure?

didibus17:12:16

Also, since you mention ClojureScript. Live reload in cljs is more complicated. It requires figwheel or shadow-cljs to work. Do you have any of them setup?

didibus17:12:49

Maybe copy/paste to us your project.clj ?

Carsten Heisterkamp18:12:24

Thanks, Ill try that. I really just installed it the way as described on the page and it has quil.core and quil.middleware as dependency. The reload-all is from the tutorial https://github.com/quil/quil/wiki/Installing

Carsten Heisterkamp18:12:06

I am using vscode instead of lighttable and I would like to use the live reload. I am usually using clojure/Leiningen/cider/Calva/VSCode

Carsten Heisterkamp18:12:22

I overlooked that the mentioned tutorial is only clojure not clojurescript...

mauricio.szabo21:12:24

Hi, does anyone have any idea on how to use "template strings" from JS in ClojureScript? I'm migrating a codebase that uses this library: https://www.styled-components.com/

mauricio.szabo21:12:07

But I can't find a way to convert even the first example from JS to CLJS:

import styled from 'styled-components'
const Button = styled.button
``

mruzekw21:12:53

In the end template strings are just functions, so my guess is you could figure out the function-version API and use that

mruzekw21:12:47

So for instance:

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)

mruzekw21:12:21

It will interpose the params between the strings.

mruzekw21:12:38

That said there might be a cljs lib out there to help smooth over interop with styled-components

mruzekw21:12:23

Here is one, though it defines every style in terms of EDN (in typical clojure fashion), so it skirts the whole issue of using tag template literals altogether https://github.com/dvingo/cljs-styled-components

mauricio.szabo21:12:48

Yes, I've tried this approach but got the error: #object[TypeError TypeError: Cannot convert a Symbol value to a string] I don't know if this is an error on my code, or is some "styled component magic" that I'm not aware...

p-himik21:12:53

Can you show some code?

mauricio.szabo14:12:32

Yes, but first let me see if I'm doing something really wrong (because I'm probably am 😄)

mauricio.szabo20:12:53

Indeed, it was a problem from my part. But also, for some reason, I wasn't able to make it work with current ClojureScript code (both if I import a "styled component" from a JS file, or if I define one in my current code) What I ended up doing was to use the cljs-styled-components, and that worked fine

👍 1
mruzekw21:12:47

Hmm I honestly can’t say for sure. I doubt CLJS uses symbols under the hood given the default compile lang is ES3. But may be there’s something off with how the lib uses SC.

lilactown22:12:27

@mauricio.szabo @mruzekw I typically see errors about Symbols in CLJS when trying to print React Elements

mauricio.szabo22:12:31

Makes sense. It probably what's happening with me, I'm pretty printing some code...

lilactown22:12:48

e.g. evaluating a function that returns them at the REPL, or calling prn

lilactown22:12:40

it’s because Symbol cannot be implicitly cast to a string, which is how CLJS tries to print them