swaf/test/assets/views/home_test.svelte

<script>
    import {locals} from "../ts/stores.js";
    import HomeDep from "./home_dep.svelte";
    import Layout from "./layout.svelte";

    let count = 5;

    function handleClick() {
        count++;
    }

    let depTest;

    let mode = ($locals).name === 'locals' ? 'RENDU' : 'PRE RENDU'
</script>

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

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

<h1 id="rendertest">{mode}</h1>

<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 bind:depTest={depTest}/>

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