Fork me on GitHub
#helix
<
2021-09-08
>
yogidevbear20:09:58

Hiya 👋 We've been working on a prototype at work that uses Helix, shadow-cljs and AWS Amplify (amongst other things). I'm now looking to customise the Amplify authentication form, similar to what's being done here https://docs.amplify.aws/lib/auth/customui/q/platform/js/#customize-withauthenticator-hoc. That example is using a class that extends the Amplify SignIn class. I was wondering if Helix supported class extension for components in some way? I found some discussion from about a year ago around defclass, but I'm not sure if that culminated in something officially supported or not. Any help here would be massively appreciated thanks3

yogidevbear20:09:50

P.S. Thank you @lilactown for creating Helix. It's been great to work with so far 💯

👍 2
lilactown21:09:14

yeah helix won't help you with that right now. there's a defcomponent macro that essentially does class component extends React.Component but helix doesn't have a macro or other mechanism for extending arbitrary classes

lilactown21:09:52

if you're using shadow-cljs you can try using shadow.cljs.modern: https://clojureverse.org/t/modern-js-with-cljs-class-and-template-literals/7450

lilactown21:09:56

what an awful API though

lilactown21:09:19

the other option is you could write that component in JS and include it in your source and then use it with helix. i.e. SignIn.js

// This is my custom Sign in component
export class MySignIn extends SignIn {
  render() {
    ...
  }
}
app.cljs
(ns 
  (:require
   ["./SignIn.js" :as sign-in]
   ["aws-amplify-react" :as amplify]
   [helix.core :refer [defnc $]]))

(defnc app
  []
  ,,,)

(amplify/withAuthenticator
  app false
  ($ sign-in/MySignIn)
  ($ amplify/ConfirmSignIn)
  ($ amplify/VerifyContact)
  ($ amplify/SignUp)
  ($ amplify/ConfirmSignUp)
  ($ amplify/ForgotPassword)
  ($ amplify/RequireNewPassword))

yogidevbear22:09:46

Brilliant, thanks @lilactown 👍 I'll try that route tomorrow