This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-04-21
Channels
- # babashka (16)
- # beginners (182)
- # calva (13)
- # chlorine-clover (43)
- # clj-kondo (17)
- # cljs-dev (14)
- # cljsrn (19)
- # clojure (97)
- # clojure-argentina (7)
- # clojure-dev (45)
- # clojure-europe (7)
- # clojure-germany (5)
- # clojure-nl (4)
- # clojure-portugal (4)
- # clojure-romania (5)
- # clojure-spec (46)
- # clojure-uk (21)
- # clojuredesign-podcast (2)
- # clojurescript (159)
- # conjure (28)
- # core-async (7)
- # cursive (13)
- # datomic (17)
- # defnpodcast (9)
- # duct (1)
- # fulcro (45)
- # graphql (6)
- # jobs (7)
- # jobs-discuss (1)
- # juxt (3)
- # kaocha (4)
- # leiningen (12)
- # malli (5)
- # observability (1)
- # off-topic (50)
- # pathom (15)
- # re-frame (16)
- # reitit (5)
- # remote-jobs (21)
- # ring (7)
- # shadow-cljs (166)
- # test-check (6)
- # tools-deps (27)
- # xtdb (2)
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
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?
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.
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.
@shakof91 Perhaps this can help you https://github.com/mfikes/cljs-bean
Thanks! I will look into it!
So I will have to do something like this (-> #object[AnimatedValue [object Object]] (->clj) (pr-str) (edn/read-string) (-> js)) Will this work? đŽ
no, why? what are you trying to achieve with this?
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 đŽ
But the edn/read-string doesn't recognize the js object.
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 đ
I'd say you should store edn data in the db, read values from animated value and out them there.
What do you mean out them there? My primary concern is managing the state of animations. :x
While app is running is fine, but starting app in a certain state means that animations need to be coordinated too.
But how do you read the value from an animated value object? đŽ
the problem is I have no idea what youâre asking for, and I might not be the only one
are you asking for something like https://github.com/clj-commons/cljss ?
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
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
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
best way to debug css is border: 1px solid red
- It's been a part of my toolbox since ~2007
If you want to have a nice and easy way of working with css in clojurescript I recommend https://github.com/Jarzka/stylefy
You can define hover effects, before, after, selectors etc etc in clojruescript.
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!What I liked about it is that you can define most as clojure maps
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 đŽ
Why not use use inline styles. I mean everything in cljs, including style is data
[:div {:style {:font-size 10}} "Some Text"]
Simple and no library required
@UPEKQ7589 that is true. for simple cases its an excellent tool. but layout is an issue
Has anyone used cypress test runner with shadow-cljs for end to end ui testing?
(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:
#<opengb.dram.core.Quantity@4198e66b <2.0 ACH>>
Actual:
-#<opengb.dram.core.Quantity@4198e66b <2.0 ACH>>
+#<opengb.dram.core.Quantity@446582b1 <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.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
I was wrong - this seems to be the answer https://stackoverflow.com/a/42917425
yes, and there are tools for it too
there's also devcards for a hybrid repl driven / test driven approach (more "old school lisp" style) https://github.com/bhauman/devcards
In a similar vein to devcards: https://github.com/nubank/workspaces
@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")))
Just in case, thereâs #workspaces
Iâve not setup workspaces myself, have previously used it in a template or something with Fulcro
but in the console it says 404 for http://localhost:3689/js/workspaces/main.js
Changing the workspace's port to 3000 didn't solve the problem. It just landed on the actual app
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
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
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?
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
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
(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)
Thanks, tailwindcss looks cool. What do you mean it limits designer pool, and why is it hard to maintain design consistency with stylefy?
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.
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-3
I was using.
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.
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?
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
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.
Maybe stick this <link> in the head of the HTML host page? https://tailwindcss.com/docs/installation#using-tailwind-via-cdn
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.
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?
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.
In any case, I tried that link too, but that I still don't see the hover red in the button
If youâre just kicking tires Iâd go with the CDN version and ditch npm/postcss entirely.
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)?
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.
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])
and once I create the file postcss.config.js, where does this file go, in the public folder?
that examples directory has a fair bit of my trial and error for getting it to work in it.
postcss.config.js can go wherever, as long as you can invoke it. Take a look at the example Makefile.
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).
anything under /resources/public is usually fed out by the webserver as a static file, so I wouldnât put it there.
you mean it shouldn't be a static file? How do I incorporate it in the shadow-cljs build then?
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.
it tells the postcss executable what to do https://github.com/rgm/tailwind-cljs/blob/master/examples/basic/Makefile#L10
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.
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.
should be similar; my recollection is that pretty much everything shells out to sassc
so in principle itâs similar.
oh, good catch. I think thatâs a leftover from a differently organized project. Removed.
(ws/defcard filter
(ct.react/react-card
(r/as-element
[
(fn []
[fetch-categories
@(subscribe [:categories])
(let [categories @(subscribe [:categories])]
categories
)
]
)
])
)
)
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.
what does (subscribe [:categories])
return?
for @
to work it shoud return an atom
also, FYI we don't normally put delimiters on their own line
I get the error re-frame: no subscription handler registered for: :categories. Returning a nil subscription.
so does this mean you need to make sure the code that registers a handler for :categories
is loaded?
or maybe you need to make a stub / test handler for :categories
?
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.what about stubbing the remote data with a hard coded edn or json payload in the workspace?
since the purpose (I would think) is to test the logic of the UI / interface rather than the communication with the server
also the kind of change needed in order to do that kind of stub is often an improvement
it separates concerns, instead of mixing server io with page display, you can have each in its own domain
I can imagine such scenario in the future, but for me, right now, it would be easier if the http request worked instead
is the workspace using the same server that your app does?
eg. is the request cross-domain because it's using different ports?
if so, it's probably less work to abstract the data fetch from the component logic
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.
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