Add @aws-amplify/ui-standalone package #394
Conversation
|
Also,
|
| import { Authenticator } from '@aws-amplify/ui-standalone'; | ||
| import awsExports from '../../../environments/auth-with-username-no-attributes/src/aws-exports'; | ||
|
|
||
| import '@aws-amplify/ui-react/styles.css'; |
There was a problem hiding this comment.
I think this should either be:
- Style injected (even for the react package perhaps?)
- Or be re-exported from the
ui-standalonepackage. Since usage ofAuthenticatorfrom the standalone package should not involve pulling in something fromui-react
There was a problem hiding this comment.
Re-export is the way we've been going 👍
| export class Authenticator { | ||
| constructor(container: HTMLElement) { | ||
| ReactDOM.render( | ||
| <AuthenticatorComponent>{() => <h1>Howdy</h1>}</AuthenticatorComponent>, | ||
| container | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
This is a great start! I am planning to make it more generic post this change gets merged.
There was a problem hiding this comment.
I'm curious what the behavior should be render props for an imperative wrapper 🤔
Maybe:
new Authenticator(container).show().then(({ session, signOut, user }) => {
alert(`Howdy ${user.username}`)
});Honestly, the "Vanilla Authenticator" example is a bit contrived – I don't have much customer data on what the use-cases are for this specifically.
There was a problem hiding this comment.
I think that's pretty much the correct analogy. Treating the return value from the imperative wrapper as a ref and acting accordingly would perhaps be the right usage.
|
As per our discussion, we could limit the scope of this package to say that it would only work with bundlers as described in the below doc too. |
|
Closed in favor of #712 |
Sync amplify-ui to amplify-ui-staging
Description of changes:
This was an attempt to use the
Authenticatorin a Vanilla JS context withaws-amplify, but this is blocked by aws-amplify/amplify-js#9639.@aws-amplify/ui-standalone@preact/compatin place ofreactandreact-domimport * as React from 'react';– this is required for aliasing to Preact to work!qrcodefor React to something that's browser-friendlyautoprefixerbecause it's not browser-friendlyBy submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.