SVELTE APP

+page.svelte

<script>
// @ts-nocheck

    let isLogged = $state(false);
    let userName = $state('');

    function handleSubmit(event) {
        event.preventDefault(); // Impede o envio tradicional

        // 1. Crie o objeto FormData a partir do elemento <form>
        const formElement = event.target;
        const data = new FormData(formElement);
        
        // 2. Converta tudo para um objeto JS para fácil manipulação
        const formObject = Object.fromEntries(data.entries());

        const newUserName = formObject['userName']

        if (!newUserName.trim()) {
            alert("Você precisa colocar um nome de usuário válido");
            return false;
        }

        userName = newUserName;
        isLogged = true;
    }

    function deslogar() {
        userName = null;
        isLogged = false;
    }
</script>


{#if isLogged}

<div id="loggedPanel">
    <h1>Você está logado</h1>
    <h2>Bem-vindo, <b style="color: blueviolet">{userName}</b></h2>
    <br/>
    <button onclick={deslogar}>SAIR</button>
</div>

{:else}

<div id="loginPanel">
    <h1>LOGIN</h1>

    <form onsubmit={handleSubmit}>
        <input name="userName" type="text"/><br/>
        <button>LOGAR</button>
    </form>
</div>

{/if}

<style>
    #loginPanel, #loggedPanel {
        border: 1px solid grey;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    button {
        margin-top: 8px;
        border-radius: 8px;
        background-color: darkblue;
        color:aquamarine;
        padding: 8px 20px;
        font-size: medium;
        border: 0;
    }
</style>

README.md

See in action: https://filipeteixeira.com.br/sveltest

---

to init app:

npx sv create nome-do-meu-app

to run app:

cd nome-do-meu-app

npm install @sveltejs/adapter-static

npm run dev

to build app:

npm run build

svelte.config.js

// svelte.config.js
import adapter from '@sveltejs/adapter-static'; 

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            // Onde os arquivos estáticos compilados serão colocados
            pages: 'build',
            assets: 'build',
            fallback: 'index.html', // Útil para SPA fallback
        }),

        // Certifique-se de que o SvelteKit sabe que pode gerar estaticamente tudo:
        prerender: {
            entries: ['*'] // Tenta pré-renderizar todas as rotas
        },

		paths: {
			base: "/sveltest",
			relative: true,
		}
    }
};

export default config;