Fork me on GitHub
#helix
<
2020-06-09
>
Aleed00:06:17

yeah, initially I was using helix.core/$ in the emitter

Aleed00:06:23

but ran into issues doing that with Hiccup, since both macros were trying to compile the component’s children. so started directly using Helixs prop impl inside a parser instead (that’s why the demo does it like that too)

Aleed00:06:57

created an issue for this (https://github.com/alidlo/rewrap/issues/1) still have to figure out how to best mix the two since there’s some overlap

lilactown00:06:01

I wonder how simple it would be to do it just for helix

Aleed00:06:52

it’s not hard to do, just two macros, hard part is making it extensible

👍 4
Aleed00:06:52

i kinda wish Helix separated it’s hooks/dev optimizations from its interop/compilation since the former can be used with any React wrapper, whereas latter is more opinionated

Aleed00:06:43

right now, for example, I’m writing a UI library. its written in Typescript, considering writing it in Clojurescript but then I’d have to choose a React wrapper making it less useful

Aron03:06:43

making what less useful?

lilactown00:06:29

I would take a PR for a helper macro like that specific to helix. Riffing on what you have there:

(defmacro generate-native-macros
  [sym->impl]
  `(do
     ~@(for [[sym impl] sym->impl]
         `(defmacro ~sym [& args#]
            (helix/$ (with-meta ~impl {:native true}) ~@args#)))

lilactown00:06:52

is there anything specific about helix that is stopping you from using it to build a UI library?

Aleed00:06:47

to what extend would it make sense using all of Helix with Fulcro or Reagent?

Aleed00:06:56

opting for js just bc it by default has less code/opinions, not sure if there’s way around that

lilactown00:06:44

well, in my head, helix is so minimal and opinion-less that it’s just the same as writing in JS and using it with Fulcro or Reagent 😛

lilactown00:06:53

but I am probably biased, so I’m curious if there’s some specific choices that helix makes for you that make it feel like it impedes use w/ Fulcro/Reagent/Rum/etc.

lilactown00:06:42

I would also accept code size as a reasonable argument, I think that helix should be less code, for all that it does… not sure exactly how to accomplish that yet

lilactown00:06:21

but curious if there are other problem points

Aleed00:06:21

code size and extensibility are my two arguments. e.g. above you baked in helix.core/$ as emitter macro when my whole goal was to make it custom 😜

Aleed00:06:21

it can be error prone to mix different react wrappers, e.g. mixing helix and hicada I ran into uses since they both compile props and children a certain way. so that’s why with rewrap wanted to make those things extensible

lilactown00:06:19

hmm. I guess my expectation is that you would expose them as react components, same as what you would get with writing them in TS

lilactown00:06:26

so e.g. if you had a component:

(defnc my-component
  [{:keys [foo bar]}]
  ,,,)
then some reagent app would use it like:
(defn app []
  [:> ui-lib/my-component
   {:foo "foo" :bar "bar"}
   ,,,])

lilactown00:06:02

rum, fulcro I assume have similar syntax for handling external React components

Aleed00:06:46

yea, i guess in that case it’d just a small code overhead, which I guess shouldn’t matter relative to entire cljs bundle we’re bringing in but psychologically it does 😅

lilactown00:06:18

FWIW at my previous job that’s exactly what we did: wrote our UI library components in JS/TS and then used them in our reagent app

lilactown00:06:31

it worked okay

Aleed00:06:07

yea, tbh, I just wonder what cool things I could do writing it primarily for cljs

Aleed00:06:38

plus have to consider optimizations in two languages versus one

Aleed00:06:58

and TS.. i used to love it before cljs lol

lilactown00:06:08

I still kinda like TS

lilactown00:06:21

I wrote my latest big idea in TS

lilactown00:06:33

trying to use it in a new CLJS lib is troublesome tho

Aleed00:06:10

i like it in general too, but in complex project TS error message become indecipherable

lilactown00:06:15

I hope CLJS implements support for goog.module sooner rather than later

lilactown00:06:28

then you could use TS code in CLJS super super easily via tsickle

Aleed00:06:21

yea, mixing between them more easily would be great; thanks for link

fabrao00:06:07

is that possible using helix with electron?

Aron03:06:33

I need zero TS

dominicm10:06:10

I know this is easier said than done, I'd really appreciate some docstrings on helix.hooks functions/macros. I could contribute some of them, but use-callback is eluding me.

Aron10:06:24

@dominicm personally, I never saw the point of that hook

Aron10:06:45

you need it for performance reasons?

dominicm10:06:18

Gotta keep my re-renders down, yep

Aron10:06:16

could you be a bit more specific please about what is elusive about use-callback

dominicm11:06:44

I just didn't understand the arguments, I assumed it would be like use-effect, it seems like it's more like react/useCallback

dominicm11:06:06

Use effect takes a body, but use-callback takes a fn-body, but in the arglist it's called a body too 🤕

Aron11:06:56

I see, probably simple mistake of docs

Aron11:06:02

arglists* sry

dominicm11:06:14

docs could explain body must resolve to fn in this case.

Aron11:06:41

useCallback(fn) in react is useMemo(() =>fn), so I always used useMemo because I find useCallback confusing

Aron11:06:41

I am fairly sure helix relies a bit on the react docs

fabrao14:06:47

I have problems to understand react hooks too, and I only used use-state and use-effect until now 🙂

Aron14:06:40

all hooks are basically use-state

dominicm14:06:55

> I am fairly sure helix relies a bit on the react docs This is unrelated. I understand useCallback. I didn't understand what to pass to use-callback without reading the source. Same for use-effect, which implicitly adds a fn (unlike useEffect).

Aron14:06:38

I haven't tried, can you tell me if the answer to "what to pass to use-callback" is the same as with plain react?

dominicm14:06:35

Not quite. There's other parameters which are valid with use-callback

Eliraz14:06:33

just make sure you use those hooks correctly, over-using them will cause performance issues.

dominicm14:06:37

use-callback is pretty safe afair.

dominicm14:06:06

It's not going to consume more memory than a single callback, and re-rendering twice is relatively expensive in comparison.

Aron14:06:52

I never worried about re-render times, paint costs way more and that is optimized by default if I use identical props to components

dominicm14:06:16

that's what use-callback reduces too. I'm not certain, but the DOM will need updating if the callback function changes regularly.

dominicm14:06:28

I've had it cause reagent applications to grind to a halt.

dominicm14:06:37

Particularly with small animations.

lilactown15:06:13

PRs welcome!

lilactown15:06:36

honestly I regret the fancy thing I did with use-effect where it automatically wraps the body in a function

Aleed15:06:37

if that cb function itself never accepts arguments seems like a good choice to just accept its body is it just bc it differs from React?

lilactown15:06:31

yeah, it differs from react and prevents certain patterns like using higher-order functions

lilactown15:06:42

it’s too clever

dominicm15:06:51

Makes sense.

dominicm15:06:55

helix.hooks2

☝️ 8
dominicm15:06:54

@lilactown Cool, if I get time this afternoon will spend some time on it

lilactown15:06:34

thanks! I bet it will help many others as well

lilactown15:06:11

like legit tho I want to create a helix.hooks2 probably once I’m done with the defhook machinery

lilactown15:06:14

my goal for defhook is that you can add custom hooks that support for automatically filling in a deps vector and linting for unspecified deps

lilactown15:06:50

once that’s done I can create a new hooks namespace without all the macro code in helix.hooks

dominicm15:06:38

auto-filling the deps vector is <3, as long as you can turn it off (sometimes I want to ignore a value)

lilactown15:06:54

yep, it would work just like it does for use-effect / use-memo / etc. today, just for custom hooks

lilactown15:06:48

(use-custom-hook
 :auto-deps ;; auto fill
 #(foo bar))

(use-custom-hook
 [foo] ;; ignore bar
 #(foo bar))

dominicm15:06:34

I see, very nice

y.khmelevskii18:06:32

Hi everybody. Just wanted to let you guys know that I created wrapper for emotion.js (styled component) https://github.com/khmelevskii/emotion-cljs It should be very useful to resolve problem working with css in cljs. This wrapper works good with helix.

👏 3
fabrao18:06:33

I´m using cljss.core

fabrao18:06:12

But I´ll try to use this one

y.khmelevskii20:06:52

yeah, and please let me know your feedback 🙂

lilactown19:06:39

nice @y.khmelevskii! this looks really similar to what we built at work but fuller featured 😄

y.khmelevskii20:06:34

yeah, we use it in our project and I decided that it’s not a lot of work to open source it. Happy to share it!

Aron20:06:07

The other day I was so confident that it's easy to use render props, today I wasted more than 4 hours already on trying to use material autocomplete, and all I get is m.call is not a function. Not fun.

fabrao21:06:14

@y.khmelevskii how do you use with cljs?

fabrao21:06:36

if I have a lib like antd , and it has its Button how do you use with this?

(defstyled Button :button
  {:display :flex
   :color :red})

fabrao21:06:30

($ antd/Button {:className (Button)})?

y.khmelevskii21:06:27

hey @fabrao. If antd/button is react component you can do the following:

(defstyled Button antd/Button
  {:display :flex
   :color :red})

($ Button)

fabrao21:06:57

Oh, if I can only use Button instead of antd/Button I can call Button as MyButton , right? Thank you

lilactown21:06:59

one thing I like about what we use at work is we add the namespace to the generated class name

lilactown21:06:03

makes debugging styles way easier

lilactown21:06:02

so it ends up being css-123asdf-app_some-feature_foo

lilactown21:06:43

where evertying after css-123asdf is the namespace + var

fabrao23:06:58

hello all, what is the minimum package.json configuration for helix?

fabrao23:06:51

is this

{
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "npx shadow-cljs watch app"
  },
  "devDependencies": {
    "shadow-cljs": "2.10.5"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-refresh": "^0.8.1",
  }
}
enougth?

lilactown23:06:39

yep should be good