Fork me on GitHub
#clojurescript
<
2018-08-31
>
colinkahn01:08:49

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?

colinkahn16:08:19

@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.

souenzzo02:08:48

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?

pesterhazy08:08:24

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?

ErhardtMundt11:08:01

is there any real alternative to using react with cljs?

jaihindhreddy-duplicate12:08:31

@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.

idiomancy13:08:04

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] ...)?

pesterhazy13:08:34

your description of the 2nd example is not correct

pesterhazy13:08:10

the comp is rerendered when the props change, whether you choose to do something to the args or not

pesterhazy13:08:05

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

pesterhazy13:08:36

using the props in the outer fn is close to an anti-pattern

pesterhazy13:08:05

because then you're guaranteed that whatever you do to them there won't get re-run when the props change

pesterhazy13:08:13

usually that's a subtle bug

idiomancy13:08:32

unless you're making it like, a form's placeholder text

pesterhazy13:08:35

bottom line, most of the time when using Form-2, only mention the args in inner-fn

pesterhazy13:08:20

(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)

idiomancy13:08:26

gotcha. and they're passed to the inner function positionally?

idiomancy13:08:05

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

pesterhazy13:08:07

yes they are position params, that's surprising coming from React

pesterhazy13:08:29

there's a prop argv somewhere that contains a positional vector [a b]

pesterhazy13:08:12

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

idiomancy13:08:35

roger roger. thanks!

erhardtmundt14:08:43

@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

pesterhazy14:08:29

@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

erhardtmundt14:08:48

I love react myself but there might be reasons that make it not an option (ie licensing)

erhardtmundt14:08:56

oh I didn’t know it’s now MIT, thanks!

pesterhazy14:08:08

IMO react is solid and doesn't leave a lot of things to be desired

jaihindhreddy-duplicate14:08:15

@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.

exit215:08:07

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

lilactown15:08:47

personally I’d like to see even skinnier integrations between React and CLJS

lilactown15:08:47

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

pesterhazy16:08:57

@lilactown which reagent problems were solved in React proper?

pesterhazy16:08:02

Reagent gives you Hiccup, components as fns accepting arbitrary positional args, Ratoms and Reactions

lilactown16:08:21

async rendering and prop drilling

lilactown16:08:38

I don’t value components taking arbitrary positional args at all. I think it’s an antipattern

lilactown16:08:48

ratoms and reactions are interesting, but what problems are they trying to solve?

pesterhazy16:08:22

what do you mean by prop drilling?

pesterhazy16:08:06

reactions are an abstraction to help you think about which parts of the app needs updating when state changes

lilactown16:08:36

“props drilling” is having to pass down many many props to children so that some leaf can have a piece of data

pesterhazy16:08:36

Ratoms/reactions give you most of what redux does

pesterhazy16:08:01

do you mean the context api?

lilactown16:08:54

yeah. I think that React context handles props drilling, and what you’re talking about

lilactown16:08:24

if a leaf needs to listen to a piece of state, they can be wrapped in a Consumer

pesterhazy16:08:31

right, redux is the main use case for React context

pesterhazy16:08:18

reagent gives you another way to update state, through force-updating components when ratoms or reactions change

pesterhazy16:08:24

very useful abstraction imo

lilactown16:08:40

yeah I’m not convinced that force-updating components is always a good thing

lilactown16:08:54

in general, I want React to handle if/when a component should update

pesterhazy16:08:20

fair enough, but that part of Reagent works out pretty well in practice

pesterhazy16:08:33

I can understand argument for lighter React wrappers as well

lilactown16:08:44

a lot of that had to do with async rendering, which now is coming in React proper

pesterhazy16:08:09

Reagent gives you a bunch of extra baggage that you have to know, and it's unfortunately not super well documented

lilactown16:08:05

I also think that the biggest antipattern Reagent makes really attractive is referencing vars in components

lilactown16:08:28

vars of atoms*

pesterhazy16:08:29

I don't think that's an antipattern, that's pragmatism

pesterhazy16:08:55

Makes testing harder, but unit testing for UI components is overrated anyway

lilactown16:08:57

it makes testing and SSR very difficult

lilactown16:08:11

my main thing is SSR and devcards

pesterhazy16:08:19

SSR, now that's an antipattern

lilactown16:08:37

haha! okay, you and I will never agree then 😛

🤝 4
Ramzi16:08:13

what is SSR?

lilactown16:08:22

server-side rendering

Ramzi16:08:39

thats what i would have guessed but the wikipedia disambiguation page didnt have it

thiru16:08:32

@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

pesterhazy16:08:01

React's main value prop (no pun intended) is a view layer for uni-directional flow of data in a stateful app

✔️ 4
pesterhazy16:08:39

Rendering to HTML from data pulled out of a rdbms is using this for something completely different, with very different usage patterns

pesterhazy16:08:24

The result is that every change to the frontend needs to ask, will this break server-side rendering?

idiomancy16:08:08

how terrible is memoizing a function in the browser?

thiru16:08:34

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?

pesterhazy16:08:09

I think that depends a lot on your actual use case

kenj16:08:48

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

pesterhazy16:08:11

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

lilactown16:08:39

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

lilactown16:08:15

a lot of the pages I build are a mish-mash of static content with dynamic content spread around the page

thiru16:08:00

@lilactown that sounds like a lot of the websites I build too..

lilactown16:08:15

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

lilactown16:08:16

disciplined use of CSS can get you 50% there but you also need to consider HTML structure, data dependencies, etc.

lilactown16:08:06

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

thiru16:08:37

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

thiru16:08:25

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

thiru16:08:32

is that crazy?

lilactown16:08:54

mmm, I think you can get pretty similar workflow if you have an editor that understands how to integrate with clojure

benzap16:08:56

@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

lilactown16:08:27

@benzap the problem with re-frame is that it doesn’t compose at all

lilactown16:08:43

exactly like you said. How do I create a thing with re-frame, and hand it to another team?

lilactown16:08:09

or what if you have two re-frame apps that are nested 😱 or side by side, and suddenly need to talk?

lilactown16:08:34

you can manage it but it’s tricky and requires additional development

thiru16:08:34

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

thiru16:08:24

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

bhauman18:08:20

@thiru0130 the workflow for clojure on the backend be just as beautiful

bhauman18:08:47

but yeah you do have to reload the browser

bhauman18:08:17

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

bhauman18:08:10

but it’s not currently trivial to do that

exit218:08:30

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

bhauman18:08:13

you probably don’t want to uglify code before you pass it to the Closure compiler?

exit218:08:39

yeah I’m thinking thats the case too

exit218:08:51

@bhauman I’m assuming Closure compiler doesn’t like the uglified code for some reason?

bhauman18:08:24

I’m not really knowledgable enough to say

bhauman18:08:48

and it depends what method of inclusion you are using

bhauman18:08:56

:npm-deps?

bhauman18:08:10

:npm-deps will surely fail

bhauman18:08:50

but if you are bundling with webpack https://clojurescript.org/guides/webpack it should be ok

exit218:08:04

Yeah I’m using npm-deps to install my packages

exit218:08:12

what would be the alternative?

thiru18:08:42

Thanks @bhauman.. yes I could setup some kind of file-system watcher

thiru18:08:54

But still.. reloading the page means losing the state on the page too..

bhauman18:08:09

if you don’t have front end code? then?

bhauman18:08:26

oh you mean dom state like forms etc

bhauman18:08:57

yeah your argument makes sense to me

thiru18:08:17

you've spoiled us too much with figwheel 😉

👍 4
thiru18:08:16

.. it's such a sweet setup I don't want to go back to how I was writing gui's before

dnolen19:08:29

@njj I highly recommend walking through webpack Guide by itself

dnolen19:08:35

it’s only takes about 10 minutes

dnolen19:08:44

don’t try to combine it with what you’re doing

dnolen19:08:53

just go through it at least once

dnolen19:08:59

it will save you a lot of time 🙂

dnolen19:08:02

a lot of people have gone through it and verified that it works

dnolen19:08:12

and I’m currently using exactly this stuff for client work

exit219:08:36

I think I got it sorted out, forgot that my module is scoped (i.e. @the-scope/some-module)

exit219:08:44

so I wasn’t adding that scope in provides

exit219:08:50

things seem to be compiling now 🙂

exit219:08:08

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

Forrest20:08:53

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.

Forrest20:08:06

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]

Forrest20:08:21

which makes sense, but I’m wondering if anyone knows of a workaround for this?

exit220:08:25

@forrest.thomas for my scoped packaged I required it like ["@material-ui/core"]

Forrest20:08:36

oh interesting….

Forrest20:08:38

let me try that

exit220:08:46

otherwise its treated as a deref

exit220:08:57

I did the same for npm-deps

Forrest20:08:05

right, exactly

Forrest20:08:09

fascinating

Forrest20:08:30

I’ve never seen a string in a require like that before

Forrest20:08:35

looks like it worked though

Forrest20:08:50

I’m getting some other “cant find React” error, but that seems manageable

exit220:08:03

I have mine pulling in fine, but now I’m getting the notorious Uncaught ReferenceError: module is not defined

Forrest20:08:06

did you see that syntax in a doc somewhere?

Forrest20:08:18

lol, im familiar with that one 🙂

exit220:08:27

nah, I just tried it out

exit220:08:33

I had the same issue awhile back

exit220:08:36

I tried it as a key, etc..

exit220:08:41

ended up string works ¯\(ツ)

Forrest20:08:07

lol, yeah I tried things like quoting the deref, but then it just complained that I was quoting it.

Forrest20:08:20

anyway. thats a big help. Thank you!

exit220:08:34

for sure!

dvingo20:08:42

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".

👍 4
exit220:08:46

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?

dnolen20:08:08

make sure you’ve specified :npm-deps false

dnolen20:08:23

you shouldn’t be seeing any errors about module$foo

dnolen20:08:34

that only happens if Closure is being fed stuff from node_modules

exit220:08:17

: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}]

exit220:08:08

I have it as false, yet I’m seeing that module$react is not defined issue

exit220:08:32

react is a dependency of my node module, not sure if that matters

kwladyka21:08:33

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?

dnolen21:08:39

@njj you’re still mixing approaches

dnolen21:08:16

you only need one foreign lib, again it seems like you’re trying to skip over following the webpack guide verbatim

exit221:08:43

my module is a react component so it needs more than that example

dnolen21:08:59

you do not

dnolen21:08:08

nothing should be pointing at anything in node_modules

dnolen21:08:42

again, if you follow the webpack guide this made very clear

kwladyka21:08:10

@njj Personally if you use node_modules I recommend shadow-cljs

kwladyka21:08:59

For me all npm dependencies issues disappear then

kwladyka21:08:39

It makes it much simpler

dnolen21:08:47

there are no npm dependency issues with ClojureScript either if you follow the guide like I’ve said several times

dnolen21:08:54

this isn’t any different from reading how shadow-cljs works

dnolen21:08:12

eventually you have to actually read the docs which someone spent the time to write 🙂

kwladyka21:08:36

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.

dnolen21:08:32

you’re conflating a lot of things in that sentence - anyways - nothing for against shadow or doing it the ClojureScript way

kwladyka21:08:13

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 🙂

kwladyka21:08:58

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.

dnolen21:08:32

yes the official Webpack guide

dnolen21:08:45

it gets mentioned here at least once a week 🙂

john21:08:54

@njj and if it still doesn't work, setting up a repro always helps identify any accidental assumptions

kwladyka21:08:55

Heh I see you are writing this first time 🙂 But it is midnight now in my timezone - that could be a reason.

kwladyka22:08:58

thanks for the link