swaf/views/home.svelte

<script>
    import HomeDep from "./home_dep.svelte";
    import Layout from "./layout.svelte";

    export let locals = {};

    let count = 5;

    function handleClick() {
        count++;
    }

    let depTest;
</script>

<style lang="scss">
	p:last-of-type {
		color: blueviolet;
	}

	.style-test {
		p {
			color: blue;
		}
	}
</style>

<Layout title="Home">
    <svelte:fragment slot="body">
        <h1>BONJOUR lol</h1>
    </svelte:fragment>
</Layout>

<h1>Hello {count}!</h1>

<button on:click={handleClick}>More hellos!!</button>

<p>Direct access: {locals.direct}</p>

{#if locals.route('auth') === '/'}
    We're home!
{:else}
    We're somewhere else... {locals.route('auth')}
{/if}

<p>The route to auth is {locals.route('auth')}</p>

<p>\locals.notcode</p>

<p>{`{\\locals.escaped}`}</p>

<div class="style-test">
    <p>Blue!</p>
</div>

<HomeDep locals={locals} bind:depTest={depTest}/>

<p>Dependency test: {depTest}</p>