reagent 2021-06-02 | Slack Archive

hi! what this :f> means in Reagent?

Render a function component

Welp... I need to have an actual hyphenated property but reagent converts it to camelcase. what to do?

What is the case where you need this? React needs camelCase for all element properties. data- and aria- properties are special case, and should be ignored by Reagent.

juhoteperi14:06:54

Or hmm... nowadays React just uses "unknown" properties as is: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html IIRC Reagent won't touch the key if you use string as key. [:div {:on-click "this key will be converteted" :data-foo "data- property names aren't converted" "string-key-foo-bar" "this key is used as is"} ...]

juhoteperi14:06:02

Yeah reagent will convert just keyword and symbols to camelCase: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L48-L55

Pepijn de Vos14:06:42

https://dev.w3.org/SVG/modules/renderorder/SVGRenderOrder.html

juhoteperi14:06:32

https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes React doesn't directly support that property, but should work as-is if you use string as properties map key.

juhoteperi14:06:44

[:g {"render-order" 5} ...]

juhoteperi14:06:00

Hmm, I wonder if render-order was ever implemented in browsers? That spec is just a draft, and searches don't return anything.

Pepijn de Vos15:06:45

Yea it doesn't appear to be working very well haha

az20:06:34

Hi all, is there a way to serialize hiccup with a custom component? Not sure how to get

[:div 
 [foo.bar/custom-component]]

to render from deserialization. Any tips?

emccue22:06:59

@aramz If all you are sending is the symbol, you need to walk the hiccup and replace the symbols with the references they should point to

az22:06:06

Thank you @U3JH98J4R really appreciate the help

emccue22:06:57

its a bit tedious, but if you keep a map at runtime of symbol name -> function (basically reifying the namespace) it shouldn't be too bad

emccue22:06:04

think something like

emccue22:06:49

(def serializable-components (atom {}))

(defn component-a []
  [:p "hello"]

(swap! serializable-components assoc `component-a component-a)

emccue22:06:01

maybe making a macro of the last 2 forms

2021-06-02

Channels