Fork me on GitHub
#clojurescript
<
2020-04-21
>
kimim01:04:26

when invoke lein figwheel, get this error:

kimim01:04:09

Figwheel: Cutting some fruit, just a sec ... Figwheel: Validating the configuration found in project.clj java.lang.Exception: Unable to resolve spec: :figwheel-sidecar.schemas.config/cljs-build-fn

kimim01:04:23

Can anyone help? Thanks.

Nassin04:04:20

Wouldn't clojurescript benefit from swapping closure modules for es6 modules and using others tools for dead code elimination/minifying/bundling? this would solve the "advanced compilation problem" when using third party libraries no?

roman01la11:04:55

Closure is compatible with ES6 modules and Closure library is moving to ES6 modules as well, afaik. But being able to DCE code as good as Closure does this is not a trivial task for other optimizing compilers.

Shako Farhad11:04:46

Anyone know how to make the edn/reader read javascript objects? I have some animated values from react native that I would like to read correctly.

Shako Farhad11:04:55

Thanks! I will look into it!

Shako Farhad11:04:05

So I will have to do something like this (-> #object[AnimatedValue [object Object]] (->clj) (pr-str) (edn/read-string) (-> js)) Will this work? 😮

roman01la11:04:23

no, why? what are you trying to achieve with this?

Shako Farhad12:04:51

I am trying to save my in app re-frame DB which contains an Animated Value to the async storage by first making it into a string and then reading the string after getting it 😮

Shako Farhad12:04:16

But the edn/read-string doesn't recognize the js object.

Shako Farhad12:04:40

Worst case scenario, I will just not save any animation values in the db and just find a different way of handling animations (r/atoms) for example 🙂

roman01la12:04:11

I'd say you should store edn data in the db, read values from animated value and out them there.

Shako Farhad12:04:36

What do you mean out them there? My primary concern is managing the state of animations. :x

Shako Farhad12:04:13

While app is running is fine, but starting app in a certain state means that animations need to be coordinated too.

Shako Farhad12:04:09

But how do you read the value from an animated value object? 😮

Spaceman14:04:15

What are some good clojure script frameworks for css?

Spaceman14:04:51

That speed up creating and debugging css stylesheets?

fricze14:04:23

how would you like to debug CSS?

trollface 4
Spaceman14:04:43

In the best way possible

Spaceman14:04:09

Best=fastest

Derek Passen14:04:16

I don’t think you’re likely to get a single answer

Spaceman14:04:18

I can do a breadth first search of all the answers myself

fricze14:04:59

the problem is I have no idea what you’re asking for, and I might not be the only one

fricze14:04:17

what do you mean by “debug CSS”?

fricze14:04:57

are you asking for something like https://github.com/clj-commons/cljss ?

Spaceman14:04:10

That I want the intended result on a webpage, and when I don’t get it, there needs to be a way to find out why

roman01la15:04:21

You'll have to formally specify whole CSS so it can deduct what's wrong. even then things depend on browser's implementation, CSS is a wild west

Spaceman14:04:42

I admit it’s a vaguely specified question

fricze14:04:02

oh… that’s interesting idea. I think in this situation you just need to read your CSS and use Developer Tools of the browser you’re using

fricze14:04:16

I doubt ClojureScript will help you much

Spaceman14:04:32

And secondly a way to define, configure, and reuse stuff programmatically

lukasz14:04:48

best way to debug css is border: 1px solid red - It's been a part of my toolbox since ~2007

😀 20
😂 8
12
Shako Farhad14:04:30

If you want to have a nice and easy way of working with css in clojurescript I recommend https://github.com/Jarzka/stylefy

Shako Farhad14:04:01

You can define hover effects, before, after, selectors etc etc in clojruescript.

Spaceman14:04:33

@shakof91 what are its pros and cons compared with garden?

Vishal Gautam16:04:14

stylefy is designed to be used in SPA applications along with Reagent. stylefy uses Garden in the background to do most of its CSS conversions.
Its written on top of Garden!

Shako Farhad14:04:38

What I liked about it is that you can define most as clojure maps

Shako Farhad14:04:43

And I didn't look much into Garden but what I wanted was to be able to define hover, before, after, active css states in cljs. Stylefy made that easy 😮

Spaceman14:04:31

Anyone who has tried both garden and stylefy? What are the pros and cons of each?

Vishal Gautam16:04:42

Why not use use inline styles. I mean everything in cljs, including style is data

Vishal Gautam16:04:10

[:div {:style {:font-size 10}} "Some Text"]

Vishal Gautam16:04:18

Simple and no library required

Derek Passen17:04:37

Inline styles do not support media queries, for one

Vishal Gautam17:04:37

@UPEKQ7589 that is true. for simple cases its an excellent tool. but layout is an issue

Vishal Gautam16:04:59

Has anyone used cypress test runner with shadow-cljs for end to end ui testing?

rgm17:04:46

(re-upping from #kaocha …) I’m trying to implement my first ever deftype for physical quantities like `1.0 m**2` (it’s more or less a tuple and I’m experimenting with trying to get really fast dispatch for eg. adding like quantities together). I’m a bit confused about what function kaocha and some other parts of my system is using to convert the deftype to strings for test reporting. In the initial deftype I’ve implemented toString of Object. It seems to be picking that up in clj but not in cljs, making for hard-to-interpret diffs in this deliberate test breakage:

FAIL in cljs:nzn.esc-targets-test/air-changes-above-6999-hdd-18 (cljs/test.js:424)
Expected:
  #object[opengb.dram.core.Quantity]
Actual:
  #object[opengb.dram.core.Quantity]
Diff:
  - #object[opengb.dram.core.Quantity]
  + #object[opengb.dram.core.Quantity]

FAIL in nzn.esc-targets-test/air-changes-above-6999-hdd-18 (esc_targets_test.cljc:24)
Expected:
  #<[email protected] <2.0 ACH>>
Actual:
  -#<[email protected] <2.0 ACH>>
  +#<[email protected] <3.0 ACH>>
8 tests, 24 assertions, 2 failures.
I scanned through cljs core looking for other protocols (eg. I had to flip to `IEquiv` for equality since equals seems to also be clj only), but nothing hopped out at me, and I think print-method and print-dup are clj / Java related.

noisesmith18:04:32

AFAIK print-method and print-dup do the same thing in cljs that they do in clj - it's a multimethod that implements an alternate kind of printing behavior

rgm18:04:54

weird, ok. I had the impression it wasn’t implemented but I’ll give that a shot.

noisesmith18:04:40

I was wrong - this seems to be the answer https://stackoverflow.com/a/42917425

rgm18:04:37

oh, thanks. I must have scanned past that when I was looking through cljs protocols.

Spaceman18:04:54

is test-driven development in building front-ends a meaningful strategy?

noisesmith18:04:15

yes, and there are tools for it too

noisesmith18:04:50

there's also devcards for a hybrid repl driven / test driven approach (more "old school lisp" style) https://github.com/bhauman/devcards

noisesmith18:04:48

cool - I hadn't seen that one (I'm just getting back into cljs...)

👍 4
cljs 4
Spaceman19:04:14

@adam622 my setup didn't work: (ns app.workspaces.main (:require [nubank.workspaces.core :as ws] [app.workspaces.cards :as cards] ; require your cards namespaces here )) (defonce init (ws/mount)) and (ns myapp.workspaces.cards (:require [nubank.workspaces.core :as ws] [nubank.workspaces.card-types.react :as ct.react])) ; simple function to create react elemnents (defn element [name props & children] (apply js/React.createElement name (clj->js props) children)) (ws/defcard hello-card (ct.react/react-card (element "div" {} "Hello World")))

Spaceman19:04:18

gives a blank apge

Spaceman19:04:47

it says build completed, but the build isn't where it should be? Can't locate it?

Spaceman19:04:32

sorry actually it's there

👍 4
Spaceman19:04:46

but it's not found in the browser

adamfeldman19:04:48

Just in case, there’s #workspaces

adamfeldman19:04:15

I’ve not setup workspaces myself, have previously used it in a template or something with Fulcro

Spaceman19:04:25

but :output-dir "resources/public/js/workspaces" :asset-path "/js/workspaces"

Spaceman19:04:31

the files are in the output-dir

Spaceman19:04:21

what template did you use?

thheller19:04:52

whats the http config serving that? I mean which http server do you use?

Spaceman19:04:00

my backend is running on localhost:3000. Is that what you mean?

Spaceman19:04:22

Changing the workspace's port to 3000 didn't solve the problem. It just landed on the actual app

lilactown19:04:59

why do you use the port 3689?

Spaceman20:04:16

it was the default. using 3000 doesn't work either. That's where the actual app is running and that shows up instead of workspaces

Spaceman20:04:43

so what's the fix?

Spaceman20:04:52

I'd like a fix

thheller20:04:23

we can't tell you. only you know how you configured your ports/paths

thheller20:04:53

you need one server serving the files. so you can use :dev-http {3001 "resources/public"}. that will have http://localhost:3001/js/workspaces/main.js

Spaceman20:04:57

where does the dev-http {3001 "resources/public"} go and how would I run another server on a separate port without creating a brand new lein project?

Spaceman20:04:31

After managing to run workspaces, I find that new defcard definitions don't show up. Only the default hello-world card shows. And the new defintions are copied straight from the docs

Spaceman21:04:55

Anyone who has tried both garden and stylefy? What are the pros and cons of each?

rgm22:04:37

haven’t tried garden directly, but I have used stylefy a ton. Generally I really liked it, but as an approach I’ve found css-in-js somewhat of a problem since (a) it really limits the designer pool, and (b) I find it hard to maintain any design consistency in my spacing, colours, etc. Having all of CSS available in the moment is just too much freedom for me. I’m currently experimenting with using tailwindcss via this little wrapper I’ve made up https://github.com/rgm/tailwind-cljs

rgm22:04:22

(In addition, tailwind has a reasonably convincing idea on how you factor out components as design proceeds, which fits well with my working style https://tailwindcss.com/docs/extracting-components)

Spaceman22:04:56

Thanks, tailwindcss looks cool. What do you mean it limits designer pool, and why is it hard to maintain design consistency with stylefy?

rgm22:04:07

I’ve found css-in-js means I need a designer who’s either competent in clojurescript or for whom I don’t mind being the do-the-typing robot. I tend to do a lot of contract, though, so I’ll hit people of every CSS philosophy, eg. BEM or … whatever. I haven’t had much luck getting pull requests off them; mostly I get photoshop images. This could be true in general React too; I suspect it’s more tenable as an approach if you work on staff with the same designer a lot.

rgm22:04:39

and re: consistency, I found it tedious remembering whether I was doing 0.5rem or 0.66 or … and my general laziness meant things tended to drift around a lot. Tailwind and tachyons are more “quantized” and tend to push me to use more generally harmonious scales, since I can remember whether it was a .m-2 or an .m-3I was using.

rgm22:04:01

(to be clear, this isn’t stylefy’s fault).

rgm22:04:08

(it’s definitely on me).

rgm22:04:06

Anyway so far utility/functional CSS has been a pleasant compromise: I’ve come to loathe the always-somewhere-elseness of CSS, I think JSX has been a huge success in acknowledging that JS and HTML are usually so tightly coupled that it makes no sense to have a given component exist in 2 separate files and hiccup is a much, much better JSX. Since the CSS is also pretty coupled to structure it’s nice having it be alongside the HTML and CSS without things being a complete free-for-all.

Spaceman14:04:56

I haven't been able to use tailwind-cljs though. On the README.md there's a button example, but I don't see the hover red color and white text. I did install tailwind using npm. Am I missing a step?

rgm15:04:41

Ha, you’re the very first person to try it. I put together a deps/figwheel example https://github.com/rgm/tailwind-cljs/tree/master/examples/basic

rgm15:04:15

I guess one big thing is that you have to actually have the tailwind css referenced from your HTML, since really all tw does is slap together class names.

rgm15:04:36

Maybe stick this <link> in the head of the HTML host page? https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

rgm15:04:10

The CDN copy of the css file will be a lot larger than what postcss can make for you, but that’s for later, I guess.

Spaceman16:04:17

The correct way to install tailwind is using npm, which I have done, and that shouldn't need me to put the link tag right? It says incorporate tailwind in the build process. How do I do that?

rgm16:04:25

well, yeah, you’ll need to link either your build of the tailwind css, or the CDN version. Unlike stylefy or garden, tailwind isn’t directly styles; it’s just classes, so the classes need to be referenced in the page someplace.

Spaceman16:04:32

how to link the build of my tailwind css? So after npm install what do I do? i

Spaceman16:04:55

In any case, I tried that link too, but that I still don't see the hover red in the button

rgm16:04:34

maybe just clone the repo and try make dev in the examples/basic

rgm16:04:45

that ought to all be set up correctly.

Spaceman17:04:17

What steps did you follow to set up tailwind for your examples?

rgm17:04:44

not strictly necessary unless you want to either customize or minify the CSS.

rgm17:04:10

If you’re just kicking tires I’d go with the CDN version and ditch npm/postcss entirely.

Spaceman17:04:18

by CDN you mean the link tag right? That didn't work though.

rgm17:04:53

then I’m not really sure what’s going on. Can you style anything directly in your HTML (ie. not in hiccup, but in the host page directly)?

Spaceman17:04:54

At least that GitHub example didn't work

rgm17:04:52

in your host page, try <div class="text-red-500">IS THIS RED</div>, bypassing js entirely. If that doesn’t work, then somehow the CSS is missing entirely.

Spaceman17:04:53

Like, the on-click is working, but the hover doesn't show red: (defn MyButton [button-text] [:button (tw [:mx-3 :my-4 :font-bold] hover-colors color-transition short-duration {:on-click #(js/alert button-text)}) button-text])

rgm17:04:23

is it bold?

Spaceman17:04:04

okay, so that link tag actually works.

Spaceman17:04:16

But I want to install it the correct way

Spaceman17:04:43

and once I create the file postcss.config.js, where does this file go, in the public folder?

rgm17:04:46

that examples directory has a fair bit of my trial and error for getting it to work in it.

rgm17:04:12

postcss.config.js can go wherever, as long as you can invoke it. Take a look at the example Makefile.

rgm17:04:04

I put it at the top level for simplicity. It’s the eventual output that needs to be in /resources/public (or /target/public/ in figwheel dev builds).

Spaceman17:04:19

okay so I have PostCSS.config.js in my resources/public folder

Spaceman17:04:28

*postcss.config.js

rgm17:04:36

anything under /resources/public is usually fed out by the webserver as a static file, so I wouldn’t put it there.

Spaceman17:04:49

you mean it shouldn't be a static file? How do I incorporate it in the shadow-cljs build then?

rgm17:04:02

shadow? Oh, I have no idea.

rgm17:04:58

wait, no, postcss.config.js has nothing to do with shadow. It’s just telling postcss how to make a CSS file. Very little of this has anything specific to do with cljs.

Spaceman17:04:37

okay, so how does this postcss.config.js file work?

Spaceman17:04:39

I don't have a Makefile kind of setup in my project, so I don't know how to incorporate that in my project. I'm using a Luminus project template.

rgm17:04:54

there’s probably a way to set it up as a lein task but I don’t use lein much. You can just steal the line from the Makefile and put it in a shell script.

rgm17:04:07

then invoke that (somehow) in lein

rgm17:04:40

I guess I’d look at how Luminus uses SCSS

rgm17:04:14

should be similar; my recollection is that pretty much everything shells out to sassc so in principle it’s similar.

Spaceman18:04:09

what's the point of -c src/css?

rgm18:04:14

oh, good catch. I think that’s a leftover from a differently organized project. Removed.

Spaceman22:04:44

I have a workspace defcard:

Spaceman22:04:07

(ws/defcard filter (ct.react/react-card (r/as-element [ (fn [] [fetch-categories @(subscribe [:categories]) (let [categories @(subscribe [:categories])] categories ) ] ) ]) ) )

Spaceman22:04:25

But the @(subscribe [:categories]) part returns an error: Error: No protocol method IDeref.-deref defined for type undefined Although in the main code, the subscribe works.

Spaceman22:04:33

How to fix?

noisesmith22:04:00

what does (subscribe [:categories]) return?

noisesmith22:04:15

for @ to work it shoud return an atom

noisesmith22:04:26

also, FYI we don't normally put delimiters on their own line

Spaceman22:04:00

I get the error re-frame: no subscription handler registered for: :categories. Returning a nil subscription.

noisesmith22:04:46

so does this mean you need to make sure the code that registers a handler for :categories is loaded?

noisesmith22:04:04

or maybe you need to make a stub / test handler for :categories?

Spaceman22:04:07

It turned out that the cards file needed to require the subs. However, the http request that works in the regular app doesn't work with workspaces cards. Here's the error:

Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
So it's a cors error, and I follow the instruction and set the credentials to false:
{"Content-Type" "application/edn"
             "Access-Control-Allow-Headers" "Content-Type"
             "Access-Control-Allow-Origin" "*"
             "Access-Control-Request-Method" "GET, OPTIONS"
             "Access-Control-Allow-Credentials" false}
But still getting the same error. I admit this question is better asked in #ring or #clojure.

noisesmith22:04:57

what about stubbing the remote data with a hard coded edn or json payload in the workspace?

noisesmith22:04:24

since the purpose (I would think) is to test the logic of the UI / interface rather than the communication with the server

noisesmith22:04:49

also the kind of change needed in order to do that kind of stub is often an improvement

Spaceman22:04:56

Why is it an improvement?

noisesmith22:04:02

it separates concerns, instead of mixing server io with page display, you can have each in its own domain

Spaceman22:04:13

I can imagine such scenario in the future, but for me, right now, it would be easier if the http request worked instead

noisesmith22:04:38

is the workspace using the same server that your app does?

noisesmith22:04:55

eg. is the request cross-domain because it's using different ports?

noisesmith22:04:28

if so, it's probably less work to abstract the data fetch from the component logic

Spaceman22:04:27

I don't remember what the data looks like exactly, and shadow-cljs repl won't let me require http-cljs anymore, so can't make the request to see what it looks like.

noisesmith23:04:35

OK - do whatever makes sense, but CORS protection is something you should be using (it prevents some nasty hacks) and it makes hooking things up across servers more complex