This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-31
Channels
- # announcements (3)
- # beginners (139)
- # boot (28)
- # cider (40)
- # cljdoc (1)
- # cljs-dev (30)
- # clojure (61)
- # clojure-conj (1)
- # clojure-dev (113)
- # clojure-germany (4)
- # clojure-italy (29)
- # clojure-nl (3)
- # clojure-russia (2)
- # clojure-spec (38)
- # clojure-uk (53)
- # clojurescript (188)
- # core-async (4)
- # css (2)
- # cursive (7)
- # data-science (5)
- # datomic (14)
- # emacs (1)
- # figwheel-main (192)
- # fulcro (37)
- # jobs-discuss (1)
- # mount (4)
- # off-topic (47)
- # pedestal (7)
- # portkey (14)
- # re-frame (4)
- # reagent (22)
- # reitit (2)
- # remote-jobs (1)
- # ring (6)
- # shadow-cljs (65)
- # spacemacs (7)
- # specter (6)
- # yada (8)
I'm getting the following error when I try to compile some ClojureScript code that is using a macro: class java.lang.Float is not a valid ClojureScript constant.
I'm assuming it's because one of the maps I'm building in my macro has a float and when ClojureScript sees it won't convert it. Is there a way I can turn that into a JS float?
@UCG8KE0SG unfortunately wouldn't work since the values are being generated outside of ClojureScript. I ended up doing pr-str
in the macro and then cljs.reader/read-string
in my ClojureScript code.
Hello. On my final js
bundle there is tons of clojure.test.check.gen
stuff.
I use it only on test
(not in src
) and there is differente profiles.
I'm building using lein + cljs.main
How can I debug why there is this stuff in my final bundle?
Working on testing async code in cljs, I didn't find any helpers for testing with promises. Here's what I came up with: https://github.com/pesterhazy/cljs-spa-example/pull/11/files#diff-26c35a846286dd881684332ac2e68d68 Does anyone have experience testing using cljs.test & promises?
hey guys
is there any real alternative to using react with cljs?
@pesterhazy you will need to use async as well http://cljs.github.io/api/cljs.test/#async
@erhardt.mundt You can use CLJS without react but the immutability of CLJS and the vDOM of React combine and allow us to treat entire app state as a value and that is very powerful and eases reasoning about the application.
so, I'm trying to learn the nuances of the outer and inner arguments in form 2 components in reagent/re-frame. Practically speaking, I am aware of two variants on how to handle them, but I want to know if there are more: option A:
(defn form-2 [a b]
(let [state (re/atom {:component :data})]
(fn [a b]
"arguments of inner shadow outer - rerendered when a or b change")))
(defn form-2 [a b]
(let [state (re/atom {:component :data})]
(fn []
"no arguments to inner - NOT rerendered when a or b change")))
I'm having trouble finding the source that makes this work, so I don't know what other permutations do. What if I only have (fn [a] ...)
or (fn [b]...)
? what if I have (fn [c d] ...)
?your description of the 2nd example is not correct
the comp is rerendered when the props change, whether you choose to do something to the args or not
the thing to remember is that the outer part of form-2 is evaluated only once per lifetime of the comp - it's the constructor function so to speak
using the props in the outer fn is close to an anti-pattern
because then you're guaranteed that whatever you do to them there won't get re-run when the props change
usually that's a subtle bug
bottom line, most of the time when using Form-2, only mention the args in inner-fn
(remember that in js, and in cljs, the args you call the fn with and the one in the function signature need not match; JS is very dynamic)
so if I name them differently in the inner function it won't affect behavior? not that one should, I'm just trying to get some grasp of the implementation
yes they are position params, that's surprising coming from React
there's a prop argv
somewhere that contains a positional vector [a b]
a bold choice by the implementers of reagent, and not one I necessarily agree with, but that's how it works. The var names don't matter thankfully
@jaihindh.reddy I can see why this is a natural match but since there are many frameworks that leverage on some sort of vDOM (like vue.js) I was wondering if React still has the monopoly
@erhardtmundt it would definitely be interesting to see cljs on top of one of the React alternatives, but not sure anything has felt the need yet
I love react myself but there might be reasons that make it not an option (ie licensing)
React is licensed under MIT https://github.com/facebook/react/blob/master/LICENSE
oh I didn’t know it’s now MIT, thanks!
great news
IMO react is solid and doesn't leave a lot of things to be desired
@erhardtmundt Popularity and the fact that other vDOM libraries aren't offering something novel that further simplifies things. In fact the opposite is true (React Native). These factors mean more tooling is developed for CLJS+React than CLJS+lib-X.
Has anyone here seen the Closure compiler issue WARNING - unreachable code
? I have some node modules installed in my project and things are failing on compilation now with :optimizations :advanced
reagent has a lot of magic in it that made sense a couple years ago, but makes interop harder than it should. a lot of the problems it solved are now being solved in React core
@lilactown which reagent problems were solved in React proper?
Reagent gives you Hiccup, components as fns accepting arbitrary positional args, Ratoms and Reactions
I don’t value components taking arbitrary positional args at all. I think it’s an antipattern
what do you mean by prop drilling?
reactions are an abstraction to help you think about which parts of the app needs updating when state changes
“props drilling” is having to pass down many many props to children so that some leaf can have a piece of data
Ratoms/reactions give you most of what redux does
do you mean the context api?
yeah. I think that React context handles props drilling, and what you’re talking about
right, redux is the main use case for React context
reagent gives you another way to update state, through force-updating components when ratoms or reactions change
very useful abstraction imo
fair enough, but that part of Reagent works out pretty well in practice
I can understand argument for lighter React wrappers as well
Reagent gives you a bunch of extra baggage that you have to know, and it's unfortunately not super well documented
I also think that the biggest antipattern Reagent makes really attractive is referencing vars in components
I don't think that's an antipattern, that's pragmatism
Makes testing harder, but unit testing for UI components is overrated anyway
SSR, now that's an antipattern
@pesterhazy why do you think SSR is an antipattern? I don't have a horse in this race - just asking because I'm going back and forth on whether I should use it
React's main value prop (no pun intended) is a view layer for uni-directional flow of data in a stateful app
Rendering to HTML from data pulled out of a rdbms is using this for something completely different, with very different usage patterns
The result is that every change to the frontend needs to ask, will this break server-side rendering?
Hmm ok. One of the main args for SSR is that it speeds up initial page load. In practice have you found that an issue? Just wondering if people complaining about this are talking about websites that aren't well built in some way?
I think that depends a lot on your actual use case
I thought the main selling point of SSR was to help w/ SEO, but that in turn begs the question why are you using React on what is probably a static landing page, as most web apps sit behind user auth anyways
If you're building a site where you depend on html (crawler-firneldy e-commerce?), you might be better off with Hiccup and Clojure, plus some finishing touches in CLJS
I think that SSR helps alleviate a lot of problems due to the fact that a server-rendered page has to use different constructs to create the HTML than a front-end app
a lot of the pages I build are a mish-mash of static content with dynamic content spread around the page
@lilactown that sounds like a lot of the websites I build too..
if a static part of the page needs to have a button component and a card component, and then a React component also needs to render a button component and a card component, it means that we need a common way of defining and using those components
disciplined use of CSS can get you 50% there but you also need to consider HTML structure, data dependencies, etc.
so the way I’m moving forward is to use React SSR as the back-end templating framework, and define components that include styles, structure and data dependencies that are then used on both server and client
Yeah I've been wrestling with all these things too and for the past several years I've even just stayed away from any frontend framework and have been just using plain JS, jquery and CSS.. but it's getting tiring. React may be the one framework/library whose complexity is worth it.. imho
For my use case I don't care about SEO. But my websites are otherwise without a huge amount of rich client-side interactivity. One of the main reasons I want to use React/reagent is because of the awesome development workflow I get with figwheel. If I stuck with just Clojure on the backend and hiccup I wouldn't have that
mmm, I think you can get pretty similar workflow if you have an editor that understands how to integrate with clojure
@lilactown doesn't re-frame, and other such frameworks resolve the props-drilling? my only concern about using things like re-frame is it reduces portability, since there's no real way to contain it within a library without everyone being forced to use re-frame
exactly like you said. How do I create a thing with re-frame, and hand it to another team?
or what if you have two re-frame apps that are nested 😱 or side by side, and suddenly need to talk?
I do have an editor that integrates well with clojure. What I mean is that with figwheel and client-side react you can modify your components, hit save and it injects the changes into the browser
If I were making changes to my components on the server-side you don't get that dynamic injection. You need to reload the page in the browser.. unless I'm missing something
@thiru0130 the workflow for clojure on the backend be just as beautiful
however its not impossible to set up a workflow that automaticly reloads the browser as well as the changed file when you save a file
Anyone here familiar with “unreachable code” error given by the Closure compiler? I recently added some node modules that are ran though Uglifyjs (via webpack) and the closure compiler is freaking out
but if you are bundling with webpack https://clojurescript.org/guides/webpack it should be ok
I think I got it sorted out, forgot that my module is scoped (i.e. @the-scope/some-module)
or maybe not, now getting an error that my cljs app can’t find react goog.require could not find: module$Users$me$my-project$node_modules$react$react
hey everyone. I’m experimenting with npm-deps
in my project and I ran into an interesting issue. when I include a package from NPM that is prefixed with an @
(eg - @material-ui/core), the dependency will download into node_modules
but I can’t require it.
I end up getting:
Library name must be specified as a symbol in :require / :require-macros; offending spec: [(clojure.core/deref material-ui) :as MUI]
@forrest.thomas for my scoped packaged I required it like ["@material-ui/core"]
I have mine pulling in fine, but now I’m getting the notorious Uncaught ReferenceError: module is not defined
lol, yeah I tried things like quoting the deref, but then it just complained that I was quoting it.
There is a note here about string vs symbol requires. https://code.thheller.com/blog/shadow-cljs/2017/09/15/js-dependencies-going-forward.html under the section "A small rant: Don’t use symbols for JS".
When using foreign-libs, my module is commonjs, so I added that as module-type
. Yet I still see errors like Uncaught ReferenceError: module$react is not defined
Any ideas?
:infer-externs true
:npm-deps false
:externs ["resources/public/static/js/react-bookings.ext.js"]
:foreign-libs [{:file "resources/public/static/js/react-bookings.js"
:provides ["ReactBookings"]}
{:file "node_modules/@company/calendar/build/index.js"
:provides ["@company/calendar"]
:module-type :commonjs}]
Can you recommend doc how to deploy modules? Especially how is that some modules have name re-frame
and some day8.re-frame/re-frame-10x
. How is possible modules can be without group? After register in clojars I get group org.clojars.kwladyka
. How to play with naming for module?
you only need one foreign lib, again it seems like you’re trying to skip over following the webpack guide verbatim
there are no npm dependency issues with ClojureScript either if you follow the guide like I’ve said several times
Maybe I was not clever enough. I don’t know, but for this days shadow-cljs just work for me while with lein there is a lot overhead for me. Like creating CLJSJS wrappers. Up to date dependencies etc.
you’re conflating a lot of things in that sentence - anyways - nothing for against shadow or doing it the ClojureScript way
If I could use it in lein as simple as in shadow-cljs I would be happy to do it. I can read a few days to learn it 🙂
Do you recommend something to read? Maybe I miss something, but as far as I know there is no simple way to use npm dependencies without shadow-cljs.
@njj and if it still doesn't work, setting up a repro always helps identify any accidental assumptions