Fork me on GitHub
#clojurescript
<
2019-12-05
>
indy11:12:07

Hey All, How do I use the Garden library to generate the CSS and then include it in my project? I understand (css [:h1 {:font-weight "bold"}]) will output the appropriate CSS string, but how do I create a CSS file from this and include it in my ClojureScript project? I'm using shadow-cljs as my build tool

p-himik11:12:24

If you generate CSS strings on the frontend, I think you have to explicitly create a <script> tag dynamically with the desired content and add it to the body. If you generate CSS strings on the backend, you can include them in your HTML, however you serve it. Or you can just cache it and serve as a CSS file.

p-himik11:12:33

shadow-cljs doesn't deal with CSS in any way.

Eamonn Sullivan12:12:48

I'm quite new at this, but bumped up against this recently. The way I solved it was just using plain scss files and have a yarn build:sass script in my package.json that runs something like: yarn sass --load-path node_modules/ sass/main.scss:resources/public/css/main.css Now, in the html file (resources/html, for me) I added the following line somewhere: {% style "/css/main.css" %} Et voila! I don't know about Garden, but presumably it has the equivalent of the sass command somewhere to generate the css. Hope that helps!

p-himik12:12:02

With Garden, the process would be similar iff you have static CSS. If you need to generate some particular CSS during the runtime, you cannot use such approach. All in all, depends on what OP needs, yeah.

indy12:12:32

Thanks a bunch for the input guys, will try to figure out something

celwell15:12:22

@UR71VR71S We're using lein-jsass and it's working well.

Eamonn Sullivan10:12:40

Oo, that does look good. Thanks @U0HJJF9A4!

restenb12:12:56

anybody familiar with promesa?

restenb12:12:25

i recently "upgraded" an old project using promesato it's newest version, but the awaitfunction seems to have been removed

restenb12:12:20

i have code like this (p/let [resp (p/await (send-http-request! ...))] (decode-response resp))that is no longer valid due to p/awaitmissing

Filipe Silva13:12:30

last time this topic came up (and promise usage comes up a fair bit), my take away is that yeah you can just go core-async but the initial macro to do it isn't very accessible to newcomers

restenb13:12:37

i just don't get why p/awaitwas removed

restenb13:12:26

i might as well take the time to rewrite the entire http API to use http-fx with re-frame instead, then these pain points are nicely abstracted away

Filipe Silva14:12:39

I remember someone mentioned it was removed from promesa because there were broken corner cases

Filipe Silva14:12:31

but I don't know the real reason, or have a link to the removal

Ramon Rios16:12:14

Does anyone here used schema before?

Ramon Rios16:12:15

I would like to create one for maps within a map

ec18:12:50

If you are going to use a react component lib with regent, reframe such as blueprintjs , does the constant interop with JS kill the perf and dev experience or converting between cljs and js is fast enough?

celwell18:12:22

I've being happily interop'ing with semantic-ui-react for about a year. In terms of dev experience, a lot of hiccup looking like:

[:> ui/Item {:on-click #(rf/dispatch [:b/nav-product-detail product-idstr])}
  [bc/c-product-logo logo]
  [:> ui/ItemContent
   [:> ui/ItemHeader {:class "shorten"}
    pname]
   [:> ui/ItemExtra {:class "product-tags shorten"}
    [bc/c-categories product]]]]

ec18:12:26

Looks ok, what about data side? Esp. if you have frequent(10hz?) json incoming you have to convert to clojure do sth type then back to json does that have too much overhead? Any numbers I could find?

celwell18:12:47

Many of my components are connected to graphql subscriptions over websockets from hasura passed through re-frame subs to update in realtime. Working well, but I don't have hard data.

ec18:12:42

thx I'll continue with cljs then

🙂 1
p-himik20:12:31

If you encounter performance problems while handling JSON data (or even before that), consider using https://github.com/mfikes/cljs-bean or https://github.com/binaryage/cljs-oops

🌟 1
👍 1
Andrew20:12:55

How can I import a json file in cljs?

p-himik21:12:11

If you want to just embed some static data that's available during compilation, I would just write a Clojure macro.

Andrew21:12:00

I’m very new to clojure. What would that look like, and what’s the advantage of doing it that way? I ended up just doing (def myJson (js/require "../path/to/my.json")) which seems to work just fine for loading it as a js object

p-himik21:12:46

Ah, so your platform is Node.js? At least to my knowledge, that's the only place where js/require works.

p-himik21:12:32

If so, using js/require is completely fine.

Andrew21:12:49

require is usable on almost all JS platforms these days. It isn’t implemented in the browsers but almost all js apps are built using bundlers these days which do support import/require and many other features which are compiled down to browser compatible code. In this case I’m using react-native.

p-himik21:12:21

To be honest, I don't know that much about ES5-style, ES6-style, CommonJS-style imports/requires. Although I would argue that a bundler is not a part of a platform. It can do whatever it wants. In your case, since it works just fine, I would say that using it is just fine as well.

Andrew22:12:55

Out of curiosity, what would using a macro look like? I don’t understand clojure macros well enough to understand why they would be useful for static data.

p-himik22:12:05

Macro expansion is done in Clojure, the expanded code is the ClojureScript code, that is then transpiled into JavaScript for the target platform. Suppose my target platform is browser. Ideally, I want to supply a single JS file that has all of the required information needed to for the app to start. Suppose, that JSON must be part of this information. I would then write a macro that looks something like this, I suppose (not tested):

(defmacro static-json [path]
  (core/list 'js* (slurp path)))
It would be used something like this:
(let [data (static-json "path/to/data.json")]
  (do-something-with data))
During the macro expansion phase, the (static-json ...) part would turn literally to what the JSON file contains. Because of the 'js* used in the macro, it would be treated as a JS statement so ClojureScript won't turn it into a ClojureScript map.

p-himik22:12:00

I've done something like this to turn e.g. a static SVG into a Hiccup data simply because I needed to manipulate it before displaying it.

Ryan Watkins20:12:22

Hey all, I'm having some issues with http libraries in cljs, for some reason I can't access a given endpoint no matter what I do

Ryan Watkins20:12:28

Usually it's a cors error

Ryan Watkins20:12:44

But setting a cors header that might fix it is forbidden

Ryan Watkins20:12:57

And when I access the endpoint from postman or Dev tools it works fine

Ryan Watkins20:12:01

Even with the same headers