Add UI standalone package

[ayush987goyal]

1. Adding a new standalone package that wraps the React components with preact.

Facing the following issue

ReferenceError: React is not defined 

would really help to understand where this is originating from. Yet to figure out if it is Vite or is it tsup.

closes #394

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d776d85

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ayush987goyal]

Looking at the error it seems like it is coming in the standalone package itself.

var dt = class extends ie {
    constructor(t) {
        super(t);
        this._render(React.createElement(pt.Authenticator, null, ()=>React.createElement("h1", null, "Howdy")))
    }
}

Which seems to come from this code:

import { Authenticator as AuthenticatorComponent } from '@aws-amplify/ui-react';

import { BaseImperativeHandle, BaseImperativeHandleProps } from '../helpers';

export class Authenticator extends BaseImperativeHandle {
  constructor(props: BaseImperativeHandleProps) {
    super(props);

    this._render(
      <AuthenticatorComponent>{() => <h1>Howdy</h1>}</AuthenticatorComponent>
    );
  }
}

[ayush987goyal]

Update:
The above error seems to have been gone (maybe related to patch-packages?).

Facing the following issue now:

TypeError: OKt.isatty is not a function

Was also getting errors for process.env and process.argv and had to define them in vite.config.ts. Not sure if that is expected.

[ericclemmons]

I'm suspicious of what's being imported because Vite seems to be including node modules like tty. Akt.istty(1) is failing because node modules are being shimmed:

var AKt = require("tty")

[ericclemmons]

To take Vite out of the equation and knowing Next.js works, I added the example to one of our sample pages and got a different error (which is good!):

Module not found: Can't resolve './core' in '/Users/ecclemm/Projects/aws-amplify/amplify-ui/packages/standalone/dist'

--- a/examples/next/pages/ui/components/authenticator/sign-up-with-username/index.page.tsx
+++ b/examples/next/pages/ui/components/authenticator/sign-up-with-username/index.page.tsx
@@ -6,7 +6,16 @@ import '@aws-amplify/ui-react/styles.css';
 import awsExports from '@environments/auth-with-username/src/aws-exports';
 Amplify.configure(awsExports);

+import { Authenticator as StandaloneAuthenticator } from '@aws-amplify/ui-standalone';
+import { useEffect } from 'react';
+
 export default function App() {
+  useEffect(() => {
+    new StandaloneAuthenticator({
+      container: document.createElement('div'),
+    });
+  });

We know there have been issues with Vite & Amplify JS, so I was wanting to understand what the experience would be there.

• Will the standalone Authenticator include aws-amplify? Probably not, but aws-amplify would need to be bundled separately so that the Authenticator & any other standalone components can rely on window.Amplify & call window.Amplify.configure.
• Each imperative API will likely have a common container usage, .show() / .hide() method, and on* (e.g. onSignIn, onSignUp) that fires a callback.

[ayush987goyal]

Will the standalone Authenticator include aws-amplify? Probably not, but aws-amplify would need to be bundled separately so that the Authenticator & any other standalone components can rely on window.Amplify & call window.Amplify.configure.

Yes that is correct. The standalone package would take aws-amplify as a peer dependency and is expected to use in context of a bundler environment. It cannot be used without a bundler.

Each imperative API will likely have a common container usage, .show() / .hide() method, and on* (e.g. onSignIn, onSignUp) that fires a callback.

Each standalone component can extend the BaseImperativeProps interface to add appropriate callback/props to handle more functionalities as required. The basic destroy is added to base itself given that the instantiation will render the component

[ayush987goyal]

@ericclemmons How did you manage to make it work the last time? I see the only major build difference b/w this and your change was the usage of esbuild-node-builtins. I tried to even add that to the build output but can't seem to make it work regardless. Do you see any other difference?

[ericclemmons]

@ayush987goyal Yes, I was able to demo the previous implementation successfully.

Something's weird here & I can't put my finger on it... I'll take another look at it.