Fork me on GitHub
#helix
<
2022-06-29
>
colliderwriter00:06:56

i can't figure out how to get material ui icons to render. i know the re-frame wrapper is as-element . what's the equivalent in helix? (carpetbagging back end person here in case you couldn't tell)

lilactown06:06:32

I'm not sure what you mean. $ works with any react component, including material ui icons AFAIK

lilactown06:06:39

what have you tried so far?

geraldodev18:06:24

$ is react/createElement on steroids. @colidwriter could you share a snippet ?

geraldodev18:06:51

Nowadays when I read JSX I sense noise. Because jsx has two modes. html mode and code mode. It defaults to html mode. but everytime you need to access javascript you have to enter code mode with {}, the noise for me is that {} is object in javascript. So we use {} as begin/end as object and in jsx as switch to code mode. The other noise is <Component /> . parentheses are so much better. Two strokes and we are done, always on code mode, without needing to switch between them.

geraldodev18:06:11

I was talking to my friend that I disturb every time I learn something. When you see a <Component /> in jsx you translate to ($ Component) in this case ($ Route {:errorElement ($ ErrorBoundary )) Which one is lighter, ergonomic 🙂

💯 1
geraldodev19:06:23

To be fair there is one translation from our side . The :errorElement keyword, which translate to javascript string. That's a translation from clojure to javascript. The price we pay for clojure immutable data structures. That is the steroids of $. Helix makes so that when ($ Component {:parameter value}) lands on your (defnc Component [{:keys [parameter]] . you can destructure as a clojure, using our familiar syntax. But its a js object underneath. That's why helix is very good for interacting with JS libraries. No hiccup, macros that glues the two worlds at compile time. Fast and simple (in the clojure sense of the word).

colliderwriter22:06:40

Thanks for the replies. I got it to render. The magic was in the require, which needs to be different from the one for widgets. Sorry for the wasted bandwidth.

geraldodev22:06:06

@coliderwriter Not at all my friend. We all struggle with this stuff until we learn. Fell free to ask.

import { useVirtualizer } from '@tanstack/react-virtual';
It's backwards, the trick is to know if it is exported as an object and pick then on the refer clause as you figured out. I like to sort my dependencies, this way the javascript ones goes to the top.