Superforms with sveltekit-flash-message

+layout.server.ts

export { load } from 'sveltekit-flash-message/server';

+page.server.ts

import { superValidate } from 'sveltekit-superforms/server';
import { fail } from '@sveltejs/kit';
import { z } from 'zod';
import { redirect } from 'sveltekit-flash-message/server';

import type { Actions, PageServerLoad } from './$types';

const schema = z.object({
	name: z.string().min(1),
	email: z.string().email()
});

///// Load function /////

export const load: PageServerLoad = async () => {
	const form = await superValidate(schema);
	return { form };
};

///// Form actions /////

export const actions: Actions = {
	default: async (event) => {
		const form = await superValidate(event.request, schema);

		console.log('POST', form);

		if (!form.valid) return fail(400, { form });

		throw redirect('/', { type: 'success', message: 'Form posted successfully!' }, event);
	}
};

+page.svelte

<script lang="ts">
  import { PageData } from './$types';
  import { page } from '$app/stores';
  import { getFlash } from 'sveltekit-flash-message/client';
  import { superForm } from 'sveltekit-superforms/client';
  import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte'

  export let data : PageData;

  const { form, errors, message, constraints, enhance } = superForm(data.form);
  const flash = getFlash(page);
</script>

<SuperDebug data={$form} />

<h3>Superforms testing ground</h3>

{#if $flash}
  <div class="status"
    class:error={$flash.type == 'error'}
    class:success={$flash.type == 'success'}
  >
    {$flash.message}
  </div>
{/if}

<form method="POST" use:enhance>
  <label>
    Name<br />
    <input
      name="name"
      aria-invalid={$errors.name ? 'true' : undefined}
      bind:value={$form.name}
    />
    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
  </label>

  <label>
    Email<br />
    <input
      name="email"
      type="email"
      aria-invalid={$errors.email ? 'true' : undefined}
      bind:value={$form.email}
    />
    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
  </label>

  <button>Submit</button>
</form>

<hr>
<p><a target="_blank" href="https://superforms.rocks/api">API Reference</a></p>

<style>
  .invalid {
    color: red;
  }

  .status {
    color: white;
    padding: 4px;
    padding-left: 8px;
    border-radius: 2px;
    font-weight: 500;
  }

  .status.success {
    background-color: seagreen;
  }

  .status.error {
    background-color: #ff2a02;
  }

  input {
    background-color: #ddd;
  }

  a {
    text-decoration: underline;
  }

  hr {
    margin-top: 4rem;
  }

  form {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
</style>

app.d.ts

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		interface PageData {
			flash?: { type: 'success' | 'error'; message: string };
		}
		// interface Platform {}
	}
}

export {};