Fork me on GitHub
#reagent
<
2018-06-18
>
juhoteperi05:06:24

It might be that ensuring that transformations keep cursor in place is something that React doesn't do

Hukka07:06:59

I've been using cljs-react-material-ui, but does that matter? I've also been waiting for it to switch to muiV1, but are there any problems in using mui directly?

pesterhazy07:06:00

@juhoteperi we can always add a transform-fn arg to the adapt fn

pesterhazy07:06:40

Or pass an update-fn to the on-change handler

pesterhazy07:06:02

Which updates this.state

juhoteperi08:06:43

@pesterhazy Doesn't help. Even if the this.state contains transformed value, cursor breaks.

juhoteperi08:06:16

Breaks in Reagent sense. It also is broken in React, but Reagent has additional logic to fix this.

juhoteperi08:06:22

And this is not even React problem, it is DOM problem.

juhoteperi08:06:55

When you set value in DOM input, the cursor moves to the end if the value is different than one already in DOM

juhoteperi08:06:00

@pesterhazy If you want to work on this more, this PR has only the adapt-input-component, without replacing existing Reagent logic: https://github.com/reagent-project/reagent/pull/381/files

pesterhazy08:06:20

@juhoteperi interesting, I didn't know that

pesterhazy08:06:49

honestly changing the value is a pretty niche use case

pesterhazy08:06:06

so it only affects few people. But I'm sure some people rely on it

juhoteperi08:06:15

Yes, but it is one that is supported by Reagent inputs currently so that can't be changed

pesterhazy08:06:33

Agreed, breaking the API is not rich-eived well

pesterhazy08:06:05

But we can always add it as an additive change, as per your PR

pesterhazy08:06:15

It would be good to get some feedback in production before adding it to the reagent api (if that's something we're considering)

juhoteperi08:06:26

Or someone can provide it as a separate lib. I'm still unsure if I want to have this in Reagent. Maybe. Yeah more testing is needed.

pesterhazy08:06:59

I could add it to my reagent helper library https://github.com/pesterhazy/recalcitrant

juhoteperi08:06:09

I think I like the other fix better for Material-UI, but this works for other libs also.

pesterhazy08:06:19

And then if people end up loving it, we could merge it into Reagent proper

doubleagent16:06:03

I've got an issue where some code works in dev, but does not work with advanced optimizations turned on. using cljs 1.9.946. How do I go about debugging this?

justinlee16:06:06

@doubleagent are you getting an error message? the typical problem is missing externs

doubleagent16:06:32

no error message and it doesn't appear to be missing externs. Problem is here: https://gist.github.com/doubleagent/208b5f305f7d5e9e332750debd28c91b#file-barf-cljs-L186

doubleagent16:06:09

there's a pagination component on the page which is supposed to update a ratom and trigger a table re-render

doubleagent16:06:21

in advanced compilation i never see the table re-render

justinlee16:06:14

the most obvious candidate is the .-activePage not working as expected. i’d throw in some logging statements to isolate the issue

justinlee16:06:58

(i.e., is get-page actually getting called with the right data)

kennytilton16:06:49

Has anybody had the experience of porting a hefty re-frame app to reagent? That sounds dumb even as I write it. 🙂 Maybe I should start from the JS version that just relied on the equivalent of ratoms.

justinlee16:06:31

a re-frame app already is a reagent app 🙂

kennytilton16:06:41

My goal is to learn reagent and then React itself.

kennytilton16:06:33

Yes, and my Lisp app is 486 assembly language. :0

justinlee16:06:12

i suspect you would be the first person on the planet to go in that direction

justinlee16:06:49

you’d either end up recreating the functionality of re-frame or you’d just gratuitously re-engineer the state management of the app

kennytilton16:06:10

I am definitely accustomed to the solitude of the lunatic fringe.

justinlee16:06:51

what would be really useful is to go find a popular react tutorial (like todomvc) and write a step-by-step blog post that shows how to do the react tutorial in reagent

justinlee16:06:14

that would serve your purposes. i think learning the state management before learning the basics is a hard way to go about it

kennytilton16:06:43

I love how reagent TodoMVC turned out.

kennytilton16:06:08

Yeah, I think I will start from the JS version since I would be discarding anyway the re-frame-ese. Thx for the sounding board!

justinlee16:06:46

yea that makes a lot more sense to me

doubleagent16:06:16

@lee.justin.m i guess a general rule in this situation is to suspect js object props?

justinlee16:06:16

yes. advanced compilation minifies static property accesses

justinlee16:06:47

also checkout externs inference & warning

justinlee16:06:08

if you use shadow it works better and the warnings are easier to use as is type hinting

doubleagent16:06:45

I've got a follow-up question

doubleagent16:06:23

I added some logging, so I could verify that the property was being given a different name

doubleagent16:06:00

It displays like I expect

doubleagent16:06:29

Shouldn't I see something like a: 2 in the console if it were being minified?

justinlee16:06:08

i’m not 100% sure of what i’m looking at, but i think the problem is that the library you are using isn’t getting minified but your code is

justinlee16:06:33

if they were both being run through advanced compilation it would presumably work because the symbols would match

doubleagent16:06:57

alright, thanks. I think I get it now 🙂

justinlee17:06:27

by the way, how are you using a lambda symbol instead of a (fn

doubleagent17:06:18

It's a feature available in the clojure layer for spacemacs

orestis17:06:01

I get really confused when I see those symbols :)

doubleagent19:06:05

According to this (https://stackoverflow.com/questions/35527115/why-can-i-not-access-this-js-objects-props-in-clojurescript#35535118) the solution is to use goog.object/get. It works, but I wonder if there's a better solution. In particular I doubt that I am compiling everything correctly.

justinlee19:06:09

so you can definitely just avoid the issues by using string accessors (or a library like cljs-oops)

justinlee19:06:21

or you can add the symbol to your externs

justinlee19:06:40

or you can turn on externs inference + warnings and then type hint when the inference fails

justinlee19:06:55

or you can use shadow-cljs and it’ll pretty much just work out of the box 🙂