<h1>Simple Component</h1>

<h1>Simple Component</h1>

import Component from "./Component.js";

const app = new Component({
  target: document.body,
});

export default app;

<script>
  let count = 1
</script>

<output>
  {count} + {count} = {count + count}
</output>

<script>
  let count = 1
</script>

<input bind:value={count} />

<button on:click={() => count-- }>Decrease</button>
<button on:click={() => count-- }>Increase</button>

<output> Count: {count} </output>

<script>
  let condition = false
</script>

<p> <input type="checkbox" bind:checked={condition} /> </p>

{#if condition}
	<p>The condition is true!</p>
{:else}
	<p>The condition is false!</p>
{/if}

<script>
  let promise = fetchSomething()
</script>

{#await promise}
	<p>Loading...</p>
{:then value}
	<p>The promise resolved with value '{value}'</p>
{:catch error}
	<p>The promise rejected with value '{error}'</p>
{/await}

<script>
  let someIterable = [1, 2, 3, 4, 5]
</script>

<ul>
  {#each someIterable as item}
	<li>{item}</li>
  {:else value}
      <li>No items found</li>
  {/each}
</ul>

<script>
  let edges = [2, 3, 4];
</script>

<h1>Cube calculations</h1>
{#each edges as edge}
  {@const square = edge * edge}
  {@const surface = 6 * square}
  {@const volume = square * edge}

  <output>
    Edge length: {edge}m,
    Total Surface: {surface}m²,
    Volume: {volume}m³
  </output>
{/each}

<script>
  import P from './P.svelte'
  
  let isBlue = false
</script>

<input type="checkbox" bind:checked={isBlue} />

<h2 style:color={isBlue ? "blue" : ""}> 
  This is blue, when isBlue is true.</h2>
<h2 class:isBlue> 
  This is blue, when isBlue is true.</h2>

<p> This is always red. </p>
<P> This is never red. </P>

<style>
  .isBlue { color: blue; }
  
  p { color: red; }
</style>

<script>
  import Header from './Header.svelte'
  import NavBar from './NavBar.svelte'
  import Form from './Form.svelte'
</script>

<div class="wrapper">
  <Header />
  <NavBar />
  <Form />
</div>

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  async function submitForm() {
    await postForm();
    dispatch("form:posted", { /* any information to share */ });
  }
</script>

<form on:submit={submitForm}>
  <!-- form content -->
</form>

<script>
  import Form from './Form.svelte';
  
  function handleSubmit(event) {
    
    /* here the shared information can be found, 
     * as Svelte events are just instances of 
     * CustomEvent */
    const { detail } = event;
    console.log({detail});
  }
</script>

<Form on:form:posted={handleSubmit} />

<dialog>
  <header><slot name="header" /></header>
  <slot />
  <footer><slot name="footer" /></footer>
</dialog>

<dialog>
  <header><slot name="header" /></header>
  <slot />
  <footer><slot name="footer" /></footer>
</dialog>

<dialog>
  <header><slot name="header" /></header>
  <slot />
  <footer><slot name="footer" /></footer>
</dialog>

<script>
  // data loaded in 
  // load functions
  export let data 
  
  // data returned from 
  // form actions
  export let form 
</script>

<h1>Route Headline</h1>

<!-- any additional markup -->

export function load () {
  // any data loading logic
  // that can run on client
  // and server
 
  return {
    // any loaded data
  }
}

export function load () {
  // any data loading logic
  // that is server-only
 
  return {
    // any loaded data
  }
}

export const actions = {
  default() {
    // default form action
  },
  
  namedAction() {
    // named form action
  }
}

<script>
  // data loaded in 
  // load functions
  export let data 
  
  // data returned from 
  // form actions
  export let form 
</script>

<h1>Route Headline</h1>

<!-- any additional markup -->

export function load () {
  // any data loading logic
  // that can run on client
  // and server
 
  return {
    // any loaded data
  }
}

export function load () {
  // any data loading logic
  // that is server-only
 
  return {
    // any loaded data
  }
}

export const actions = {
  default() {
    // default form action
  },
  
  namedAction() {
    // named form action
  }
}

<script>
  // data loaded in 
  // load functions
  export let data 
  
  // data returned from 
  // form actions
  export let form 
</script>

<h1>Route Headline</h1>

<!-- any additional markup -->

export function load () {
  // any data loading logic
  // that can run on client
  // and server
 
  return {
    // any loaded data
  }
}

export function load () {
  // any data loading logic
  // that is server-only
 
  return {
    // any loaded data
  }
}

export const actions = {
  default() {
    // default form action
  },
  
  namedAction() {
    // named form action
  }
}

<script>
  export let data
</script>

<div class="wrapper">
  <header>Headline</header>
  <main>
    <slot />
  </main>
  <footer>Footer</footer>
</div>

export function load () {
  return {
    someFlag: true
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
 
  return {
    anotherFlag: !data.someFlag
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
  const { 
    someFlag,
    anotherFlag
  } = data;
 
  return {
    // data based on someFlag
    // and anotherFlag
  }
}

export function load () {
  return {
    someFlag: true
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
 
  return {
    anotherFlag: !data.someFlag
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
  const { 
    someFlag,
    anotherFlag
  } = data;
 
  return {
    // data based on someFlag
    // and anotherFlag
  }
}

export function load () {
  return {
    someFlag: true
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
  
  return {
    anotherFlag: !data.someFlag
  }
}

export function load (event) {
  const { parent } = event
  const data = await parent();
  const { 
    someFlag,
    anotherFlag
  } = data;
 
  return {
    // data based on someFlag
    // and anotherFlag
  }
}

export function load ({ params }) {
  const post = await getPost(params.id)
 
  return {
    post
  }
}

<script>
  import { enhance } from '$app/forms';
  
  export let form;
</script>

<form method="POST" use:enhance>
  {#if !form.success}
  	An error occurred!
  {/if}
  <input type="email" name="email">
  <input type="password" name="password">
  <button>Submit</button>
</form>

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

export const actions = {
  default({ request }) {
    const formData = await request.formData();
    const success = validateCredentials(
      formData.get("email"),
      formData.get("password")
    )
    
    if(!success) {
      return fail(400, { success: false });
    }
    
    return { success: true };
  }
}

<script>
  import { enhance } from '$app/forms';
  
  export let form;
</script>

<form method="POST" use:enhance>
  {#if !form.success}
  	An error occurred!
  {/if}
  <input type="email" name="email">
  <input type="password" name="password">
  <button>Submit</button>
</form>

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

export const actions = {
  default({ request }) {
    const formData = await request.formData();
    const success = validateCredentials(
      formData.get("email"),
      formData.get("password")
    )
    
    if(!success) {
      return fail(400, { success: false });
    }
    
    return { success: true };
  }
}

<script>
  import { enhance } from '$app/forms';
  
  export let form;
</script>

<form method="POST" use:enhance>
  {#if !form.success}
  	An error occurred!
  {/if}
  <input type="email" name="email">
  <input type="password" name="password">
  <button>Submit</button>
</form>

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

export const actions = {
  default({ request }) {
    const formData = await request.formData();
    const success = validateCredentials(
      formData.get("email"),
      formData.get("password")
    )
    
    if(!success) {
      return fail(400, { success: false });
    }
    
    return { success: true };
  }
}

export function throwError() {
  throw new Error();
}

import { error } from '@sveltejs/kit';
import { throwError } from './someModule.js'

export function load() {
  if(!userIsAuthorized()) {
    
    // expected error
    error(401, {
      message: "The user is not authorized."
    });
  }
  
  
  // unexpected error
  throwError()
  
  
  return {
    // ...data
  }
}

export function handleError({error}) {
  // do error handling stuff
  
  return {
    message: "Error message",
    //... other data
  }
}

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

export function handle({event, resolve}) {
  if(event.url.pathname.startsWith("/api")
    && !userIsAuthorized()) {
    redirect(302, "/login")
  }
  return resolve(event)
}

export function handleError({error}) {
  // do error handling stuff
  
  return {
    message: "Error message",
    //... other data
  }
}

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

export function handle({event, resolve}) {
  if(event.url.pathname.startsWith("/api")
    && !userIsAuthorized()) {
    redirect(302, "/login")
  }
  return resolve(event)
}

export function handleError({error}) {
  // do error handling stuff
  
  return {
    message: "Error message",
    //... other data
  }
}

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

export function handle({event, resolve}) {
  if(event.url.pathname.startsWith("/api")
    && !userIsAuthorized()) {
    redirect(302, "/login")
  }
  return resolve(event)
}

import { z } from 'zod';

export const User = z.object({
  name: z.string(),
  age: z.number().optional(),
  dateOfBirth: z.coerce.date()
})

// passes
let user = User.parse({name: "Karl", dateOfBirth: new Date()})

// throws
let user = User.parse({name: 3537, dateOfBirth: new Date() })

// throws
let user = User.parse({name: "Marlene", dateOfBirth: "not-a-date" })

import { zfd } from 'zod-form-data';

const Credentials = zfd.formData({
  email: zfd.text(),
  password: zfd.text()
});

export const actions = {
  async login({request}) {
    const credentials = Credentials.parse(
      await request.formData()
    );
    
    const user = await loginWithCredentials(credentials);
    
    return {
      user
    }
  }
}

@Entity()
export class User {
	@PrimaryGeneratedColumn()
	id: number;

	@Column({
		type: 'varchar',
		length: 254
	})
	email: string;

	@Column({
		type: 'varchar',
		length: 100,
      
	})
	password: string;
}

const userRepository = datasource.getRepository(User);

function async addUser(email: string, password: string) {
  const user = new User();
  user.email = email;
  user.password = encrypt(password);
  await userRepository.save(user);
}

function async getUser(id: number) {
  const user = userRepository.findOne({
    where: {
      id: id
    }
  })
}

function async deleteUser(id: number) {
  await userRepository.delete(id);
}

@Entity()
export class User {
	@PrimaryGeneratedColumn()
	id: number;

	@Column({
		type: 'varchar',
		length: 254
	})
	email: string;

	@Column({
		type: 'varchar',
		length: 100,
      
	})
	password: string;
}

const userRepository = datasource.getRepository(User);

function async addUser(email: string, password: string) {
  const user = new User();
  user.email = email;
  user.password = encrypt(password);
  await userRepository.save(user);
}

function async getUser(id: number) {
  const user = userRepository.findOne({
    where: {
      id: id
    }
  })
}

function async deleteUser(id: number) {
  await userRepository.delete(id);
}

@Entity()
export class User {
	@PrimaryGeneratedColumn()
	id: number;

	@Column({
		type: 'varchar',
		length: 254
	})
	email: string;

	@Column({
		type: 'varchar',
		length: 100,
      
	})
	password: string;
}

const userRepository = datasource.getRepository(User);

function async addUser(email: string, password: string) {
  const user = new User();
  user.email = email;
  user.password = encrypt(password);
  await userRepository.save(user);
}

function async getUser(id: number) {
  const user = userRepository.findOne({
    where: {
      id: id
    }
  })
}

function async deleteUser(id: number) {
  await userRepository.delete(id);
}