Clojurians Log v2

Anyone know how to get a react-bootstrap/Popover to work, with the overlay attribute? I’ve seen popovers which work and are always visible (https://react-bootstrap.github.io/components/overlays/#popovers), but no examples of using the overlay attr with react-bootstrap/OverlayTrigger .

I guess my question is how do you pass the popover component to the overlay attribute?

Hmmm, looks like I had to pass a plain old React element (via r/create-element) to the overlay attribute.

Does anyone have any insight into debugging event delivery and propagation in reagent? I'm trying to implement copy/paste on a div, and I just can't get the event handler to work on my particular div- weirdly, it worked when my div had some other random absolutely-positioned div as a child, but when I made that child user-select: none the copy-events stopped as well.

I've tried to use monitorEvents which lets me see that events are being fired (I guess this probably just works in Chrome), but I can't really see why they're being fired on the body of the document, instead of on my component.

It appears (uhhhhhh) if I include like a blank text node, like " " in the body of my div, the copy event fires.

But ... that only works on the first component of this type. Just as well not to have a hack like that actually fix anything.

Other event handlers on the same component (like on-blur ) seem totally reliable.

The way I handle this is probably not helpful to your specific use-case but perhaps something to think about -- I have a rule that everything that occurs is tied back to data, so that the page does not care if the event comes from a user click, the server, or a REPL command. All events go to a centralized queue and are processed sequentially. Then I monitor the event queue and ensure that the data is correct. This way I can separate the concerns of the event listener, the data, and the event handler

Again I realize it may not help your specific situation but it is the frustration you are experiencing that led me to write cljs apps the way I described above

Is it possible to write react component with ClojureScript and expose them such that other JavaScript project use them?

Yes, you should be able to use exported symbols just fine.

Would that work? XD

I don't see any reason for it to not work. React components are not magic.

Okay, seems I can work with other JS dev.

But note that you will have to create React components, not Reagent components.

how do i access a static member of a product of adapt-react-class?

i.e. https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableNativeFeedback.js

class TouchableNativeFeedback extends React.Component<Props, State> {
...
  static Ripple: (_) => ..

access the underlying component

(def touchable-native-feedback (r/adapt-react-class TouchableNativeFeedback))

(def ripple (.-Ripple TouchableNativeFeedback))

that’s what i assumed and tried before i posted, but somehow am getting nothing back

try logging TouchableNativeFeedback and see if it is in fact the class, or something else

it’s #object[reagent.impl.template.NativeWrapper]

(def feedback (reagent/adapt-react-class react/TouchableNativeFeedback))
(def ripple (.-Ripple feedback))
(prn ripple)

No no

You have to access the class, not the wrapper

Re read my example, yours is not identical

ahh

that does it! thanks @lilactown!

Woo!

Ok, what does [:f> mean?

I know that :> is used to create a react class inside the reagent vector/hash-map DSL

I suspect its something really good

I assume :f> is similar

here's a match in the commit history https://github.com/reagent-project/reagent/commit/44259277942fe0db77f198330467c81180f07855

Its hard to lookup /google the meaning of these symbol style things.

Not properly documented yet, but: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks

https://github.com/reagent-project/reagent/issues/494

changelog mentions them also

all matches in master:

est/reagent/impl/util_test.cljs:139:  (is (= 1 (util/react-key-from-vec [:f> "div" {:key 1} "bar"])))
test/reagenttest/testreagent.cljs:607:                                      [:f> f {:key 1} "a"]
test/reagenttest/testreagent.cljs:608:                                      [:f> f {:key 2} "b"])]
test/reagenttest/testreagent.cljs:1564:        (testing ":f>"
test/reagenttest/testreagent.cljs:1565:          (with-mounted-component [:f> c "foo"]
CHANGELOG.md:8:- Added `:f>` shortcut to create Function component from ClojureScript
examples/functional-components-and-hooks/src/example/core.cljs:38:     ;; Or with the default options you can create function components using :f> shortcut:
examples/functional-components-and-hooks/src/example/core.cljs:41:     [:f> clock time-color]
examples/functional-components-and-hooks/src/example/core.cljs:42:     [:f> color-input time-color update-time-color]
examples/functional-components-and-hooks/src/example/core.cljs:51:  (rdom/render [:f> simple-example] (js/document.getElementById "app"))
src/reagent/impl/template.cljs:275:      :f> (function-element (nth v 1 nil) v 2 compiler)
src/reagent/impl/util.cljs:228:        (:> :f>) (get-react-key (nth v 2 nil))

(1 of 12): (is (= 1 (util/react-key-from-vec [:f> "div" {:key 1} "bar"])))

that search works with ag locally, but not in the github search functionality

this looks informative

(testing ":f>"
          (with-mounted-component [:f> c "foo"]
            (fn [c div]
              (is (nil? c) "Render returns nil for stateless components")
              (is (= "Hello foo" (.-innerText div))))))

and this from an example ns

(defn simple-example []
  (let [[time-color update-time-color] (react/useState "#f34")]
    [:div
     [greeting "Hello world, it is now"]
     [clock time-color]
     [color-input time-color update-time-color]

     ;; Or with the default options you can create function components using :f> shortcut:
     #_#_#_
     [greeting "Hello world, it is now"]
     [:f> clock time-color]
     [:f> color-input time-color update-time-color]
     ]))

finally, the :f> tag translates to this in reagent/impl/template.cljs

(defn function-element [tag v first-arg compiler]
  (let [jsprops #js {}]
    (set! (.-reagentRender jsprops) tag)
    (set! (.-argv jsprops) (subvec v first-arg))
    ; (set! (.-opts jsprops) opts)
    (when-some [key (util/react-key-from-vec v)]
      (set! (.-key jsprops) key))
    (react/createElement (comp/functional-render-fn compiler tag) jsprops)))

hi friends, noticing that my reagent components will re render when the r/atom value has not changed, with something like repeated (swap! state assoc :foo [1]) calls, where a repeated (swap! state assoc :foo 1) does not. Is there any explanation or literature on why this causes re-renders?

@selfsame https://github.com/reagent-project/reagent/blob/master/doc/WhenDoComponentsUpdate.md#changed (just ignore update about 0.6.0, I think that isn't accurate)

user=> (identical? [1] [1])
false
user=> (= [1] [1])
true

doesn't reagent use identity checks to speed up its check for dirty nodes?

yeah, what @juhoteperi said

@selfsame I've tried, for style reasons, to group nearby changes into a single call for that reason - for example I can use assoc with N k/v pairs, or use a single swap function with multiple steps, instead of multiple steps calling swap

of course this kind of refactor isn't always simple, but when it is, it's like free protection from pointless re-renders

Updating multiple atoms etc. with separate calls from same function probably doesn't trigger multiple render calls, as rendering is batched using requestAnimationFrame, but anyway, one shouldn't presume how many times render is called etc.

good point, thanks

also coming from clojure I've learned not to treat swap! as if it were free (though it's likely cheaper in cljs)

In React Strict mode, React in fact calls render multiple times and ensures it always returns the same value to ensure it is pure

ah great, thanks for the clarification!

@noisesmith Thanks for digging into it! This looks like part of an exciting new features for making it easier to work with react. Which will be really helpful! Hopefully enhanced docs will be forthcoming soon.