event.locals - stores data available during the lifcycle of a request Web Dev

Routes

+layout.svelte - each page in the dir uses this ui +layout.server.ts - loads data for each root

$lib - code in src/lib. This is meant for code shared by multiple routes

import { message } from '$lib/message.js'

You can use a param [slug] as a route. Then, this route will exist for any input

Hooks

ext: Hooks
Hooks intercept the behavior of roots
Ex. the handle function. It receives an event object and a resolve function, then returns a response object
event.locals - an artbritrary object you can pass between your hooks and the routes
You can modify the html using transformPageChunk

// hooks.server.ts
event.locals.something = "whatever I want"

// +page.server.ts
export const load: PageServerLoad = async({ locals }) => {
    console.log(locals.something)
}

Forms

+page.svelte

<form method="POST" action="?/create=">
  <label>
    add a todo:
    <input
      name="description"
      autocomplete="off"
      required <!-- mark it as required -->
      />
  </label>
</form>

in +page.server.ts. The data sent by the form gets passed through the actions

export const actions = {
  // Named action - we name it create and it matches up with the "?/create" form
  create: async ({ cookies, request }) => { // unpacking the cookies and request from a RequestEvent object
    const data = await request.formData();
    db.createTodo(cookies.get("userid"), data.get("description"));
  },
};

Validation

{#if form?.error}
  <p class="error">{form.error}</p>
{/if}

import { fail } from '@sveltejs/kit';

export const actions = {
  create: async ({ cookies, request }) => {
    const data = await request.formData();

    try {
      db.createTodo(cookies.get("userid"), data.get("description"));
    } catch (error) {
      return fail(422, {
        description: data.get("description"),
        error: error.message,
      });
    }
  },
};

use:enhance

Add to a form for browser-native behavior

This will update the DOM instead of reloading it

SEO

svelte:head

Stores

<script>
  import { page } from '$app/stores';
</script>

provides page.url, params, route, status, error, data (combines the return of all load functions), form

Auth Protocol

ext: Huntabyte Vide

This sets a cookie

in hooks.server.ts

We have an authenticateUser function that returns the user's auth level and sets it in event.locals
Then in the page's load function, it redirects users if not auth

if (!locals.user) {
    throw redirect(303, "/")
}

or: better way

// hooks.server.ts
export const handle: Handle = async ({ event, resolve}) => {
    event.locals.user = authenticateUser(event)
    if (event.url.pathname.startsWith('/protected')) {
        if (!event.locals.user) {
            throw redirect(303, "/");
        }
    }
}

SSG and Client-Side

<script>
  export const prerender = true // render at build time
  export const ssr = false //client rendering
</script>

SvelteKit