svelte notes.md

Sever Side s Client Side Rendering

Server side

Client side

Svelte Notes

To Grock

https://svelte.dev/tutorial/component-bindings

https://svelte.dev/tutorial/tick

https://svelte.dev/tutorial/update

Dynamically Change CSS Classes

https://svelte.dev/tutorial/classes

Import / Export functions

Use the context="module" property to export.

GetData.svelte

<script context="module">
	


	export async function fetchData(apiEndpoint){
		const res = await fetch(apiEndpoint);
		const data = await res.json();
		return data

	}

</script>

index.svelte

import {fetchData} from './GetData.svelte';

Stores

https://svelte.dev/tutorial/writable-stores

A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes. If it's a writable store, it has set and update methods in addition to subscribe.

Passing Variables Between Components Using Props

Nested.svelte

<script>
    export let answer;
</script>

<p>The answer is {answer}</p>

App.svelte

<script>
    import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

Reactivity

<script>
	let count = 0;
	$: doubled = count * 2;
	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>
  {count} doubled is {doubled}
</p>

Notes: Reactive variables are "state listeners". They listen for state changes

HTML Each Syntax

<script>
  let cats = [
    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
    { id: 'z_AbfPXTKms', name: 'Maru' },
    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
   ];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
  {#each cats as cat}
    <li>
      {cat.name}
    </li>
   {/each}
</ul>

Event Listeners

on:mousemove

<script>
	let m = { x: 0, y: 0 };

	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<style>
	div { width: 100%; height: 100%; }
</style>

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

on:submit

<script>
	function handleClick() {
		alert('clicked')
	}
</script>

<form on:submit|preventDefault = {handleClick}>
	
	<input type="submit"/>
	
</form>

Binding variables to form inputs, range sliders and check boxes

<script>
   let name = 'world';
</script>

<input bind:value={name}>

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

Bind variable to a range slider

<script>
	let a = 1;
	let b = 2;
</script>

<label>
	<input type=number bind:value={a} min=0 max=10>
	<input type=range bind:value={a} min=0 max=10>
</label>

<label>
	<input type=number bind:value={b} min=0 max=10>
	<input type=range bind:value={b} min=0 max=10>
</label>

<p>{a} + {b} = {a + b}</p>

Binding variable to checkbox

<script>
	let yes = false;
</script>

<label>
	<input type=checkbox bind:checked={yes}>
	Yes! Send me regular email spam
</label>

{#if yes}
	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
{:else}
	<p>You must opt in to continue. If you're not paying, you're the product.</p>
{/if}

<button disabled={!yes}>
	Subscribe
</button>

Bind Text & Rendered HTML

<script>
	import marked from 'marked';
	let value = `Some words are *italic*, some are **bold**`;
</script>

<style>
	textarea { width: 100%; height: 200px; }
</style>

<textarea bind:value={value}></textarea>

{@html marked(value)}

Binding variables to dynamically change element size

Every block-level element has clientWidth, clientHeight, offsetWidth and offsetHeight bindings:

<script>
	let w;
	let h;
	let size = 42;
	let text = 'edit me';
</script>

<style>
	input { display: block; }
	div { display: inline-block; }
	span { word-break: break-all; }
</style>

<input type=range bind:value={size}>
<input bind:value={text}>

<p>size: {w}px x {h}px</p>

<div bind:clientWidth={w} bind:clientHeight={h}>
	<span style="font-size: {size}px">{text}</span>
</div>

OnMount (Using Fetch on page load)

<script>
	import { onMount } from 'svelte';

	let data = undefined;

	onMount(async () => {
		const res = await fetch(`https://api.github.com/users/wktdev`);
		data = await res.json();
		console.log(data)
	});
	
</script>