Svelte学習帳

<script>
  const name = "Svelte";
</script>

<h1>Hello {name.toUpperCase()}!</h1>

<script>
  const src = './image.gif';
  const alt = 'alt text';
</script>

<img {src} {alt} />
<!-- <img src={src} alt={alt} /> と書かなくて良い -->

<p>This is a sub component.</p>
<style>
p {
  color: red;
}
</style>

<script>
	import Sub from './Sub.svelte';
</script>
<p>This is a main component.</p>
<Sub />
<style>
p {
  color: blue;
}
</style>

<script>
	let count = $state(0);

	function increment() {
		count ++;
	}
</script>

<button onclick={increment}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<script>
	let count = $state(0);
</script>

<button onclick={(()=>count++)}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

<script>
	let numbers = $state([1, 2, 3, 4]);
	function addNumber() {
		numbers.push(numbers.length + 1);
	}
</script>

<p>{numbers.join(' + ')} = {numbers.reduce((t, n) => t + n, 0)}</p>

<button onclick={addNumber}>
	Add a number
</button>

 <script>
     let numbers = $state([1, 2, 3, 4]);
+    let total = $derived(numbers.reduce((t, n) => t + n, 0));
     function addNumber() {
         numbers.push(numbers.length + 1);
     }
 </script>

-<p>{numbers.join(' + ')} = {numbers.reduce((t, n) => t + n, 0)}</p>
+<p>{numbers.join(' + ')} = {total}</p>

 <button onclick={addNumber}>
     Add a number
 </button>

<script>
	let elapsed = $state(0);
	let interval = $state(1000);

	$effect(() => {
		const id = setInterval(() => {
			elapsed += 1;
		}, interval);

        // これがないと古いsetIntervalが動き続ける
		return () => {
			clearInterval(id);
		};
	});
</script>

<button onclick={() => interval /= 2}>speed up</button>
<button onclick={() => interval *= 2}>slow down</button>

<p>elapsed: {elapsed}</p>
<p>interval: {interval}</p>

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

<Nested text={"number"} answer={42} />
<Nested text={"default"} />

<script>
	let { text, answer = "OK" } = $props();
</script>

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

The number is 42
The default is OK

<script>
	import Nested from './Nested.svelte';
	const attrs = { name: 'foo', anser: 'bar' };
</script>

<Nested {...attrs} />

<script>
	let count = $state(0);
</script>

<button onclick={count++}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

{#if count > 5}
	<p>{count} is greater than 5</p>
{:else if count < 2}
	<p>{count} is less than 2</p>
{:else}
	<p>{count} is between 2 and 5</p>
{/if}

<script>
	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
</script>

{#each colors as color, i}
	<div style="background: {color}">{i+1} {color}</div>
{/each}

{#each things as thing (thing.id)}
	<Thing name={thing.name} />
{/each}

<script>
	import { roll } from './utils.js';
	let promise = $state(roll());
</script>

<button onclick={() => promise = roll()}>
	roll the dice
</button>

{#await promise}
	<p>...rolling</p>
{:then number}
	<p>you rolled a {number}!</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

{#await promise then number}
	<p>you rolled a {number}!</p>
{/await}

<script>
	let b = $state(false);
	function onclick(event) {
		b = true;
	}
</script>

<button {onclick}>
	{b ? "clicked" : "click me"}
</button>

<script>
	let b = $state(false);
</script>

<button onclick={(event) => {
		b = true;
	}}>
	{b ? "clicked" : "click me"}
</button>

<div onclick={() => alert(`div clicked`)} role="presentation">
	<button onclick={() => alert(`button clicked`)}>
		click me
	</button>
</div>

<div onclickcapture={() => alert(`div clicked`)} role="presentation">
	<button onclickcapture={() => alert(`button clicked`)}>
		click me
	</button>
</div>

<script>
	import Stepper from './Stepper.svelte';
	let value = $state(0);
</script>

<p>The current value is {value}</p>

<Stepper increment={()=>value++} decrement={()=>value--} />

<script>
	let {increment, decrement} = $props();
</script>

<button onclick={decrement}>-1</button>
<button onclick={increment}>+1</button>

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

	function hook() {
		alert("clicked");
	}
</script>

<MyButton onclick={hook} />

<script>
	let props = $props();
</script>

<button {...props}>Push me</button>

<button {...$props()}>Push me</button>
<!-- `$props()` can only be used at the top level of components as a variable declaration initializer -->

<script>
	let name = $state('world');
</script>

<input value={name} />

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

 <script>
	let name = $state('world');
+	function oninput(event) {
+		name = event.target.value;
+	}
 </script>

-<input value={name} />
+<input value={name} {oninput} />

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

 <script>
	let name = $state('world');
 </script>

-<input value={name} />
+<input bind:value={name} />

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

<div class="{flex ? 'flex' : ''}">flex or not</div>
<div class:flex={flex}>flex or not</div>
<div class:flex>flex or not</div>

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

<Box --color="red" />

<div class="box">box</div>

<style>
	.box {
		background-color: var(--color, #ddd);
	}
</style>

<script>
	import tippy from 'tippy.js';
	let content = $state('Hello!');
	function tooltip(node, fn) {
		$effect(() => {
			const tooltip = tippy(node, fn());
			return tooltip.destroy;
		});
	}
</script>

<input bind:value={content} />
<button use:tooltip={() => ({content})}>Hover me</button>

<style>
/* 略 */
</style>

<script>
	import { fade } from 'svelte/transition';
	let visible = $state(true);
</script>

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

{#if visible}
	<p transition:fade>Fades in and out</p>
{/if}

import { elasticOut } from 'svelte/easing';
function spin(node, { delay = 0, duration = 5000 }) {
	return {
		delay,
		duration,
		css: (t, u) => {
			// t = 0 → 1, u = 1 - t
			const eased = elasticOut(t);
			return `
			  transform: scale(${eased}) rotate(${eased * 1080}deg);
			`
		}
	};
}

// 簡易版
function typewriter(node, { speed = 1 }) {
	const text = node.textContent;

	return {
		duration: text.length / (speed * 0.01),
		tick: (t) => {
			const i = Math.trunc(text.length * t);
			node.textContent = text.slice(0, i);
		}
	};
}

onintrostart={onIntroStartFn}
onoutrostart={onOutroStartFn}
onintroend={onIntroEndFn}
onoutroend={onOutroEndFn}

{#each items.slice(0, len) as item}
	<div transition:slide|global>{item}</div>
{/each}
# svelte3では `|local` という記法だったので古いバージョンを触る場合は注意

{#snippet greet()}
<div>Hello, world!</div>
{/snippet}

{@render greet()}
{@render greet()}

{#snippet greet(name)}
<div>Hello, {name}!</div>
{/snippet}

{@render greet("Alice")}
{@render greet("Bob")}

<script>
    import { Sub } from "./Sub.svelte";
</script>
{#snippet greet(name)}
<div>Hello, {name}!</div>
{/snippet}
<Sub {greet} />

<script>
    const { greet } = $props();
</script>
{@render greet("Alice")}
{@render greet("Bob")}

<script>
    import { Sub } from "./Sub.svelte";
</script>
<Sub>
    {#snippet greet(name)}
    <div>Hello, {name}!</div>
    {/snippet}
</Sub>

<script>
    import { Sub } from "./Sub.svelte";
</script>
<Sub>
    <div>Hello, world!</div>
</Sub>

<script>
    const { children } = $props();
</script>
{@render children()}

import { getContext, setContext } from 'svelte';
setContext(key, value);
getContext(key).value;

-<svelte:component this={item.condition ? Y : Z} />
+{@const Component = item.condition ? Y : Z}
+<Component />

<script>
	let condition = $state(false);
	const Component = $derived(condition ? Y : Z);
</script>

<Component />

project
├ src
│ ├ app.html
│ └ routes
│   └ +page.svelte
├ static
│ └ shared.css
└ package.json

<script>
	let { children } = $props();
</script>

<nav>
	navigation here
</nav>

<!-- pages are deployed here -->
{@render children()}

import { error } from '@sveltejs/kit'

const posts = someAPI();

export function load({ params }) {
	const post = posts.find(({ slug }) => slug === params.slug);
	return post ? { post } : error(404);
}

<script>
	let { data } = $props();
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

export function load({ setHeaders }) {
	setHeaders({
		'Content-Type': 'text/plain'
	});
}

export function load({ cookies }) {
	const visited = cookies.get('visited');
	cookies.set('visited', 'true', { path: '/' });

	return {
		visited: visited === 'true'
	};
}

project
├ src
│ ├ app.html
│ ├ lib
│ │ └ shared.js
│ └ routes
│   ├ a
│   │ └ deeply
│   │   └ nested
│   │     └ route
│   │       └ +page.svelte // ←ここからshared.jsを指すのが大変
│   └ +page.svelte
├ static
│ └ shared.css
└ package.json

import { sharedFunc } from '$lib/shared.js';

export function load({ cookies }) {
	// load
}

export const actions = {
	create: async ({ cookies, request }) => {
		// create record
	},
	delete: async ({ cookies, request }) => {
		// delete record
	}
};
// actionsが一つしかない場合は`default`という名前も使える

<form method="POST" action="?/create">
    <label>
        add a record:
        <input name="title" autocomplete="off" />
    </label>
</form>

import { fail } from '@sveltejs/kit';
export const actions = {
	createRecord: async ({ cookies, request }) => {
		if (condition) {
			return { message: "Complete"}
		} else {
			return fail(422, { error: "Unprocessable Content"})
		}
	}
};

<script>
	let { form } = $props();
</script>

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

<script>
	import { enhance } from '$app/forms';
	import { fly, slide } from 'svelte/transition';
</script>

<form method="POST" action="?/create" use:enhance>
	...
</form>

<form method="POST" action="?/create" use:enhance={() => {
	creating = true;
	return async ({ update }) => {
		await update();
		creating = false;
	};
}}>
	...
</form>

export function GET() {
	const message = "hello API";
	return new Response(message, {
		headers: { 'Content-type': 'application/json' }
	});
}

+import { json } from '@sveltejs/kit';
 export function GET() {
 	const message = "hello API";
-	return new Response(message, {
-		headers: { 'Content-type': 'application/json' }
-	});
+	return json(message);
 }

export function GET() {
	return new Response(...);
}
export function POST() {
	return new Response(...);
}
export function PUT() {
	return new Response(...);
}
export function DELETE() {
	return new Response(...);
}

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

<nav>
	<a href="/" aria-current={$page.url.pathname === '/'}>home</a>
	<a href="/about" aria-current={$page.url.pathname === '/about'}>about</a>
</nav>

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

export function load() {
	error(420, 'Enhance your calm');
}

export function load() {
	throw new Error('Waaaaa!');
}

import { redirect } from '@sveltejs/kit';
export function load() {
	redirect(307, path);
}

export async function handle({ event, resolve }) {
	return await resolve(event);
}

export async function handle({ event, resolve }) {
	if (event.url.pathname === '/ping') {
		return new Response('pong');
	}
	return await resolve(event, {
		transformPageChunk:({ html })=>html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

export async function handle({ event, resolve }) {
	event.locals.answer = 42;
	return await resolve(event);
}

export function load(event) {
	return {
		message: `the answer is ${event.locals.answer}`
	};
}

<script>
	let { data } = $props();
</script>

<h1>{data.message}</h1>

// ここではeventは使われていない
export async function handleFetch({ event, request, fetch }) {
	return await fetch(request);
}

export async function handleFetch({ event, request, fetch }) {
	const url = new URL(request.url);
	if (url.pathname === '/a') {
		return await fetch('/b')
	}
	return await fetch(request);
}

export function handleError({ event, error }) {
	console.error(error.stack);
	return {
		message: 'handleError',
		code: '999'
	};
}

<script>
	import { page } from '$app/stores';
</script>
<h1>Error {$page.status}</h1>
<div>{$page.error.message}</div>
<div>{$page.error.code}</div>

export const ssr = false;

export const trailingSlash = 'always';

<a href="dst" data-sveltekit-preload-data>link_to</a>

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

export function match(value) {
	return /^[0-9a-fA-F]{6}$/.test(value);
}

project
├ src
│ ├ app.html
│ └ routes
│   ├ about
│   │ └ +page.svelte
│   ├ account
│   │ └ +page.svelte
│   ├ app
│   │ └ +page.svelte
│   ├ +layout.svelte
│   └ +page.svelte
├ static
│ └ shared.css
└ package.json

project
├ src
│ ├ app.html
│ └ routes
│   ├ about
│   │ └ +page.svelte
│   ├ (authed)
│   │ ├ account
│   │ │ └ +page.svelte
│   │ ├ app
│   │ │ └ +page.svelte
│   │ ├ +layout.svelte
│   │ └ +layout.server.js
│   ├ +layout.svelte
│   └ +page.svelte
├ static
│ └ shared.css
└ package.json

export async function load() {
	return {
		message: 'this data came from the server-load-function',
	};
}

export async function load({ data }) {
	return {
		message: data.message + ' and the universal-load-function',
	};
}

<script>
	let { data } = $props();
</script>

<div>{data.message}</div>

export async function load() {
	return { a: 1 };
}

export async function load({ parent }) {
	const { a }= await parent()
	return { b: a + 1 };
}

export async function load({ parent }) {
	const { a, b } = await parent();
	return { c: a + b };
}