This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-07-27
Channels
- # announcements (3)
- # babashka (16)
- # beginners (177)
- # calva (102)
- # cider (2)
- # clj-kondo (12)
- # clojars (10)
- # clojure (91)
- # clojure-argentina (3)
- # clojure-australia (5)
- # clojure-europe (16)
- # clojure-nl (1)
- # clojure-uk (10)
- # clojurescript (73)
- # community-development (8)
- # cursive (9)
- # depstar (7)
- # fulcro (5)
- # helix (1)
- # introduce-yourself (1)
- # jobs-discuss (18)
- # lsp (32)
- # luminus (1)
- # malli (2)
- # music (4)
- # off-topic (20)
- # pathom (19)
- # polylith (15)
- # re-frame (4)
- # reagent (6)
- # ring (13)
- # sci (36)
- # shadow-cljs (7)
- # spacemacs (4)
- # sql (3)
- # tools-deps (112)
- # vim (21)
So you want to wrap one fake reactive library with killer native support with a real reactive library? Before we clean it up with macrology, a Godsend in cases like this, we have: (mxr/make-rnc ;; Matrix component constructor {:counter (cI 42) ;; An "input" cell. We get to write to it from good old declarative code :label (cF (str "The counter is at " (mget me :counter))) ;; <<<--- The new count arrives automagically. No subscribe needed, just read the Cell. :rendering (cFonce ($ (hx/fnc [] ;; Here we build an anonymous React component. Thanks, @lilactown! (let [[_ set-state] (hooks/use-state 0)] ;; The React way of "watching" state (mxr/set-state-record me set-state) ;; Store the setter function where we can find it (d/button {:on-click #(mswap! me :counter inc)} {} ;; mswap! also triggers a dataflow event -->>> (mget me :label))))))}) ;; <<<--- again, reading the value implicitly subscribes to it (defmethod observe-by-type [::mxrn.elt] [slot me new-val prior-val cell] ;; <<<--- Matrix standard observer ((get @set-state-dict (mget me :sid)) (pulse-now))))) ;; <<<--- artificial call to React state hook to trigger refresh...Fini! A true wrapping, even textually: everything inside ($ ....) is React, itself thinly wrapped by CLJS Helix, everything outside is Matrix. Next up, Matrix + ReactNative. React is awful, but FB pours a lot of money into the core DOM integration, and it is complete. Most important, they have wrapped Android and iOS with a common JS library. And Helix has created a JSX-free interface. Yay.