Amplify-js: Svelte UI Components

[andrew-belac]

Page: /start/q/integration/js

Feedback:

Would be great if svelte UI components could be added.

[sw-yx]

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

[mauerbac]

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

[jordanranz]

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.

[terrywarwar]

@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>

[sw-yx]

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

[terrywarwar]

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

[sw-yx]

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

[majortom64]

Would be great to have Svelte support.

[alexvdvalk]

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;

[sw-yx]

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

[alexvdvalk]

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"

[sw-yx]

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