Fork me on GitHub
#reagent
<
2019-08-15
>
Hukka13:08:20

Should it be possible to use form-3 components to put static properties on the final react component classes? I've been reading the create-class source which would seem so, but I only see the react lifecycle methods. On a side note I managed to use the repl to put the component into js log only on firefox, Chrome just lists a weird function that starts with comment "This constructor gets overridden by mocks"

Hukka13:08:01

To make matters more complicated, I'm playing with react-native, expo and react-navigation >_<

dominicm13:08:10

I have used it to do so, yeah

Hukka13:08:36

Ah, hm. I had problems when calling (r/reactify-component my-component), but (r/reactify-component (my-component)) shows the extra properties

Hukka13:08:38

Weirdly, both render just fine…

juhoteperi13:08:10

Reagent automatically handles built-in static methods (:childContextTypes :contextTypes :getDerivedStateFromProps :getDerivedStateFromError). If you need others, just take the returns value from create-component and add your properties to that: (let [cmp (r/create-class ...)] (set! (.-staticMethod cmp) (fn [] ...)) cmp)

Hukka13:08:13

@U061V0GG2 Ah, I see, yes. reagent doesn't put any unknown stuff on the generated function, but on the prototype

Hukka13:08:48

Now it works. Although this interop is getting quite clunky 😕

juhoteperi13:08:38

Yeah. The docstring tries to describe this but this could be documented better. And I've been thinking about if we should have better way to declare statics (like second option to create-class).

Hukka14:08:44

Well, it does describe the base case with the names matching react API, but either there are no docs on how to add extras, or I just kept missing them 😕

Hukka14:08:38

Giving that stuff as props or children is more common, but react-navigation does it this way :face_with_rolling_eyes:

juhoteperi14:08:59

As in the React-native react-navigation library? I just looked into that few days ago and decided storing the navigation state in components is complete nonsense. Using old react-native-navigation-experimental-compat is much easier with Reagent and Re-frame, you can keep the state in Re-frame db etc.

Hukka06:08:30

Thanks for the tip, I'll look into that. Although I'm starting to think that this whole react native with clojurescript is a bit too painful to be worth it, so if I can't do it with PWAs then I shouldn't bother. Although it is quite a bummer that Apple refuses to support push notifications on web apps >_<

juhoteperi13:08:10

Reagent automatically handles built-in static methods (:childContextTypes :contextTypes :getDerivedStateFromProps :getDerivedStateFromError). If you need others, just take the returns value from create-component and add your properties to that: (let [cmp (r/create-class ...)] (set! (.-staticMethod cmp) (fn [] ...)) cmp)

Joe Chasinga18:08:39

The documentation is there, but still not quite clear if shadow-cljs is needed and how the structure of the whole project (including the existing React codebase) looks like. The only hint is to use r/reactify-component and the likes.