helix

https://github.com/Lokeh/helix
wilkerlucio 2021-04-14T16:10:16.011400Z

hello, currently the helix.dom namespace only provides macro versions of the things, I’m having a problem with this, because I can’t use apply to spread children (for cases where I don’t have a key for each item), so I can’t do something like this in helix:

(defn spread-component [& children]
  (apply dom/div "Some default stuff" children))

(spread-component (dom/div "no need") "for keys")

wilkerlucio 2021-04-15T14:06:46.016700Z

ha, it always accepted that? I’m feeling like a crazy person, getting all the things wrong here, haha, thanks man, its working great 🙂

wilkerlucio 2021-04-14T16:10:41.011500Z

@lilactown what you think about doing like Fulcro, and also providing fn versions for the DOM building blocks?

wilkerlucio 2021-04-14T16:59:08.011700Z

for anybody else with this problem, this is a current possible workaround:

(defn spread-component [& children]
  (apply h/create-element "div" #js {} "Some default stuff" children))

(spread-component (dom/div "no need") "for keys")

lilactown 2021-04-14T17:09:12.011900Z

I'm not opposed to fn versions of the DOM as well, but it's not something I run into very often

lilactown 2021-04-14T17:09:48.012100Z

spread-component here isn't a component but rather a builder function - it doesn't get any of its lifecycle attached to it because you're calling it like a function

lilactown 2021-04-14T17:14:44.012300Z

the "proper" helix/React way of doing this would be:

(defnc spread-component
  [{:keys [children]}]
  (d/div
    "some default"
    children))

($ spread-component (d/div "no need") "for keys")

lilactown 2021-04-14T17:15:35.012600Z

this shouldn't give you warnings about keys because we're passing the opaque children data structure to React, and it is already technically keyed

wilkerlucio 2021-04-14T17:58:46.012800Z

interesting, I didn’t knew about this children trick

wilkerlucio 2021-04-14T18:36:02.013Z

but still, when there are case that we need to map over some collection and than splat, apply is still needed, I’ll see if I can get some time and try to add this to Helix

lilactown 2021-04-14T19:02:05.013200Z

I don't think apply should ever be needed

lilactown 2021-04-14T19:02:37.013400Z

if you have an actually dynamic list of children, you should key them

lilactown 2021-04-14T19:05:35.013600Z

if you're mapping over children, you can use helix.children/map and pass in the resulting children into the component

lilactown 2021-04-14T19:05:47.013800Z

this feels like you're trying to use components as functions, which they are not

wilkerlucio 2021-04-14T19:10:32.014Z

React accepts partial applications though functions, and I see many patterns using it, and to me feels very natural, I understand the trade-offs, and in many cases to me the application makes sense

wilkerlucio 2021-04-14T19:10:59.014200Z

the issue to me is that the usage of a language construct (macros) is limiting the usage that otherwise is available’

wilkerlucio 2021-04-14T19:18:44.014600Z

but I understand your POV, and its just a small part of the library, I can always just have other dom constructs (that’s what I end up doing) 🙂

lilactown 2021-04-14T19:19:02.014800Z

> React accepts partial applications though functions, and I see many patterns using it can you explain this more? I'm not sure I understand what patterns use it.

lilactown 2021-04-14T19:20:29.015Z

also, helix provides $ as a function for edge cases where macros aren't good; so (apply $ "div" {:style {:border "1px solid red"}} ,,,) works as expected. before I add more stuff to helix, I want to understand the use cases that it solves. having more stuff makes it harder when people have questions about how they should do something, to answer them in a helpful and correct way. so if I understand the circumstances when e.g. calling a component as a function, rather than constructing an element, is useful then I can add those tools and docs explaining when/why to use them

wilkerlucio 2021-04-14T19:22:47.015200Z

oh, I wasn’t aware that $ was a fn, I though it was macro only

wilkerlucio 2021-04-14T19:23:06.015400Z

that’s cool, and for that is enough, because it keeps the same prop semantics

wilkerlucio 2021-04-14T19:25:08.015600Z

changing the subject, one thing that keeps coming back to me while using Helix is that I tend to use a lot of namespaced keywords in my views too, and because Helix works so close to React it can’t use qualified keywords at props top level. for one side I think its nice when working closer to react libs, it makes integration nice there. but on the pure cljs side it adds friction to use qualified keywords. I wonder your thoughts on the subject

wilkerlucio 2021-04-14T19:28:28.015900Z

or more specifically: do you think the problem of edn props is something that Helix should handle? or its something for the users to work around (creating abstractions on top of the Helix)

lilactown 2021-04-14T23:09:46.016100Z

helix should be able to accept namespaced keywords as top-level props

lilactown 2021-04-14T23:33:51.016300Z

if it's not working then I would consider that a bug