A minimalistic ClojureScript interface to React.js
Eliraz 2020-05-18T16:21:47.465800Z

Hey, I'm trying to play with the new functional-compiler thing

Eliraz 2020-05-18T16:22:12.466300Z

I was wondering, now that I'm doing the following:

(rd/render [:f> app] (. js/document getElementById "app") functional-compiler)

Eliraz 2020-05-18T16:23:22.467200Z

using functional components like from material-ui needs to be how? like this?

[mui/Button "hello"]

Eliraz 2020-05-18T16:23:40.467600Z


[:> mui/Button "hello"]

Eliraz 2020-05-18T16:23:42.467800Z


Eliraz 2020-05-18T16:52:14.469100Z

When I try without the :> I get some errors, and I'm trying to figure out if I'm using it wrong

juhoteperi 2020-05-18T17:47:57.469900Z

@eliraz.kedmi157 the option is for generating function components from Reagent components (defn) no need for interop.

juhoteperi 2020-05-18T17:48:37.470500Z

So [:> mui/Button "hello"], this doesn't change how interop works.

juhoteperi 2020-05-18T17:52:21.473400Z

Difference between [foo] and [:> foo] isn't as much if class or function component is generated, but what JS object is used as React props. For Reagent components (first case), JS object with argv property is created which contains the Cljs value, interop :> exists because React components need to see the JS object with properties from props map directly, which is why :> and adapt-react-class convert the Cljs props map to JS object.

Eliraz 2020-05-18T18:09:19.475100Z

@juhoteperi thank you for your answer. so using the interop :> will generate a function component in my case? (`mui/Button` is a function component)

juhoteperi 2020-05-18T18:17:47.475900Z

In the interop case, Reagent doesn't generate any component as mui/Button is already a component. It will just generate createElement call.

Eliraz 2020-05-18T18:18:28.476100Z

oh okay

Eliraz 2020-05-18T18:22:44.477600Z

so if I get it correctly :> only converts the props to a js object and generates the createElement call?

Eliraz 2020-05-18T18:23:17.478100Z

so what's the :r> and :f> for?

juhoteperi 2020-05-18T18:26:58.479500Z

:r> doesn't do any cljs map to JS object conversion, so you can pass in JS object yourself. The conversion is inconvenient sometimes as it recursively converts all Cljs values to JS, so you can't e.g. provide cljs vector inside properties.

juhoteperi 2020-05-18T18:28:22.481200Z

:f> is for creating Reagent function components from Cljs functions, without using :functional-compiler. This allows opting to functional components per function, instead of per application.

Eliraz 2020-05-18T18:28:42.481400Z

got it

Eliraz 2020-05-18T18:28:53.481700Z

Thank you so much for elaborating