Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-05-05

Channels

#reagent
<
2020-05-05
>
Vishal Gautam03:05:31

So according to 1.0.0-alpha1 reagent release. We can now directly use hooks, without having to call r/as-element. Which is fantastic! However, when following this example https://github.com/reagent-project/reagent/blob/master/examples/functional-components-and-hooks/src/example/core.cljs on a shadow-cljs version 2.8.110. I get this error saying that “hooks should be used only in a functional component.“. Does any one have any idea why this is happening.

victorb06:05:53

could be that the option to create-compiler is :function-components? , not :function-components . See https://github.com/reagent-project/reagent/blob/master/CHANGELOG.md

Vishal Gautam14:05:11

@U05224H0W Hi Thomas, any thoughts on this topic?

thheller15:05:17

sorry don't use or follow reagent/react that closely anymore? looks to me like you are using the wrong option key as @UEJ5FMR6K said?

Vishal Gautam16:05:05

No I tried that and it didnt work, so I thought may be it was because of shadow-cljs compiler

thheller16:05:45

shadow-cljs is a build tool using the regular clojurescript compiler. so no that is rather unlikely.

Vishal Gautam22:05:00

Okay, I figured it out, it should have been :functional-components?

👍 4
Jakob Durstberger08:05:26

Hello, I am trying to use AWS Amplify Authentication in a re-frame app. The lib provides a higher order component withAuthenticator, I am trying to use reactify-component and adapt-react-class but unfortunately I get the following error: > Uncaught TypeError: Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function. Here is my code: 

(defn main-panel []
  [:div
   [:h1 "Hello" ]])

(def root-view
  (reagent/adapt-react-class
    (withAuthenticator
      (reagent/reactify-component main-panel))))

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (aws-config/configure)
  (re-frame/dispatch-sync [::events/initialize-db])
  (reagent/render [root-view]
                  (.getElementById js/document "app")))
Would anyone be able to help me out or point me in the right direction?

jeroenvandijk09:05:55

I was wondering if anyone knows what the configurable compiler mentioned in the project for https://www.clojuriststogether.org/projects/ would entail?

jeroenvandijk09:05:03

Could it mean for example we can use https://github.com/borkdude/sci as a compiler (environment) for Reagent?

jeroenvandijk09:05:42

(I would love that :))

jeroenvandijk15:05:03

btw @U061V0GG2 why is compiler not a good name? Because it happens at runtime? Is that a strict definition of what a compiler is? I think it can’t be an interpreter, because there is no new interpretation after the first “compile”. Compiler feels right to me? (Disclaimer: i didn’t study computer science so maybe I’m too flexible in these terms)

David Pham15:05:50

Would it be possible to mix functional and class components?

juhoteperi15:05:32

Yes. The :f> shortcut in the master makes this very easy.

juhoteperi15:05:10

Or if you make function components the default, create-class will create class component.

David Pham17:05:33

so we could mix the old and new code easily? I can't wait for this 🙂 Do you have an example?

David Pham17:05:50

Thanks a lot for maintaining the library by the way!

Daniel Craig20:05:28

Ran my first reagent + electron app today!

Vishal Gautam22:05:40

I saw that Reagent released couple of features recently, two of them being :f> which is the short cut to create functional react components from reagent component and :r> which does the opposite, without converting the props from js to clj like :> macro does. I understand what they do, but I am having hard time understanding the in what cases they might be used?