Svelte UI Components about amplify-ui HOT 13 CLOSED

The new UI components in @aws-amplify/ui-components are web components which are supported in svelte. @sw-yx and I can collaborate on adding some documentation and example for this use case.

from amplify-ui.

am interested to see official components someday too but in the meantime happy to collaborate if you want to work on a third party open source library for them

from amplify-ui.

Would be great to have Svelte support.

from amplify-ui.

This looks like a feature request for the JavaScript lib. Will move.

from amplify-ui.

@sw-yx @jordanranz Can you provide an example, I can't get it to show

<script>
	export let name;

	import '@aws-amplify/ui-components';

	import {Amplify} from 'aws-amplify';
	import awsmobile from './aws-exports';

	Amplify.configure(awsmobile);
	
</script>

<main>
	<amplify-authenticator>
		<amplify-sign-up header-text="My Custom Sign In Header" slot="sign-up" />
		<div>
			<h1>Hello {name}!</h1>
			<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
		  <amplify-sign-out></amplify-sign-out>
		</div>
	  </amplify-authenticator>
	
</main>

from amplify-ui.

https://www.swyx.io/writing/svelte-auth/

from amplify-ui.

Thanks @sw-yx , however I can't see where that uses ui-components

from amplify-ui.

it doesn't, sorry about that, i misread you

from amplify-ui.

This is breaking because of an incompatibility between Rollup and aws-amplify. I got this working based off this webpack based template: https://github.com/baileyherbert/svelte-webpack-starter

Here is an example of my main.ts file that imports and registers the html elements:

import App from "./App.svelte";
import {
  applyPolyfills,
  defineCustomElements,
} from "@aws-amplify/ui-components/loader";
import Amplify, { Auth } from "aws-amplify";
import { awsconfig } from "./aws-exports";
Amplify.configure(awsconfig);
// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements(window).then((res) => {
    console.log("res", res);
  });
});

const app = new App({
  target: document.body,
});

export default app;

from amplify-ui.

i jotted down some notes for Amplify + Rollup btw. https://dev.to/swyx/making-aws-amplify-work-with-rollup-2d9m lmk if works for you, i confess i didnt extensively test this but it worked well enough for me

from amplify-ui.

Thanks for posting that. I referenced it already when trying to get this to work with Rollup, but kept getting the error: "UMD and IIFE output formats are not supported for code-splitting builds"

from amplify-ui.

then maybe change the format to cjs https://github.com/sveltejs/template/blob/master/rollup.config.js#L34

from amplify-ui.

The new UI components in @aws-amplify/ui-components are web components which are supported in svelte. @sw-yx and I can collaborate on adding some documentation and example for this use case.

How can I customize the Auth.signUp call using the web components?

(For example, I want to create the username for the user and sign up with that. The user will fill the email, which will be an alias.)

from amplify-ui.