Fork me on GitHub
#reagent
<
2021-08-19
>
sjol04:08:42

Hi I am curious to know if anyone has used reagent r/atoms from javascript react component? If so were there any caveats? If not why not?

sjol04:08:14

The need to potentially start porting an existing app to start using a clojurescript core

emccue04:08:45

r/atoms won't really work in the same way.

emccue04:08:30

they work with the "reagent render loop" where you produce hiccup and then convert that to react at the very end - if you got a handle to a reagent atom in a normal react component it wouldn't work

emccue04:08:53

what you can do is pass the current value and a function that will swap the current value down

sjol04:08:33

Hmmm, because I was looking into replacing recoil which basically works like atoms but in a react setting

emccue04:08:34

function YourReactComponent({ value, swapValue }) {
   <button onClick={() => { swapValue(v => v + 1); }> {value} </button>
}
(defn your-reagent-component 
  []
  (let [value-atom (r/atom 0)]
    [:> YourReactComponent {:value @value-atom :swapValue #(swap! value-atom %)}]))

sjol04:08:38

I see, not the path of replacement i was thinking of, which was to make a clojurescript library imported into the javascript code

Ryan18:08:01

Hey all, trying to use primereact with re-frame and reagent and getting a little hung up.. I think I've got the import right, but I'm getting an error trying to use the adapter.

Ryan18:08:23

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

p-himik18:08:50

As I mentioned in the other channel - it's probably an incorrect import.

p-himik18:08:57

What's exactly in your :require?

Ryan18:08:04

Yes, but I can get the object out of the js console

Ryan18:08:57

["primereact/button" :refer (button)]

Ryan18:08:22

Then in browser console I can see the object in module$node_modules$primereact$button$button_cjs

p-himik18:08:22

A side-note using parentheses instead of brackets in the :require vector is generally discouraged. But it's not that important. If (js/console.log button) does log a button component then that error comes from some different place, because it's about undefined .

p-himik18:08:49

Alternatively, that button component itself requires some argument that has to provide a string/class/function. But that argument is not checked explicitly in button, and you don't provide the value.

Ryan18:08:22

Yeah, I might just give up and use @material-ui because that road is paved haha

p-himik18:08:51

You mean, you have used MUI before and are aware of all its quirks?

p-himik18:08:07

Because if not, MUI has definitely quirks on its own that you might encounter sooner or later.

Ryan18:08:45

I've used it in angular, so if they are the design system quirks I've probably hit them all

Ryan18:08:58

if there are implementation quirks no, but at least I can find some sample code

Ryan18:08:31

Holy crap I see a button

p-himik18:08:34

There's still the interop friction, that sometimes can be more than one would like.

Ryan18:08:50

the props aren't there but its a start! 🙂

Ryan18:08:12

THanks for your patience!

👍 3
Ryan19:08:54

@U2FRKM4TW you've created a monster, already wrapped a few of the PrimeReact components in nicer cljs fns and added some icons from another react component library altogether 🙂

p-himik19:08:43

Keep that excitement up! :D

Ryan19:08:45

That's really easy to do -- once you get past the gap between the code and the browser.. but it's not really any better/worse than webpack / typescript etc 😄

p-himik19:08:06

In my experience, it's absolutely better. Much so. The code reloading itself is insanely good. Implementing undo/redo mechanism is easy when you have immutable data everywhere. And many other nice things that come from Clojure being a LISP.